Skip to content

refactor(web-react): standalone Label, merge context without spreading to DOM#2545

Closed
crishpeen wants to merge 1 commit intorefactor/DS-2398-helpertext-standalone-and-aria-idsfrom
refactor/DS-2398-label-standalone-context-merge
Closed

refactor(web-react): standalone Label, merge context without spreading to DOM#2545
crishpeen wants to merge 1 commit intorefactor/DS-2398-helpertext-standalone-and-aria-idsfrom
refactor/DS-2398-label-standalone-context-merge

Conversation

@crishpeen
Copy link
Copy Markdown
Member

Description

Extracts a standalone Label component (from Field) and aligns HelperText and Label so context is merged for styling only and never spread onto the DOM. Form-field context (isDisabled, formFieldVariant, isRequired, isLabelHidden, isItem) is read via typed useContextProps(), merged with defaults and direct props (direct props override context), and only those resolved values are passed to the style hooks; the object passed to useStyleProps is built from defaults + props only, so no context keys reach transfer props or the DOM.

Additional context

  • Field/Label removed; new components/Label with useLabelStyleProps, README, tests, figma.
  • Form field components (TextFieldBase, Checkbox, Radio, Toggle, Select, Slider, FileUploader, UNSTABLE_FileUpload) provide PropsProvider with form-field context and no longer pass label classes from parent style hooks.
  • TextFieldBase style hook no longer forwards isLabelHidden to the input.
  • Review: confirm prop priority (direct > context > defaults) and that no context-only props appear on DOM nodes.

Issue reference

https://jira.almacareer.tech/browse/DS-2398

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 17, 2026

Deploy Preview for spirit-design-system-docsite ready!

Name Link
🔨 Latest commit 099d31d
🔍 Latest deploy log https://app.netlify.com/projects/spirit-design-system-docsite/deploys/69b91ab793e24400088ef1dd
😎 Deploy Preview https://deploy-preview-2545--spirit-design-system-docsite.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 17, 2026

Deploy Preview for spirit-design-system-storybook failed. Why did it fail? →

Name Link
🔨 Latest commit 099d31d
🔍 Latest deploy log https://app.netlify.com/projects/spirit-design-system-storybook/deploys/69b91ab7c8cb830008621fee

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 17, 2026

Deploy Preview for spirit-design-system ready!

Name Link
🔨 Latest commit 099d31d
🔍 Latest deploy log https://app.netlify.com/projects/spirit-design-system/deploys/69b91ab77d06040008e1b590
😎 Deploy Preview https://deploy-preview-2545--spirit-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@crishpeen crishpeen changed the base branch from main to refactor/DS-2398-helpertext-standalone-and-aria-ids March 17, 2026 09:15
Copy link
Copy Markdown
Contributor

@dlouhak dlouhak left a comment

Choose a reason for hiding this comment

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

Please, refactor FieldGroup and Item as well.

@crishpeen crishpeen marked this pull request as draft March 17, 2026 15:44
@crishpeen
Copy link
Copy Markdown
Member Author

moved to #2547

@crishpeen crishpeen closed this Mar 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants