[Feature Request]: Date picker component enhancement: combined date and time picker #10186
Open
1 task done
Labels
component: date-picker
component: time-picker
proposal: open
This request has gone through triaging. We're determining whether we take this on or not.
type: enhancement 💡
Comments
jnm2377
added
the
proposal: open
abbeyhrt
added
proposal: accepted
|
Hey @KevinCamelo, just wanted to give you a heads up that we had a discussion around this one during our Backlog Cleaning meeting this morning. Here are some notes: As we were walking through your spec, @tw15egan took it upon himself to do a quick POC in Codesandbox. We think this gets you about 95% to where you're looking to go. Can you confirm this? Also, as-is, DatePicker/TimePicker is currently built on top of a technology called Flatpickr. This comes with a unique set of challenges to maintain and enhance our DatePicker/TimePicker component. Having said that, we are currently having conversation around the future of datepicker of which we will definitely want to consider this spec as part of that. |
|
There are issues with the example CodeSandbox; most notably, the |
|
@sstrubberg @tw15egan Thank you for looking into date/time picker and their relationship. I noticed that Carbon has date picker on the 2023 roadmap. Is there any progress on that/any resources you might need? 😄 |
|
@KevinCamelo Absolutely! I'll connect with you on Slack and we'll figure out what supporting this effort looks like. |
2 tasks
kennylam
added a commit
to kennylam/carbon
that referenced
this issue
Jul 30, 2024
…#10679) * chore(release): publish - @carbon/web-components@1.24.0-rc.0 - @carbon/eslint-config-ibmdotcom@1.34.0-rc.0 - @carbon/eslint-plugin-ibmdotcom-import-rules@1.33.0-rc.0 - @carbon/eslint-plugin-react-prop-type-comments@1.33.0-rc.0 - @carbon/ibmdotcom-react@1.43.0-rc.0 - @carbon/ibmdotcom-services-store@1.43.0-rc.0 - @carbon/ibmdotcom-services@1.43.0-rc.0 - @carbon/storybook-addon-theme@1.34.0-rc.0 - @carbon/stylelint-config-ibmdotcom@1.33.0-rc.0 - @carbon/ibmdotcom-styles@1.43.0-rc.0 - @carbon/ibmdotcom-utilities@1.43.0-rc.0 - @carbon/ibmdotcom-web-components@1.28.0-rc.0 * 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/web-components@1.24.0-rc.1 - @carbon/ibmdotcom-web-components@1.28.0-rc.1 * chore(release): publish - @carbon/web-components@1.24.0 - @carbon/eslint-config-ibmdotcom@1.34.0 - @carbon/eslint-plugin-ibmdotcom-import-rules@1.33.0 - @carbon/eslint-plugin-react-prop-type-comments@1.33.0 - @carbon/ibmdotcom-react@1.43.0 - @carbon/ibmdotcom-services-store@1.43.0 - @carbon/ibmdotcom-services@1.43.0 - @carbon/storybook-addon-theme@1.34.0 - @carbon/stylelint-config-ibmdotcom@1.33.0 - @carbon/ibmdotcom-styles@1.43.0 - @carbon/ibmdotcom-utilities@1.43.0 - @carbon/ibmdotcom-web-components@1.28.0 * 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/web-components@1.25.0-rc.0 - @carbon/eslint-config-ibmdotcom@1.35.0-rc.0 - @carbon/eslint-plugin-ibmdotcom-import-rules@1.34.0-rc.0 - @carbon/eslint-plugin-react-prop-type-comments@1.34.0-rc.0 - @carbon/ibmdotcom-react@1.44.0-rc.0 - @carbon/ibmdotcom-services-store@1.44.0-rc.0 - @carbon/ibmdotcom-services@1.44.0-rc.0 - @carbon/storybook-addon-theme@1.35.0-rc.0 - @carbon/stylelint-config-ibmdotcom@1.34.0-rc.0 - @carbon/ibmdotcom-styles@1.44.0-rc.0 - @carbon/ibmdotcom-utilities@1.44.0-rc.0 - @carbon/ibmdotcom-web-components@1.29.0-rc.0 * 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/web-components@1.25.0 - @carbon/eslint-config-ibmdotcom@1.35.0 - @carbon/eslint-plugin-ibmdotcom-import-rules@1.34.0 - @carbon/eslint-plugin-react-prop-type-comments@1.34.0 - @carbon/ibmdotcom-react@1.44.0 - @carbon/ibmdotcom-services-store@1.44.0 - @carbon/ibmdotcom-services@1.44.0 - @carbon/storybook-addon-theme@1.35.0 - @carbon/stylelint-config-ibmdotcom@1.34.0 - @carbon/ibmdotcom-styles@1.44.0 - @carbon/ibmdotcom-utilities@1.44.0 - @carbon/ibmdotcom-web-components@1.29.0 * 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) #### `eslint-config-carbon@2.7.0` ##### 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/cli@10.25.0` ##### 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/colors@10.28.0` ##### 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)) #### `carbon-components@10.39.0` ##### 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…
|
Hi, is there a timeline or priority set for this? It seems like a no-brainer to combine the date and time into a single component.. My group needs a component like this for our upcoming QA release (which is why i'm asking). Thank you! Daren |
|
hey @darenhrelic, unfortunately, we had to deprioritize efforts regarding the Date/Time Picker because of competing work-streams. Don't worry though, I haven't forgotten about the DatePicker. Hopefully, we'll get to re-prioritize it soon. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Summary
We're seeking an approved proposal to enhance Carbon's
date pickercomponent to support combined date and time inputs within the same fields.This enhancement to
date pickerwould be useful for when users need to filter down data between a specific date and time. It would also minimize the amount of space needed to displaytime pickerandsingle with calendarside by side, while also creating a mental connection to help our users to understand which date corresponds to which time.Justification
While date picker (and it's variants) work for many use cases, we've noticed that they can become overbearing when shown side by side when used to ask the user for a date and time range. In addition, when
date pickeris currently implemented, a visual disconnect is created between the date and the relevant time.Since this would be an enhancement on top of
date picker'scurrent offering, we are reaching out for development assistance.Desired UX and success metrics
The combined date and time enhancement to
Date pickerwill provide a visual indicator for users to choose a date and a corresponding time. It's functionality should mirror Carbon's currentdate pickerandtime picker, as it just has been combined into one smaller component.Success metrics:
Date and Time Picker without Meridiem.Required functionality
The required functionality should mirror what is currently seen on the documentation for Date Picker. However, one added requirement would be changing the way
time pickeranddate pickerare displayed based on a users predefined settings on IBM Cloud.A user in Ireland would likely not use AM or PM, thus they should be shown
Date and Time Picker without Meridiem.Specific timeline issues / requests
Three users have asked us for this refined functionality in the past two months. While there is no defined deadline, it would be nice to have as an option. We'd love to work with Carbon to make this happen.
Available extra resources
Design resources: our team can create usage and style templates, create additional guidance, and help bring this to life!
Development resources: A developer has agreed to work with Cloud PAL to contribute this as an enhancement to Carbon.
Code of Conduct
The text was updated successfully, but these errors were encountered: