feat(fieldset): align with Fusion DS by nuria1110 · Pull Request #7964 · Sage/carbon

nuria1110 · 2026-05-14T13:44:15Z

Proposed behaviour

Aligns Fieldset to Fusion DS and applies fusion-tokens.

Adds size prop to support "small", "medium" and "large" sizes.
Adds legendHint prop to support hint text:

Adds orientation prop to support "horizontal" and "vertical" layouts:

Adds error and warning props to support validation:

Adds labelWeight prop to support "regular" and "bold" child input labels for all Carbon inputs:

Current behaviour

Fieldset is not aligned to Fusion DS.

Checklist

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

tomdavies73 · 2026-05-19T09:39:13Z

            onClick={() => contentEditorRef.current?.focus()}
            isRequired={required}
            labelId={`${namespace}-label`}
+            isLarge={actualSize === "large"}


nitpick: you've used actualSize === "large" twice you could make this into a const further up. Not a huge deal though.

The label and hintText components need to be updated to the newer versions so I might leave this as is since this will likely have to be removed later on.

tomdavies73 · 2026-05-19T09:40:16Z

-                            required={required}
-                            error={!!error}
+                            required={required || fieldsetRequired}
+                            error={!!error || fieldsetError}


nitpick: you've used required || fieldsetRequired twice you could make this into a const further up. Not a huge deal though.

Can't really see where else I've used it in this file?

Sorry this comment should have been about !!error || fieldsetErrorbeing used twice

tomdavies73 · 2026-05-19T09:41:26Z

      >
        <Input
-          aria-invalid={!!error}
+          aria-invalid={!!error || fieldsetError}


nitpick: you've used error or !!error || fieldsetError twice-ish you could make this into a const further up. Not a huge deal though.

I'll leave this as is since this component currently in progress.

tomdavies73 · 2026-05-19T09:42:15Z

            id={uniqueId}
            name={uniqueName}
-            aria-invalid={!!error}
+            aria-invalid={!!error || !!fieldsetError}


nitpick: you've used error or !!error || fieldsetError twice you could make this into a const further up. Not a huge deal though.

tomdavies73 · 2026-05-19T09:45:11Z

+      flex-wrap: wrap;
+    `}
+
+    .label {


question: do we need to use a className here? Could we not just target the label element directly like so:

label { }

If we don't need this we can likely remove the className that has been added in both label component files (modern & legacy)

tomdavies73 · 2026-05-19T09:47:48Z

        ref={wrapperRef}
        role="presentation"
-        size={size}
+        size={fieldsetSize || size}


nitpick: you've used fieldsetSize|| size twice you could make this into a const further up. Not a huge deal though.

tomdavies73 · 2026-05-19T09:49:24Z

+  $size: "small" | "medium" | "large";
+};
+
+export const StyledLegend = styled.legend<StyledLegendProps>`


question: Instead of this styled component, could we potentially use the new RequiredFieldsIndicator? No problem if it is not viable

Mainly did this to update the font, colour etc but we could look into replacing the ::after to apply the asterisk, would prefer to do this separately since this could be done to all components but will leave as is for now for consistency.

tomdavies73 · 2026-05-19T09:50:53Z

+};
+
+export type StyledFieldsetProps = {
+  $size: "small" | "medium" | "large";


suggestion: I see we've redefined $size: "small" | "medium" | "large a fair bit in this file, could we make this into a shared type to avoid repetition?

tomdavies73 · 2026-05-19T09:52:45Z

+  const uniqueId = id || internalId.current;
+
+  const legendHintId = legendHint ? `${uniqueId}-hint` : undefined;
+  const validationId = (error || warning) && `${uniqueId}-validation-message`;


nitpick: could make error || warning into a const above like hasError

Not too sure if I think this is necessary since it wouldn't be reused anywhere else.

tomdavies73 · 2026-05-19T09:55:40Z

+            {children}
+          </FieldsetContext.Provider>
+        </StyledFieldsetContent>
+        {!validationMessagePositionTop && validationMessage()}


praise: I like the way you've done this

Copilot

Pull request overview

Aligns the public Fieldset component with Fusion DS by introducing new layout/validation/typography capabilities, plus a new FieldsetContext to cascade size/required/error state into descendant Carbon inputs.

Changes:

Reworks Fieldset markup + styling to support size, legendHint, orientation, validation messaging, and labelWeight.
Introduces FieldsetContext and updates multiple inputs (Textbox/Textarea/TextEditor/Date/Checkbox + internal CheckableInput) to consume Fieldset-provided required, sizing, and/or error state.
Updates docs, Storybook stories, and Jest/Playwright coverage for the new behavior.

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/components/textbox/internal/next/text-input.component.tsx	Consumes `FieldsetContext` for size/required/error to align textbox behavior inside fieldsets.
src/components/textarea/textarea.component.tsx	Consumes `FieldsetContext` for required/error propagation.
src/components/text-editor/text-editor.component.tsx	Consumes `FieldsetContext` for size/required/error propagation into the editor.
src/components/fieldset/fieldset.test.tsx	Expands Jest coverage for new Fieldset props/behaviors.
src/components/fieldset/fieldset.style.ts	Replaces legacy styles with token-driven Fusion-aligned styles (size/orientation/label weight).
src/components/fieldset/fieldset.stories.tsx	Updates stories to demonstrate new props and Fusion-aligned behavior.
src/components/fieldset/fieldset.pw.tsx	Updates Playwright accessibility coverage for the updated Fieldset.
src/components/fieldset/fieldset.mdx	Updates documentation and examples to reflect the new API and behavior.
src/components/fieldset/fieldset.component.tsx	Rebuilds Fieldset implementation, adds new props, validation rendering, and provides `FieldsetContext`.
src/components/fieldset/fieldset-test.stories.tsx	Updates Storybook test stories to cover new prop combinations and child variations.
src/components/fieldset/components.test-pw.tsx	Simplifies the Playwright mounting wrapper component used by a11y tests.
src/components/fieldset/internal/fieldset.context.ts	Adds `FieldsetContext` used to cascade size/required/error state.
src/components/date/date.component.tsx	Consumes `FieldsetContext` size to align DateInput sizing in a Fieldset.
src/components/checkbox/checkbox.component.tsx	Consumes `FieldsetContext` size/error for checkbox visuals/validation inside a Fieldset.
src/internal/checkable-input/checkable-input.component.tsx	Consumes `FieldsetContext` required to apply required semantics to checkable inputs inside Fieldset.
skills/carbon-react/components/fieldset.md	Regenerated skills docs reflecting the new Fieldset API.

+  test(`should pass accessibility tests with warning validation`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<FieldsetComponent error="error message" />);



-test("Fieldset Legend adds an asterisk after the text when the field is mandatory", () => {
+// coverage
+test("should render render with expected styles when `orientation` is 'horizontal'", () => {


+      {(legend || legendHint) && (
+        <div>
+          {legend && (
+            <StyledLegend
+              $isRequired={required}
+              data-element="legend"
+              data-role="legend"
+              $size={size}
+            >
+              {legend}
+            </StyledLegend>
+          )}
+
+          {legendHint && (
+            <HintText id={legendHintId} size={size}>
+              {legendHint}
+            </HintText>
+          )}
+        </div>
      )}


designerlisa · 2026-06-01T14:42:12Z

@nuria1110 Great work overall, looking good! 👍

A few small things to flag:

the label-to-input gap inside Fieldset (green color gap) looks like it's currently inheriting from TextInput's gap, but per the Figma spec it should use a fixed 4px across all sizes.

Also, per the Figma spec, the error/warning message should sit below the input box.

designerlisa · 2026-06-02T14:42:54Z

@nuria1110 Thanks for the fixing, looking good! Gap confirmed fixed ✅

carbonci · 2026-06-08T10:32:59Z

🎉 This PR is included in version 159.9.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

nuria1110 self-assigned this May 14, 2026

nuria1110 added Pending Review Pending QA Pending UX QA Squad Front End labels May 14, 2026

nuria1110 force-pushed the fieldset-audit branch from d1debcb to d4fa621 Compare May 14, 2026 14:16

tomdavies73 reviewed May 19, 2026

View reviewed changes

nuria1110 force-pushed the fieldset-audit branch from d4fa621 to 313657b Compare May 26, 2026 12:38

nuria1110 requested a review from Copilot May 26, 2026 14:19

Copilot started reviewing on behalf of nuria1110 May 26, 2026 14:20 View session

Copilot AI reviewed May 26, 2026

View reviewed changes

mihai-albu-sage self-requested a review May 26, 2026 18:02

tomdavies73 previously approved these changes May 28, 2026

View reviewed changes

mihai-albu-sage previously approved these changes May 28, 2026

View reviewed changes

nuria1110 marked this pull request as ready for review May 28, 2026 09:50

nuria1110 requested review from a team as code owners May 28, 2026 09:50

nuria1110 added Passed Review and removed Pending Review labels May 28, 2026

nuria1110 marked this pull request as draft June 2, 2026 13:25

nuria1110 dismissed stale reviews from mihai-albu-sage and tomdavies73 via be61c6e June 2, 2026 13:25

nuria1110 marked this pull request as ready for review June 2, 2026 13:34

designerlisa added Passed UX QA and removed Pending UX QA labels Jun 2, 2026

paulrobinson88 approved these changes Jun 8, 2026

View reviewed changes

paulrobinson88 added Passed QA and removed Pending QA labels Jun 8, 2026

tomdavies73 approved these changes Jun 8, 2026

View reviewed changes

mihai-albu-sage approved these changes Jun 8, 2026

View reviewed changes

edleeks87 approved these changes Jun 8, 2026

View reviewed changes

feat(fieldset): align with Fusion DS

7e491c6

nuria1110 force-pushed the fieldset-audit branch from d9d1ef4 to 7e491c6 Compare June 8, 2026 10:18

nuria1110 merged commit aead984 into master Jun 8, 2026
29 checks passed

nuria1110 deleted the fieldset-audit branch June 8, 2026 10:30

carbonci added the released label Jun 8, 2026

Conversation

nuria1110 commented May 14, 2026

Proposed behaviour

Current behaviour

Checklist

QA

Additional context

Testing instructions

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nuria1110 May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tomdavies73 May 19, 2026 • edited by edleeks87 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

designerlisa commented Jun 1, 2026

Uh oh!

designerlisa commented Jun 2, 2026

Uh oh!

Uh oh!

carbonci commented Jun 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

8 participants

nuria1110 May 26, 2026 •

edited

Loading

tomdavies73 May 19, 2026 •

edited by edleeks87

Loading