Skip to content

feat(batch-selection): align with Fusion DS - #8152

Draft
nuria1110 wants to merge 1 commit into
masterfrom
batch-selection-audit
Draft

feat(batch-selection): align with Fusion DS#8152
nuria1110 wants to merge 1 commit into
masterfrom
batch-selection-audit

Conversation

@nuria1110

Copy link
Copy Markdown
Contributor

Proposed behaviour

Aligns BatchSelection component to Bulk Actions pattern in Fusion DS.
Deprecates disabled and colorTheme props.

image image

Current behaviour

BatchSelection is not aligned with Fusion DS.

Checklist

  • Commits follow our style guide
  • Related issues linked in commit messages if required
  • Screenshots are included in the PR if useful
  • All themes are supported if required
  • Unit tests added or updated if required
  • Playwright automation tests added or updated if required
  • Storybook added or updated if required
  • Translations added or updated (including creating or amending translation keys table in storybook) if required
  • Typescript d.ts file added or updated if required
  • Related docs have been updated if required

QA

  • Tested in provided StackBlitz sandbox/Storybook
  • Add new Playwright test coverage if required
  • Carbon implementation matches Design System/designs
  • UI Tests GitHub check reviewed if required

Additional context

Testing instructions

Aligns BatchSelection component to Bulk Actions pattern in Fusion DS. Deprecates `disabled` and
`colorTheme` props.

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Warning

  • Copilot's review of this pull request may be incomplete because some of the changed files are excluded by your Copilot content exclusion settings. See Excluding content from Copilot for details.

Pull request overview

Aligns BatchSelection with the Fusion DS “Bulk Actions” pattern by updating its layout, behavior, and supporting i18n/docs/tests. This refactor removes the previous “disabled children via context” behavior and introduces a dismiss/close affordance and a “selected out of total” message.

Changes:

  • Updates BatchSelection UI structure to a tile-based layout, adds onDismiss, smallScreen, and totalItems support, and removes the internal “disable children” context.
  • Updates i18n locale shape (batchSelection.ariaLabels.close, updated selected signature) and refreshes component docs/stories/tests accordingly.
  • Removes BatchSelection-context-based disabling logic from Button, ButtonMinor, IconButton, and Link.

Reviewed changes

Copilot reviewed 22 out of 22 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
src/components/batch-selection/batch-selection.component.tsx Refactors component to Fusion DS layout; adds dismiss button + total-items messaging.
src/components/batch-selection/batch-selection.style.ts Replaces legacy styling with new wrapper/content layout styles.
src/components/batch-selection/batch-selection.stories.tsx Updates Storybook stories to new pattern and adds example implementation.
src/components/batch-selection/batch-selection.mdx Updates documentation copy, examples, and translation keys table.
src/components/batch-selection/batch-selection.test.tsx Updates RTL unit tests to new rendering and dismiss behavior.
src/components/batch-selection/components.test-pw.tsx Updates Playwright mount component to use new Button-based actions.
src/components/batch-selection/batch-selection.pw.tsx Simplifies a11y coverage to new supported variants (default/hidden).
src/components/batch-selection/batch-selection-test.stories.tsx Updates chromatic snapshot coverage to new layout + small-screen variant.
src/components/batch-selection/batch-selection-interaction.stories.tsx Removes legacy interaction stories tied to old UI structure.
src/components/batch-selection/internal/batch-selection.context.ts Removes now-unused context used for disabling child actions.
src/components/button/button.component.tsx Removes BatchSelectionContext-based disabling logic from legacy Button.
src/components/button-minor/button-minor.component.tsx Removes BatchSelectionContext-based disabling logic from ButtonMinor.
src/components/icon-button/icon-button.component.tsx Removes BatchSelectionContext-based disabling logic from IconButton.
src/components/link/link.component.tsx Removes BatchSelectionContext-based disabling logic from Link.
src/locales/locale.ts Extends locale contract for BatchSelection aria label + total-aware selected message.
src/locales/en-gb.ts Adds BatchSelection close aria label and updates selected text format.
src/locales/de-de.ts Adds BatchSelection close aria label.
src/locales/es-es.ts Adds BatchSelection close aria label.
src/locales/fr-fr.ts Adds BatchSelection close aria label.
src/locales/fr-ca.ts Adds BatchSelection close aria label.
src/locales/pt-pt.ts Adds BatchSelection close aria label.
skills/carbon-react/components/batch-selection.md Updated (content excluded by policy; not reviewed).
Files excluded by content exclusion policy (1)
  • skills/carbon-react/components/batch-selection.md

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment on lines 40 to 44
export const BatchSelection = ({
disabled = false,
disabled,
children,
colorTheme = "transparent",
colorTheme,
selectedCount,

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

May have to have to maintain the previous translation key to prevent this and only render the new one when totalItems is provided.

Comment thread src/components/batch-selection/batch-selection.mdx
Comment thread src/locales/en-gb.ts
disabled?: boolean;
/** Hidden if true */
/** If true, the component is hidden. */
hidden?: boolean;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (non-blocking): I think we could deprecate the hidden prop and just encourage conditional rendering

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

3 participants