Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(fieldset): add support for new validation designs #7190

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

nuria1110
Copy link
Contributor

Proposed behaviour

Updates Fieldset component to support new validation designs by removing the zero margin spacing on the input fields within the component. The component will now also consume fieldSpacing from Form, which will be applied to all fields within it.

image

Current behaviour

Fieldset does not support new validation designs and does not consume fieldSpacing from `Form.

image

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

Updates `Fieldset` component to support new validation designs by removing the zero margin spacing
on the input fields within the component. The component will now also consume `fieldSpacing` from
`Form`, which will be applied to all fields within it.
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Moved these examples with legacy styles to test stories as we don't want them in the docs page, but we still want Chromatic to capture them as they are still supported with legacy validations.

@DipperTheDan DipperTheDan self-requested a review February 5, 2025 09:20
display: flex;
align-items: center;
margin-bottom: 32px;
font-size: 20px;
margin-bottom: var(--spacing250);
Copy link
Contributor

Choose a reason for hiding this comment

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

praise: Well done for making these design token values

@nuria1110 nuria1110 marked this pull request as ready for review February 5, 2025 13:07
@nuria1110 nuria1110 requested review from a team as code owners February 5, 2025 13:07
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