fix(link-with-icon): add icon line wrap behavior by default #6812
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
emyarod
added
package: styles
emyarod
force-pushed
the
5705-fix/link-with-icon-text-wrap-behavior
branch
from
e1257f9 to
285d2c2
Compare
|
Deploy preview created for package Built with commit: 6e6159a51d4af5a8d7c9b2df107dc14d5be2af00 |
|
Deploy preview created for package Built with commit: 6e6159a51d4af5a8d7c9b2df107dc14d5be2af00 |
|
Deploy preview created for package Built with commit: 6e6159a51d4af5a8d7c9b2df107dc14d5be2af00 |
|
Deploy preview created for package Built with commit: 6e6159a51d4af5a8d7c9b2df107dc14d5be2af00 |
|
Deploy preview created for package Built with commit: 6e6159a51d4af5a8d7c9b2df107dc14d5be2af00 |
|
Deploy preview created for package Built with commit: 6e6159a51d4af5a8d7c9b2df107dc14d5be2af00 |
emyarod
force-pushed
the
5705-fix/link-with-icon-text-wrap-behavior
branch
from
285d2c2 to
39983d4
Compare
|
Deploy preview created for package Built with commit: 6e6159a51d4af5a8d7c9b2df107dc14d5be2af00 |
|
This diff doesn't seem to look right @emyarod:
|
|
@jeffchew this is the behavior I mentioned where the icon can wrap before the final word. not sure if we can achieve the original desired behavior without modifying the markup or resorting to some css hacks but I checked with Shixie on if we still want to proceed with this cc @shixiedesign |
|
Hey @jeffchew yes the wrapping behavior caught by Percy is expected. This bugfix should fix many stances of the wrong wrapping. Currently I'm still seeing the incorrect icon wrap in Still seeing the wrong icon wrapping behavior in the following components:CTA - Text Content block horizontal Content block segmented |
I overlooked the CTAMixin using Link with icon as a base 🙇 |
emyarod
force-pushed
the
5705-fix/link-with-icon-text-wrap-behavior
branch
from
3e73156 to
afa39f0
Compare
|
CTA - Text, Content block horizontal, and Content block segmented should also see the same text wrap behavior now! also added Card footer and Callout link with icon |
emyarod
added
👀 eyes needed
and removed
question
emyarod
force-pushed
the
5705-fix/link-with-icon-text-wrap-behavior
branch
from
afa39f0 to
c6e6711
Compare
|
Noticed React needs these update as well. Already discussed on Slack. |
emyarod
force-pushed
the
5705-fix/link-with-icon-text-wrap-behavior
branch
from
2e999ae to
0be5991
Compare
|
the React versions should now receive the same changes! |
emyarod
added
👀 eyes needed
package: react
shixiedesign
removed
Needs design approval
shixiedesign
approved these changes
Aug 5, 2021
jeffchew
approved these changes
Aug 5, 2021
jeffchew
added
the
Ready to merge
|
Issue (#6837 ) has been created to manage the React work mentioned in Andrew's comment above. |
kodiakhq bot
pushed a commit
that referenced
this pull request
Mar 2, 2023
### Related Ticket(s) #10069 ### Description Seems like from this change: #6812 the hover styles got effected. This forces the hover text underline position to be under <img width="402" alt="Screen Shot 2023-02-27 at 2 59 33 PM" src="https://user-images.githubusercontent.com/20210594/221695932-9ad2df2c-38df-4615-a693-ab31963a6675.png"> <img width="244" alt="Screen Shot 2023-02-27 at 2 59 55 PM" src="https://user-images.githubusercontent.com/20210594/221695935-67a34b60-e7b9-47b5-91c6-b131a486bc55.png"> ### Changelog **New** - text-underline-position: under for hover styles <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
annawen1
added a commit
that referenced
this pull request
Jul 14, 2023
* chore(release): publish - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] * chore(cwc): generate cwc internal vendor package (#9953) ### Related Ticket(s) [carbon-web-components]: updating build scripts to use internal vendor packages #9763 ### Description This PR adds the the gulp tasks to build cwc to the internal vendor folder and changes the paths in web-components to reference the internal files instead. ### Changelog **New** - add to the gulp tasks in `web-components` to build out the `carbon-web-components` internal vendor package **Changed** - change paths to reference the internal `carbon-web-components` vendor files instead <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(issue-template): add cwc option (#9967) * fix(styles): downgrade sass version as there is an issue with @extend (#9973) ### Related Ticket(s) {{Provide url(s) to the related ticket(s) that this pull request addresses}} ### Description There seems to be an issue with `@extend` in the recent upgrade of `sass`. Downgrading `sass` version until there is fix ### Changelog **Changed** - downgrade sass back to `~1.40.0` **Removed** - band-aid fixes that should be resolved with the `sass` downgrade <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(changelog): incorporate cwc into change log task (#9975) * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] * fix(tabs-extended-media): safari hover (#9974) ### Related Ticket(s) #9963 ### Description Safari causing tabs extended media to resize on hover ### Changelog **New** - added `width: 100%` to keep from tabs-extended-media changing size on hover <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(platform): add indexing file for `carbon-web-components` (#9960) ### Description Index the `carbon-web-components` package with Carbon Platform. @francinelucca For `externalDocsUrl` and `usage`/`style`/`a11y` paths, I've kept the links pointing to Carbon React documentation. Since `carbon-web-components` should (eventually) mirror the React components, I think it's a good idea to treat those as the canonical docs? Let me know what you think. Also please let me know if there is anything missing, for instance icons. Not sure where those should be added and if we even have one we should be using. ### Changelog **New** - `carbon.yml` index file for `carbon-web-components` package <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(cloud-masthead): address various visual bugs (#9927) ### Related Ticket(s) https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9926 https://jsw.ibm.com/browse/ADCMS-2742 ### Description Minor CSS changes were necessary to address all four issues as laid out nicely in the issue / ticket. ### Changelog **Changed** - fix arrow color on cloud masthead category header - fix unintended vertical scroll bar in the cloud masthead - fix hover color of the mega menu category link description - fix focus styles on top nav link <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(leadspace): adjust left position of leadspace to cover Safari gap (#9903) ### Related Ticket(s) Closes: [#9896](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9896) [ADCMS-2853](https://jsw.ibm.com/browse/ADCMS-2853) ### Description This implements a workaround to cover off the Safari edge case bug with the Leadspace component. Nudging the svg gradient by -1px, and covering that adjustment to the right edge with `calc`. ### Testing instructions - [ ] Open the Leadspace component in Storybook in Safari. Zoom in and out with browser controls. - [ ] You should no longer exhibit the issue of the gradient peeking out from the background as noted in the issue, and represented here for reference: <img width="1440" alt="211601432-e4f67595-ee7f-4a6f-b3cd-ee8384cc1767" src="https://user-images.githubusercontent.com/191049/217071951-d310dfb4-d601-4e55-ad35-099b457625c1.png"> - [ ] Review in Chrome / Firefox, should be no regressions - [ ] Test the "Lead space > Centered *" stories to ensure no regressions have appeared there either. ### Changelog **Changed** - Adjusted SVG leadspace gradient position to cover an edge case bug in Safari * fix(table-of-contents): adjustment to z-index on table of contents styles (#9957) ### Related Ticket(s) Resolves https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9949 Jira: https://jsw.ibm.com/browse/ADCMS-2594 Jira: https://jsw.ibm.com/browse/ADCMS-2829 Jira: https://jsw.ibm.com/browse/ADCMS-2488 ### Description Bumps the `z-index` on the Table of contents (TOC) so that the mobile view rises above components like carousel's and accordions that declare a modest `z-index`. To test, make use of the Web Components Code Sandbox Examples e2e testing environment that was built for this PR: https://webcomponents-codesandbox.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/9957/index.html Switch to a mobile breakpoint where the TOC becomes sticky on scroll. Verify that the TOC remains above both the accordion (https://jsw.ibm.com/browse/ADCMS-2594) and the carousel (https://jsw.ibm.com/browse/ADCMS-2829). ### Changelog **Changed** - Bump `z-index` in the TOC styles. * fix(tag-group): ensuring tags can be gray (#9972) ### Related Ticket(s) #9890 ### Description Ensured that the carbon tag can be gray when used within Tag Group. ### Changelog **Removed** - removed tag group condition that would change a tag color to green if gray was chosen <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(deps): upgrade lerna to v6 (#9938) ### Description Upgrades `lerna` to latest. ### Changelog **Changed** - upgrade `lerna` to `v6.4.1` <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(settings): update settings to v1.44.0 * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] * chore(deps): update dependency magic-string to ^0.29.0 (#10036) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [magic-string](https://togithub.com/rich-harris/magic-string) | [`^0.27.0` -> `^0.29.0`](https://renovatebot.com/diffs/npm/magic-string/0.27.0/0.29.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>rich-harris/magic-string</summary> ### [`v0.29.0`](https://togithub.com/rich-harris/magic-string/blob/HEAD/CHANGELOG.md#​0290-httpsgithubcomrich-harrismagic-stringcomparev0280v0290-2023-02-11) [Compare Source](https://togithub.com/rich-harris/magic-string/compare/v0.28.0...v0.29.0) ##### Features - **x_google_ignoreList:** initial support for ignore lists ([3c711cd](https://togithub.com/rich-harris/magic-string/commit/3c711cd56de6c9735f92e41e457353005c2c0d1c)) ### [`v0.28.0`](https://togithub.com/rich-harris/magic-string/blob/HEAD/CHANGELOG.md#​0280-httpsgithubcomrich-harrismagic-stringcomparev0270v0280-2023-02-11) [Compare Source](https://togithub.com/rich-harris/magic-string/compare/v0.27.0...v0.28.0) ##### Bug Fixes - **typings:** sourcesContent may contain null ([#​235](https://togithub.com/rich-harris/magic-string/issues/235)) ([c2b652a](https://togithub.com/rich-harris/magic-string/commit/c2b652a0d353f183ca991d0b59a7ad0250a52735)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xMzAuMSIsInVwZGF0ZWRJblZlciI6IjM0LjEzMC4xIn0=--> * chore(deps): update dependency karma-sourcemap-loader to ^0.4.0 (#10034) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [karma-sourcemap-loader](https://togithub.com/demerzel3/karma-sourcemap-loader) | [`^0.3.0` -> `^0.4.0`](https://renovatebot.com/diffs/npm/karma-sourcemap-loader/0.3.8/0.4.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>demerzel3/karma-sourcemap-loader</summary> ### [`v0.4.0`](https://togithub.com/demerzel3/karma-sourcemap-loader/blob/HEAD/CHANGELOG.md#​040---2022-02-05) [Compare Source](https://togithub.com/demerzel3/karma-sourcemap-loader/compare/da0051d19137f682cc99ef9ff95c83aebd599703...0.4.0) ##### Added - Allow remapping or otherwise changing source paths in source maps - Allow changing `sourceRoot` in source maps - Allow adapting the source map files alone, if served separately by the Karma web server - Add option `onlyWithURL` to disable the source map loading for files without `sourceMappingURL` - Add option `strict` for a strict error handling of invalid and/or missing source maps ##### Fixed - Fix handling of raw (URI-encoded) source maps - trim the leading , before parsing the content - Warn about a missing external source map, is the source mapping URL is invalid - Handle malformed source map content as a warning or failure </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xMjQuMiIsInVwZGF0ZWRJblZlciI6IjM0LjEyNC4yIn0=--> * fix(deps): update dependency isomorphic-dompurify to v0.27.0 (#10035) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [isomorphic-dompurify](https://togithub.com/kkomelin/isomorphic-dompurify) | [`0.26.0` -> `0.27.0`](https://renovatebot.com/diffs/npm/isomorphic-dompurify/0.26.0/0.27.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>kkomelin/isomorphic-dompurify</summary> ### [`v0.27.0`](https://togithub.com/kkomelin/isomorphic-dompurify/releases/tag/v0.27.0): Updated dependencies [Compare Source](https://togithub.com/kkomelin/isomorphic-dompurify/compare/v0.26.0...v0.27.0) ##### Changelog - \[x] Updated `jsdom` and other dependencies. See the [changes](https://togithub.com/kkomelin/isomorphic-dompurify/pulls?q=is%3Apr+is%3Aclosed) for more details. ##### Release [0.27.0](https://www.npmjs.com/package/isomorphic-dompurify/v/0.27.0) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xMzAuMSIsInVwZGF0ZWRJblZlciI6IjM0LjEzMC4xIn0=--> * docs: remove themeselector from live demo (#10028) ### Related Ticket(s) Closes https://github.com/carbon-design-system/carbon-platform/issues/1592 ### Description ### Changelog **Removed** - remove themeSelector from live demo components <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * Carbon Platform: Index get started content for carbon web components (#10048) * fix(button): add button print styles (#10055) ### Related Ticket(s) N/A ### Description Button-group has specific print styles and in expressive-modal it just uses `button-expressive` causing it to add a `:` without also having the print styles for button-expressive <img width="1422" alt="Screen Shot 2023-02-16 at 8 37 04 AM" src="https://user-images.githubusercontent.com/20210594/219413780-2c1c6026-525b-4601-bbec-07c5a02f750f.png"> after: <img width="1222" alt="Screen Shot 2023-02-16 at 8 41 12 AM" src="https://user-images.githubusercontent.com/20210594/219414911-3247a3cf-88e4-48e8-8add-e4ad19f7bcd4.png"> ### Changelog **Changed** - moved DDSButtonExpressive print styles out of button-group and into button <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(readme): update with storybook demo links (#10054) ### Related Ticket(s) {{Provide url(s) to the related ticket(s) that this pull request addresses}} ### Description opening new PR for "docs(README): add storybook links #9409" ### Changelog **New** - {{new thing}} **Changed** - {{changed thing}} **Removed** - {{removed thing}} <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * docs(readme): add discord link to readme (#10046) Hey there! Just a small PR to add a link to discord in the readme. I'm opening PRs suggesting we do this for all the top repos in the carbon-design-system org. * fix(clean): clean vendor src base dir from web-components package (#10038) ### Related Ticket(s) Resolves https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10037 ### Description Cleans up the artifacts produced during `yarn build` within `packages/web-components/internal/vendor` to avoid build errors associated with these artifacts encountered during `yarn build` when switching between major feature branches (`main` and `feat/masthead-v2.1`). ### Changelog **Changed** - `yarn clean` updated for the web-components package to clean up the vendor src dir artifact produced during build. * chore(deps): update dependency @carbon/pictograms-react to v11.39.0 (#10063) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@carbon/pictograms-react](https://togithub.com/carbon-design-system/carbon) | [`11.38.0` -> `11.39.0`](https://renovatebot.com/diffs/npm/@carbon%2fpictograms-react/11.38.0/11.39.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v11.39.0`](https://togithub.com/carbon-design-system/carbon/compare/36b2a3b42be5bebb706861030d1ec4a21ae47c5f...6234f2b1304e340345fff3935342f80a1e36e08e) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/36b2a3b42be5bebb706861030d1ec4a21ae47c5f...6234f2b1304e340345fff3935342f80a1e36e08e) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNDMuMSIsInVwZGF0ZWRJblZlciI6IjM0LjE0My4xIn0=--> * fix(deps): update dependency carbon-components to v10.58.6 (#10062) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [carbon-components](https://www.carbondesignsystem.com/) ([source](https://togithub.com/carbon-design-system/carbon)) | [`10.58.5` -> `10.58.6`](https://renovatebot.com/diffs/npm/carbon-components/10.58.5/10.58.6) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v10.58.6`](https://togithub.com/carbon-design-system/carbon/compare/f194dfb8beb09cf2ad62b521c65fddf3a439069b...7fce6306004230995ac5dd63dc85c200d4076f49) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/f194dfb8beb09cf2ad62b521c65fddf3a439069b...7fce6306004230995ac5dd63dc85c200d4076f49) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNDMuMSIsInVwZGF0ZWRJblZlciI6IjM0LjE0My4xIn0=--> * chore(deps): update dependency carbon-components-react to v7.59.6 (#10061) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [carbon-components-react](https://togithub.com/carbon-design-system/carbon) | [`7.59.5` -> `7.59.6`](https://renovatebot.com/diffs/npm/carbon-components-react/7.59.5/7.59.6) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v7.59.6`](https://togithub.com/carbon-design-system/carbon/compare/f194dfb8beb09cf2ad62b521c65fddf3a439069b...7fce6306004230995ac5dd63dc85c200d4076f49) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/f194dfb8beb09cf2ad62b521c65fddf3a439069b...7fce6306004230995ac5dd63dc85c200d4076f49) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNDMuMSIsInVwZGF0ZWRJblZlciI6IjM0LjE0My4xIn0=--> * chore(project): upgrade yarn to v3 (#9948) ### Description Upgrade to use latest version of Yarn. ### Changelog **New** - `cache` dir for zero-install **Changed** - upgrade Yarn to 3.3.1 - update package build scripts **Removed** - Yarn's offline-mirror folder <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(documentation): update content-section docs tab with content block simple (#10067) ### Related Ticket(s) [Content section]: width of block component isn't defined by columns, causing containing media width to shrink unexpectedly #10049 ### Description `content-section` needs to be passed in grid classes when using `content-block-simple` as its child. Updating the Storybook docs tab to include this for both React Wrapper and Web Components. ### Changelog **New** - add `content-block-simple` to Storybook docs with note to include grid classes - add code examples for `content-block-simple`, `card-group`, `carousel`, and `link-list` to `content-section`'s React Wrapper docs **Changed** - update the React wrapper story to properly render the `link-list` child and include the grid class when using `content-block-simple <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(logo-grid): cta styles (#10065) ### Related Ticket(s) #10051 ### Description Logo-grid update styles so cta appears in the correct place <img width="955" alt="Screen Shot 2023-02-20 at 9 19 22 AM" src="https://user-images.githubusercontent.com/20210594/220157243-05c49d33-b335-428a-ab9f-0f6c1601972d.png"> ### Changelog **New** - block styles for the body - <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(lightbox-carousel): accessibility & QA improvements to lightbox carousels (#9149) ## Related Ticket(s) Closes: #8911 #8913 #8915 Also related: #8912 #8914 ## Description This PR makes several accessibility improvements to the DDSCarousel and DDSLightboxMediaViewer components, as well as the lightbox carousel story ### #8911 Update Lightbox to use semantic headings ✅ Lightbox titles now render title text within `<h2 style="all: inherit;">` tags. This gives them semantic `h2` headers but does not bring along the user agent/carbon styles for the element. ### #8912 Add label for modal dialog ✅ While elements with `[role="dialog"]` are required to have a label for WCAG, that label should be relevant to the content within the dialog. Because the component cannot know what content (or even what language) is in it, all we can do is make space for content entry. This already exists within the component in the form of an `aria-labelledby` attribute pointing to [a div that accepts slotted content](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/expressive-modal/expressive-modal.ts#L358). This PR adds a visually hidden modal title to the lightbox carousel story ### #8913 Announce carousel navigation to screen reader ✅ The carousel's `renderStatus()` method now renders a visually-hidden span with `aria-live="polite"` and uses a new `formatAnnouncement` property function to format that announcement into a string that accounts for single slides or slide groups. This property is written adjacent to the `formatStatus` property that allows localizing the pagination information. ### #8914 Create new landmark region for carousels ✅ _~No changes were made for this ticket.~_ ~8914 suggests, "to provide more context to the screen reader user, the carousel which includes the slides and the Carousel controls could be given in a labelled landmark region." While this would be good, wouldn't adding a landmark region require a label that describes _what is in_ the carousel, not just that it _is_ a carousel? It would not be difficult to add a fallback label if this is not the case.~ The carousel now has an additional `<div>` wrapping the scrolling contents and the navigation. This div has `role="region"` and an `aria-labelledby` attribute that points to a new div with a `<slot name="title"><span class="bx--visually-hidden">Carousel</span></slot>`. This allows authors to provide a title relevant to the carousel's contents with the generic fallback label of "carousel" ### #8915 Update carousel's next/previous button labels ✅ The carousel allows authors to specify the labels of the previous & next buttons, but we also provide a default. Previously this value was "next page", but the word `page` can be confusing. We now provide a default fallback that looks at the carousel's `pageSize` and returns either "next slide" or "next slide group" if more than one slide is visible. ### [No Ticket] Refactor carousel item's interactivity based on inert When the `[inert]` attribute was added to the carousel, it was added in a way that wasn't implemented fully in safari/firefox, and didn't account for carousels with multiple visible values well. That's been updated to now use an intersection observer, and it will mark carousel items more less than 75% visible as `inert` and `aria-hidden`. ### Changelog **Changed** - Accessibility improvements to lightbox media viewer component - Accessibility improvements to lightbox carousel story - Accessibility improvements to carousel component * chore(deps): update yarn to v3.4.1 (#10163) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [yarn](https://togithub.com/yarnpkg/berry) | [`3.3.1` -> `3.4.1`](https://renovatebot.com/diffs/npm/yarn/3.3.1/3.4.1) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>yarnpkg/berry</summary> ### [`v3.4.1`](https://togithub.com/yarnpkg/berry/blob/HEAD/CHANGELOG.md#​341) [Compare Source](https://togithub.com/yarnpkg/berry/compare/8ba1a57e0cfdf8bf649d04cff0f18664e5164b33...0d66d6e73acf0303c4461fbb9023b02cb942845f) - Fixes an accidental backport error in `yarn init`. ### [`v3.4.0`](https://togithub.com/yarnpkg/berry/blob/HEAD/CHANGELOG.md#​340) [Compare Source](https://togithub.com/yarnpkg/berry/compare/340e0db330e242946b570d8a08b0a9d97d8d8774...8ba1a57e0cfdf8bf649d04cff0f18664e5164b33) ##### Node.js parity - PnP now supports the Node `--conditions` flag. - PnP now supports the Node `--watch` flag on Node 18 (it previously only supported it on Node 19). ##### Bugfixes - The PnP API module (`pnpapi`) can now be imported from ESM modules. - `ZipFS.prototype.getBufferAndClose` will not error on empty archives resulting from an unlink after write. - Fixes various issues around postinstall script inter-dependencies. - Removes the message prefixes (`YN0000`) from `yarn workspaces foreach`. ##### Compatibility - Updates the PnP compatibility layer for TypeScript v5.0.0-beta. </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNTIuNCIsInVwZGF0ZWRJblZlciI6IjM0LjE1Mi40In0=--> * chore(deps): update dependency magic-string to ^0.30.0 (#10162) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [magic-string](https://togithub.com/rich-harris/magic-string) | [`^0.29.0` -> `^0.30.0`](https://renovatebot.com/diffs/npm/magic-string/0.29.0/0.30.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>rich-harris/magic-string</summary> ### [`v0.30.0`](https://togithub.com/rich-harris/magic-string/blob/HEAD/CHANGELOG.md#​0300-httpsgithubcomrich-harrismagic-stringcomparev0290v0300-2023-02-22) [Compare Source](https://togithub.com/rich-harris/magic-string/compare/v0.29.0...v0.30.0) ##### Bug Fixes - `null` is invalid for `sources` and `file` ([#​242](https://togithub.com/rich-harris/magic-string/issues/242)) ([d4e9c31](https://togithub.com/rich-harris/magic-string/commit/d4e9c31082491cfa177b31ce725c9ce39491d549)) ##### Features - add the ability to ignore-list sources ([#​243](https://togithub.com/rich-harris/magic-string/issues/243)) ([e238f04](https://togithub.com/rich-harris/magic-string/commit/e238f04be31ec9a3e19b18b75bb5d859f9cb2654)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNTIuNCIsInVwZGF0ZWRJblZlciI6IjM0LjE1Mi40In0=--> * fix(leadspace): button sizing and layout for md leadspace (#10030) ### Related Ticket(s) Resolves #9619 Jira ticket: https://jsw.ibm.com/browse/ADCMS-2947 ### Description Adjustments made so that the width of buttons in a leadspace button group follows the largest one. To test: - [ ] Open up the Lead space > Super with Image story - [ ] Adjust one or more button text such that the intrinsic button sizes would be different - [ ] The width of all buttons should match the width of the button with the most content - [ ] View at various breakpoints to ensure there are no regressions - [ ] Open up the Button group > Default component - [ ] View at various breakpoints to ensure there are no regressions ### Changelog **Changed** - Added a wrapper div around leadspace actions - Use `display: grid` across all breakpoints for the leadspace button group <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(date-picker): range mode clearing first value (#10168) ### Related Ticket(s) #10088 ### Description When a user clicked a range of calendar dates the first date would get cleared after clicking the second date. Before:  After:  ### Changelog **Changed** - downgraded flatpick to 4.6.9 ( the issue starts to appear in version 4.6.10) <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] * fix(universal-banner): add banner role (#10179) ### Related Ticket(s) [Universal banner]: QA: Landmark region should be defined for Universal banner #9869 ### Description Set banner `role` for `universal-banner` component for accessibility purposes ### Changelog **Changed** - add banner `role` onto `universal-banner` <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * [Cloud-Masthead]: Implement lazy load and DOM pruning from masthead v2 on cloud masthead (#10085) ### Related Ticket(s) Resolves #10056 ### Description Adds the performance enhancements that were implemented for Masthead v2 to the Cloud Masthead, specifically: * https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/9595 * https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/9602 The first change (quoting @andy-blum [here](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/9595)): Initializes the masthead-container with either the `left-nav` or the `top-nav` depending on the width of the viewport. Additionally swaps one for the other when the viewport crosses the 960px boundary. This should effectively cut the number of masthead nodes in half with very little other changes. The second change (again quoting @andy-blum [here](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/9602)): Currently the Masthead loads both the SideNav and Megamenu components at the same time, even if they haven't been opened yet. This causes the amount of nodes to increase considerably right away. In order to mitigate this, a fast solution is to dynamically load the required components *only* when the user has interacted with the menus. This means that the mobile version wouldn't be loading the Megamenu, and the desktop wouldn't load SideNav until/if required. Another optimization that was done ensures that the Megamenu component wouldn't get loaded into the DOM unless a user has clicked on the menu beforehand. Then and only then, the megamenu would be loaded in. Once the menu is closed, the component gets removed from the DOM to ensure the total node count doesn't shoot up. Note that, due to the structure of the Masthead and Cloud Masthead, these changes are not entirely isolated to the Cloud Masthead alone. Specifically, the Masthead is responsible for mega menu rendering, thus the Masthead implements lazy loading of the megamenu which then is inherited by the Cloud Masthead. ### Testing Testing should cover regression tests on both the Masthead and Cloud Masthead components. ### Changelog **New** - Adds support for dynamic imports - Utliizes dynamic imports to lazy load left nav and megamenu scripts that are only necessary when the user expands the menu. - Only renders left nav custom elements when we're at the mobile break - Only renders megamenu custom elements when user expands the menu * fix(lightbox-video-player): set heading for modal title (#10178) ### Related Ticket(s) [Link List]: QA: Text looks prominent like heading but there is no heading tag #9866 ### Description Set modal title in `lightbox-video-player` to `h2` as suggested for accessibility purposes and aligns with what was done in `lightbox-media-viewer`: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/lightbox-media-viewer/lightbox-media-viewer.ts#L44 <img width="1482" alt="Screen Shot 2023-02-28 at 12 10 51 PM" src="https://user-images.githubusercontent.com/54281166/221926738-713b47e0-7234-494f-9e99-6e7350e7e79c.png"> ### Changelog **New** - wrap title of `lightbox-video-player` in `h2` <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(lerna): update lerna version in lerna.json (#10180) ### Description Fixes version number in `lerna.json`. ### Changelog **New** - {{new thing}} **Changed** - update version to match installed `lerna` version **Removed** - {{removed thing}} <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * feat(carousel): update buttons to tertiary (#10140) ### Related Ticket(s) #10021 ### Description Update buttons for carousel to use tertiary buttons instead <img width="692" alt="Screen Shot 2023-02-24 at 8 06 38 AM" src="https://user-images.githubusercontent.com/20210594/221212673-7cfe6b94-960d-40cb-b66b-45c442c9b356.png"> ### Changelog **Changed** - secondary -> tertiary <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(feature-card): applied color change upon hover (#10081) ### Related Ticket(s) #10060 ### Description Applies the different hover color to the Feature card large ### Changelog **New** - feature card large will now has `$inverse-color-ui` displaying upon hover <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(link-with-icon): force hover underline under (#10172) ### Related Ticket(s) #10069 ### Description Seems like from this change: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/6812 the hover styles got effected. This forces the hover text underline position to be under <img width="402" alt="Screen Shot 2023-02-27 at 2 59 33 PM" src="https://user-images.githubusercontent.com/20210594/221695932-9ad2df2c-38df-4615-a693-ab31963a6675.png"> <img width="244" alt="Screen Shot 2023-02-27 at 2 59 55 PM" src="https://user-images.githubusercontent.com/20210594/221695935-67a34b60-e7b9-47b5-91c6-b131a486bc55.png"> ### Changelog **New** - text-underline-position: under for hover styles <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(search-with-typeahead): add search region for accessibility (#10173) ### Related Ticket(s) [Lead Space Search]: QA: Search edit combo and the clear button is not defined within in a search region #9861 ### Description Add "search" role to the `search-with-typeahead` form component ### Changelog **New** - add search `role` to `form` component of `search-with-typeahead` <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(card-pictogram): remove motion with no copy (#10183) ### Related Ticket(s) #10071 ### Description Using pictogram with card without copy sometimes still shows the motion of the heading/copy ### Changelog **Changed** - update the `handleSlotChange` - the previous version would sometimes not get the right contents from the slot, but this ensures it looks if a copy exists <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(leadspace-block): adjust heading level for leadspace-block story (#10177) ### Related Ticket(s) [Lead Space Block]: QA: Heading level is not in an hierarchical order #9858 ### Description Heading levels are not in order for the Leadspace Block story, currently it is from H1, H2, H4 instead of H1, H2, H3 This PR sets the `aria-level` for the `link-list-heading` so the headings are in hierarchical order instead. Currently by default, the `aria-level` for `link-list-heading` is set to 4. <img width="1237" alt="Screen Shot 2023-02-28 at 11 44 39 AM" src="https://user-images.githubusercontent.com/54281166/221920843-7af9b0e2-a91c-4502-a89d-3121fa976a10.png"> ### Changelog **Changed** - set `aria-level` to `3` for `link-list-heading` in the story <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * Update welcome-story.mdx with `@carbon/web-components` (#10185) ### Description Update welcome-story.mdx with `@carbon/web-components` * chore(e2e): fixes `e2e-integration` tests (#10186) ### Description This fixes the `e2e-integration` GH actions that are failing for `react` and `web-components`. With the upgrade to Yarn v3, building the Codesandbox examples needed for e2e tests becomes problematic as they have not been upgraded. The simplest solution is to switch back to an older version of Yarn for the test builds only. ### Changelog **New** - Use `execa` for `web-components` build process. Now that `vendor/@carbon/web-components` are bundled with `ibmdotcom-web-components`, the packed file is huge. This exceeds the `maxBuffer` limit in `execSync`, while `execa` has no such issue. **Changed** - update `dotcom-shell` and `masthead` e2e tests **Removed** - {{removed thing}} <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(leadspace-search): clear button (#10176) ### Related Ticket(s) [Lead Space Search]: QA:Brief description: Label of the button should be defined as "clear input" rather than "close" #9860 ### Description Change the default value of the `close-search-button-assistive-text` attribute to "Clear input" instead as it is more descriptive and clearer to user in the case of the search with typeahead ### Changelog **Changed** - Change the default value of the `close-search-button-assistive-text` attribute to "Clear input" - edit selector to use `part='close-button'` instead of `aria-label` since the aria-label is an attribute that can change values <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(deps): update dependency @carbon/pictograms-react to v11.40.0 (#10192) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@carbon/pictograms-react](https://togithub.com/carbon-design-system/carbon) | [`11.39.0` -> `11.40.0`](https://renovatebot.com/diffs/npm/@carbon%2fpictograms-react/11.39.0/11.40.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v11.40.0`](https://togithub.com/carbon-design-system/carbon/compare/6234f2b1304e340345fff3935342f80a1e36e08e...07168bf0272678a04c92cd1e700ac60e66355a95) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/6234f2b1304e340345fff3935342f80a1e36e08e...07168bf0272678a04c92cd1e700ac60e66355a95) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNTQuNiIsInVwZGF0ZWRJblZlciI6IjM0LjE1NC42In0=--> * chore(deps): update dependency @carbon/icon-helpers to v10.39.0 (#10191) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@carbon/icon-helpers](https://togithub.com/carbon-design-system/carbon) | [`10.38.0` -> `10.39.0`](https://renovatebot.com/diffs/npm/@carbon%2ficon-helpers/10.38.0/10.39.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v10.39.0`](https://togithub.com/carbon-design-system/carbon/releases/tag/v10.39.0) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/v10.38.0...v10.39.0) #### `[email protected]` ##### New features :rocket: - feat(eslint): add eslint-testing-library-plugin; add config ([#​9103](https://togithub.com/carbon-design-system/carbon/issues/9103)) ([`6d71d2275`](https://togithub.com/carbon-design-system/carbon/commit/6d71d2275)) - feat(eslint): add eslint-plugin-jest ([#​9077](https://togithub.com/carbon-design-system/carbon/issues/9077)) ([`74851abbe`](https://togithub.com/carbon-design-system/carbon/commit/74851abbe)) ##### Housekeeping :house: - chore(release): v10.39.0 ([#​9146](https://togithub.com/carbon-design-system/carbon/issues/9146)) ([`a1897ff62`](https://togithub.com/carbon-design-system/carbon/commit/a1897ff62)) - chore(release): v10.39.0-rc.0 ([#​9127](https://togithub.com/carbon-design-system/carbon/issues/9127)) ([`49e427c77`](https://togithub.com/carbon-design-system/carbon/commit/49e427c77)) #### `@carbon/[email protected]` ##### Housekeeping :house: - chore(project): update babel to 7.14.6 ([#​9143](https://togithub.com/carbon-design-system/carbon/issues/9143)) ([`6e099d6d1`](https://togithub.com/carbon-design-system/carbon/commit/6e099d6d1)) #### `@carbon/[email protected]` ##### New features :rocket: - feat(colors): add hover colors to `@carbon/colors` ([#​8942](https://togithub.com/carbon-design-system/carbon/issues/8942)) ([`df64f1c9f`](https://togithub.com/carbon-design-system/carbon/commit/df64f1c9f)) ##### Housekeeping :house: - chore(release): v10.39.0 ([#​9146](https://togithub.com/carbon-design-system/carbon/issues/9146)) ([`a1897ff62`](https://togithub.com/carbon-design-system/carbon/commit/a1897ff62)) - chore(release): v10.39.0-rc.0 ([#​9127](https://togithub.com/carbon-design-system/carbon/issues/9127)) ([`49e427c77`](https://togithub.com/carbon-design-system/carbon/commit/49e427c77)) - chore(project): sync generated files ([`6d0fb6e46`](https://togithub.com/carbon-design-system/carbon/commit/6d0fb6e46)) #### `[email protected]` ##### New features :rocket: - feat(FilterableMultiselect): add direction prop ([#​9120](https://togithub.com/carbon-design-system/carbon/issues/9120)) ([`660acdc8a`](https://togithub.com/carbon-design-system/carbon/commit/660acdc8a)) - feat(number-input): match readonly variant ([#​8992](https://togithub.com/carbon-design-system/carbon/issues/8992)) ([`d0bd8eddb`](https://togithub.com/carbon-design-system/carbon/commit/d0bd8eddb)) ##### Bug fixes :bug: - fix(components): add missing g80 theme notification layer tokens [#​9106…
kennylam
added a commit
to kennylam/carbon-for-ibm-dotcom
that referenced
this pull request
Dec 4, 2023
…#10679) * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] * chore(cwc): generate cwc internal vendor package (#9953) ### Related Ticket(s) [carbon-web-components]: updating build scripts to use internal vendor packages #9763 ### Description This PR adds the the gulp tasks to build cwc to the internal vendor folder and changes the paths in web-components to reference the internal files instead. ### Changelog **New** - add to the gulp tasks in `web-components` to build out the `carbon-web-components` internal vendor package **Changed** - change paths to reference the internal `carbon-web-components` vendor files instead <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(issue-template): add cwc option (#9967) * fix(styles): downgrade sass version as there is an issue with @extend (#9973) ### Related Ticket(s) {{Provide url(s) to the related ticket(s) that this pull request addresses}} ### Description There seems to be an issue with `@extend` in the recent upgrade of `sass`. Downgrading `sass` version until there is fix ### Changelog **Changed** - downgrade sass back to `~1.40.0` **Removed** - band-aid fixes that should be resolved with the `sass` downgrade <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(changelog): incorporate cwc into change log task (#9975) * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] * fix(tabs-extended-media): safari hover (#9974) ### Related Ticket(s) #9963 ### Description Safari causing tabs extended media to resize on hover ### Changelog **New** - added `width: 100%` to keep from tabs-extended-media changing size on hover <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(platform): add indexing file for `carbon-web-components` (#9960) ### Description Index the `carbon-web-components` package with Carbon Platform. @francinelucca For `externalDocsUrl` and `usage`/`style`/`a11y` paths, I've kept the links pointing to Carbon React documentation. Since `carbon-web-components` should (eventually) mirror the React components, I think it's a good idea to treat those as the canonical docs? Let me know what you think. Also please let me know if there is anything missing, for instance icons. Not sure where those should be added and if we even have one we should be using. ### Changelog **New** - `carbon.yml` index file for `carbon-web-components` package <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(cloud-masthead): address various visual bugs (#9927) ### Related Ticket(s) https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9926 https://jsw.ibm.com/browse/ADCMS-2742 ### Description Minor CSS changes were necessary to address all four issues as laid out nicely in the issue / ticket. ### Changelog **Changed** - fix arrow color on cloud masthead category header - fix unintended vertical scroll bar in the cloud masthead - fix hover color of the mega menu category link description - fix focus styles on top nav link <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(leadspace): adjust left position of leadspace to cover Safari gap (#9903) ### Related Ticket(s) Closes: [#9896](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9896) [ADCMS-2853](https://jsw.ibm.com/browse/ADCMS-2853) ### Description This implements a workaround to cover off the Safari edge case bug with the Leadspace component. Nudging the svg gradient by -1px, and covering that adjustment to the right edge with `calc`. ### Testing instructions - [ ] Open the Leadspace component in Storybook in Safari. Zoom in and out with browser controls. - [ ] You should no longer exhibit the issue of the gradient peeking out from the background as noted in the issue, and represented here for reference: <img width="1440" alt="211601432-e4f67595-ee7f-4a6f-b3cd-ee8384cc1767" src="https://user-images.githubusercontent.com/191049/217071951-d310dfb4-d601-4e55-ad35-099b457625c1.png"> - [ ] Review in Chrome / Firefox, should be no regressions - [ ] Test the "Lead space > Centered *" stories to ensure no regressions have appeared there either. ### Changelog **Changed** - Adjusted SVG leadspace gradient position to cover an edge case bug in Safari * fix(table-of-contents): adjustment to z-index on table of contents styles (#9957) ### Related Ticket(s) Resolves https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9949 Jira: https://jsw.ibm.com/browse/ADCMS-2594 Jira: https://jsw.ibm.com/browse/ADCMS-2829 Jira: https://jsw.ibm.com/browse/ADCMS-2488 ### Description Bumps the `z-index` on the Table of contents (TOC) so that the mobile view rises above components like carousel's and accordions that declare a modest `z-index`. To test, make use of the Web Components Code Sandbox Examples e2e testing environment that was built for this PR: https://webcomponents-codesandbox.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/9957/index.html Switch to a mobile breakpoint where the TOC becomes sticky on scroll. Verify that the TOC remains above both the accordion (https://jsw.ibm.com/browse/ADCMS-2594) and the carousel (https://jsw.ibm.com/browse/ADCMS-2829). ### Changelog **Changed** - Bump `z-index` in the TOC styles. * fix(tag-group): ensuring tags can be gray (#9972) ### Related Ticket(s) #9890 ### Description Ensured that the carbon tag can be gray when used within Tag Group. ### Changelog **Removed** - removed tag group condition that would change a tag color to green if gray was chosen <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(deps): upgrade lerna to v6 (#9938) ### Description Upgrades `lerna` to latest. ### Changelog **Changed** - upgrade `lerna` to `v6.4.1` <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(settings): update settings to v1.44.0 * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] * chore(deps): update dependency magic-string to ^0.29.0 (#10036) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [magic-string](https://togithub.com/rich-harris/magic-string) | [`^0.27.0` -> `^0.29.0`](https://renovatebot.com/diffs/npm/magic-string/0.27.0/0.29.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>rich-harris/magic-string</summary> ### [`v0.29.0`](https://togithub.com/rich-harris/magic-string/blob/HEAD/CHANGELOG.md#​0290-httpsgithubcomrich-harrismagic-stringcomparev0280v0290-2023-02-11) [Compare Source](https://togithub.com/rich-harris/magic-string/compare/v0.28.0...v0.29.0) ##### Features - **x_google_ignoreList:** initial support for ignore lists ([3c711cd](https://togithub.com/rich-harris/magic-string/commit/3c711cd56de6c9735f92e41e457353005c2c0d1c)) ### [`v0.28.0`](https://togithub.com/rich-harris/magic-string/blob/HEAD/CHANGELOG.md#​0280-httpsgithubcomrich-harrismagic-stringcomparev0270v0280-2023-02-11) [Compare Source](https://togithub.com/rich-harris/magic-string/compare/v0.27.0...v0.28.0) ##### Bug Fixes - **typings:** sourcesContent may contain null ([#​235](https://togithub.com/rich-harris/magic-string/issues/235)) ([c2b652a](https://togithub.com/rich-harris/magic-string/commit/c2b652a0d353f183ca991d0b59a7ad0250a52735)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xMzAuMSIsInVwZGF0ZWRJblZlciI6IjM0LjEzMC4xIn0=--> * chore(deps): update dependency karma-sourcemap-loader to ^0.4.0 (#10034) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [karma-sourcemap-loader](https://togithub.com/demerzel3/karma-sourcemap-loader) | [`^0.3.0` -> `^0.4.0`](https://renovatebot.com/diffs/npm/karma-sourcemap-loader/0.3.8/0.4.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>demerzel3/karma-sourcemap-loader</summary> ### [`v0.4.0`](https://togithub.com/demerzel3/karma-sourcemap-loader/blob/HEAD/CHANGELOG.md#​040---2022-02-05) [Compare Source](https://togithub.com/demerzel3/karma-sourcemap-loader/compare/da0051d19137f682cc99ef9ff95c83aebd599703...0.4.0) ##### Added - Allow remapping or otherwise changing source paths in source maps - Allow changing `sourceRoot` in source maps - Allow adapting the source map files alone, if served separately by the Karma web server - Add option `onlyWithURL` to disable the source map loading for files without `sourceMappingURL` - Add option `strict` for a strict error handling of invalid and/or missing source maps ##### Fixed - Fix handling of raw (URI-encoded) source maps - trim the leading , before parsing the content - Warn about a missing external source map, is the source mapping URL is invalid - Handle malformed source map content as a warning or failure </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xMjQuMiIsInVwZGF0ZWRJblZlciI6IjM0LjEyNC4yIn0=--> * fix(deps): update dependency isomorphic-dompurify to v0.27.0 (#10035) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [isomorphic-dompurify](https://togithub.com/kkomelin/isomorphic-dompurify) | [`0.26.0` -> `0.27.0`](https://renovatebot.com/diffs/npm/isomorphic-dompurify/0.26.0/0.27.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>kkomelin/isomorphic-dompurify</summary> ### [`v0.27.0`](https://togithub.com/kkomelin/isomorphic-dompurify/releases/tag/v0.27.0): Updated dependencies [Compare Source](https://togithub.com/kkomelin/isomorphic-dompurify/compare/v0.26.0...v0.27.0) ##### Changelog - \[x] Updated `jsdom` and other dependencies. See the [changes](https://togithub.com/kkomelin/isomorphic-dompurify/pulls?q=is%3Apr+is%3Aclosed) for more details. ##### Release [0.27.0](https://www.npmjs.com/package/isomorphic-dompurify/v/0.27.0) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xMzAuMSIsInVwZGF0ZWRJblZlciI6IjM0LjEzMC4xIn0=--> * docs: remove themeselector from live demo (#10028) ### Related Ticket(s) Closes https://github.com/carbon-design-system/carbon-platform/issues/1592 ### Description ### Changelog **Removed** - remove themeSelector from live demo components <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * Carbon Platform: Index get started content for carbon web components (#10048) * fix(button): add button print styles (#10055) ### Related Ticket(s) N/A ### Description Button-group has specific print styles and in expressive-modal it just uses `button-expressive` causing it to add a `:` without also having the print styles for button-expressive <img width="1422" alt="Screen Shot 2023-02-16 at 8 37 04 AM" src="https://user-images.githubusercontent.com/20210594/219413780-2c1c6026-525b-4601-bbec-07c5a02f750f.png"> after: <img width="1222" alt="Screen Shot 2023-02-16 at 8 41 12 AM" src="https://user-images.githubusercontent.com/20210594/219414911-3247a3cf-88e4-48e8-8add-e4ad19f7bcd4.png"> ### Changelog **Changed** - moved DDSButtonExpressive print styles out of button-group and into button <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(readme): update with storybook demo links (#10054) ### Related Ticket(s) {{Provide url(s) to the related ticket(s) that this pull request addresses}} ### Description opening new PR for "docs(README): add storybook links #9409" ### Changelog **New** - {{new thing}} **Changed** - {{changed thing}} **Removed** - {{removed thing}} <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * docs(readme): add discord link to readme (#10046) Hey there! Just a small PR to add a link to discord in the readme. I'm opening PRs suggesting we do this for all the top repos in the carbon-design-system org. * fix(clean): clean vendor src base dir from web-components package (#10038) ### Related Ticket(s) Resolves https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10037 ### Description Cleans up the artifacts produced during `yarn build` within `packages/web-components/internal/vendor` to avoid build errors associated with these artifacts encountered during `yarn build` when switching between major feature branches (`main` and `feat/masthead-v2.1`). ### Changelog **Changed** - `yarn clean` updated for the web-components package to clean up the vendor src dir artifact produced during build. * chore(deps): update dependency @carbon/pictograms-react to v11.39.0 (#10063) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@carbon/pictograms-react](https://togithub.com/carbon-design-system/carbon) | [`11.38.0` -> `11.39.0`](https://renovatebot.com/diffs/npm/@carbon%2fpictograms-react/11.38.0/11.39.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v11.39.0`](https://togithub.com/carbon-design-system/carbon/compare/36b2a3b42be5bebb706861030d1ec4a21ae47c5f...6234f2b1304e340345fff3935342f80a1e36e08e) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/36b2a3b42be5bebb706861030d1ec4a21ae47c5f...6234f2b1304e340345fff3935342f80a1e36e08e) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNDMuMSIsInVwZGF0ZWRJblZlciI6IjM0LjE0My4xIn0=--> * fix(deps): update dependency carbon-components to v10.58.6 (#10062) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [carbon-components](https://www.carbondesignsystem.com/) ([source](https://togithub.com/carbon-design-system/carbon)) | [`10.58.5` -> `10.58.6`](https://renovatebot.com/diffs/npm/carbon-components/10.58.5/10.58.6) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v10.58.6`](https://togithub.com/carbon-design-system/carbon/compare/f194dfb8beb09cf2ad62b521c65fddf3a439069b...7fce6306004230995ac5dd63dc85c200d4076f49) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/f194dfb8beb09cf2ad62b521c65fddf3a439069b...7fce6306004230995ac5dd63dc85c200d4076f49) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNDMuMSIsInVwZGF0ZWRJblZlciI6IjM0LjE0My4xIn0=--> * chore(deps): update dependency carbon-components-react to v7.59.6 (#10061) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [carbon-components-react](https://togithub.com/carbon-design-system/carbon) | [`7.59.5` -> `7.59.6`](https://renovatebot.com/diffs/npm/carbon-components-react/7.59.5/7.59.6) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v7.59.6`](https://togithub.com/carbon-design-system/carbon/compare/f194dfb8beb09cf2ad62b521c65fddf3a439069b...7fce6306004230995ac5dd63dc85c200d4076f49) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/f194dfb8beb09cf2ad62b521c65fddf3a439069b...7fce6306004230995ac5dd63dc85c200d4076f49) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNDMuMSIsInVwZGF0ZWRJblZlciI6IjM0LjE0My4xIn0=--> * chore(project): upgrade yarn to v3 (#9948) ### Description Upgrade to use latest version of Yarn. ### Changelog **New** - `cache` dir for zero-install **Changed** - upgrade Yarn to 3.3.1 - update package build scripts **Removed** - Yarn's offline-mirror folder <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(documentation): update content-section docs tab with content block simple (#10067) ### Related Ticket(s) [Content section]: width of block component isn't defined by columns, causing containing media width to shrink unexpectedly #10049 ### Description `content-section` needs to be passed in grid classes when using `content-block-simple` as its child. Updating the Storybook docs tab to include this for both React Wrapper and Web Components. ### Changelog **New** - add `content-block-simple` to Storybook docs with note to include grid classes - add code examples for `content-block-simple`, `card-group`, `carousel`, and `link-list` to `content-section`'s React Wrapper docs **Changed** - update the React wrapper story to properly render the `link-list` child and include the grid class when using `content-block-simple <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(logo-grid): cta styles (#10065) ### Related Ticket(s) #10051 ### Description Logo-grid update styles so cta appears in the correct place <img width="955" alt="Screen Shot 2023-02-20 at 9 19 22 AM" src="https://user-images.githubusercontent.com/20210594/220157243-05c49d33-b335-428a-ab9f-0f6c1601972d.png"> ### Changelog **New** - block styles for the body - <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(lightbox-carousel): accessibility & QA improvements to lightbox carousels (#9149) ## Related Ticket(s) Closes: #8911 #8913 #8915 Also related: #8912 #8914 ## Description This PR makes several accessibility improvements to the DDSCarousel and DDSLightboxMediaViewer components, as well as the lightbox carousel story ### #8911 Update Lightbox to use semantic headings ✅ Lightbox titles now render title text within `<h2 style="all: inherit;">` tags. This gives them semantic `h2` headers but does not bring along the user agent/carbon styles for the element. ### #8912 Add label for modal dialog ✅ While elements with `[role="dialog"]` are required to have a label for WCAG, that label should be relevant to the content within the dialog. Because the component cannot know what content (or even what language) is in it, all we can do is make space for content entry. This already exists within the component in the form of an `aria-labelledby` attribute pointing to [a div that accepts slotted content](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/expressive-modal/expressive-modal.ts#L358). This PR adds a visually hidden modal title to the lightbox carousel story ### #8913 Announce carousel navigation to screen reader ✅ The carousel's `renderStatus()` method now renders a visually-hidden span with `aria-live="polite"` and uses a new `formatAnnouncement` property function to format that announcement into a string that accounts for single slides or slide groups. This property is written adjacent to the `formatStatus` property that allows localizing the pagination information. ### #8914 Create new landmark region for carousels ✅ _~No changes were made for this ticket.~_ ~8914 suggests, "to provide more context to the screen reader user, the carousel which includes the slides and the Carousel controls could be given in a labelled landmark region." While this would be good, wouldn't adding a landmark region require a label that describes _what is in_ the carousel, not just that it _is_ a carousel? It would not be difficult to add a fallback label if this is not the case.~ The carousel now has an additional `<div>` wrapping the scrolling contents and the navigation. This div has `role="region"` and an `aria-labelledby` attribute that points to a new div with a `<slot name="title"><span class="bx--visually-hidden">Carousel</span></slot>`. This allows authors to provide a title relevant to the carousel's contents with the generic fallback label of "carousel" ### #8915 Update carousel's next/previous button labels ✅ The carousel allows authors to specify the labels of the previous & next buttons, but we also provide a default. Previously this value was "next page", but the word `page` can be confusing. We now provide a default fallback that looks at the carousel's `pageSize` and returns either "next slide" or "next slide group" if more than one slide is visible. ### [No Ticket] Refactor carousel item's interactivity based on inert When the `[inert]` attribute was added to the carousel, it was added in a way that wasn't implemented fully in safari/firefox, and didn't account for carousels with multiple visible values well. That's been updated to now use an intersection observer, and it will mark carousel items more less than 75% visible as `inert` and `aria-hidden`. ### Changelog **Changed** - Accessibility improvements to lightbox media viewer component - Accessibility improvements to lightbox carousel story - Accessibility improvements to carousel component * chore(deps): update yarn to v3.4.1 (#10163) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [yarn](https://togithub.com/yarnpkg/berry) | [`3.3.1` -> `3.4.1`](https://renovatebot.com/diffs/npm/yarn/3.3.1/3.4.1) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>yarnpkg/berry</summary> ### [`v3.4.1`](https://togithub.com/yarnpkg/berry/blob/HEAD/CHANGELOG.md#​341) [Compare Source](https://togithub.com/yarnpkg/berry/compare/8ba1a57e0cfdf8bf649d04cff0f18664e5164b33...0d66d6e73acf0303c4461fbb9023b02cb942845f) - Fixes an accidental backport error in `yarn init`. ### [`v3.4.0`](https://togithub.com/yarnpkg/berry/blob/HEAD/CHANGELOG.md#​340) [Compare Source](https://togithub.com/yarnpkg/berry/compare/340e0db330e242946b570d8a08b0a9d97d8d8774...8ba1a57e0cfdf8bf649d04cff0f18664e5164b33) ##### Node.js parity - PnP now supports the Node `--conditions` flag. - PnP now supports the Node `--watch` flag on Node 18 (it previously only supported it on Node 19). ##### Bugfixes - The PnP API module (`pnpapi`) can now be imported from ESM modules. - `ZipFS.prototype.getBufferAndClose` will not error on empty archives resulting from an unlink after write. - Fixes various issues around postinstall script inter-dependencies. - Removes the message prefixes (`YN0000`) from `yarn workspaces foreach`. ##### Compatibility - Updates the PnP compatibility layer for TypeScript v5.0.0-beta. </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNTIuNCIsInVwZGF0ZWRJblZlciI6IjM0LjE1Mi40In0=--> * chore(deps): update dependency magic-string to ^0.30.0 (#10162) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [magic-string](https://togithub.com/rich-harris/magic-string) | [`^0.29.0` -> `^0.30.0`](https://renovatebot.com/diffs/npm/magic-string/0.29.0/0.30.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>rich-harris/magic-string</summary> ### [`v0.30.0`](https://togithub.com/rich-harris/magic-string/blob/HEAD/CHANGELOG.md#​0300-httpsgithubcomrich-harrismagic-stringcomparev0290v0300-2023-02-22) [Compare Source](https://togithub.com/rich-harris/magic-string/compare/v0.29.0...v0.30.0) ##### Bug Fixes - `null` is invalid for `sources` and `file` ([#​242](https://togithub.com/rich-harris/magic-string/issues/242)) ([d4e9c31](https://togithub.com/rich-harris/magic-string/commit/d4e9c31082491cfa177b31ce725c9ce39491d549)) ##### Features - add the ability to ignore-list sources ([#​243](https://togithub.com/rich-harris/magic-string/issues/243)) ([e238f04](https://togithub.com/rich-harris/magic-string/commit/e238f04be31ec9a3e19b18b75bb5d859f9cb2654)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNTIuNCIsInVwZGF0ZWRJblZlciI6IjM0LjE1Mi40In0=--> * fix(leadspace): button sizing and layout for md leadspace (#10030) ### Related Ticket(s) Resolves #9619 Jira ticket: https://jsw.ibm.com/browse/ADCMS-2947 ### Description Adjustments made so that the width of buttons in a leadspace button group follows the largest one. To test: - [ ] Open up the Lead space > Super with Image story - [ ] Adjust one or more button text such that the intrinsic button sizes would be different - [ ] The width of all buttons should match the width of the button with the most content - [ ] View at various breakpoints to ensure there are no regressions - [ ] Open up the Button group > Default component - [ ] View at various breakpoints to ensure there are no regressions ### Changelog **Changed** - Added a wrapper div around leadspace actions - Use `display: grid` across all breakpoints for the leadspace button group <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(date-picker): range mode clearing first value (#10168) ### Related Ticket(s) #10088 ### Description When a user clicked a range of calendar dates the first date would get cleared after clicking the second date. Before:  After:  ### Changelog **Changed** - downgraded flatpick to 4.6.9 ( the issue starts to appear in version 4.6.10) <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] * fix(universal-banner): add banner role (#10179) ### Related Ticket(s) [Universal banner]: QA: Landmark region should be defined for Universal banner #9869 ### Description Set banner `role` for `universal-banner` component for accessibility purposes ### Changelog **Changed** - add banner `role` onto `universal-banner` <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * [Cloud-Masthead]: Implement lazy load and DOM pruning from masthead v2 on cloud masthead (#10085) ### Related Ticket(s) Resolves #10056 ### Description Adds the performance enhancements that were implemented for Masthead v2 to the Cloud Masthead, specifically: * https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/9595 * https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/9602 The first change (quoting @andy-blum [here](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/9595)): Initializes the masthead-container with either the `left-nav` or the `top-nav` depending on the width of the viewport. Additionally swaps one for the other when the viewport crosses the 960px boundary. This should effectively cut the number of masthead nodes in half with very little other changes. The second change (again quoting @andy-blum [here](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/9602)): Currently the Masthead loads both the SideNav and Megamenu components at the same time, even if they haven't been opened yet. This causes the amount of nodes to increase considerably right away. In order to mitigate this, a fast solution is to dynamically load the required components *only* when the user has interacted with the menus. This means that the mobile version wouldn't be loading the Megamenu, and the desktop wouldn't load SideNav until/if required. Another optimization that was done ensures that the Megamenu component wouldn't get loaded into the DOM unless a user has clicked on the menu beforehand. Then and only then, the megamenu would be loaded in. Once the menu is closed, the component gets removed from the DOM to ensure the total node count doesn't shoot up. Note that, due to the structure of the Masthead and Cloud Masthead, these changes are not entirely isolated to the Cloud Masthead alone. Specifically, the Masthead is responsible for mega menu rendering, thus the Masthead implements lazy loading of the megamenu which then is inherited by the Cloud Masthead. ### Testing Testing should cover regression tests on both the Masthead and Cloud Masthead components. ### Changelog **New** - Adds support for dynamic imports - Utliizes dynamic imports to lazy load left nav and megamenu scripts that are only necessary when the user expands the menu. - Only renders left nav custom elements when we're at the mobile break - Only renders megamenu custom elements when user expands the menu * fix(lightbox-video-player): set heading for modal title (#10178) ### Related Ticket(s) [Link List]: QA: Text looks prominent like heading but there is no heading tag #9866 ### Description Set modal title in `lightbox-video-player` to `h2` as suggested for accessibility purposes and aligns with what was done in `lightbox-media-viewer`: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/lightbox-media-viewer/lightbox-media-viewer.ts#L44 <img width="1482" alt="Screen Shot 2023-02-28 at 12 10 51 PM" src="https://user-images.githubusercontent.com/54281166/221926738-713b47e0-7234-494f-9e99-6e7350e7e79c.png"> ### Changelog **New** - wrap title of `lightbox-video-player` in `h2` <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(lerna): update lerna version in lerna.json (#10180) ### Description Fixes version number in `lerna.json`. ### Changelog **New** - {{new thing}} **Changed** - update version to match installed `lerna` version **Removed** - {{removed thing}} <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * feat(carousel): update buttons to tertiary (#10140) ### Related Ticket(s) #10021 ### Description Update buttons for carousel to use tertiary buttons instead <img width="692" alt="Screen Shot 2023-02-24 at 8 06 38 AM" src="https://user-images.githubusercontent.com/20210594/221212673-7cfe6b94-960d-40cb-b66b-45c442c9b356.png"> ### Changelog **Changed** - secondary -> tertiary <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(feature-card): applied color change upon hover (#10081) ### Related Ticket(s) #10060 ### Description Applies the different hover color to the Feature card large ### Changelog **New** - feature card large will now has `$inverse-color-ui` displaying upon hover <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(link-with-icon): force hover underline under (#10172) ### Related Ticket(s) #10069 ### Description Seems like from this change: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/6812 the hover styles got effected. This forces the hover text underline position to be under <img width="402" alt="Screen Shot 2023-02-27 at 2 59 33 PM" src="https://user-images.githubusercontent.com/20210594/221695932-9ad2df2c-38df-4615-a693-ab31963a6675.png"> <img width="244" alt="Screen Shot 2023-02-27 at 2 59 55 PM" src="https://user-images.githubusercontent.com/20210594/221695935-67a34b60-e7b9-47b5-91c6-b131a486bc55.png"> ### Changelog **New** - text-underline-position: under for hover styles <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(search-with-typeahead): add search region for accessibility (#10173) ### Related Ticket(s) [Lead Space Search]: QA: Search edit combo and the clear button is not defined within in a search region #9861 ### Description Add "search" role to the `search-with-typeahead` form component ### Changelog **New** - add search `role` to `form` component of `search-with-typeahead` <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(card-pictogram): remove motion with no copy (#10183) ### Related Ticket(s) #10071 ### Description Using pictogram with card without copy sometimes still shows the motion of the heading/copy ### Changelog **Changed** - update the `handleSlotChange` - the previous version would sometimes not get the right contents from the slot, but this ensures it looks if a copy exists <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(leadspace-block): adjust heading level for leadspace-block story (#10177) ### Related Ticket(s) [Lead Space Block]: QA: Heading level is not in an hierarchical order #9858 ### Description Heading levels are not in order for the Leadspace Block story, currently it is from H1, H2, H4 instead of H1, H2, H3 This PR sets the `aria-level` for the `link-list-heading` so the headings are in hierarchical order instead. Currently by default, the `aria-level` for `link-list-heading` is set to 4. <img width="1237" alt="Screen Shot 2023-02-28 at 11 44 39 AM" src="https://user-images.githubusercontent.com/54281166/221920843-7af9b0e2-a91c-4502-a89d-3121fa976a10.png"> ### Changelog **Changed** - set `aria-level` to `3` for `link-list-heading` in the story <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * Update welcome-story.mdx with `@carbon/web-components` (#10185) ### Description Update welcome-story.mdx with `@carbon/web-components` * chore(e2e): fixes `e2e-integration` tests (#10186) ### Description This fixes the `e2e-integration` GH actions that are failing for `react` and `web-components`. With the upgrade to Yarn v3, building the Codesandbox examples needed for e2e tests becomes problematic as they have not been upgraded. The simplest solution is to switch back to an older version of Yarn for the test builds only. ### Changelog **New** - Use `execa` for `web-components` build process. Now that `vendor/@carbon/web-components` are bundled with `ibmdotcom-web-components`, the packed file is huge. This exceeds the `maxBuffer` limit in `execSync`, while `execa` has no such issue. **Changed** - update `dotcom-shell` and `masthead` e2e tests **Removed** - {{removed thing}} <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(leadspace-search): clear button (#10176) ### Related Ticket(s) [Lead Space Search]: QA:Brief description: Label of the button should be defined as "clear input" rather than "close" #9860 ### Description Change the default value of the `close-search-button-assistive-text` attribute to "Clear input" instead as it is more descriptive and clearer to user in the case of the search with typeahead ### Changelog **Changed** - Change the default value of the `close-search-button-assistive-text` attribute to "Clear input" - edit selector to use `part='close-button'` instead of `aria-label` since the aria-label is an attribute that can change values <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(deps): update dependency @carbon/pictograms-react to v11.40.0 (#10192) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@carbon/pictograms-react](https://togithub.com/carbon-design-system/carbon) | [`11.39.0` -> `11.40.0`](https://renovatebot.com/diffs/npm/@carbon%2fpictograms-react/11.39.0/11.40.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v11.40.0`](https://togithub.com/carbon-design-system/carbon/compare/6234f2b1304e340345fff3935342f80a1e36e08e...07168bf0272678a04c92cd1e700ac60e66355a95) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/6234f2b1304e340345fff3935342f80a1e36e08e...07168bf0272678a04c92cd1e700ac60e66355a95) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNTQuNiIsInVwZGF0ZWRJblZlciI6IjM0LjE1NC42In0=--> * chore(deps): update dependency @carbon/icon-helpers to v10.39.0 (#10191) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@carbon/icon-helpers](https://togithub.com/carbon-design-system/carbon) | [`10.38.0` -> `10.39.0`](https://renovatebot.com/diffs/npm/@carbon%2ficon-helpers/10.38.0/10.39.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v10.39.0`](https://togithub.com/carbon-design-system/carbon/releases/tag/v10.39.0) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/v10.38.0...v10.39.0) #### `[email protected]` ##### New features :rocket: - feat(eslint): add eslint-testing-library-plugin; add config ([#​9103](https://togithub.com/carbon-design-system/carbon/issues/9103)) ([`6d71d2275`](https://togithub.com/carbon-design-system/carbon/commit/6d71d2275)) - feat(eslint): add eslint-plugin-jest ([#​9077](https://togithub.com/carbon-design-system/carbon/issues/9077)) ([`74851abbe`](https://togithub.com/carbon-design-system/carbon/commit/74851abbe)) ##### Housekeeping :house: - chore(release): v10.39.0 ([#​9146](https://togithub.com/carbon-design-system/carbon/issues/9146)) ([`a1897ff62`](https://togithub.com/carbon-design-system/carbon/commit/a1897ff62)) - chore(release): v10.39.0-rc.0 ([#​9127](https://togithub.com/carbon-design-system/carbon/issues/9127)) ([`49e427c77`](https://togithub.com/carbon-design-system/carbon/commit/49e427c77)) #### `@carbon/[email protected]` ##### Housekeeping :house: - chore(project): update babel to 7.14.6 ([#​9143](https://togithub.com/carbon-design-system/carbon/issues/9143)) ([`6e099d6d1`](https://togithub.com/carbon-design-system/carbon/commit/6e099d6d1)) #### `@carbon/[email protected]` ##### New features :rocket: - feat(colors): add hover colors to `@carbon/colors` ([#​8942](https://togithub.com/carbon-design-system/carbon/issues/8942)) ([`df64f1c9f`](https://togithub.com/carbon-design-system/carbon/commit/df64f1c9f)) ##### Housekeeping :house: - chore(release): v10.39.0 ([#​9146](https://togithub.com/carbon-design-system/carbon/issues/9146)) ([`a1897ff62`](https://togithub.com/carbon-design-system/carbon/commit/a1897ff62)) - chore(release): v10.39.0-rc.0 ([#​9127](https://togithub.com/carbon-design-system/carbon/issues/9127)) ([`49e427c77`](https://togithub.com/carbon-design-system/carbon/commit/49e427c77)) - chore(project): sync generated files ([`6d0fb6e46`](https://togithub.com/carbon-design-system/carbon/commit/6d0fb6e46)) #### `[email protected]` ##### New features :rocket: - feat(FilterableMultiselect): add direction prop ([#​9120](https://togithub.com/carbon-design-system/carbon/issues/9120)) ([`660acdc8a`](https://togithub.com/carbon-design-system/carbon/commit/660acdc8a)) - feat(number-input): match readonly variant ([#​8992](https://togithub.com/carbon-design-system/carbon/issues/8992)) ([`d0bd8eddb`](https://togithub.com/carbon-design-system/carbon/commit/d0bd8eddb)) ##### Bug fixes :bug: - fix(components): add missing g80 theme notification layer tokens [#​9106…
kennylam
added a commit
to kennylam/carbon-for-ibm-dotcom
that referenced
this pull request
Jun 11, 2024
…#10679) * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] * chore(cwc): generate cwc internal vendor package (#9953) ### Related Ticket(s) [carbon-web-components]: updating build scripts to use internal vendor packages #9763 ### Description This PR adds the the gulp tasks to build cwc to the internal vendor folder and changes the paths in web-components to reference the internal files instead. ### Changelog **New** - add to the gulp tasks in `web-components` to build out the `carbon-web-components` internal vendor package **Changed** - change paths to reference the internal `carbon-web-components` vendor files instead <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(issue-template): add cwc option (#9967) * fix(styles): downgrade sass version as there is an issue with @extend (#9973) ### Related Ticket(s) {{Provide url(s) to the related ticket(s) that this pull request addresses}} ### Description There seems to be an issue with `@extend` in the recent upgrade of `sass`. Downgrading `sass` version until there is fix ### Changelog **Changed** - downgrade sass back to `~1.40.0` **Removed** - band-aid fixes that should be resolved with the `sass` downgrade <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(changelog): incorporate cwc into change log task (#9975) * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] * fix(tabs-extended-media): safari hover (#9974) ### Related Ticket(s) #9963 ### Description Safari causing tabs extended media to resize on hover ### Changelog **New** - added `width: 100%` to keep from tabs-extended-media changing size on hover <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(platform): add indexing file for `carbon-web-components` (#9960) ### Description Index the `carbon-web-components` package with Carbon Platform. @francinelucca For `externalDocsUrl` and `usage`/`style`/`a11y` paths, I've kept the links pointing to Carbon React documentation. Since `carbon-web-components` should (eventually) mirror the React components, I think it's a good idea to treat those as the canonical docs? Let me know what you think. Also please let me know if there is anything missing, for instance icons. Not sure where those should be added and if we even have one we should be using. ### Changelog **New** - `carbon.yml` index file for `carbon-web-components` package <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(cloud-masthead): address various visual bugs (#9927) ### Related Ticket(s) https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9926 https://jsw.ibm.com/browse/ADCMS-2742 ### Description Minor CSS changes were necessary to address all four issues as laid out nicely in the issue / ticket. ### Changelog **Changed** - fix arrow color on cloud masthead category header - fix unintended vertical scroll bar in the cloud masthead - fix hover color of the mega menu category link description - fix focus styles on top nav link <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(leadspace): adjust left position of leadspace to cover Safari gap (#9903) ### Related Ticket(s) Closes: [#9896](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9896) [ADCMS-2853](https://jsw.ibm.com/browse/ADCMS-2853) ### Description This implements a workaround to cover off the Safari edge case bug with the Leadspace component. Nudging the svg gradient by -1px, and covering that adjustment to the right edge with `calc`. ### Testing instructions - [ ] Open the Leadspace component in Storybook in Safari. Zoom in and out with browser controls. - [ ] You should no longer exhibit the issue of the gradient peeking out from the background as noted in the issue, and represented here for reference: <img width="1440" alt="211601432-e4f67595-ee7f-4a6f-b3cd-ee8384cc1767" src="https://user-images.githubusercontent.com/191049/217071951-d310dfb4-d601-4e55-ad35-099b457625c1.png"> - [ ] Review in Chrome / Firefox, should be no regressions - [ ] Test the "Lead space > Centered *" stories to ensure no regressions have appeared there either. ### Changelog **Changed** - Adjusted SVG leadspace gradient position to cover an edge case bug in Safari * fix(table-of-contents): adjustment to z-index on table of contents styles (#9957) ### Related Ticket(s) Resolves https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9949 Jira: https://jsw.ibm.com/browse/ADCMS-2594 Jira: https://jsw.ibm.com/browse/ADCMS-2829 Jira: https://jsw.ibm.com/browse/ADCMS-2488 ### Description Bumps the `z-index` on the Table of contents (TOC) so that the mobile view rises above components like carousel's and accordions that declare a modest `z-index`. To test, make use of the Web Components Code Sandbox Examples e2e testing environment that was built for this PR: https://webcomponents-codesandbox.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/9957/index.html Switch to a mobile breakpoint where the TOC becomes sticky on scroll. Verify that the TOC remains above both the accordion (https://jsw.ibm.com/browse/ADCMS-2594) and the carousel (https://jsw.ibm.com/browse/ADCMS-2829). ### Changelog **Changed** - Bump `z-index` in the TOC styles. * fix(tag-group): ensuring tags can be gray (#9972) ### Related Ticket(s) #9890 ### Description Ensured that the carbon tag can be gray when used within Tag Group. ### Changelog **Removed** - removed tag group condition that would change a tag color to green if gray was chosen <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(deps): upgrade lerna to v6 (#9938) ### Description Upgrades `lerna` to latest. ### Changelog **Changed** - upgrade `lerna` to `v6.4.1` <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(settings): update settings to v1.44.0 * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] * chore(deps): update dependency magic-string to ^0.29.0 (#10036) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [magic-string](https://togithub.com/rich-harris/magic-string) | [`^0.27.0` -> `^0.29.0`](https://renovatebot.com/diffs/npm/magic-string/0.27.0/0.29.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>rich-harris/magic-string</summary> ### [`v0.29.0`](https://togithub.com/rich-harris/magic-string/blob/HEAD/CHANGELOG.md#​0290-httpsgithubcomrich-harrismagic-stringcomparev0280v0290-2023-02-11) [Compare Source](https://togithub.com/rich-harris/magic-string/compare/v0.28.0...v0.29.0) ##### Features - **x_google_ignoreList:** initial support for ignore lists ([3c711cd](https://togithub.com/rich-harris/magic-string/commit/3c711cd56de6c9735f92e41e457353005c2c0d1c)) ### [`v0.28.0`](https://togithub.com/rich-harris/magic-string/blob/HEAD/CHANGELOG.md#​0280-httpsgithubcomrich-harrismagic-stringcomparev0270v0280-2023-02-11) [Compare Source](https://togithub.com/rich-harris/magic-string/compare/v0.27.0...v0.28.0) ##### Bug Fixes - **typings:** sourcesContent may contain null ([#​235](https://togithub.com/rich-harris/magic-string/issues/235)) ([c2b652a](https://togithub.com/rich-harris/magic-string/commit/c2b652a0d353f183ca991d0b59a7ad0250a52735)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xMzAuMSIsInVwZGF0ZWRJblZlciI6IjM0LjEzMC4xIn0=--> * chore(deps): update dependency karma-sourcemap-loader to ^0.4.0 (#10034) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [karma-sourcemap-loader](https://togithub.com/demerzel3/karma-sourcemap-loader) | [`^0.3.0` -> `^0.4.0`](https://renovatebot.com/diffs/npm/karma-sourcemap-loader/0.3.8/0.4.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>demerzel3/karma-sourcemap-loader</summary> ### [`v0.4.0`](https://togithub.com/demerzel3/karma-sourcemap-loader/blob/HEAD/CHANGELOG.md#​040---2022-02-05) [Compare Source](https://togithub.com/demerzel3/karma-sourcemap-loader/compare/da0051d19137f682cc99ef9ff95c83aebd599703...0.4.0) ##### Added - Allow remapping or otherwise changing source paths in source maps - Allow changing `sourceRoot` in source maps - Allow adapting the source map files alone, if served separately by the Karma web server - Add option `onlyWithURL` to disable the source map loading for files without `sourceMappingURL` - Add option `strict` for a strict error handling of invalid and/or missing source maps ##### Fixed - Fix handling of raw (URI-encoded) source maps - trim the leading , before parsing the content - Warn about a missing external source map, is the source mapping URL is invalid - Handle malformed source map content as a warning or failure </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xMjQuMiIsInVwZGF0ZWRJblZlciI6IjM0LjEyNC4yIn0=--> * fix(deps): update dependency isomorphic-dompurify to v0.27.0 (#10035) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [isomorphic-dompurify](https://togithub.com/kkomelin/isomorphic-dompurify) | [`0.26.0` -> `0.27.0`](https://renovatebot.com/diffs/npm/isomorphic-dompurify/0.26.0/0.27.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>kkomelin/isomorphic-dompurify</summary> ### [`v0.27.0`](https://togithub.com/kkomelin/isomorphic-dompurify/releases/tag/v0.27.0): Updated dependencies [Compare Source](https://togithub.com/kkomelin/isomorphic-dompurify/compare/v0.26.0...v0.27.0) ##### Changelog - \[x] Updated `jsdom` and other dependencies. See the [changes](https://togithub.com/kkomelin/isomorphic-dompurify/pulls?q=is%3Apr+is%3Aclosed) for more details. ##### Release [0.27.0](https://www.npmjs.com/package/isomorphic-dompurify/v/0.27.0) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xMzAuMSIsInVwZGF0ZWRJblZlciI6IjM0LjEzMC4xIn0=--> * docs: remove themeselector from live demo (#10028) ### Related Ticket(s) Closes https://github.com/carbon-design-system/carbon-platform/issues/1592 ### Description ### Changelog **Removed** - remove themeSelector from live demo components <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * Carbon Platform: Index get started content for carbon web components (#10048) * fix(button): add button print styles (#10055) ### Related Ticket(s) N/A ### Description Button-group has specific print styles and in expressive-modal it just uses `button-expressive` causing it to add a `:` without also having the print styles for button-expressive <img width="1422" alt="Screen Shot 2023-02-16 at 8 37 04 AM" src="https://user-images.githubusercontent.com/20210594/219413780-2c1c6026-525b-4601-bbec-07c5a02f750f.png"> after: <img width="1222" alt="Screen Shot 2023-02-16 at 8 41 12 AM" src="https://user-images.githubusercontent.com/20210594/219414911-3247a3cf-88e4-48e8-8add-e4ad19f7bcd4.png"> ### Changelog **Changed** - moved DDSButtonExpressive print styles out of button-group and into button <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(readme): update with storybook demo links (#10054) ### Related Ticket(s) {{Provide url(s) to the related ticket(s) that this pull request addresses}} ### Description opening new PR for "docs(README): add storybook links #9409" ### Changelog **New** - {{new thing}} **Changed** - {{changed thing}} **Removed** - {{removed thing}} <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * docs(readme): add discord link to readme (#10046) Hey there! Just a small PR to add a link to discord in the readme. I'm opening PRs suggesting we do this for all the top repos in the carbon-design-system org. * fix(clean): clean vendor src base dir from web-components package (#10038) ### Related Ticket(s) Resolves https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10037 ### Description Cleans up the artifacts produced during `yarn build` within `packages/web-components/internal/vendor` to avoid build errors associated with these artifacts encountered during `yarn build` when switching between major feature branches (`main` and `feat/masthead-v2.1`). ### Changelog **Changed** - `yarn clean` updated for the web-components package to clean up the vendor src dir artifact produced during build. * chore(deps): update dependency @carbon/pictograms-react to v11.39.0 (#10063) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@carbon/pictograms-react](https://togithub.com/carbon-design-system/carbon) | [`11.38.0` -> `11.39.0`](https://renovatebot.com/diffs/npm/@carbon%2fpictograms-react/11.38.0/11.39.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v11.39.0`](https://togithub.com/carbon-design-system/carbon/compare/36b2a3b42be5bebb706861030d1ec4a21ae47c5f...6234f2b1304e340345fff3935342f80a1e36e08e) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/36b2a3b42be5bebb706861030d1ec4a21ae47c5f...6234f2b1304e340345fff3935342f80a1e36e08e) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNDMuMSIsInVwZGF0ZWRJblZlciI6IjM0LjE0My4xIn0=--> * fix(deps): update dependency carbon-components to v10.58.6 (#10062) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [carbon-components](https://www.carbondesignsystem.com/) ([source](https://togithub.com/carbon-design-system/carbon)) | [`10.58.5` -> `10.58.6`](https://renovatebot.com/diffs/npm/carbon-components/10.58.5/10.58.6) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v10.58.6`](https://togithub.com/carbon-design-system/carbon/compare/f194dfb8beb09cf2ad62b521c65fddf3a439069b...7fce6306004230995ac5dd63dc85c200d4076f49) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/f194dfb8beb09cf2ad62b521c65fddf3a439069b...7fce6306004230995ac5dd63dc85c200d4076f49) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNDMuMSIsInVwZGF0ZWRJblZlciI6IjM0LjE0My4xIn0=--> * chore(deps): update dependency carbon-components-react to v7.59.6 (#10061) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [carbon-components-react](https://togithub.com/carbon-design-system/carbon) | [`7.59.5` -> `7.59.6`](https://renovatebot.com/diffs/npm/carbon-components-react/7.59.5/7.59.6) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v7.59.6`](https://togithub.com/carbon-design-system/carbon/compare/f194dfb8beb09cf2ad62b521c65fddf3a439069b...7fce6306004230995ac5dd63dc85c200d4076f49) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/f194dfb8beb09cf2ad62b521c65fddf3a439069b...7fce6306004230995ac5dd63dc85c200d4076f49) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNDMuMSIsInVwZGF0ZWRJblZlciI6IjM0LjE0My4xIn0=--> * chore(project): upgrade yarn to v3 (#9948) ### Description Upgrade to use latest version of Yarn. ### Changelog **New** - `cache` dir for zero-install **Changed** - upgrade Yarn to 3.3.1 - update package build scripts **Removed** - Yarn's offline-mirror folder <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(documentation): update content-section docs tab with content block simple (#10067) ### Related Ticket(s) [Content section]: width of block component isn't defined by columns, causing containing media width to shrink unexpectedly #10049 ### Description `content-section` needs to be passed in grid classes when using `content-block-simple` as its child. Updating the Storybook docs tab to include this for both React Wrapper and Web Components. ### Changelog **New** - add `content-block-simple` to Storybook docs with note to include grid classes - add code examples for `content-block-simple`, `card-group`, `carousel`, and `link-list` to `content-section`'s React Wrapper docs **Changed** - update the React wrapper story to properly render the `link-list` child and include the grid class when using `content-block-simple <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(logo-grid): cta styles (#10065) ### Related Ticket(s) #10051 ### Description Logo-grid update styles so cta appears in the correct place <img width="955" alt="Screen Shot 2023-02-20 at 9 19 22 AM" src="https://user-images.githubusercontent.com/20210594/220157243-05c49d33-b335-428a-ab9f-0f6c1601972d.png"> ### Changelog **New** - block styles for the body - <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(lightbox-carousel): accessibility & QA improvements to lightbox carousels (#9149) ## Related Ticket(s) Closes: #8911 #8913 #8915 Also related: #8912 #8914 ## Description This PR makes several accessibility improvements to the DDSCarousel and DDSLightboxMediaViewer components, as well as the lightbox carousel story ### #8911 Update Lightbox to use semantic headings ✅ Lightbox titles now render title text within `<h2 style="all: inherit;">` tags. This gives them semantic `h2` headers but does not bring along the user agent/carbon styles for the element. ### #8912 Add label for modal dialog ✅ While elements with `[role="dialog"]` are required to have a label for WCAG, that label should be relevant to the content within the dialog. Because the component cannot know what content (or even what language) is in it, all we can do is make space for content entry. This already exists within the component in the form of an `aria-labelledby` attribute pointing to [a div that accepts slotted content](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/expressive-modal/expressive-modal.ts#L358). This PR adds a visually hidden modal title to the lightbox carousel story ### #8913 Announce carousel navigation to screen reader ✅ The carousel's `renderStatus()` method now renders a visually-hidden span with `aria-live="polite"` and uses a new `formatAnnouncement` property function to format that announcement into a string that accounts for single slides or slide groups. This property is written adjacent to the `formatStatus` property that allows localizing the pagination information. ### #8914 Create new landmark region for carousels ✅ _~No changes were made for this ticket.~_ ~8914 suggests, "to provide more context to the screen reader user, the carousel which includes the slides and the Carousel controls could be given in a labelled landmark region." While this would be good, wouldn't adding a landmark region require a label that describes _what is in_ the carousel, not just that it _is_ a carousel? It would not be difficult to add a fallback label if this is not the case.~ The carousel now has an additional `<div>` wrapping the scrolling contents and the navigation. This div has `role="region"` and an `aria-labelledby` attribute that points to a new div with a `<slot name="title"><span class="bx--visually-hidden">Carousel</span></slot>`. This allows authors to provide a title relevant to the carousel's contents with the generic fallback label of "carousel" ### #8915 Update carousel's next/previous button labels ✅ The carousel allows authors to specify the labels of the previous & next buttons, but we also provide a default. Previously this value was "next page", but the word `page` can be confusing. We now provide a default fallback that looks at the carousel's `pageSize` and returns either "next slide" or "next slide group" if more than one slide is visible. ### [No Ticket] Refactor carousel item's interactivity based on inert When the `[inert]` attribute was added to the carousel, it was added in a way that wasn't implemented fully in safari/firefox, and didn't account for carousels with multiple visible values well. That's been updated to now use an intersection observer, and it will mark carousel items more less than 75% visible as `inert` and `aria-hidden`. ### Changelog **Changed** - Accessibility improvements to lightbox media viewer component - Accessibility improvements to lightbox carousel story - Accessibility improvements to carousel component * chore(deps): update yarn to v3.4.1 (#10163) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [yarn](https://togithub.com/yarnpkg/berry) | [`3.3.1` -> `3.4.1`](https://renovatebot.com/diffs/npm/yarn/3.3.1/3.4.1) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>yarnpkg/berry</summary> ### [`v3.4.1`](https://togithub.com/yarnpkg/berry/blob/HEAD/CHANGELOG.md#​341) [Compare Source](https://togithub.com/yarnpkg/berry/compare/8ba1a57e0cfdf8bf649d04cff0f18664e5164b33...0d66d6e73acf0303c4461fbb9023b02cb942845f) - Fixes an accidental backport error in `yarn init`. ### [`v3.4.0`](https://togithub.com/yarnpkg/berry/blob/HEAD/CHANGELOG.md#​340) [Compare Source](https://togithub.com/yarnpkg/berry/compare/340e0db330e242946b570d8a08b0a9d97d8d8774...8ba1a57e0cfdf8bf649d04cff0f18664e5164b33) ##### Node.js parity - PnP now supports the Node `--conditions` flag. - PnP now supports the Node `--watch` flag on Node 18 (it previously only supported it on Node 19). ##### Bugfixes - The PnP API module (`pnpapi`) can now be imported from ESM modules. - `ZipFS.prototype.getBufferAndClose` will not error on empty archives resulting from an unlink after write. - Fixes various issues around postinstall script inter-dependencies. - Removes the message prefixes (`YN0000`) from `yarn workspaces foreach`. ##### Compatibility - Updates the PnP compatibility layer for TypeScript v5.0.0-beta. </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNTIuNCIsInVwZGF0ZWRJblZlciI6IjM0LjE1Mi40In0=--> * chore(deps): update dependency magic-string to ^0.30.0 (#10162) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [magic-string](https://togithub.com/rich-harris/magic-string) | [`^0.29.0` -> `^0.30.0`](https://renovatebot.com/diffs/npm/magic-string/0.29.0/0.30.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>rich-harris/magic-string</summary> ### [`v0.30.0`](https://togithub.com/rich-harris/magic-string/blob/HEAD/CHANGELOG.md#​0300-httpsgithubcomrich-harrismagic-stringcomparev0290v0300-2023-02-22) [Compare Source](https://togithub.com/rich-harris/magic-string/compare/v0.29.0...v0.30.0) ##### Bug Fixes - `null` is invalid for `sources` and `file` ([#​242](https://togithub.com/rich-harris/magic-string/issues/242)) ([d4e9c31](https://togithub.com/rich-harris/magic-string/commit/d4e9c31082491cfa177b31ce725c9ce39491d549)) ##### Features - add the ability to ignore-list sources ([#​243](https://togithub.com/rich-harris/magic-string/issues/243)) ([e238f04](https://togithub.com/rich-harris/magic-string/commit/e238f04be31ec9a3e19b18b75bb5d859f9cb2654)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNTIuNCIsInVwZGF0ZWRJblZlciI6IjM0LjE1Mi40In0=--> * fix(leadspace): button sizing and layout for md leadspace (#10030) ### Related Ticket(s) Resolves #9619 Jira ticket: https://jsw.ibm.com/browse/ADCMS-2947 ### Description Adjustments made so that the width of buttons in a leadspace button group follows the largest one. To test: - [ ] Open up the Lead space > Super with Image story - [ ] Adjust one or more button text such that the intrinsic button sizes would be different - [ ] The width of all buttons should match the width of the button with the most content - [ ] View at various breakpoints to ensure there are no regressions - [ ] Open up the Button group > Default component - [ ] View at various breakpoints to ensure there are no regressions ### Changelog **Changed** - Added a wrapper div around leadspace actions - Use `display: grid` across all breakpoints for the leadspace button group <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(date-picker): range mode clearing first value (#10168) ### Related Ticket(s) #10088 ### Description When a user clicked a range of calendar dates the first date would get cleared after clicking the second date. Before:  After:  ### Changelog **Changed** - downgraded flatpick to 4.6.9 ( the issue starts to appear in version 4.6.10) <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] * fix(universal-banner): add banner role (#10179) ### Related Ticket(s) [Universal banner]: QA: Landmark region should be defined for Universal banner #9869 ### Description Set banner `role` for `universal-banner` component for accessibility purposes ### Changelog **Changed** - add banner `role` onto `universal-banner` <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * [Cloud-Masthead]: Implement lazy load and DOM pruning from masthead v2 on cloud masthead (#10085) ### Related Ticket(s) Resolves #10056 ### Description Adds the performance enhancements that were implemented for Masthead v2 to the Cloud Masthead, specifically: * https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/9595 * https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/9602 The first change (quoting @andy-blum [here](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/9595)): Initializes the masthead-container with either the `left-nav` or the `top-nav` depending on the width of the viewport. Additionally swaps one for the other when the viewport crosses the 960px boundary. This should effectively cut the number of masthead nodes in half with very little other changes. The second change (again quoting @andy-blum [here](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/9602)): Currently the Masthead loads both the SideNav and Megamenu components at the same time, even if they haven't been opened yet. This causes the amount of nodes to increase considerably right away. In order to mitigate this, a fast solution is to dynamically load the required components *only* when the user has interacted with the menus. This means that the mobile version wouldn't be loading the Megamenu, and the desktop wouldn't load SideNav until/if required. Another optimization that was done ensures that the Megamenu component wouldn't get loaded into the DOM unless a user has clicked on the menu beforehand. Then and only then, the megamenu would be loaded in. Once the menu is closed, the component gets removed from the DOM to ensure the total node count doesn't shoot up. Note that, due to the structure of the Masthead and Cloud Masthead, these changes are not entirely isolated to the Cloud Masthead alone. Specifically, the Masthead is responsible for mega menu rendering, thus the Masthead implements lazy loading of the megamenu which then is inherited by the Cloud Masthead. ### Testing Testing should cover regression tests on both the Masthead and Cloud Masthead components. ### Changelog **New** - Adds support for dynamic imports - Utliizes dynamic imports to lazy load left nav and megamenu scripts that are only necessary when the user expands the menu. - Only renders left nav custom elements when we're at the mobile break - Only renders megamenu custom elements when user expands the menu * fix(lightbox-video-player): set heading for modal title (#10178) ### Related Ticket(s) [Link List]: QA: Text looks prominent like heading but there is no heading tag #9866 ### Description Set modal title in `lightbox-video-player` to `h2` as suggested for accessibility purposes and aligns with what was done in `lightbox-media-viewer`: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/lightbox-media-viewer/lightbox-media-viewer.ts#L44 <img width="1482" alt="Screen Shot 2023-02-28 at 12 10 51 PM" src="https://user-images.githubusercontent.com/54281166/221926738-713b47e0-7234-494f-9e99-6e7350e7e79c.png"> ### Changelog **New** - wrap title of `lightbox-video-player` in `h2` <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(lerna): update lerna version in lerna.json (#10180) ### Description Fixes version number in `lerna.json`. ### Changelog **New** - {{new thing}} **Changed** - update version to match installed `lerna` version **Removed** - {{removed thing}} <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * feat(carousel): update buttons to tertiary (#10140) ### Related Ticket(s) #10021 ### Description Update buttons for carousel to use tertiary buttons instead <img width="692" alt="Screen Shot 2023-02-24 at 8 06 38 AM" src="https://user-images.githubusercontent.com/20210594/221212673-7cfe6b94-960d-40cb-b66b-45c442c9b356.png"> ### Changelog **Changed** - secondary -> tertiary <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(feature-card): applied color change upon hover (#10081) ### Related Ticket(s) #10060 ### Description Applies the different hover color to the Feature card large ### Changelog **New** - feature card large will now has `$inverse-color-ui` displaying upon hover <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(link-with-icon): force hover underline under (#10172) ### Related Ticket(s) #10069 ### Description Seems like from this change: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/6812 the hover styles got effected. This forces the hover text underline position to be under <img width="402" alt="Screen Shot 2023-02-27 at 2 59 33 PM" src="https://user-images.githubusercontent.com/20210594/221695932-9ad2df2c-38df-4615-a693-ab31963a6675.png"> <img width="244" alt="Screen Shot 2023-02-27 at 2 59 55 PM" src="https://user-images.githubusercontent.com/20210594/221695935-67a34b60-e7b9-47b5-91c6-b131a486bc55.png"> ### Changelog **New** - text-underline-position: under for hover styles <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(search-with-typeahead): add search region for accessibility (#10173) ### Related Ticket(s) [Lead Space Search]: QA: Search edit combo and the clear button is not defined within in a search region #9861 ### Description Add "search" role to the `search-with-typeahead` form component ### Changelog **New** - add search `role` to `form` component of `search-with-typeahead` <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(card-pictogram): remove motion with no copy (#10183) ### Related Ticket(s) #10071 ### Description Using pictogram with card without copy sometimes still shows the motion of the heading/copy ### Changelog **Changed** - update the `handleSlotChange` - the previous version would sometimes not get the right contents from the slot, but this ensures it looks if a copy exists <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(leadspace-block): adjust heading level for leadspace-block story (#10177) ### Related Ticket(s) [Lead Space Block]: QA: Heading level is not in an hierarchical order #9858 ### Description Heading levels are not in order for the Leadspace Block story, currently it is from H1, H2, H4 instead of H1, H2, H3 This PR sets the `aria-level` for the `link-list-heading` so the headings are in hierarchical order instead. Currently by default, the `aria-level` for `link-list-heading` is set to 4. <img width="1237" alt="Screen Shot 2023-02-28 at 11 44 39 AM" src="https://user-images.githubusercontent.com/54281166/221920843-7af9b0e2-a91c-4502-a89d-3121fa976a10.png"> ### Changelog **Changed** - set `aria-level` to `3` for `link-list-heading` in the story <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * Update welcome-story.mdx with `@carbon/web-components` (#10185) ### Description Update welcome-story.mdx with `@carbon/web-components` * chore(e2e): fixes `e2e-integration` tests (#10186) ### Description This fixes the `e2e-integration` GH actions that are failing for `react` and `web-components`. With the upgrade to Yarn v3, building the Codesandbox examples needed for e2e tests becomes problematic as they have not been upgraded. The simplest solution is to switch back to an older version of Yarn for the test builds only. ### Changelog **New** - Use `execa` for `web-components` build process. Now that `vendor/@carbon/web-components` are bundled with `ibmdotcom-web-components`, the packed file is huge. This exceeds the `maxBuffer` limit in `execSync`, while `execa` has no such issue. **Changed** - update `dotcom-shell` and `masthead` e2e tests **Removed** - {{removed thing}} <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(leadspace-search): clear button (#10176) ### Related Ticket(s) [Lead Space Search]: QA:Brief description: Label of the button should be defined as "clear input" rather than "close" #9860 ### Description Change the default value of the `close-search-button-assistive-text` attribute to "Clear input" instead as it is more descriptive and clearer to user in the case of the search with typeahead ### Changelog **Changed** - Change the default value of the `close-search-button-assistive-text` attribute to "Clear input" - edit selector to use `part='close-button'` instead of `aria-label` since the aria-label is an attribute that can change values <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(deps): update dependency @carbon/pictograms-react to v11.40.0 (#10192) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@carbon/pictograms-react](https://togithub.com/carbon-design-system/carbon) | [`11.39.0` -> `11.40.0`](https://renovatebot.com/diffs/npm/@carbon%2fpictograms-react/11.39.0/11.40.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v11.40.0`](https://togithub.com/carbon-design-system/carbon/compare/6234f2b1304e340345fff3935342f80a1e36e08e...07168bf0272678a04c92cd1e700ac60e66355a95) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/6234f2b1304e340345fff3935342f80a1e36e08e...07168bf0272678a04c92cd1e700ac60e66355a95) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNTQuNiIsInVwZGF0ZWRJblZlciI6IjM0LjE1NC42In0=--> * chore(deps): update dependency @carbon/icon-helpers to v10.39.0 (#10191) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@carbon/icon-helpers](https://togithub.com/carbon-design-system/carbon) | [`10.38.0` -> `10.39.0`](https://renovatebot.com/diffs/npm/@carbon%2ficon-helpers/10.38.0/10.39.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v10.39.0`](https://togithub.com/carbon-design-system/carbon/releases/tag/v10.39.0) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/v10.38.0...v10.39.0) #### `[email protected]` ##### New features :rocket: - feat(eslint): add eslint-testing-library-plugin; add config ([#​9103](https://togithub.com/carbon-design-system/carbon/issues/9103)) ([`6d71d2275`](https://togithub.com/carbon-design-system/carbon/commit/6d71d2275)) - feat(eslint): add eslint-plugin-jest ([#​9077](https://togithub.com/carbon-design-system/carbon/issues/9077)) ([`74851abbe`](https://togithub.com/carbon-design-system/carbon/commit/74851abbe)) ##### Housekeeping :house: - chore(release): v10.39.0 ([#​9146](https://togithub.com/carbon-design-system/carbon/issues/9146)) ([`a1897ff62`](https://togithub.com/carbon-design-system/carbon/commit/a1897ff62)) - chore(release): v10.39.0-rc.0 ([#​9127](https://togithub.com/carbon-design-system/carbon/issues/9127)) ([`49e427c77`](https://togithub.com/carbon-design-system/carbon/commit/49e427c77)) #### `@carbon/[email protected]` ##### Housekeeping :house: - chore(project): update babel to 7.14.6 ([#​9143](https://togithub.com/carbon-design-system/carbon/issues/9143)) ([`6e099d6d1`](https://togithub.com/carbon-design-system/carbon/commit/6e099d6d1)) #### `@carbon/[email protected]` ##### New features :rocket: - feat(colors): add hover colors to `@carbon/colors` ([#​8942](https://togithub.com/carbon-design-system/carbon/issues/8942)) ([`df64f1c9f`](https://togithub.com/carbon-design-system/carbon/commit/df64f1c9f)) ##### Housekeeping :house: - chore(release): v10.39.0 ([#​9146](https://togithub.com/carbon-design-system/carbon/issues/9146)) ([`a1897ff62`](https://togithub.com/carbon-design-system/carbon/commit/a1897ff62)) - chore(release): v10.39.0-rc.0 ([#​9127](https://togithub.com/carbon-design-system/carbon/issues/9127)) ([`49e427c77`](https://togithub.com/carbon-design-system/carbon/commit/49e427c77)) - chore(project): sync generated files ([`6d0fb6e46`](https://togithub.com/carbon-design-system/carbon/commit/6d0fb6e46)) #### `[email protected]` ##### New features :rocket: - feat(FilterableMultiselect): add direction prop ([#​9120](https://togithub.com/carbon-design-system/carbon/issues/9120)) ([`660acdc8a`](https://togithub.com/carbon-design-system/carbon/commit/660acdc8a)) - feat(number-input): match readonly variant ([#​8992](https://togithub.com/carbon-design-system/carbon/issues/8992)) ([`d0bd8eddb`](https://togithub.com/carbon-design-system/carbon/commit/d0bd8eddb)) ##### Bug fixes :bug: - fix(components): add missing g80 theme notification layer tokens [#​9106…
kennylam
added a commit
to kennylam/carbon
that referenced
this pull request
Jul 30, 2024
…#10679) * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] * chore(cwc): generate cwc internal vendor package (#9953) ### Related Ticket(s) [carbon-web-components]: updating build scripts to use internal vendor packages #9763 ### Description This PR adds the the gulp tasks to build cwc to the internal vendor folder and changes the paths in web-components to reference the internal files instead. ### Changelog **New** - add to the gulp tasks in `web-components` to build out the `carbon-web-components` internal vendor package **Changed** - change paths to reference the internal `carbon-web-components` vendor files instead <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(issue-template): add cwc option (#9967) * fix(styles): downgrade sass version as there is an issue with @extend (#9973) ### Related Ticket(s) {{Provide url(s) to the related ticket(s) that this pull request addresses}} ### Description There seems to be an issue with `@extend` in the recent upgrade of `sass`. Downgrading `sass` version until there is fix ### Changelog **Changed** - downgrade sass back to `~1.40.0` **Removed** - band-aid fixes that should be resolved with the `sass` downgrade <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(changelog): incorporate cwc into change log task (#9975) * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] * fix(tabs-extended-media): safari hover (#9974) ### Related Ticket(s) #9963 ### Description Safari causing tabs extended media to resize on hover ### Changelog **New** - added `width: 100%` to keep from tabs-extended-media changing size on hover <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(platform): add indexing file for `carbon-web-components` (#9960) ### Description Index the `carbon-web-components` package with Carbon Platform. @francinelucca For `externalDocsUrl` and `usage`/`style`/`a11y` paths, I've kept the links pointing to Carbon React documentation. Since `carbon-web-components` should (eventually) mirror the React components, I think it's a good idea to treat those as the canonical docs? Let me know what you think. Also please let me know if there is anything missing, for instance icons. Not sure where those should be added and if we even have one we should be using. ### Changelog **New** - `carbon.yml` index file for `carbon-web-components` package <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(cloud-masthead): address various visual bugs (#9927) ### Related Ticket(s) https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9926 https://jsw.ibm.com/browse/ADCMS-2742 ### Description Minor CSS changes were necessary to address all four issues as laid out nicely in the issue / ticket. ### Changelog **Changed** - fix arrow color on cloud masthead category header - fix unintended vertical scroll bar in the cloud masthead - fix hover color of the mega menu category link description - fix focus styles on top nav link <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(leadspace): adjust left position of leadspace to cover Safari gap (#9903) ### Related Ticket(s) Closes: [#9896](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9896) [ADCMS-2853](https://jsw.ibm.com/browse/ADCMS-2853) ### Description This implements a workaround to cover off the Safari edge case bug with the Leadspace component. Nudging the svg gradient by -1px, and covering that adjustment to the right edge with `calc`. ### Testing instructions - [ ] Open the Leadspace component in Storybook in Safari. Zoom in and out with browser controls. - [ ] You should no longer exhibit the issue of the gradient peeking out from the background as noted in the issue, and represented here for reference: <img width="1440" alt="211601432-e4f67595-ee7f-4a6f-b3cd-ee8384cc1767" src="https://user-images.githubusercontent.com/191049/217071951-d310dfb4-d601-4e55-ad35-099b457625c1.png"> - [ ] Review in Chrome / Firefox, should be no regressions - [ ] Test the "Lead space > Centered *" stories to ensure no regressions have appeared there either. ### Changelog **Changed** - Adjusted SVG leadspace gradient position to cover an edge case bug in Safari * fix(table-of-contents): adjustment to z-index on table of contents styles (#9957) ### Related Ticket(s) Resolves https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9949 Jira: https://jsw.ibm.com/browse/ADCMS-2594 Jira: https://jsw.ibm.com/browse/ADCMS-2829 Jira: https://jsw.ibm.com/browse/ADCMS-2488 ### Description Bumps the `z-index` on the Table of contents (TOC) so that the mobile view rises above components like carousel's and accordions that declare a modest `z-index`. To test, make use of the Web Components Code Sandbox Examples e2e testing environment that was built for this PR: https://webcomponents-codesandbox.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/9957/index.html Switch to a mobile breakpoint where the TOC becomes sticky on scroll. Verify that the TOC remains above both the accordion (https://jsw.ibm.com/browse/ADCMS-2594) and the carousel (https://jsw.ibm.com/browse/ADCMS-2829). ### Changelog **Changed** - Bump `z-index` in the TOC styles. * fix(tag-group): ensuring tags can be gray (#9972) ### Related Ticket(s) #9890 ### Description Ensured that the carbon tag can be gray when used within Tag Group. ### Changelog **Removed** - removed tag group condition that would change a tag color to green if gray was chosen <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(deps): upgrade lerna to v6 (#9938) ### Description Upgrades `lerna` to latest. ### Changelog **Changed** - upgrade `lerna` to `v6.4.1` <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(settings): update settings to v1.44.0 * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] * chore(deps): update dependency magic-string to ^0.29.0 (#10036) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [magic-string](https://togithub.com/rich-harris/magic-string) | [`^0.27.0` -> `^0.29.0`](https://renovatebot.com/diffs/npm/magic-string/0.27.0/0.29.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>rich-harris/magic-string</summary> ### [`v0.29.0`](https://togithub.com/rich-harris/magic-string/blob/HEAD/CHANGELOG.md#​0290-httpsgithubcomrich-harrismagic-stringcomparev0280v0290-2023-02-11) [Compare Source](https://togithub.com/rich-harris/magic-string/compare/v0.28.0...v0.29.0) ##### Features - **x_google_ignoreList:** initial support for ignore lists ([3c711cd](https://togithub.com/rich-harris/magic-string/commit/3c711cd56de6c9735f92e41e457353005c2c0d1c)) ### [`v0.28.0`](https://togithub.com/rich-harris/magic-string/blob/HEAD/CHANGELOG.md#​0280-httpsgithubcomrich-harrismagic-stringcomparev0270v0280-2023-02-11) [Compare Source](https://togithub.com/rich-harris/magic-string/compare/v0.27.0...v0.28.0) ##### Bug Fixes - **typings:** sourcesContent may contain null ([#​235](https://togithub.com/rich-harris/magic-string/issues/235)) ([c2b652a](https://togithub.com/rich-harris/magic-string/commit/c2b652a0d353f183ca991d0b59a7ad0250a52735)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xMzAuMSIsInVwZGF0ZWRJblZlciI6IjM0LjEzMC4xIn0=--> * chore(deps): update dependency karma-sourcemap-loader to ^0.4.0 (#10034) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [karma-sourcemap-loader](https://togithub.com/demerzel3/karma-sourcemap-loader) | [`^0.3.0` -> `^0.4.0`](https://renovatebot.com/diffs/npm/karma-sourcemap-loader/0.3.8/0.4.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>demerzel3/karma-sourcemap-loader</summary> ### [`v0.4.0`](https://togithub.com/demerzel3/karma-sourcemap-loader/blob/HEAD/CHANGELOG.md#​040---2022-02-05) [Compare Source](https://togithub.com/demerzel3/karma-sourcemap-loader/compare/da0051d19137f682cc99ef9ff95c83aebd599703...0.4.0) ##### Added - Allow remapping or otherwise changing source paths in source maps - Allow changing `sourceRoot` in source maps - Allow adapting the source map files alone, if served separately by the Karma web server - Add option `onlyWithURL` to disable the source map loading for files without `sourceMappingURL` - Add option `strict` for a strict error handling of invalid and/or missing source maps ##### Fixed - Fix handling of raw (URI-encoded) source maps - trim the leading , before parsing the content - Warn about a missing external source map, is the source mapping URL is invalid - Handle malformed source map content as a warning or failure </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xMjQuMiIsInVwZGF0ZWRJblZlciI6IjM0LjEyNC4yIn0=--> * fix(deps): update dependency isomorphic-dompurify to v0.27.0 (#10035) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [isomorphic-dompurify](https://togithub.com/kkomelin/isomorphic-dompurify) | [`0.26.0` -> `0.27.0`](https://renovatebot.com/diffs/npm/isomorphic-dompurify/0.26.0/0.27.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>kkomelin/isomorphic-dompurify</summary> ### [`v0.27.0`](https://togithub.com/kkomelin/isomorphic-dompurify/releases/tag/v0.27.0): Updated dependencies [Compare Source](https://togithub.com/kkomelin/isomorphic-dompurify/compare/v0.26.0...v0.27.0) ##### Changelog - \[x] Updated `jsdom` and other dependencies. See the [changes](https://togithub.com/kkomelin/isomorphic-dompurify/pulls?q=is%3Apr+is%3Aclosed) for more details. ##### Release [0.27.0](https://www.npmjs.com/package/isomorphic-dompurify/v/0.27.0) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xMzAuMSIsInVwZGF0ZWRJblZlciI6IjM0LjEzMC4xIn0=--> * docs: remove themeselector from live demo (#10028) ### Related Ticket(s) Closes https://github.com/carbon-design-system/carbon-platform/issues/1592 ### Description ### Changelog **Removed** - remove themeSelector from live demo components <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * Carbon Platform: Index get started content for carbon web components (#10048) * fix(button): add button print styles (#10055) ### Related Ticket(s) N/A ### Description Button-group has specific print styles and in expressive-modal it just uses `button-expressive` causing it to add a `:` without also having the print styles for button-expressive <img width="1422" alt="Screen Shot 2023-02-16 at 8 37 04 AM" src="https://user-images.githubusercontent.com/20210594/219413780-2c1c6026-525b-4601-bbec-07c5a02f750f.png"> after: <img width="1222" alt="Screen Shot 2023-02-16 at 8 41 12 AM" src="https://user-images.githubusercontent.com/20210594/219414911-3247a3cf-88e4-48e8-8add-e4ad19f7bcd4.png"> ### Changelog **Changed** - moved DDSButtonExpressive print styles out of button-group and into button <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(readme): update with storybook demo links (#10054) ### Related Ticket(s) {{Provide url(s) to the related ticket(s) that this pull request addresses}} ### Description opening new PR for "docs(README): add storybook links #9409" ### Changelog **New** - {{new thing}} **Changed** - {{changed thing}} **Removed** - {{removed thing}} <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * docs(readme): add discord link to readme (#10046) Hey there! Just a small PR to add a link to discord in the readme. I'm opening PRs suggesting we do this for all the top repos in the carbon-design-system org. * fix(clean): clean vendor src base dir from web-components package (#10038) ### Related Ticket(s) Resolves https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10037 ### Description Cleans up the artifacts produced during `yarn build` within `packages/web-components/internal/vendor` to avoid build errors associated with these artifacts encountered during `yarn build` when switching between major feature branches (`main` and `feat/masthead-v2.1`). ### Changelog **Changed** - `yarn clean` updated for the web-components package to clean up the vendor src dir artifact produced during build. * chore(deps): update dependency @carbon/pictograms-react to v11.39.0 (#10063) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@carbon/pictograms-react](https://togithub.com/carbon-design-system/carbon) | [`11.38.0` -> `11.39.0`](https://renovatebot.com/diffs/npm/@carbon%2fpictograms-react/11.38.0/11.39.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v11.39.0`](https://togithub.com/carbon-design-system/carbon/compare/36b2a3b42be5bebb706861030d1ec4a21ae47c5f...6234f2b1304e340345fff3935342f80a1e36e08e) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/36b2a3b42be5bebb706861030d1ec4a21ae47c5f...6234f2b1304e340345fff3935342f80a1e36e08e) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNDMuMSIsInVwZGF0ZWRJblZlciI6IjM0LjE0My4xIn0=--> * fix(deps): update dependency carbon-components to v10.58.6 (#10062) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [carbon-components](https://www.carbondesignsystem.com/) ([source](https://togithub.com/carbon-design-system/carbon)) | [`10.58.5` -> `10.58.6`](https://renovatebot.com/diffs/npm/carbon-components/10.58.5/10.58.6) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v10.58.6`](https://togithub.com/carbon-design-system/carbon/compare/f194dfb8beb09cf2ad62b521c65fddf3a439069b...7fce6306004230995ac5dd63dc85c200d4076f49) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/f194dfb8beb09cf2ad62b521c65fddf3a439069b...7fce6306004230995ac5dd63dc85c200d4076f49) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNDMuMSIsInVwZGF0ZWRJblZlciI6IjM0LjE0My4xIn0=--> * chore(deps): update dependency carbon-components-react to v7.59.6 (#10061) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [carbon-components-react](https://togithub.com/carbon-design-system/carbon) | [`7.59.5` -> `7.59.6`](https://renovatebot.com/diffs/npm/carbon-components-react/7.59.5/7.59.6) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v7.59.6`](https://togithub.com/carbon-design-system/carbon/compare/f194dfb8beb09cf2ad62b521c65fddf3a439069b...7fce6306004230995ac5dd63dc85c200d4076f49) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/f194dfb8beb09cf2ad62b521c65fddf3a439069b...7fce6306004230995ac5dd63dc85c200d4076f49) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNDMuMSIsInVwZGF0ZWRJblZlciI6IjM0LjE0My4xIn0=--> * chore(project): upgrade yarn to v3 (#9948) ### Description Upgrade to use latest version of Yarn. ### Changelog **New** - `cache` dir for zero-install **Changed** - upgrade Yarn to 3.3.1 - update package build scripts **Removed** - Yarn's offline-mirror folder <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(documentation): update content-section docs tab with content block simple (#10067) ### Related Ticket(s) [Content section]: width of block component isn't defined by columns, causing containing media width to shrink unexpectedly #10049 ### Description `content-section` needs to be passed in grid classes when using `content-block-simple` as its child. Updating the Storybook docs tab to include this for both React Wrapper and Web Components. ### Changelog **New** - add `content-block-simple` to Storybook docs with note to include grid classes - add code examples for `content-block-simple`, `card-group`, `carousel`, and `link-list` to `content-section`'s React Wrapper docs **Changed** - update the React wrapper story to properly render the `link-list` child and include the grid class when using `content-block-simple <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(logo-grid): cta styles (#10065) ### Related Ticket(s) #10051 ### Description Logo-grid update styles so cta appears in the correct place <img width="955" alt="Screen Shot 2023-02-20 at 9 19 22 AM" src="https://user-images.githubusercontent.com/20210594/220157243-05c49d33-b335-428a-ab9f-0f6c1601972d.png"> ### Changelog **New** - block styles for the body - <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(lightbox-carousel): accessibility & QA improvements to lightbox carousels (#9149) ## Related Ticket(s) Closes: #8911 #8913 #8915 Also related: #8912 #8914 ## Description This PR makes several accessibility improvements to the DDSCarousel and DDSLightboxMediaViewer components, as well as the lightbox carousel story ### #8911 Update Lightbox to use semantic headings ✅ Lightbox titles now render title text within `<h2 style="all: inherit;">` tags. This gives them semantic `h2` headers but does not bring along the user agent/carbon styles for the element. ### #8912 Add label for modal dialog ✅ While elements with `[role="dialog"]` are required to have a label for WCAG, that label should be relevant to the content within the dialog. Because the component cannot know what content (or even what language) is in it, all we can do is make space for content entry. This already exists within the component in the form of an `aria-labelledby` attribute pointing to [a div that accepts slotted content](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/expressive-modal/expressive-modal.ts#L358). This PR adds a visually hidden modal title to the lightbox carousel story ### #8913 Announce carousel navigation to screen reader ✅ The carousel's `renderStatus()` method now renders a visually-hidden span with `aria-live="polite"` and uses a new `formatAnnouncement` property function to format that announcement into a string that accounts for single slides or slide groups. This property is written adjacent to the `formatStatus` property that allows localizing the pagination information. ### #8914 Create new landmark region for carousels ✅ _~No changes were made for this ticket.~_ ~8914 suggests, "to provide more context to the screen reader user, the carousel which includes the slides and the Carousel controls could be given in a labelled landmark region." While this would be good, wouldn't adding a landmark region require a label that describes _what is in_ the carousel, not just that it _is_ a carousel? It would not be difficult to add a fallback label if this is not the case.~ The carousel now has an additional `<div>` wrapping the scrolling contents and the navigation. This div has `role="region"` and an `aria-labelledby` attribute that points to a new div with a `<slot name="title"><span class="bx--visually-hidden">Carousel</span></slot>`. This allows authors to provide a title relevant to the carousel's contents with the generic fallback label of "carousel" ### #8915 Update carousel's next/previous button labels ✅ The carousel allows authors to specify the labels of the previous & next buttons, but we also provide a default. Previously this value was "next page", but the word `page` can be confusing. We now provide a default fallback that looks at the carousel's `pageSize` and returns either "next slide" or "next slide group" if more than one slide is visible. ### [No Ticket] Refactor carousel item's interactivity based on inert When the `[inert]` attribute was added to the carousel, it was added in a way that wasn't implemented fully in safari/firefox, and didn't account for carousels with multiple visible values well. That's been updated to now use an intersection observer, and it will mark carousel items more less than 75% visible as `inert` and `aria-hidden`. ### Changelog **Changed** - Accessibility improvements to lightbox media viewer component - Accessibility improvements to lightbox carousel story - Accessibility improvements to carousel component * chore(deps): update yarn to v3.4.1 (#10163) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [yarn](https://togithub.com/yarnpkg/berry) | [`3.3.1` -> `3.4.1`](https://renovatebot.com/diffs/npm/yarn/3.3.1/3.4.1) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>yarnpkg/berry</summary> ### [`v3.4.1`](https://togithub.com/yarnpkg/berry/blob/HEAD/CHANGELOG.md#​341) [Compare Source](https://togithub.com/yarnpkg/berry/compare/8ba1a57e0cfdf8bf649d04cff0f18664e5164b33...0d66d6e73acf0303c4461fbb9023b02cb942845f) - Fixes an accidental backport error in `yarn init`. ### [`v3.4.0`](https://togithub.com/yarnpkg/berry/blob/HEAD/CHANGELOG.md#​340) [Compare Source](https://togithub.com/yarnpkg/berry/compare/340e0db330e242946b570d8a08b0a9d97d8d8774...8ba1a57e0cfdf8bf649d04cff0f18664e5164b33) ##### Node.js parity - PnP now supports the Node `--conditions` flag. - PnP now supports the Node `--watch` flag on Node 18 (it previously only supported it on Node 19). ##### Bugfixes - The PnP API module (`pnpapi`) can now be imported from ESM modules. - `ZipFS.prototype.getBufferAndClose` will not error on empty archives resulting from an unlink after write. - Fixes various issues around postinstall script inter-dependencies. - Removes the message prefixes (`YN0000`) from `yarn workspaces foreach`. ##### Compatibility - Updates the PnP compatibility layer for TypeScript v5.0.0-beta. </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNTIuNCIsInVwZGF0ZWRJblZlciI6IjM0LjE1Mi40In0=--> * chore(deps): update dependency magic-string to ^0.30.0 (#10162) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [magic-string](https://togithub.com/rich-harris/magic-string) | [`^0.29.0` -> `^0.30.0`](https://renovatebot.com/diffs/npm/magic-string/0.29.0/0.30.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>rich-harris/magic-string</summary> ### [`v0.30.0`](https://togithub.com/rich-harris/magic-string/blob/HEAD/CHANGELOG.md#​0300-httpsgithubcomrich-harrismagic-stringcomparev0290v0300-2023-02-22) [Compare Source](https://togithub.com/rich-harris/magic-string/compare/v0.29.0...v0.30.0) ##### Bug Fixes - `null` is invalid for `sources` and `file` ([#​242](https://togithub.com/rich-harris/magic-string/issues/242)) ([d4e9c31](https://togithub.com/rich-harris/magic-string/commit/d4e9c31082491cfa177b31ce725c9ce39491d549)) ##### Features - add the ability to ignore-list sources ([#​243](https://togithub.com/rich-harris/magic-string/issues/243)) ([e238f04](https://togithub.com/rich-harris/magic-string/commit/e238f04be31ec9a3e19b18b75bb5d859f9cb2654)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNTIuNCIsInVwZGF0ZWRJblZlciI6IjM0LjE1Mi40In0=--> * fix(leadspace): button sizing and layout for md leadspace (#10030) ### Related Ticket(s) Resolves #9619 Jira ticket: https://jsw.ibm.com/browse/ADCMS-2947 ### Description Adjustments made so that the width of buttons in a leadspace button group follows the largest one. To test: - [ ] Open up the Lead space > Super with Image story - [ ] Adjust one or more button text such that the intrinsic button sizes would be different - [ ] The width of all buttons should match the width of the button with the most content - [ ] View at various breakpoints to ensure there are no regressions - [ ] Open up the Button group > Default component - [ ] View at various breakpoints to ensure there are no regressions ### Changelog **Changed** - Added a wrapper div around leadspace actions - Use `display: grid` across all breakpoints for the leadspace button group <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(date-picker): range mode clearing first value (#10168) ### Related Ticket(s) #10088 ### Description When a user clicked a range of calendar dates the first date would get cleared after clicking the second date. Before:  After:  ### Changelog **Changed** - downgraded flatpick to 4.6.9 ( the issue starts to appear in version 4.6.10) <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(release): publish - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] * fix(universal-banner): add banner role (#10179) ### Related Ticket(s) [Universal banner]: QA: Landmark region should be defined for Universal banner #9869 ### Description Set banner `role` for `universal-banner` component for accessibility purposes ### Changelog **Changed** - add banner `role` onto `universal-banner` <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * [Cloud-Masthead]: Implement lazy load and DOM pruning from masthead v2 on cloud masthead (#10085) ### Related Ticket(s) Resolves #10056 ### Description Adds the performance enhancements that were implemented for Masthead v2 to the Cloud Masthead, specifically: * https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/9595 * https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/9602 The first change (quoting @andy-blum [here](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/9595)): Initializes the masthead-container with either the `left-nav` or the `top-nav` depending on the width of the viewport. Additionally swaps one for the other when the viewport crosses the 960px boundary. This should effectively cut the number of masthead nodes in half with very little other changes. The second change (again quoting @andy-blum [here](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/9602)): Currently the Masthead loads both the SideNav and Megamenu components at the same time, even if they haven't been opened yet. This causes the amount of nodes to increase considerably right away. In order to mitigate this, a fast solution is to dynamically load the required components *only* when the user has interacted with the menus. This means that the mobile version wouldn't be loading the Megamenu, and the desktop wouldn't load SideNav until/if required. Another optimization that was done ensures that the Megamenu component wouldn't get loaded into the DOM unless a user has clicked on the menu beforehand. Then and only then, the megamenu would be loaded in. Once the menu is closed, the component gets removed from the DOM to ensure the total node count doesn't shoot up. Note that, due to the structure of the Masthead and Cloud Masthead, these changes are not entirely isolated to the Cloud Masthead alone. Specifically, the Masthead is responsible for mega menu rendering, thus the Masthead implements lazy loading of the megamenu which then is inherited by the Cloud Masthead. ### Testing Testing should cover regression tests on both the Masthead and Cloud Masthead components. ### Changelog **New** - Adds support for dynamic imports - Utliizes dynamic imports to lazy load left nav and megamenu scripts that are only necessary when the user expands the menu. - Only renders left nav custom elements when we're at the mobile break - Only renders megamenu custom elements when user expands the menu * fix(lightbox-video-player): set heading for modal title (#10178) ### Related Ticket(s) [Link List]: QA: Text looks prominent like heading but there is no heading tag #9866 ### Description Set modal title in `lightbox-video-player` to `h2` as suggested for accessibility purposes and aligns with what was done in `lightbox-media-viewer`: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/lightbox-media-viewer/lightbox-media-viewer.ts#L44 <img width="1482" alt="Screen Shot 2023-02-28 at 12 10 51 PM" src="https://user-images.githubusercontent.com/54281166/221926738-713b47e0-7234-494f-9e99-6e7350e7e79c.png"> ### Changelog **New** - wrap title of `lightbox-video-player` in `h2` <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(lerna): update lerna version in lerna.json (#10180) ### Description Fixes version number in `lerna.json`. ### Changelog **New** - {{new thing}} **Changed** - update version to match installed `lerna` version **Removed** - {{removed thing}} <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * feat(carousel): update buttons to tertiary (#10140) ### Related Ticket(s) #10021 ### Description Update buttons for carousel to use tertiary buttons instead <img width="692" alt="Screen Shot 2023-02-24 at 8 06 38 AM" src="https://user-images.githubusercontent.com/20210594/221212673-7cfe6b94-960d-40cb-b66b-45c442c9b356.png"> ### Changelog **Changed** - secondary -> tertiary <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(feature-card): applied color change upon hover (#10081) ### Related Ticket(s) #10060 ### Description Applies the different hover color to the Feature card large ### Changelog **New** - feature card large will now has `$inverse-color-ui` displaying upon hover <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(link-with-icon): force hover underline under (#10172) ### Related Ticket(s) #10069 ### Description Seems like from this change: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/6812 the hover styles got effected. This forces the hover text underline position to be under <img width="402" alt="Screen Shot 2023-02-27 at 2 59 33 PM" src="https://user-images.githubusercontent.com/20210594/221695932-9ad2df2c-38df-4615-a693-ab31963a6675.png"> <img width="244" alt="Screen Shot 2023-02-27 at 2 59 55 PM" src="https://user-images.githubusercontent.com/20210594/221695935-67a34b60-e7b9-47b5-91c6-b131a486bc55.png"> ### Changelog **New** - text-underline-position: under for hover styles <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(search-with-typeahead): add search region for accessibility (#10173) ### Related Ticket(s) [Lead Space Search]: QA: Search edit combo and the clear button is not defined within in a search region #9861 ### Description Add "search" role to the `search-with-typeahead` form component ### Changelog **New** - add search `role` to `form` component of `search-with-typeahead` <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(card-pictogram): remove motion with no copy (#10183) ### Related Ticket(s) #10071 ### Description Using pictogram with card without copy sometimes still shows the motion of the heading/copy ### Changelog **Changed** - update the `handleSlotChange` - the previous version would sometimes not get the right contents from the slot, but this ensures it looks if a copy exists <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(leadspace-block): adjust heading level for leadspace-block story (#10177) ### Related Ticket(s) [Lead Space Block]: QA: Heading level is not in an hierarchical order #9858 ### Description Heading levels are not in order for the Leadspace Block story, currently it is from H1, H2, H4 instead of H1, H2, H3 This PR sets the `aria-level` for the `link-list-heading` so the headings are in hierarchical order instead. Currently by default, the `aria-level` for `link-list-heading` is set to 4. <img width="1237" alt="Screen Shot 2023-02-28 at 11 44 39 AM" src="https://user-images.githubusercontent.com/54281166/221920843-7af9b0e2-a91c-4502-a89d-3121fa976a10.png"> ### Changelog **Changed** - set `aria-level` to `3` for `link-list-heading` in the story <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * Update welcome-story.mdx with `@carbon/web-components` (#10185) ### Description Update welcome-story.mdx with `@carbon/web-components` * chore(e2e): fixes `e2e-integration` tests (#10186) ### Description This fixes the `e2e-integration` GH actions that are failing for `react` and `web-components`. With the upgrade to Yarn v3, building the Codesandbox examples needed for e2e tests becomes problematic as they have not been upgraded. The simplest solution is to switch back to an older version of Yarn for the test builds only. ### Changelog **New** - Use `execa` for `web-components` build process. Now that `vendor/@carbon/web-components` are bundled with `ibmdotcom-web-components`, the packed file is huge. This exceeds the `maxBuffer` limit in `execSync`, while `execa` has no such issue. **Changed** - update `dotcom-shell` and `masthead` e2e tests **Removed** - {{removed thing}} <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(leadspace-search): clear button (#10176) ### Related Ticket(s) [Lead Space Search]: QA:Brief description: Label of the button should be defined as "clear input" rather than "close" #9860 ### Description Change the default value of the `close-search-button-assistive-text` attribute to "Clear input" instead as it is more descriptive and clearer to user in the case of the search with typeahead ### Changelog **Changed** - Change the default value of the `close-search-button-assistive-text` attribute to "Clear input" - edit selector to use `part='close-button'` instead of `aria-label` since the aria-label is an attribute that can change values <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * chore(deps): update dependency @carbon/pictograms-react to v11.40.0 (#10192) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@carbon/pictograms-react](https://togithub.com/carbon-design-system/carbon) | [`11.39.0` -> `11.40.0`](https://renovatebot.com/diffs/npm/@carbon%2fpictograms-react/11.39.0/11.40.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v11.40.0`](https://togithub.com/carbon-design-system/carbon/compare/6234f2b1304e340345fff3935342f80a1e36e08e...07168bf0272678a04c92cd1e700ac60e66355a95) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/6234f2b1304e340345fff3935342f80a1e36e08e...07168bf0272678a04c92cd1e700ac60e66355a95) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/carbon-design-system/carbon-for-ibm-dotcom). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNTQuNiIsInVwZGF0ZWRJblZlciI6IjM0LjE1NC42In0=--> * chore(deps): update dependency @carbon/icon-helpers to v10.39.0 (#10191) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@carbon/icon-helpers](https://togithub.com/carbon-design-system/carbon) | [`10.38.0` -> `10.39.0`](https://renovatebot.com/diffs/npm/@carbon%2ficon-helpers/10.38.0/10.39.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>carbon-design-system/carbon</summary> ### [`v10.39.0`](https://togithub.com/carbon-design-system/carbon/releases/tag/v10.39.0) [Compare Source](https://togithub.com/carbon-design-system/carbon/compare/v10.38.0...v10.39.0) #### `[email protected]` ##### New features :rocket: - feat(eslint): add eslint-testing-library-plugin; add config ([#​9103](https://togithub.com/carbon-design-system/carbon/issues/9103)) ([`6d71d2275`](https://togithub.com/carbon-design-system/carbon/commit/6d71d2275)) - feat(eslint): add eslint-plugin-jest ([#​9077](https://togithub.com/carbon-design-system/carbon/issues/9077)) ([`74851abbe`](https://togithub.com/carbon-design-system/carbon/commit/74851abbe)) ##### Housekeeping :house: - chore(release): v10.39.0 ([#​9146](https://togithub.com/carbon-design-system/carbon/issues/9146)) ([`a1897ff62`](https://togithub.com/carbon-design-system/carbon/commit/a1897ff62)) - chore(release): v10.39.0-rc.0 ([#​9127](https://togithub.com/carbon-design-system/carbon/issues/9127)) ([`49e427c77`](https://togithub.com/carbon-design-system/carbon/commit/49e427c77)) #### `@carbon/[email protected]` ##### Housekeeping :house: - chore(project): update babel to 7.14.6 ([#​9143](https://togithub.com/carbon-design-system/carbon/issues/9143)) ([`6e099d6d1`](https://togithub.com/carbon-design-system/carbon/commit/6e099d6d1)) #### `@carbon/[email protected]` ##### New features :rocket: - feat(colors): add hover colors to `@carbon/colors` ([#​8942](https://togithub.com/carbon-design-system/carbon/issues/8942)) ([`df64f1c9f`](https://togithub.com/carbon-design-system/carbon/commit/df64f1c9f)) ##### Housekeeping :house: - chore(release): v10.39.0 ([#​9146](https://togithub.com/carbon-design-system/carbon/issues/9146)) ([`a1897ff62`](https://togithub.com/carbon-design-system/carbon/commit/a1897ff62)) - chore(release): v10.39.0-rc.0 ([#​9127](https://togithub.com/carbon-design-system/carbon/issues/9127)) ([`49e427c77`](https://togithub.com/carbon-design-system/carbon/commit/49e427c77)) - chore(project): sync generated files ([`6d0fb6e46`](https://togithub.com/carbon-design-system/carbon/commit/6d0fb6e46)) #### `[email protected]` ##### New features :rocket: - feat(FilterableMultiselect): add direction prop ([#​9120](https://togithub.com/carbon-design-system/carbon/issues/9120)) ([`660acdc8a`](https://togithub.com/carbon-design-system/carbon/commit/660acdc8a)) - feat(number-input): match readonly variant ([#​8992](https://togithub.com/carbon-design-system/carbon/issues/8992)) ([`d0bd8eddb`](https://togithub.com/carbon-design-system/carbon/commit/d0bd8eddb)) ##### Bug fixes :bug: - fix(components): add missing g80 theme notification layer tokens [#​9106…
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related Ticket(s)
#5705
Description
This PR changes the default Link with icon component behavior so that the icon will wrap to the next line the component length gets too long
Verify that icons in the following components/variants will wrap with longer link text
and Link list section, Link list (default), Link list (End Of Section) icons do not wrap with longer text (behavior remains unchanged)
Since the Link with icon component is a dependency for several other components, also verify that components such as callout link with icon and megamenu link with icon appear correct
Changelog
New
iconInlineproperty on Link with icon component (extended to Link list and Card link footer)Changed