diff --git a/.github/workflows/process-pr-review-data.yml b/.github/workflows/process-pr-review-data.yml index 9ea2098416..63fa16f6d6 100644 --- a/.github/workflows/process-pr-review-data.yml +++ b/.github/workflows/process-pr-review-data.yml @@ -17,11 +17,6 @@ jobs: github.event.workflow_run.conclusion == 'success' steps: - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 - - name: Setup Node.js - uses: actions/setup-node@v2 - with: - node-version: '20.x' - cache: yarn - uses: ./actions/add-review-labels with: APP_ID: ${{ secrets.APP_ID }} diff --git a/config/jest-config-ibm-cloud-cognitive/CHANGELOG.md b/config/jest-config-ibm-cloud-cognitive/CHANGELOG.md index a092695914..be70211d70 100644 --- a/config/jest-config-ibm-cloud-cognitive/CHANGELOG.md +++ b/config/jest-config-ibm-cloud-cognitive/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.15.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@1.13.0-rc.0...jest-config-ibm-cloud-cognitive@1.15.0-rc.0) (2024-12-09) + + +### Bug Fixes + +* update accessibility-checker version ([#6525](https://github.com/carbon-design-system/ibm-products/issues/6525)) ([d8c7051](https://github.com/carbon-design-system/ibm-products/commit/d8c70518087e7e41fdf1aa45cbbf692389058d56)) + + + + + # [1.14.0](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@1.14.0-rc.0...jest-config-ibm-cloud-cognitive@1.14.0) (2024-12-04) **Note:** Version bump only for package jest-config-ibm-cloud-cognitive diff --git a/config/jest-config-ibm-cloud-cognitive/package.json b/config/jest-config-ibm-cloud-cognitive/package.json index b8b6f2dc21..563a8d3b17 100644 --- a/config/jest-config-ibm-cloud-cognitive/package.json +++ b/config/jest-config-ibm-cloud-cognitive/package.json @@ -1,7 +1,7 @@ { "name": "jest-config-ibm-cloud-cognitive", "private": true, - "version": "1.14.0", + "version": "1.15.0-rc.0", "license": "Apache-2.0", "main": "index.js", "repository": { diff --git a/config/storybook-addon-carbon-theme/CHANGELOG.md b/config/storybook-addon-carbon-theme/CHANGELOG.md index 5420c578cb..3c0de70710 100644 --- a/config/storybook-addon-carbon-theme/CHANGELOG.md +++ b/config/storybook-addon-carbon-theme/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.5.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/storybook-addon-theme@2.3.0-rc.0...@carbon/storybook-addon-theme@2.5.0-rc.0) (2024-12-09) + +**Note:** Version bump only for package @carbon/storybook-addon-theme + + + + + # [2.4.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/storybook-addon-theme@2.4.0-rc.0...@carbon/storybook-addon-theme@2.4.0) (2024-12-04) **Note:** Version bump only for package @carbon/storybook-addon-theme diff --git a/config/storybook-addon-carbon-theme/package.json b/config/storybook-addon-carbon-theme/package.json index 72b2b16c73..2aa67ca576 100644 --- a/config/storybook-addon-carbon-theme/package.json +++ b/config/storybook-addon-carbon-theme/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/storybook-addon-theme", "description": "Carbon theme switcher for Storybook", - "version": "2.4.0", + "version": "2.5.0-rc.0", "license": "Apache-2.0", "main": "dist/react.js", "repository": { diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index bced659372..231c862b1b 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.32.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-cloud-cognitive-core@2.30.0-rc.0...@carbon/ibm-cloud-cognitive-core@2.32.0-rc.0) (2024-12-09) + + +### Bug Fixes + +* update to Carbon 11 compatible versions to latest ([#6437](https://github.com/carbon-design-system/ibm-products/issues/6437)) ([48d5c34](https://github.com/carbon-design-system/ibm-products/commit/48d5c34dca79a4b00fc69391a513431fa21295ee)) + + +### Features + +* add utils section to storybook ([#6394](https://github.com/carbon-design-system/ibm-products/issues/6394)) ([711eb72](https://github.com/carbon-design-system/ibm-products/commit/711eb72ef00d1f1935fd0fcec9e0c0383dff53dc)) + + + + + # [2.31.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-cloud-cognitive-core@2.31.0-rc.0...@carbon/ibm-cloud-cognitive-core@2.31.0) (2024-12-04) **Note:** Version bump only for package @carbon/ibm-cloud-cognitive-core diff --git a/packages/core/package.json b/packages/core/package.json index 228249352c..1776e8f14e 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/ibm-cloud-cognitive-core", "private": true, - "version": "2.31.0", + "version": "2.32.0-rc.0", "license": "Apache-2.0", "main": "scripts/build.js", "repository": { @@ -29,7 +29,7 @@ }, "devDependencies": { "@carbon/grid": "^11.29.0", - "@carbon/ibm-products-styles": "^2.51.0", + "@carbon/ibm-products-styles": "^2.52.0-rc.0", "@carbon/layout": "^11.28.0", "@carbon/motion": "^11.24.0", "@carbon/react": "^1.71.1", diff --git a/packages/ibm-products-styles/CHANGELOG.md b/packages/ibm-products-styles/CHANGELOG.md index 136af44d9e..8c1e11f757 100644 --- a/packages/ibm-products-styles/CHANGELOG.md +++ b/packages/ibm-products-styles/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.52.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-styles@2.50.0-rc.0...@carbon/ibm-products-styles@2.52.0-rc.0) (2024-12-09) + + +### Bug Fixes + +* **pageHeader:** menu button overflow issue on small screens ([#6502](https://github.com/carbon-design-system/ibm-products/issues/6502)) ([0072e42](https://github.com/carbon-design-system/ibm-products/commit/0072e424fc1f25fbf58be67f7d4d792643f26c30)) + + +### Features + +* **BreadcrumbWithOverflow:** adopt overflowMenuV12 and floating ui ([#6411](https://github.com/carbon-design-system/ibm-products/issues/6411)) ([f716852](https://github.com/carbon-design-system/ibm-products/commit/f716852c979a0b9556e853fad7e7a7774b4c6579)) + + + + + # [2.51.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-styles@2.51.0-rc.0...@carbon/ibm-products-styles@2.51.0) (2024-12-04) **Note:** Version bump only for package @carbon/ibm-products-styles diff --git a/packages/ibm-products-styles/package.json b/packages/ibm-products-styles/package.json index 487789f0ac..62c59ec9f1 100644 --- a/packages/ibm-products-styles/package.json +++ b/packages/ibm-products-styles/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/ibm-products-styles", "description": "Carbon for IBM Products styles", - "version": "2.51.0", + "version": "2.52.0-rc.0", "license": "Apache-2.0", "installConfig": { "hoistingLimits": "none" @@ -52,7 +52,7 @@ "cross-env": "^7.0.3", "glob": "^10.3.10", "jest": "^29.7.0", - "jest-config-ibm-cloud-cognitive": "^1.14.0", + "jest-config-ibm-cloud-cognitive": "^1.15.0-rc.0", "jest-environment-jsdom": "^29.7.0", "npm-check-updates": "^16.14.12", "npm-run-all": "^4.1.5", diff --git a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap index 58081841e0..da590c0057 100644 --- a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap +++ b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap @@ -129,6 +129,10 @@ p.c4p--about-modal__copyright-text:first-child { fill: var(--cds-button-danger-primary, #da1e28); } +.c4p--apikey-modal__checkmark-icon { + fill: var(--cds-button-primary, #0f62fe); +} + .c4p--action-set { align-items: stretch; justify-content: flex-end; diff --git a/packages/ibm-products-styles/src/components/APIKeyModal/_api-key-modal.scss b/packages/ibm-products-styles/src/components/APIKeyModal/_api-key-modal.scss index f5b19278a5..8b0cf5202d 100644 --- a/packages/ibm-products-styles/src/components/APIKeyModal/_api-key-modal.scss +++ b/packages/ibm-products-styles/src/components/APIKeyModal/_api-key-modal.scss @@ -50,3 +50,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--apikey-modal; .#{$block-class}__error-icon svg { fill: $button-danger-primary; } + +.#{$block-class}__checkmark-icon { + fill: $button-primary; +} diff --git a/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss b/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss index ea8f7818f7..6f53924328 100644 --- a/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss +++ b/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss @@ -112,7 +112,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set; border-right: 1px solid $border-subtle-02; } &.#{$block-class}.#{$block-class}--has-slug, - &.#{$block-class}.#{$block-class}--has-ai-label { + &.#{$block-class}.#{$block-class}--has-ai-label, + &.#{$block-class}.#{$block-class}--has-decorator { border-color: transparent; box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow, 0 4px 10px 2px $ai-drop-shadow; @@ -199,14 +200,16 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set; &.#{$block-class}:has(.#{$block-class}__action-toolbar), &.#{$block-class}--has-action-toolbar, &.#{$block-class}--has-slug, - &.#{$block-class}--has-ai-label { + &.#{$block-class}--has-ai-label, + &.#{$block-class}--has-decorator { --#{$block-class}--title-padding-right: #{$spacing-10}; } &.#{$block-class}:has(.#{$block-class}__action-toolbar), &.#{$block-class}--has-action-toolbar { &.#{$block-class}--has-slug, - &.#{$block-class}--has-ai-label { + &.#{$block-class}--has-ai-label, + &.#{$block-class}--has-decorator { --#{$block-class}--title-padding-right: #{$spacing-11}; } } @@ -313,7 +316,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set; } &.#{$block-class}--has-slug .#{$block-class}--scrolls, - &.#{$block-class}--has-ai-label .#{$block-class}--scrolls { + &.#{$block-class}--has-ai-label .#{$block-class}--scrolls, + &.#{$block-class}--has-decorator .#{$block-class}--scrolls { @include utilities.ai-popover-gradient('default', 0, 'layer'); box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow, @@ -368,7 +372,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set; } .#{$block-class}__slug-and-close, - .#{$block-class}__ai-label-and-close { + .#{$block-class}__ai-label-and-close, + .#{$block-class}__decorator-and-close { position: absolute; z-index: 10; /* must be higher than title container border bottom */ top: 0; @@ -470,7 +475,9 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set; inset: 0; } +/* stylelint-disable-next-line carbon/theme-token-use */ .#{$block-class}--has-slug + .#{$block-class}__overlay, -.#{$block-class}--has-ai-label + .#{$block-class}__overlay { +.#{$block-class}--has-ai-label + .#{$block-class}__overlay, +.#{$block-class}--has-decorator + .#{$block-class}__overlay { background-color: $ai-overlay; } diff --git a/packages/ibm-products-web-components/CHANGELOG.md b/packages/ibm-products-web-components/CHANGELOG.md index 2833b0b306..05e249daa5 100644 --- a/packages/ibm-products-web-components/CHANGELOG.md +++ b/packages/ibm-products-web-components/CHANGELOG.md @@ -3,6 +3,20 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.5.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-web-components@0.3.0-rc.0...@carbon/ibm-products-web-components@0.5.0-rc.0) (2024-12-09) + + +### Bug Fixes + +* **Side Panel Web components:** storybook controls issue ([#6500](https://github.com/carbon-design-system/ibm-products/issues/6500)) ([19a7536](https://github.com/carbon-design-system/ibm-products/commit/19a75363d0683ed6765e0d713c3f68878eaeaef2)) +* **Tearsheet in Web Components:** cancel button not working as expected ([#6458](https://github.com/carbon-design-system/ibm-products/issues/6458)) ([2461f81](https://github.com/carbon-design-system/ibm-products/commit/2461f8120431c125ceb826ccb5d139a82d49f39c)) +* **Tearsheet web components:** control changes doesn't reflect in stories ([#6413](https://github.com/carbon-design-system/ibm-products/issues/6413)) ([84f6d14](https://github.com/carbon-design-system/ibm-products/commit/84f6d140d0476868a13b18ea886515d856bb0835)) +* update to Carbon 11 compatible versions to latest ([#6437](https://github.com/carbon-design-system/ibm-products/issues/6437)) ([48d5c34](https://github.com/carbon-design-system/ibm-products/commit/48d5c34dca79a4b00fc69391a513431fa21295ee)) + + + + + # [0.4.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-web-components@0.4.0-rc.0...@carbon/ibm-products-web-components@0.4.0) (2024-12-04) **Note:** Version bump only for package @carbon/ibm-products-web-components diff --git a/packages/ibm-products-web-components/package.json b/packages/ibm-products-web-components/package.json index e20a8d0e1a..26436b2aa1 100644 --- a/packages/ibm-products-web-components/package.json +++ b/packages/ibm-products-web-components/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/ibm-products-web-components", "description": "Carbon for IBM Products Web Components", - "version": "0.4.0", + "version": "0.5.0-rc.0", "license": "Apache-2.0", "main": "es/index.js", "module": "es/index.js", @@ -49,7 +49,7 @@ "wca": "web-component-analyzer analyze src --outFile custom-elements.json" }, "dependencies": { - "@carbon/ibm-products-styles": "^2.51.0", + "@carbon/ibm-products-styles": "^2.52.0-rc.0", "@carbon/styles": "1.70.0", "@carbon/web-components": "2.18.0", "lit": "^3.1.0" diff --git a/packages/ibm-products/CHANGELOG.md b/packages/ibm-products/CHANGELOG.md index f201427248..30046bbfed 100644 --- a/packages/ibm-products/CHANGELOG.md +++ b/packages/ibm-products/CHANGELOG.md @@ -3,6 +3,36 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.56.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products@2.54.0-rc.0...@carbon/ibm-products@2.56.0-rc.0) (2024-12-09) + + +### Bug Fixes + +* **APIKeyModal:** implement focus return to generate button ([#6440](https://github.com/carbon-design-system/ibm-products/issues/6440)) ([535e871](https://github.com/carbon-design-system/ibm-products/commit/535e87142413695c530952f7b314201c8a35becc)) +* **APIKeyModal:** implement useFocus hook ([#6290](https://github.com/carbon-design-system/ibm-products/issues/6290)) ([4a92770](https://github.com/carbon-design-system/ibm-products/commit/4a92770d9179f6b59bfe18e53c998fdb51bd794a)) +* **conditionBuilder:** issue fix and data correction ([#6421](https://github.com/carbon-design-system/ibm-products/issues/6421)) ([1f5b63e](https://github.com/carbon-design-system/ibm-products/commit/1f5b63ec428ddd2a2b2ee7c4153c83c2fff6a61c)) +* **CreateTearsheet:** Dynamically disable/hide the experimentalSecondarySubmit button in CreateTearsheet ([#6412](https://github.com/carbon-design-system/ibm-products/issues/6412)) ([2eab4db](https://github.com/carbon-design-system/ibm-products/commit/2eab4db31164aed9f84c003466fce0bc74467ce3)) +* **EmptyState:** empty states throws hydration errors in next js due to dynamic id ([#6508](https://github.com/carbon-design-system/ibm-products/issues/6508)) ([d5767e8](https://github.com/carbon-design-system/ibm-products/commit/d5767e8e9e5bc078d7324fbda71268a4d42d0bee)) +* **FullPageError:** accessibility violations ([#6503](https://github.com/carbon-design-system/ibm-products/issues/6503)) ([3f45528](https://github.com/carbon-design-system/ibm-products/commit/3f45528cd037c0232c2699c18d8bf63a5da8891b)) +* **side panel in react:** slideIn not working as expected ([#6501](https://github.com/carbon-design-system/ibm-products/issues/6501)) ([9d07dab](https://github.com/carbon-design-system/ibm-products/commit/9d07dab82cefd4046f65f8cac25d1d829f6d7c1a)) +* **tearsheet:** address portalTarget type ([#6400](https://github.com/carbon-design-system/ibm-products/issues/6400)) ([a11d036](https://github.com/carbon-design-system/ibm-products/commit/a11d0364a5beaa3d018db559656c3d7806e1b484)) +* update accessibility-checker version ([#6525](https://github.com/carbon-design-system/ibm-products/issues/6525)) ([d8c7051](https://github.com/carbon-design-system/ibm-products/commit/d8c70518087e7e41fdf1aa45cbbf692389058d56)) +* update to Carbon 11 compatible versions to latest ([#6437](https://github.com/carbon-design-system/ibm-products/issues/6437)) ([48d5c34](https://github.com/carbon-design-system/ibm-products/commit/48d5c34dca79a4b00fc69391a513431fa21295ee)) +* **useravatar:** accessibility issue and add avt complex state ([#6399](https://github.com/carbon-design-system/ibm-products/issues/6399)) ([4a70821](https://github.com/carbon-design-system/ibm-products/commit/4a70821b85688730a9d4484340da2517ee079db1)) + + +### Features + +* add utils section to storybook ([#6394](https://github.com/carbon-design-system/ibm-products/issues/6394)) ([711eb72](https://github.com/carbon-design-system/ibm-products/commit/711eb72ef00d1f1935fd0fcec9e0c0383dff53dc)) +* **BreadcrumbWithOverflow:** adopt overflowMenuV12 and floating ui ([#6411](https://github.com/carbon-design-system/ibm-products/issues/6411)) ([f716852](https://github.com/carbon-design-system/ibm-products/commit/f716852c979a0b9556e853fad7e7a7774b4c6579)) +* **coachmark:** Add default opening for not-stacked coachmarks ([#6516](https://github.com/carbon-design-system/ibm-products/issues/6516)) ([73ee693](https://github.com/carbon-design-system/ibm-products/commit/73ee693dda68bbbc0ccc6ed802b0efe8f528950e)) +* Decouple lottie-web dependency from our repo ([#6477](https://github.com/carbon-design-system/ibm-products/issues/6477)) ([6b0a75b](https://github.com/carbon-design-system/ibm-products/commit/6b0a75ba4d15d7b2e640b4bb6992635ec3ab770c)) +* **productive card:** floating ui for overflow menu ([#6395](https://github.com/carbon-design-system/ibm-products/issues/6395)) ([42a1362](https://github.com/carbon-design-system/ibm-products/commit/42a1362ad2ff4998f8286ed0698a82c4ec8ea552)) + + + + + # [2.55.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products@2.55.0-rc.0...@carbon/ibm-products@2.55.0) (2024-12-04) **Note:** Version bump only for package @carbon/ibm-products diff --git a/packages/ibm-products/package.json b/packages/ibm-products/package.json index 6dc0031dba..42998380f9 100644 --- a/packages/ibm-products/package.json +++ b/packages/ibm-products/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/ibm-products", "description": "Carbon for IBM Products", - "version": "2.55.0", + "version": "2.56.0-rc.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -81,7 +81,7 @@ "fs-extra": "^11.2.0", "glob": "^10.3.10", "jest": "^29.7.0", - "jest-config-ibm-cloud-cognitive": "^1.14.0", + "jest-config-ibm-cloud-cognitive": "^1.15.0-rc.0", "jest-environment-jsdom": "^29.7.0", "namor": "^1.1.2", "npm-check-updates": "^16.14.12", @@ -96,7 +96,7 @@ "dependencies": { "@babel/runtime": "^7.23.9", "@carbon/feature-flags": "^0.24.0", - "@carbon/ibm-products-styles": "^2.51.0", + "@carbon/ibm-products-styles": "^2.52.0-rc.0", "@carbon/telemetry": "^0.1.0", "@dnd-kit/core": "^6.0.8", "@dnd-kit/modifiers": "^7.0.0", diff --git a/packages/ibm-products/src/components/APIKeyModal/APIKeyDownloader.js b/packages/ibm-products/src/components/APIKeyModal/APIKeyDownloader.js index b947a58e10..2299d6b863 100644 --- a/packages/ibm-products/src/components/APIKeyModal/APIKeyDownloader.js +++ b/packages/ibm-products/src/components/APIKeyModal/APIKeyDownloader.js @@ -64,7 +64,7 @@ APIKeyDownloader.propTypes = { /** * body content for the downloader */ - body: PropTypes.string.isRequired, + body: PropTypes.string, /** * aria-label for the download link */ diff --git a/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.stories.jsx b/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.stories.jsx index 4b2f945c22..29ba2f46f7 100644 --- a/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.stories.jsx +++ b/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.stories.jsx @@ -65,7 +65,7 @@ const defaultProps = { copyButtonText: 'Copy', copyIconDescription: 'Copy', hasAPIKeyVisibilityToggle: true, - downloadBodyText: + helperText: 'This is your unique API key and is non-recoverable. If you lose this API key, you will have to reset it.', downloadLinkText: 'Download as JSON', downloadLinkLabel: 'Download API Key in Java Script File format', @@ -74,8 +74,8 @@ const defaultProps = { downloadFileType: 'json', open: true, closeButtonText: 'Close', - generateSuccessTitle: 'API key successfully created', - editSuccessTitle: 'API key successfully saved', + generateSuccessMessage: 'API key successfully created', + editSuccessMessage: 'API key successfully saved', loadingText: 'Generating...', modalLabel: 'An example of Generate API key', }; @@ -301,7 +301,7 @@ const MultiStepTemplate = (args, context) => { )} {editSuccess && (
- Edited successfully + Edited successfully, API key successfully saved.
)} @@ -415,6 +415,7 @@ export const InstantGenerate = InstantTemplate.bind({}); InstantGenerate.args = { ...defaultProps, apiKeyLabel: 'Unique API Key', + generateTitle: 'Generate an API key', }; export const CustomGenerate = MultiStepTemplate.bind({}); @@ -428,6 +429,7 @@ CustomGenerate.args = { savedAllResources: false, savedResource: '', savedPermissions: '', + generateTitle: 'Generate an API key', }; CustomGenerate.parameters = { docs: { @@ -489,6 +491,7 @@ CustomEdit.args = { savedPermissions: 'Read only', editing: true, editButtonText: 'Save API key', + generateTitle: 'Save an API key', }; CustomEdit.parameters = { docs: { diff --git a/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.test.js b/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.test.js index 0e69271bec..f0833c35ce 100644 --- a/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.test.js +++ b/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.test.js @@ -36,20 +36,20 @@ const defaultProps = { copyButtonText: 'copy', copyIconDescription: 'copy icon description', customSteps: [], - downloadBodyText: 'download body', + helperText: 'download body', downloadFileName: 'filename', downloadFileType: 'json', downloadLinkText: 'download', downloadLinkLabel: 'Download API Key in Java Script File format', editButtonText: 'edit button', editSuccess: false, - editSuccessTitle: 'edited successfully', + editSuccessMessage: 'edited successfully', editing: false, error: false, errorText: 'an error occurred', generateButtonText: 'create button', generateSuccessBody: 'created successfully body', - generateSuccessTitle: 'created successfully title', + generateSuccessMessage: 'created successfully title', generateTitle: 'create title', hasAPIKeyVisibilityToggle: true, hasDownloadLink: true, @@ -135,7 +135,7 @@ describe(componentName, () => { getByText(props.loadingText, { selector: 'div' }); rerender(); await waitFor(() => getByText(props.downloadLinkLabel)); - getByText(props.downloadBodyText); + getByText(props.helperText); const modal = getByRole('presentation'); expect(modal.querySelector(`.${carbon.prefix}--text-input`).value).toBe( '444-444-444-444' @@ -201,7 +201,7 @@ describe(componentName, () => { customSteps, hasDownloadLink: false, }; - const { rerender, getByPlaceholderText, getByText } = render( + const { rerender, getByPlaceholderText, getByText, getAllByText } = render( ); @@ -252,7 +252,7 @@ describe(componentName, () => { rerender(); expect(screen.getByLabelText(props.apiKeyLabel).value).toBe('abc-123'); getByText(props.generateSuccessBody); - getByText(props.generateSuccessTitle); + getAllByText(props.generateSuccessMessage); await act(() => click(getByText(props.closeButtonText))); expect(onClose).toHaveBeenCalled(); }); @@ -361,7 +361,7 @@ describe(componentName, () => { onRequestEdit, }; - const { getByText, getByRole, rerender } = render( + const { getByText, getAllByText, getByRole, rerender } = render( ); @@ -373,7 +373,7 @@ describe(componentName, () => { await act(() => click(editButton)); expect(onRequestEdit).toHaveBeenCalledWith(nameInput.value); rerender(); - getByText(props.editSuccessTitle); + getAllByText(props.editSuccessMessage); }); it('toggles key visibility', async () => { diff --git a/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.tsx b/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.tsx index e8f1afb01e..4ad0a5e49c 100644 --- a/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.tsx +++ b/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.tsx @@ -26,7 +26,12 @@ import { Button, unstable_FeatureFlags as FeatureFlags, } from '@carbon/react'; -import { InformationFilled, Copy, ErrorFilled } from '@carbon/react/icons'; +import { + InformationFilled, + Copy, + ErrorFilled, + CheckmarkFilled, +} from '@carbon/react/icons'; import { APIKeyDownloader } from './APIKeyDownloader'; import { pkg } from '../../settings'; import { usePortalTarget } from '../../global/js/hooks/usePortalTarget'; @@ -68,12 +73,14 @@ export let APIKeyModal: React.FC = forwardRef( editButtonText, editSuccess, editSuccessTitle, + editSuccessMessage, editing, error, errorText, generateButtonText, generateSuccessBody, generateSuccessTitle, + generateSuccessMessage, generateTitle, hasAPIKeyVisibilityToggle, hasDownloadLink, @@ -95,6 +102,7 @@ export let APIKeyModal: React.FC = forwardRef( portalTarget: portalTargetIn, previousStepButtonText, showAPIKeyLabel, + helperText, // Collect any other property values passed in. ...rest @@ -102,6 +110,9 @@ export let APIKeyModal: React.FC = forwardRef( ref: React.Ref ) => { const [title, setTitle] = useState(null); + const [successMessage, setSuccessMessage] = useState< + string | null | undefined + >(null); const [copyError, setCopyError] = useState(false); const [name, setName] = useState(apiKeyName); const [currentStep, setCurrentStep] = useState(0); @@ -120,6 +131,7 @@ export let APIKeyModal: React.FC = forwardRef( }; const blockClass = `${pkg.prefix}--apikey-modal`; const localRef = useRef(undefined); + const PasswordInputRef = useRef(null); const modalRef = (ref || localRef) as MutableRefObject; const { firstElement, keyDownListener } = useFocus(modalRef); const prevOpen = usePreviousValue(open); @@ -128,6 +140,9 @@ export let APIKeyModal: React.FC = forwardRef( if (copyRef.current && open && apiKeyLoaded) { copyRef.current.focus(); } + if (PasswordInputRef?.current) { + PasswordInputRef?.current.setAttribute('readOnly', 'true'); + } }, [open, apiKeyLoaded]); useEffect(() => { @@ -184,9 +199,11 @@ export let APIKeyModal: React.FC = forwardRef( useEffect(() => { if (editing && editSuccess) { - setTitle(editSuccessTitle); + setTitle(generateTitle); + setSuccessMessage(editSuccessMessage ?? editSuccessTitle); } else if (apiKeyLoaded) { - setTitle(generateSuccessTitle); + setTitle(generateTitle); + setSuccessMessage(generateSuccessMessage ?? generateSuccessTitle); } else if (hasSteps) { setTitle(customSteps[currentStep]?.title); } else { @@ -194,11 +211,14 @@ export let APIKeyModal: React.FC = forwardRef( } }, [ apiKeyLoaded, + loading, editing, editSuccess, editSuccessTitle, + editSuccessMessage, hasSteps, generateSuccessTitle, + generateSuccessMessage, generateTitle, currentStep, customSteps, @@ -276,6 +296,8 @@ export let APIKeyModal: React.FC = forwardRef( showPasswordLabel={showAPIKeyLabel} hidePasswordLabel={hideAPIKeyLabel} tooltipPosition="left" + helperText={helperText} + ref={PasswordInputRef} /> )} {!editing && apiKey && !hasAPIKeyVisibilityToggle && ( @@ -314,7 +336,11 @@ export let APIKeyModal: React.FC = forwardRef(
-

+

{copyError ? copyErrorText : errorText}

@@ -332,12 +358,32 @@ export let APIKeyModal: React.FC = forwardRef( downloadLinkLabel={downloadLinkLabel} /> ) : ( -
+
{generateSuccessBody}
)}
)} + + {(editSuccess || (apiKeyLoaded && successMessage)) && ( +
+ +

+ {successMessage} +

+
+ )} )} @@ -376,6 +422,20 @@ const downloadRequiredProps = (type) => // Return a placeholder if not released and not enabled by feature flag APIKeyModal = pkg.checkComponentEnabled(APIKeyModal, componentName); +export const deprecatedProps = { + /** + * deprecated + * title for a successful edit + */ + editSuccessTitle: PropTypes.string, + + /** + * deprecated + * title for a successful key generation + */ + generateSuccessTitle: PropTypes.string, +}; + APIKeyModal.propTypes = { /** * the api key that's displayed to the user when a request to create is fulfilled. @@ -436,7 +496,7 @@ APIKeyModal.propTypes = { /** * the content that appears that indicates the key is downloadable */ - downloadBodyText: downloadRequiredProps(PropTypes.string), + downloadBodyText: PropTypes.string, /** * designates the name of downloadable json file with the key. if not specified will default to 'apikey' */ @@ -464,7 +524,7 @@ APIKeyModal.propTypes = { /** * title for a successful edit */ - editSuccessTitle: editRequiredProps(PropTypes.string), + editSuccessMessage: editRequiredProps(PropTypes.string), /** * designates if the modal is in the edit mode */ @@ -490,7 +550,7 @@ APIKeyModal.propTypes = { /** * title for a successful key generation */ - generateSuccessTitle: PropTypes.string, + generateSuccessMessage: PropTypes.string, /** * default title for the modal in generate key mode */ @@ -503,6 +563,10 @@ APIKeyModal.propTypes = { * designates if user is able to download the api key */ hasDownloadLink: PropTypes.bool, + /** + * helper text for password input + */ + helperText: PropTypes.string, /** * label text that's displayed when hovering over visibility toggler to hide key */ @@ -582,6 +646,8 @@ APIKeyModal.propTypes = { * label text that's displayed when hovering over visibility toggler to show key */ showAPIKeyLabel: PropTypes.string, + + ...deprecatedProps, }; APIKeyModal.displayName = componentName; diff --git a/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.types.ts b/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.types.ts index e04e3d141d..8a9a0fc09b 100644 --- a/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.types.ts +++ b/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.types.ts @@ -75,9 +75,14 @@ interface APIKeyModalCommonProps { */ generateSuccessBody?: ReactNode; /** + * * @deprecated use `generateSuccessMessage` instead * title for a successful key generation */ generateSuccessTitle?: string; + /** + * success message for a successful key generation + */ + generateSuccessMessage?: string; /** * default title for the modal in generate key mode */ @@ -155,6 +160,10 @@ interface APIKeyModalCommonProps { * label text that's displayed when hovering over visibility toggler to show key */ showAPIKeyLabel?: string; + /** + * helper text for password input + */ + helperText?: string; } type CustomStepConditionalProps = { @@ -190,9 +199,14 @@ type EditingConditionalProps = { */ editSuccess: boolean; /** + * * @deprecated use `editSuccessMessage` instead * title for a successful edit */ - editSuccessTitle: string; + editSuccessTitle?: string; + /** + * success message for edit + */ + editSuccessMessage: string; }; type HasDownloadLinkProps = { @@ -203,7 +217,7 @@ type HasDownloadLinkProps = { /** * the content that appears that indicates the key is downloadable */ - downloadBodyText: string; + downloadBodyText?: string; /** * designates the name of downloadable json file with the key. if not specified will default to 'apikey' */ diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridSelectAll.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridSelectAll.tsx index 068c90d101..d2a0597270 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridSelectAll.tsx +++ b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridSelectAll.tsx @@ -9,7 +9,10 @@ import React, { useLayoutEffect, useState } from 'react'; import { TableSelectAll } from '@carbon/react'; import cx from 'classnames'; import { pkg } from '../../../settings'; -import { handleOnPageSelectAllRowData } from './addons/stateReducer'; +import { + handleOnPageSelectAllRowData, + handleSelectAllRowData, +} from './addons/stateReducer'; import { DataGridState, DataGridToggleAllRowsProps } from '../types'; const blockClass = `${pkg.prefix}--datagrid`; @@ -41,6 +44,8 @@ const SelectAll = (datagridState: DataGridState) => { dispatch, rows, getRowId, + toggleAllRowsSelected, + withVirtualScroll, onAllRowSelect, } = datagridState; const isFirstColumnStickyLeft = @@ -75,6 +80,33 @@ const SelectAll = (datagridState: DataGridState) => { return onChange?.(event); }; + const handleSelectAllChange = (event) => { + if (indeterminate) { + handleSelectAllRowData({ + dispatch, + rows, + getRowId, + indeterminate: true, + isChecked: undefined, + }); + toggleAllRowsSelected(false); + onAllRowSelect?.(rows, event); + + return onChange?.({ + target: { checked: false }, + } as any); + } + handleSelectAllRowData({ + dispatch, + rows, + getRowId, + isChecked: event.target.checked, + indeterminate, + }); + onAllRowSelect?.(rows, event); + return onChange?.(event); + }; + return ( { } )} name={`${tableId}-select-all-checkbox-name`} - onSelect={handleOnPageSelectAllChange} + onSelect={ + withVirtualScroll ? handleSelectAllChange : handleOnPageSelectAllChange + } disabled={isFetching || selectProps?.disabled} id={`${tableId}-select-all-checkbox-id`} /> diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.stories.jsx b/packages/ibm-products/src/components/SidePanel/SidePanel.stories.jsx index 7ed939faa3..e1c2840f94 100644 --- a/packages/ibm-products/src/components/SidePanel/SidePanel.stories.jsx +++ b/packages/ibm-products/src/components/SidePanel/SidePanel.stories.jsx @@ -446,15 +446,32 @@ export default { 'Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.', options: [0, 1], }, + decorator: { + control: { + type: 'select', + labels: { + 0: 'No AI Label', + 1: 'with AI Label', + }, + default: 0, + }, + description: + 'Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.', + options: [0, 1], + }, }, decorators: [sidePanelDecorator(renderUIShellHeader, prefix)], }; // eslint-disable-next-line react/prop-types -const SlideOverTemplate = ( - { minimalContent, actions, aiLabel, slug, ...args }, - context -) => { +const SlideOverTemplate = ({ + minimalContent, + actions, + aiLabel, + slug, + decorator, + ...args +}, context) => { const [open, setOpen] = useState(context.viewMode !== 'docs'); const testRef = useRef(undefined); const buttonRef = useRef(undefined); @@ -476,6 +493,7 @@ const SlideOverTemplate = ( ref={testRef} aiLabel={aiLabel && sampleAILabel} slug={slug && sampleAILabel} + decorator={decorator && sampleAILabel} launcherButtonRef={buttonRef} > {!minimalContent && } @@ -485,7 +503,7 @@ const SlideOverTemplate = ( }; const FirstElementDisabledTemplate = ( - { minimalContent, actions, aiLabel, slug, ...args }, + { minimalContent, actions, aiLabel, slug, decorator, ...args }, context ) => { const [open, setOpen] = useState(context.viewMode !== 'docs'); @@ -509,6 +527,7 @@ const FirstElementDisabledTemplate = ( ref={testRef} aiLabel={aiLabel && sampleAILabel} slug={slug && sampleAILabel} + decorator={decorator && sampleAILabel} launcherButtonRef={buttonRef} > {!minimalContent && ( @@ -547,7 +566,7 @@ const FirstElementDisabledTemplate = ( }; // eslint-disable-next-line react/prop-types -const StepTemplate = ({ actions, aiLabel, slug, ...args }, context) => { +const StepTemplate = ({ actions, aiLabel, slug, decorator, ...args }, context) => { const [open, setOpen] = useState(context.viewMode !== 'docs'); const [currentStep, setCurrentStep] = useState(0); const buttonRef = useRef(undefined); @@ -570,6 +589,7 @@ const StepTemplate = ({ actions, aiLabel, slug, ...args }, context) => { actions={actionSets[actions]} aiLabel={aiLabel && sampleAILabel} slug={slug && sampleAILabel} + decorator={decorator && sampleAILabel} launcherButtonRef={buttonRef} > { }; // eslint-disable-next-line react/prop-types -const SlideInTemplate = ({ actions, aiLabel, slug, ...args }, context) => { +const SlideInTemplate = ({ actions, aiLabel, slug, decorator, ...args }, context) => { const [open, setOpen] = useState(context.viewMode !== 'docs'); const buttonRef = useRef(undefined); @@ -606,6 +626,7 @@ const SlideInTemplate = ({ actions, aiLabel, slug, ...args }, context) => { actions={actionSets[actions]} aiLabel={aiLabel && sampleAILabel} slug={slug && sampleAILabel} + decorator={decorator && sampleAILabel} launcherButtonRef={buttonRef} > @@ -669,7 +690,7 @@ export const WithAILabel = SlideOverTemplate.bind({}); WithAILabel.args = { includeOverlay: true, actions: 0, - aiLabel: 1, + decorator: 1, ...defaultStoryProps, }; diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.test.js b/packages/ibm-products/src/components/SidePanel/SidePanel.test.js index 2df6584256..5e98d445ca 100644 --- a/packages/ibm-products/src/components/SidePanel/SidePanel.test.js +++ b/packages/ibm-products/src/components/SidePanel/SidePanel.test.js @@ -38,6 +38,26 @@ const selectorPageContentValue = '#side-panel-test-page-content'; const onRequestCloseFn = jest.fn(); const onUnmountFn = jest.fn(); +const sampleAILabel = ( + + +
+

AI Explained

+

84%

+

Confidence score

+

+ This is not really Lorem Ipsum but the spell checker did not like the + previous text with it's non-words which is why this unwieldy + sentence, should one choose to call it that, here. +

+
+

Model type

+

Foundation model

+
+ + +); + const renderSidePanel = ({ ...rest } = {}, children =

test

) => render( { ); expect(navigationAction).toBeTruthy(); }); - it('should not have AI Label when it is not passed', () => { + + it('should have AI Label when it is passed through slug', () => { + const { container } = renderSidePanel({ + slug: sampleAILabel, + }); + expect(container.querySelector('.aiLabel-container')).toBeTruthy(); + }); + + it('should not have a ai label container when a it is not passed', () => { const { container } = renderSidePanel(); expect(container.querySelector('.aiLabel-container')).toBe(null); }); + it('should have AI Label when it is passed', () => { - const sampleAILabel = ( - - -
-

AI Explained

-

84%

-

Confidence score

-

- This is not really Lorem Ipsum but the spell checker did not like - the previous text with it's non-words which is why this - unwieldy sentence, should one choose to call it that, here. -

-
-

Model type

-

Foundation model

-
- - - ); const { container } = renderSidePanel({ aiLabel: sampleAILabel, }); expect(container.querySelector('.aiLabel-container')).toBeTruthy(); }); + + it('should have AI Label when it is passed to decorator', () => { + const { container } = renderSidePanel({ + decorator: sampleAILabel, + }); + expect(container.querySelector('.aiLabel-container')).toBeTruthy(); + }); + it('should throw console warning if labelText passed without Title', () => { const consoleWarnSpy = jest .spyOn(console, 'warn') diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.tsx b/packages/ibm-products/src/components/SidePanel/SidePanel.tsx index 76534937c3..94c020c21c 100644 --- a/packages/ibm-products/src/components/SidePanel/SidePanel.tsx +++ b/packages/ibm-products/src/components/SidePanel/SidePanel.tsx @@ -170,16 +170,22 @@ type SidePanelBaseProps = { slideIn?: boolean; /** - * @deprecated please use the `aiLabel` prop + * @deprecated please use the `decorator` instead * **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component */ slug?: ReactNode; /** + * @deprecated please use the `decorator` instead * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level. */ aiLabel?: ReactNode; + /** + * Provide a `decorator` component to be rendered inside the `SidePanel` component + */ + decorator?: ReactNode; + /** * Sets the subtitle text */ @@ -247,6 +253,7 @@ export let SidePanel = React.forwardRef( closeIconDescription = defaults.closeIconDescription, condensedActions, currentStep = defaults.currentStep, + decorator, id = blockClass, includeOverlay, labelText, @@ -670,7 +677,9 @@ export let SidePanel = React.forwardRef( [`${blockClass}--right-placement`]: placement === 'right', [`${blockClass}--left-placement`]: placement === 'left', [`${blockClass}--slide-in`]: slideIn, - [`${blockClass}--has-ai-label`]: !!aiLabel || !!slug, + [`${blockClass}--has-decorator`]: decorator, + [`${blockClass}--has-slug`]: slug, + [`${blockClass}--has-ai-label`]: aiLabel, [`${blockClass}--condensed-actions`]: condensedActions, [`${blockClass}--has-overlay`]: includeOverlay, }, @@ -704,29 +713,39 @@ export let SidePanel = React.forwardRef( ); const renderHeader = () => { - const aiLabelCloseSize = + const closeSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm'; - let normalizedAILabel; + let normalizedDecorator; /** * slug is deprecated * can remove this condition in future release */ - if (slug && slug['type']?.displayName === 'Slug') { - normalizedAILabel = React.cloneElement( + if (slug && slug['type']?.displayName === 'AILabel') { + normalizedDecorator = React.cloneElement( slug as React.ReactElement, { // slug size is sm unless actions and size > md - size: aiLabelCloseSize, + size: closeSize, } ); } if (aiLabel && aiLabel['type']?.displayName === 'AILabel') { - normalizedAILabel = React.cloneElement( + normalizedDecorator = React.cloneElement( aiLabel as React.ReactElement, { // aiLabel size is sm unless actions and size > md - size: aiLabelCloseSize, + size: closeSize, + } + ); + } + + if (decorator?.['type']?.displayName === 'AILabel') { + normalizedDecorator = React.cloneElement( + decorator as React.ReactElement, + { + // decorator size is sm unless actions and size > md + size: closeSize, } ); } @@ -745,7 +764,7 @@ export let SidePanel = React.forwardRef( {currentStep > 0 && (