Features

• link-with-icon: added icon-placement property (#4117)
• masthead: add custom events to megamenu (#4169)
• masthead: add custom profile login url (#4155)
• pictogram-item: web-component created (#4110)
• masthead: create overflow navigation (#4119)
• callout-data: web component created (#4070)
• imagewithcaption: introducing image with caption (#4065)
• table-of-contents: introduction (#4085)
• Masthead: add support for megamenu in masthead l1 (#4099)
• quote: web-component created (#4047)
• MastheadL1: graduate masthead L1 from experimental (#4071)
• footer: graduating language selector to production ready (#4069)
• corsproxy: removal of CORS_PROXY (#4040)
• videoplayer: add closed captions (#4036)
• **featurecardblockmedium) introducing feature-card-block-medium (#4022)
• button-group: web component created (#3995)
• card-group: add border to touching cards (#4018)
• MegaMenu: layout iteration in breakpoint between 800 - 1055px (#4021)
• CardGroup: new web component (#3963)
• callout: web-component created (#3983)
• promo-banner: introducing new pattern (behind feature flag) (#3944)

Fixes

• feature-card-block-large: changed hover background color (#4202)
• masthead: search options visible (#4205)
• megamenu: fixed mega menu link height (#4184)
• masthead: fix menu (#4180)
• masthead: update platform name responsive css (#4165)
• feature-card-block-large: focus outline now wraps around card properly (#4139)
• masthead: fix L1 breakpoint styles (#4135)
• link-with-icon: fixed left icon placement w/options (#4095)
• video: changing video id across packages (#4121)
• feature-card-block-large: repositioned arrow to bottom right (#4066)
• link-with-icon: removed keyboard focus on disable (#4082)
• button-group: fixed icon padding (#4077)
• css: update hidden styles for locale countries (#4075)
• masthead: fix breakpoint (#4046)
• LeadSpace: simplify leadspace styles and remove BEM concatenation for web component creation (#4068)
• styles: locale modal accessibility styles (#4035)
• leadspace: buttons now display properly at 672px breakpoint (#4025)
• components: disable delegatesFocus in Safari (#4042)
• styles: adjusting carbon-components-react to dev dependency (#4041)
• footer: fixing the default footer type definition (#4017)
• content-block: border not displaying properly (#3992)
• locale-modal: add missing text for unvailable locale (#3998)
• Masthead: nav dropdowns should allow body scroll (#4002)
• left-nav: change element order (#3996)
• masthead-search: define placeholder (#3997)
• FeatureCardBlockLarge: missing imports (#3994)
• masthead-container: profile menu items from translate API (#3955)
• masthead: cope with missing MediaQueryList.addEventListener (#3936)
• masthead-search: activate/deactivate on focus/blur (#3933)
• masthead-search: no redirect on empty value (#3932)
• masthead-search: no redirect when search input empty (#3939)
• locale-modal: reset upon close (#3935)

Features

• corsproxy: removal of CORS_PROXY (#4040)
• videoplayer: add closed captions (#4036)
• **featurecardblockmedium) introducing feature-card-block-medium (#4022)
• button-group: web component created (#3995)
• card-group: add border to touching cards (#4018)
• MegaMenu: layout iteration in breakpoint between 800 - 1055px (#4021)
• CardGroup: new web component (#3963)
• callout: web-component created (#3983)
• promo-banner: introducing new pattern (behind feature flag) (#3944)
• link-list: test added (#3924)

Fixes

• styles: locale modal accessibility styles (#4035)
• leadspace: buttons now display properly at 672px breakpoint (#4025)
• components: disable delegatesFocus in Safari (#4042)
• styles: adjusting carbon-components-react to dev dependency (#4041)
• footer: fixing the default footer type definition (#4017)
• content-block: border not displaying properly (#3992)
• locale-modal: add missing text for unvailable locale (#3998)
• Masthead: nav dropdowns should allow body scroll (#4002)
• left-nav: change element order (#3996)
• masthead-search: define placeholder (#3997)
• FeatureCardBlockLarge: missing imports (#3994)
• masthead-container: profile menu items from translate API (#3955)
• masthead: cope with missing MediaQueryList.addEventListener (#3936)
• left-nav: set the list of nav items (#3956)
• masthead: remove hide L0 logic (#3960)
• masthead-search: activate/deactivate on focus/blur (#3933)
• masthead-search: no redirect on empty value (#3932)
• masthead-search: no redirect when search input empty (#3939)
• locale-modal: reset upon close (#3935)

Global

• Upgrade Carbon to v10.19.0 (#3867) (be42e2f), closes #3867 #3866

Services

Breaking Change

The environment variable SEARCH_TYPEAHEAD_HOST has been renamed to SEARCH_TYPEAHEAD_API.

Styles

Fixes

• Card: moved scss to the styles package (#3688) (b978d18), closes #3688
• LocaleModal: merge styles (#3612) (95b00a1), closes #3612 #3482 #3406
• styles: dedupe Carbon grid in the bundle (#3811) (4119a43), closes #3811 #3809

React

Features

• card-with-pictogram: adding new card variation (#3654) (3bdc14e), closes #3654
• Footer: add micro variation (#3645) (14acb43), closes #3428
  #3645 #3431
• search: add redirect and typeahead hooks (#3918) (84c0481), closes #3918 #3766

Fixes

• calloutQuote: remove footer styles (#3891) (9a8cba7), closes #3891 #3711
• CardGroup: passing pictogram prop to card from CardGroup (#3689) (fa2b2ef), closes #3689 #3654
• CardLink: remove specific styles (#3835) (a6a2580), closes #3835 #3473
• ContentGroupHorizontal: margin size (#3593) (e6988f2), closes #3593 #3262
• Footer: micro footer mobile layout styles (#3844) (60a35ff), closes #3844 #3771
• Footer: update micro footer styles (#3825) (77d4667), closes #3825 #3759 #3760
• HorizontalRule: change style prop name to type (#3892) (3317f57), closes #3892
• leadspace: fixes codesandbox leadspace example (#3581) (59414e1), closes #3581
• LinkList: update styles in aside element (#3845) (d518bf9), closes #3845 #3454
• Masthead: indicate the active navigation item in Masthead navigation links (#3890) (42b1599), closes #3890 #3826
• Masthead: set selected menu item font weight to semibold (#3909) (cc74a21), closes #3909 #3907
• masthead: remove hide L0 logic (#3960) (fe2ae3f), closes #3960 #3958
• MastheadLeftNav: when user goes through menu levels, set scrollTop to 0 (#3921) (0ecc2a5), closes #3921 #3730
• MegaMenu: explicity set focus to HeaderMenu L0 item when clicked (#3751) (626d40f), closes #3751 #3617 #3731
• Megamenu: update mobile styles (#3858) (3c9e01c), closes #3858 #3504 #3510 #3516
• TOC: font-size on ios landscape mode (#3614) (4893525), closes #3614
• ToC: increasing mobile component clickable area (#3853) (80a4543), closes #3853 #3726

Breaking Change

The <HorizontalRule /> has a change in prop name, namely the style prop is now called type.

Web Components

The Web Components package is packed with a ton of new components, in our efforts to bring feature parity with the React package! This will be the continuing wave of available web components in the IBM.com Library for the next series of releases.

Features

• Card: create web component (#3887) (574d764), closes #3887 #3855 #3556
• Card: supports onClick (#3812) (9245135), closes #3812 #3756
• Card: fix icon placement option and styles (#3919) (cba5762), closes #3919 #3917
• content-block: introduction (#3870) (1484022), closes #3870 #3640 [#3734](https://github.com/
• cta: introduce card CTA (#3855) (e3a53c6), closes #3855 #3556
• FeatureCard: new web component (#3725) (a1419a7), closes #3725 #3554
• FeatureCardBlockLarge: web component version (#3829) (9844f92), closes #3829 #3558
• horizontal-rule: hr web component (#3856) (feab658), closes #3856 #3536
• Icon: icon web component (#3830) (dd5dae7), closes #3830 #3538
• image: created web component image component (#3750) (b6ffdd4), closes #3750
• lightbox-media-viewer: introduce image viewer (#3869) (8aa9831), closes #3869 #3550
• LinkList: Component created (#3564) (6140ae7), closes #3564 #3372
• link-list: test added (#3924) (19557c7), closes #3924 #3372
• masthead: extract out the search feature (#3757) (8bcdd8a), closes #3757 #3397
• masthead: support for dynamic language switch (#3915) (5cd27da), closes #3915 #3899
• package.json: add update snapshot npm script to web-components package.json (#3621) (1a9d286), closes #3621

Fixes

• card-footer: fix duplicate content (#3916) (17d9952), closes #3916
• card-link: witdth in web-component story now matches react (#3591) (13fb347), closes #3591 #3407
• dotcom-shell: fix style imports (#3810) (8304c76), closes #3810
• footer-nav-group: fix missing rotate feature of chevron (#3878) (62ada29), closes #3878 #3530
• left-nav: fix left nav not being able to open (#3664) (5779b83), closes #3664
• locale-search: fix clear button (#3715) (06f8cb7), closes #3715 #3714
• locale-search: reset query on page navigation (#3768) (fdbd16a), closes #3768 #3769
• LocaleModal: remove header focus (#3888) (b86894c), closes #3888 #3527
• masthead-leftnav: increasing overlay z-index (#3871) (3e56272), closes #3871 #3695
• masthead-menu-button: fix toggle event (#3840) (916bbc7), closes #3840 #3834
• masthead-search: fire custom event (#3900) (1842cd9), closes #3900 #3894
• masthead-search: performance improvements (#3710) (5674d18), closes #3710 #3707
• Masthead: hide nav items from screen readers when not displayed (#3542) (1387a46), closes #3542 #3159
• Masthead: keep focus in sub menus (#3723) (af1ce57), closes #3723 #3663

Fixes

• left-nav: set the list of nav items (#3956)
• masthead: remove hide L0 logic (#3960)

Features

• link-list: test added (#3924)
• search: add redirect and typeahead hooks (#3918)
• masthead: support for dynamic language switch (#3915)
• content-block: introduction (#3870)
• LinkList: Component created (#3564)
• Card: create web component (#3887)
• lightbox-media-viewer: introduce image viewer (#3869)
• cta: introduce card CTA (#3855)
• horizontal-rule: hr web component (#3856)
• Icon: icon web component (#3830)
• masthead: extract out the search feature (#3757)
• FeatureCardBlockLarge: web component version (#3829)
• Card: supports onClick (#3812)
• image: created web component image component (#3750)
• FeatureCard: new web component (#3725)
• card-with-pictogram: adding new card variation (#3654)
• Footer: add micro variation (#3645)
• package.json: add update snapshot npm script to web-components package.json (#3621)

Fixes

• MastheadLeftNav: when user goes through menu levels, set scrollTop to 0 (#3921)
• Card: fix icon placement option and styles (#3919)
• card-footer: fix duplicate content (#3916)
• Masthead: set selected menu item font weight to semibold (#3909)
• masthead-search: fire custom event (#3900)
• HorizontalRule: change style prop name to type (#3892)
• Masthead: indicate the active navigation item in Masthead navigation links (#3890)
• calloutQuote: remove footer styles (#3891)
• footer-nav-group: fix missing rotate feature of chevron (#3878)
• masthead-leftnav: increasing overlay z-index (#3871)
• LocaleModal: remove header focus (#3888)
• CardLink: remove specific styles (#3835)
• Megamenu: update mobile styles (#3858)
• translation: adding string/replace of login url state param (#3852)
• LinkList: update styles in aside element (#3845)
• ipcinfo: setting domain for the ipcinfo cookie (#3839)
• Footer: micro footer mobile layout styles (#3844)
• Footer: update micro footer styles (#3825)
• masthead-menu-button: fix toggle event (#3840)
• lang: get immediate lang value rather than waiting for DDO (#3822)
• styles: dedupe Carbon grid in the bundle (#3811)
• Masthead: hide nav items from screen readers when not displayed (#3542)
• dotcom-shell: fix style imports (#3810)
• locale-search: reset query on page navigation (#3768)
• MegaMenu: account for focus within the megamenu component (#3763)
• locale-search: fix clear button (#3715)
• MegaMenu: explicity set focus to HeaderMenu L0 item when clicked (#3751) (#3762)
• MegaMenu: explicity set focus to HeaderMenu L0 item when clicked (#3751)
• Masthead: keep focus in sub menus (#3723)
• masthead-search: performance improvements (#3710)
• Card: moved scss to the styles package (#3688)
• TOC: font-size on ios landscape mode (#3614)
• CardGroup: passing pictogram prop to card from CardGroup (#3689)
• left-nav: fix left nav not being able to open (#3664)
• LocaleModal: merge styles (#3612)
• ContentGroupHorizontal: margin size (#3593)
• card-link: witdth in web-component story now matches react (#3591)
• leadspace: fixes codesandbox leadspace example (#3581)

Features

• search: add redirect and typeahead hooks (#3918)
• masthead: support for dynamic language switch (#3915)
• content-block: introduction (#3870)
• LinkList: Component created (#3564)
• Card: create web component (#3887)
• lightbox-media-viewer: introduce image viewer (#3869)
• cta: introduce card CTA (#3855)
• horizontal-rule: hr web component (#3856)
• Icon: icon web component (#3830)
• masthead: extract out the search feature (#3757)
• FeatureCardBlockLarge: web component version (#3829)
• Card: supports onClick (#3812)
• image: created web component image component (#3750)

Fixes

• MastheadLeftNav: when user goes through menu levels, set scrollTop to 0 (#3921)
• Card: fix icon placement option and styles (#3919)
• card-footer: fix duplicate content (#3916)
• Masthead: set selected menu item font weight to semibold (#3909)
• masthead-search: fire custom event (#3900)
• HorizontalRule: change style prop name to type (#3892)
• Masthead: indicate the active navigation item in Masthead navigation links (#3890)
• calloutQuote: remove footer styles (#3891)
• footer-nav-group: fix missing rotate feature of chevron (#3878)
• masthead-leftnav: increasing overlay z-index (#3871)
• LocaleModal: remove header focus (#3888)
• CardLink: remove specific styles (#3835)
• Megamenu: update mobile styles (#3858)
• translation: adding string/replace of login url state param (#3852)
• LinkList: update styles in aside element (#3845)
• ipcinfo: setting domain for the ipcinfo cookie (#3839)
• Footer: micro footer mobile layout styles (#3844)
• Footer: update micro footer styles (#3825)
• masthead-menu-button: fix toggle event (#3840)
• lang: get immediate lang value rather than waiting for DDO (#3822)
• styles: dedupe Carbon grid in the bundle (#3811)
• Masthead: hide nav items from screen readers when not displayed (#3542)
• dotcom-shell: fix style imports (#3810)

Services

Fixes

• LocaleAPI: Adjusted language fetching to be immediate rather than waiting for full DDO (#3824)
• TranslationAPI: adding string/replace of login url state param (#3851)

Utilities

Fixes

• ipcinfoCookie: Setting domain for the ipcinfo cookie (#3838)

Fixes

• translation: adding string/replace of login url state param (#3852)

Fixes

• ipcinfo: setting domain for the ipcinfo cookie (#3839)

Fixes

• lang: get immediate lang value rather than waiting for DDO (#3822)

Features

• FeatureCard: new web component (#3725)
• card-with-pictogram: adding new card variation (#3654)
• Footer: add micro variation (#3645)
• footer: introduce cookie preference placeholder (#3656)
• package.json: add update snapshot npm script to web-components package.json (#3621)

Fixes

• locale-search: reset query on page navigation (#3768)
• MegaMenu: account for focus within the megamenu component (#3763)
• locale-search: fix clear button (#3715)
• MegaMenu: explicity set focus to HeaderMenu L0 item when clicked (#3751) (#3762)
• MegaMenu: explicity set focus to HeaderMenu L0 item when clicked (#3751)
• Masthead: keep focus in sub menus (#3723)
• locale-modal: add missing import (#3727)
• footer: adding locale modal import to the footer (#3724)
• MegaMenu: add scroll for submenu (#3720)
• masthead-search: performance improvements (#3710)
• Card: moved scss to the styles package (#3688)
• TOC: font-size on ios landscape mode (#3614)
• masthead: locked focus while left menu active (#3705)
• expressivetheme: enable css custom properties with the theme (#3699)
• masthead: ssr fix for scroll check (#3704)
• MegaMenu: disable scrolling for mobile nav (#3692)
• CardGroup: passing pictogram prop to card from CardGroup (#3689)
• MegaMenu: disable body scroll when megamenu is open (#3676)
• Footer: fixes footer theme styles (#3677)
• MegaMenu: prevent shift of IBM logo when opening mobile nav (#3679)
• MegaMenu: add tabindex attr for safari not detecting event (#3673)
• MegaMenu: pass href prop to the CategoryGroup so link can be accessed as expected (#3668)
• left-nav: fix left nav not being able to open (#3664)
• LocaleModal: merge styles (#3612)
• ContentGroupHorizontal: margin size (#3593)
• card-link: witdth in web-component story now matches react (#3591)
• Masthead: edit hamburger menu autoid to new format (#3618)
• Footer: add aria label to IBM logo in footer (#3613)
• masthead: left menu focus (#3611)
• MegaMenu: assign button role for the back button in mobile menu (#3610)
• side-nav: cope with large list of parent menu items (#3607)
• MegaMenu: set correct aria label to hamburger menu when open/closed (#3608)
• footer: fix for store initialization (#3595)
• leadspace: fixes codesandbox leadspace example (#3581)
• masthead: added entry point to self-init redux store (#3579)

Fixes

• MegaMenu: account for focus within the megamenu component (#3763)
• MegaMenu: explicity set focus to HeaderMenu L0 item when clicked (#3751) (#3762)

Fixes

• MegaMenu: account for focus within the megamenu component (#3763)
• MegaMenu: explicity set focus to HeaderMenu L0 item when clicked (#3751) (#3762)

Features

Global

• Upgrade to Carbon v10.17.0 (#3461 )

Styles

Features

• Enable the Expressive Theme in the IBM.com Library (https://github.com/carbon-design-system/ibm-dotcom-library/issues/3127)

In v1.9.0, we have released the expressive theme implementation that is now available for all teams (IBM.com and non-IBM.com teams alike) can take advantage of. In this release, the expressive theme will be enabled by default. This will ensure the consistent experience of marketing/editorial moments throughout the IBM.com experience. To learn more about the expressive theme, visit https://www.ibm.com/standards/web/ibm-dotcom-library/guidelines/expressive-theme.

• components: Productive zoning capability (#3293)

Fixes

• Footer: fixes footer theme styles (#3677) (aa55335), closes #3642
• MegaMenu: prevent shift of IBM logo when opening mobile nav (#3679)(48e431c)
• CalloutQuote: adjust grid (#3209) (9098b1e), closes #2399
• Card: button width is auto according to the available space (#3221) (27b81a2), closes #2736
• Card: svg min width (#3336) (766be3c), closes #3245
• footer: fixed spacing of the legal nav list (#3345) (f2cb7f2)
• MegaMenu: add padding to the view all cta focus state (#3521) (2b5fb4b), closes #3498
• MegaMenu: align megamenu content with grid (#3570) (097b696), closes #3502
• MegaMenu: change overflow scroll style from x to y (#3566) (c5d0fe8), closes #3543
• TableOfContents: active selector bug (#3457) (798fa3b), closes #3298
• TableOfContents: hover styling (#3328) (89f870f), closes #3246

React

Features

• Enhance the video player to support 1:1, 4:3 and 16:9 aspect ratios: Epic (#2834 )
• Masthead Mega Menu (https://github.com/carbon-design-system/ibm-dotcom-library/issues/3120)

For L0 experiences, we are introducing the new look and feel of the Masthead menu! Our team has worked closely in support of the CET Discoverability initiative working with the IA team on IBM.com Reboot and are excited to see this roll out throughout the IBM.com experience!

• left-nav: support focus wrapping (#3348) (8414000), closes #3160
• Masthead: add megamenu to mobile nav (#3464) (5422747), closes #3300
• MegaMenu: MegaMenu component (#3395) (c962e2f), closes #3279
• MegaMenu: set up auto ids (#3517) (f106790), closes #3381
• VideoPlayer: adding stories for different aspect ratios (#3434) (055e10f), closes #3396

Fixes

• expressivetheme: enable css custom properties with the theme (#3699) (cdf12a3), closes #3698 #3643
• masthead: locked focus while left menu active (#3705) (ff766f7), closes #3663
• masthead: ssr fix for scroll check (#3704) (c087815), closes #3661 #3661
• MegaMenu: add tabindex attr for safari not detecting event (#3673) (b3c1c7e), closes #3641
• MegaMenu: disable body scroll when megamenu is open (#3676) (828bfa7), closes #3633
• MegaMenu: disable scrolling for mobile nav (#3692) (44167d5), closes #3661
• MegaMenu: pass href prop to the CategoryGroup so link can be accessed as expected (#3668) (abfbb56)
• CalloutWithMedia: g90 theme rendering well (#3392) (c0c6351), closes #3383
• docs: fixed codesandbox links pointing to old folders (#3544) (902a1c3), closes #3541
• jest: remove console errors (#3490) (e43bbfe)
• lightboxMediaViewer: update react version (#3489) (d58e6fa), closes #3295
• LinkwithIcon: disabled hover styling (#3384) (af30476), closes #3294
• LocaleModal: accessibility issue on navigation (#3466) (e7e10a9), closes #3412
• LocaleModal: changing icon size and margin (#3532) (69109dd), closes #3329
• LocaleModal: html semantic, filter by region, scrollTop by region (#3513) (5a703d1), closes #3409
• LocaleModal: modal close btn accessibility (#3447) (88b3a53), closes #3410
• LocalModal: reset scroll to top (#3465) (8ffa44d), closes #3350
• masthead: left menu focus (#3611) (26ce5f9), closes #3588
• Masthead: edit hamburger menu autoid to new format (#3618) (eaf073f)
• MastheadSearch: fix UC browser (#3442) (5d5f0c9), closes #2896
• MegaMenu: assign button role for the back button in mobile menu (#3610) (f840b28), closes #3587
• MegaMenu: break down MegaMenu into smaller components (#3488) (cf32071), closes /github.com/carbon-design-system/ibm-dotcom-library/pull/3395#issuecomment-669766125
• MegaMenu: prevent menu items from overlapping (#3565) (8bd6375), closes #3519
• MegaMenu: set correct aria label to hamburger menu when open/closed (#3608) (e780ffa), closes #3584
• MegaMenu: tweak data-autoids for the mobile navigation (#3576) (7520594), closes #3381
• side-nav: cope with large list of parent menu items (#3607) (bce8890), closes #3512
• storybook: fix to storybook react docs pages (#3572) (2a8c72d), closes #3571
• VideoPlayerAPI: stop video when modal closes (#3427) (b61b5ee), closes #3295
• callout-data: fixed wrong story display on iframe mode (#3241) (217095b)
• components: revert type size back to one of v1.8.0 (#3293) (b97771b), closes #3287
• CTASection: add sameHeight to content items (#3330) (18aff80)
• CTASection: buttongroup styling (#3254) (4857422), closes #3016
• docs: wrong scss import path in docs (#3335) (57ee99b), closes #3332 #3333
• LightboxMediaViewer: modal dialog accessibility (#3275) (e0dd2d2), closes #2727
• TableOfContents: Sticky offset not working (#3255) (195a26e), closes #2979

Web Components

Features

• Web Components MVP (https://github.com/carbon-design-system/ibm-dotcom-library/issues/2882)

We're excited to bring the initial footprint of the web components package of the IBM.com Library! This will strategically be one of our primary focuses on how we continue to build and enhance the library in the foreseeable future. This takes full advantage of the carbon-web-components (the web component variant of Carbon, https://github.com/carbon-design-system/carbon-web-components) where we are also beginning to take an active part in its continued support.

• locale-modal: introduction (#3185) (1357b6e), closes #2883
• dotcom-shell: introduction (#3505) (0a0601b)
• footer: introduction (#3411) (93db39f), closes #2862
• left-nav: support focus wrapping (#3348) (8414000), closes #3160
• masthead: support profile API (#3463) (1f41b05), closes #3432
• footer: introduce cookie preference placeholder (#3656) (a5ce796), closes #3583 #3624

Fixes

• footer: fix for store initialization (#3595) (3194a6a), closes #3589 #3590 #3594
• Footer: add aria label to IBM logo in footer (#3613) (3bc71e9), closes #3609
• masthead: added entry point to self-init redux store (#3579) (5a40b84)
• cta: prevent lightbox from opening for non-video (#3508) (6659a35), closes #3440
• devenv: use ibm-common.js (#3578) (36b148c), closes #3575
• lightbox-media-viewer: fix the size (#3507) (e51f270), closes #3349
• lightboxMediaViewer: handle video close (#3500) (aef7d8f), closes #3331
• link: change disabled handling (#3506) (4a87bf0), closes #3405
• localModal: scroll to top (#3501) (22056a9), closes #3476
• components: revert type size back to one of v1.8.0 (#3293) (b97771b), closes #3287
• masthead: add label to profile trigger button (#3205) (21aafc1), closes #3156
• Masthead: missing aria-label on masthead search (#3256) (b30261a), closes #3158

Services

Fixes

• VideoPlayerAPI: stop video when modal closes (#3427)

Fixes

• locale-modal: add missing import (#3727)
• footer: adding locale modal import to the footer (#3724)
• MegaMenu: add scroll for submenu (#3720)

Features

• footer: introduce cookie preference placeholder (#3656)

Fixes

• masthead: locked focus while left menu active (#3705)
• expressivetheme: enable css custom properties with the theme (#3699)
• masthead: ssr fix for scroll check (#3704)
• MegaMenu: disable scrolling for mobile nav (#3692)
• MegaMenu: disable body scroll when megamenu is open (#3676)
• Footer: fixes footer theme styles (#3677)
• MegaMenu: prevent shift of IBM logo when opening mobile nav (#3679)
• MegaMenu: add tabindex attr for safari not detecting event (#3673)
• MegaMenu: pass href prop to the CategoryGroup so link can be accessed as expected (#3668)

Features

• dotcom-shell: introduction (#3505)
• MegaMenu: set up auto ids (#3517)
• Masthead: add megamenu to mobile nav (#3464)
• MegaMenu: MegaMenu component (#3395)
• VideoPlayer: adding stories for different aspect ratios (#3434)
• masthead: support profile API (#3463)
• footer: introduction (#3411)
• left-nav: support focus wrapping (#3348)
• locale-modal: introduction (#3185)

Fixes

• Masthead: edit hamburger menu autoid to new format (#3618)
• Footer: add aria label to IBM logo in footer (#3613)
• masthead: left menu focus (#3611)
• MegaMenu: assign button role for the back button in mobile menu (#3610)
• side-nav: cope with large list of parent menu items (#3607)
• MegaMenu: set correct aria label to hamburger menu when open/closed (#3608)
• footer: fix for store initialization (#3595)
• masthead: added entry point to self-init redux store (#3579)
• devenv: use ibm-common.js (#3578)
• MegaMenu: tweak data-autoids for the mobile navigation (#3576)
• LocaleModal: html semantic, filter by region, scrollTop by region (#3513)
• MegaMenu: prevent menu items from overlapping (#3565)
• MegaMenu: align megamenu content with grid (#3570)
• storybook: fix to storybook react docs pages (#3572)
• LocaleModal: changing icon size and margin (#3532)
• MegaMenu: change overflow scroll style from x to y (#3566)
• docs: fixed codesandbox links pointing to old folders (#3544)
• link: change disabled handling (#3506)
• lightbox-media-viewer: fix the size (#3507)
• MegaMenu: add padding to the view all cta focus state (#3521)
• cta: prevent lightbox from opening for non-video (#3508)
• lightboxMediaViewer: update react version (#3489)
• localModal: scroll to top (#3501)
• lightboxMediaViewer: handle video close (#3500)
• MegaMenu: break down MegaMenu into smaller components (#3488)
• jest: remove console errors (#3490)
• LocalModal: reset scroll to top (#3465)
• LocaleModal: accessibility issue on navigation (#3466)
• TableOfContents: active selector bug (#3457)
• LocaleModal: modal close btn accessibility (#3447)
• VideoPlayerAPI: stop video when modal closes (#3427)
• MastheadSearch: fix UC browser (#3442)
• CalloutWithMedia: g90 theme rendering well (#3392)
• LinkwithIcon: disabled hover styling (#3384)
• Card: svg min width (#3336)
• LightboxMediaViewer: modal dialog accessibility (#3275)
• footer: fixed spacing of the legal nav list (#3345)
• docs: wrong scss import path in docs (#3335)
• CTASection: add sameHeight to content items (#3330)
• TableOfContents: hover styling (#3328)
• components: revert type size back to one of v1.8.0 (#3293)
• callout-data: fixed wrong story display on iframe mode (#3241)
• Masthead: missing aria-label on masthead search (#3256)
• TableOfContents: Sticky offset not working (#3255)
• CTASection: buttongroup styling (#3254)
• masthead: add label to profile trigger button (#3205)
• Card: button width is auto according to the available space (#3221)
• CalloutQuote: adjust grid (#3209)

Features

• dotcom-shell: introduction (#3505)
• MegaMenu: set up auto ids (#3517)
• Masthead: add megamenu to mobile nav (#3464)
• MegaMenu: MegaMenu component (#3395)
• VideoPlayer: adding stories for different aspect ratios (#3434)
• masthead: support profile API (#3463)
• footer: introduction (#3411)
• left-nav: support focus wrapping (#3348)

Fixes

• devenv: use ibm-common.js (#3578)
• MegaMenu: tweak data-autoids for the mobile navigation (#3576)
• LocaleModal: html semantic, filter by region, scrollTop by region (#3513)
• MegaMenu: prevent menu items from overlapping (#3565)
• MegaMenu: align megamenu content with grid (#3570)
• storybook: fix to storybook react docs pages (#3572)
• LocaleModal: changing icon size and margin (#3532)
• MegaMenu: change overflow scroll style from x to y (#3566)
• docs: fixed codesandbox links pointing to old folders (#3544)
• link: change disabled handling (#3506)
• lightbox-media-viewer: fix the size (#3507)
• MegaMenu: add padding to the view all cta focus state (#3521)
• cta: prevent lightbox from opening for non-video (#3508)
• lightboxMediaViewer: update react version (#3489)
• localModal: scroll to top (#3501)
• lightboxMediaViewer: handle video close (#3500)
• MegaMenu: break down MegaMenu into smaller components (#3488)
• jest: remove console errors (#3490)
• LocalModal: reset scroll to top (#3465)
• LocaleModal: accessibility issue on navigation (#3466)
• TableOfContents: active selector bug (#3457)
• LocaleModal: modal close btn accessibility (#3447)
• VideoPlayerAPI: stop video when modal closes (#3427)
• MastheadSearch: fix UC browser (#3442)
• CalloutWithMedia: g90 theme rendering well (#3392)
• LinkwithIcon: disabled hover styling (#3384)

Features

• locale-modal: introduction (#3185)

Fixes

• Card: svg min width (#3336)
• LightboxMediaViewer: modal dialog accessibility (#3275)
• footer: fixed spacing of the legal nav list (#3345)
• docs: wrong scss import path in docs (#3335)
• CTASection: add sameHeight to content items (#3330)
• TableOfContents: hover styling (#3328)
• components: revert type size back to one of v1.8.0 (#3293)
• callout-data: fixed wrong story display on iframe mode (#3241)
• Masthead: missing aria-label on masthead search (#3256)
• TableOfContents: Sticky offset not working (#3255)
• CTASection: buttongroup styling (#3254)
• CardLink: disabled state (#3247)
• masthead: add label to profile trigger button (#3205)
• Card: button width is auto according to the available space (#3221)
• CalloutQuote: adjust grid (#3209)
• LeadSpace: gradient styles moved to new component leadspace scss file (#3199)
• ContentGroupHorizontal: remove bottom padding (#3189)
• ContentBlockCards: add video and cta (#3196)

React

Features

• Link with icon inverse theming enhancement (#2294 )
• Content Block Segmented - copy field should be made optional (#2574 )
• Masthead L0 (React) - Production level (#1464 )
• Pattern: Callout - with data: include single proof point - Services template MVP requirements (#2819 )
• CalloutData: new experimental pattern created (#2873)
• Added codesandbox example implementations (#2846, #2844, #2843, #2808, #2806, #2804, #2773, #2763, #2759, #2745, #2809)
• TableOfContents: fixed missing hover and hidden default label (#2606)
• CTA section - remove the horizontal rule when no content items are given (#2778 )
• Link with icon - Allow a user to set icon on the right or the left of text (#2416 )
• Pattern: Content block - headlines - new Reboot pattern (#3005 )

Fixes

• Fix Leadspace Block: Grid alignment (#2618 )
• Pattern: Content item horizontal: Bottom padding fix (#2676 )
• Pattern: Leadspace Block: Link list rules fix (#2619 )
• Pattern: Content group: Text lengths fix (#2623 )
• [Card] Hover image darken/lighten 8% instead of 20% (#2195 )
• Inline and Linklist Video Player error fix (#2502 )
• VideoPlayer: ensure only the video thumbnail for the video clicked gets removed from DOM (#2857)
• LanguageSelector: placeholder prop added (#2807)
• LeadspaceBlock: top & bottom spacing (#2892)
• CTASection: adjust spacing when no content items (#2796, #2197)
• Quote: optional copy2 prop added to the component (#2605)
• Content item horizontal: Misalignment to grid fix (#2673 )
• Content block - with cards: Fix grid alignment in Storybook at large breakpoints (#2418 )
• Remove different color background between logo cards for g10 and g90 - Storybook (#2829 )
• Pattern: Leadspace block: Make spacing between intro and media 32px on small breakpoint (#2617 )
• Callout with data: Spacing fixes (#2966 )
• Pattern: Leadspace Block: Link list rules (#2619 )
• Pattern: Content group: Text lengths (#2623 )
• Pattern: Content block - with cards: Ensure correct grid usage in Storybook (#2418 )
• Pattern: Callout with data: Source text width (#2976 )
• Pattern: CTA Section - incorrect horizontal rule fix (#2355 )
• Pattern: Content group horizontal: Grid alignment fix (#2670 )
• Experimental Language selector current language display label fix (#2319 )
• LinkList default and vertical with cards grid fix (#2832 )
• Fix spacing under the intro paragraph in each content group pattern (#2624 )
• Card Link: Incorrect grid alignment fix (#2594 )

Web Components

Features

• This is a brand new package in the IBM.com Library, and is our strategic future for any non-React implementations! We are still in pre-release for this, and will be looking at an MVP of this for later this year. (https://github.com/carbon-design-system/ibm-dotcom-library/issues/2882)
• Masthead (https://github.com/carbon-design-system/ibm-dotcom-library/issues/2861)
• CardLink (#2987)
• LightboxMediaViewer(#3130)
• Text CTA (#3129)
• Expressive Modal (#2988)

Styles

Features

• We're excited to bring you the expressive theme, available as a framework agnostic solution in our styles package! We have a lot of documentation to update on our end, but the technical implementation is available for testing. You can see a working version available, along with implementation details at http://carbon-expressive.mybluemix.net/ (https://github.com/carbon-design-system/ibm-dotcom-library/issues/2784)

Deprecation Warning

Patterns are now Components!

Similar to the pivot from v1.8.0 release for sub-patterns, we have now consolidated all patterns / blocks and patterns / sections into components, so now all coded things are considered as components! With this change, the scss imports have now been remapped under /scss/components, however we have kept a deprecation import so that nothing breaks (for now) on the application side. A deprecation warning will show for imports pointing to the patterns folder, which we will ultimately remove in a future release.