Skip to content

refactor(web-react): extract HelperText and move useAriaIds to shared hooks#2541

Closed
crishpeen wants to merge 1 commit intorelease/v5-essencefrom
refactor/DS-2398-helpertext-standalone-and-aria-ids
Closed

refactor(web-react): extract HelperText and move useAriaIds to shared hooks#2541
crishpeen wants to merge 1 commit intorelease/v5-essencefrom
refactor/DS-2398-helpertext-standalone-and-aria-ids

Conversation

@crishpeen
Copy link
Copy Markdown
Member

Description

Extract HelperText into its own component and move useAriaIds to shared hooks.

  • HelperText: Moved from Field to standalone HelperText component with its own folder (stories, demo, figma, tests, README). Uses PropsContext for isDisabled and formFieldVariant; prop priority is direct props > context > defaultProps. Introduced FormFieldVariants constant (BOX, INLINE, ITEM) and use it everywhere instead of string literals.
  • useAriaIds: Moved from components/Field/useAriaIds.tsx to hooks/useAriaIds.ts; re-exported from Field for backward compatibility. Tests moved to hooks/__tests__/useAriaIds.test.tsx and expanded.
  • Form field context: All relevant components (TextFieldBase, Select, Toggle, Slider, FieldGroup, FileUploaderInput, Item, Checkbox, Radio, UNSTABLE_FileUpload) provide PropsProvider with isDisabled and formFieldVariant so HelperText (and later ValidationText) receive correct styling.

Additional context

  • Breaking: HelperText is no longer exported from Field; import from HelperText or the package root.
  • Review prop priority tests in HelperText.test.tsx and useAriaIds tests in hooks/__tests__/useAriaIds.test.tsx.

Issue reference

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

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 13, 2026

Deploy Preview for spirit-design-system ready!

Name Link
🔨 Latest commit 234e42c
🔍 Latest deploy log https://app.netlify.com/projects/spirit-design-system/deploys/69b41fb36a912600076e49f5
😎 Deploy Preview https://deploy-preview-2541--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.

@github-actions github-actions bot added the refactoring A code change that neither fixes a bug nor adds a feature label Mar 13, 2026
@crishpeen
Copy link
Copy Markdown
Member Author

Update the demo to match the web!

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.

Could you please take a look on this custom form field components? It's not valid due to extractions.

{helperText && <div className={classProps.helperText}>{helperText}</div>}

(also in Checkbox, Radio)

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

fixed comments in #2547, closing this in its favour

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

Labels

refactoring A code change that neither fixes a bug nor adds a feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants