Skip to content

Required indicator on radio-group, select, combobox, and text-area#2496

Merged
mollykreis merged 26 commits intomainfrom
required-indicator
Jan 6, 2025
Merged

Required indicator on radio-group, select, combobox, and text-area#2496
mollykreis merged 26 commits intomainfrom
required-indicator

Conversation

@mollykreis
Copy link
Copy Markdown
Contributor

@mollykreis mollykreis commented Dec 12, 2024

Pull Request

🤨 Rationale

Add required-visible attributes to the radio-group, select, combobox, and text-area components as part of #2100.

There is still a need to add this attribute to the text-field and number-field. That will be done once the templates for those components have been forked (#2495).

👩‍💻 Implementation

Within the patterns directory, I created a mixin that can be used on elements that should have a requiredVisible property and required-visible attribute. Additionally, shared styling was added for the requiredVisible state and a function was created to generate the template for an element's label. This is a function rather than a constant template because each element already had an existing label structure that I didn't want to change as part of this PR.

The template of each element included in this PR was also updated to set aria-required based on the value of requiredVisible.

I also updated the styling of icons to solve a problem I encountered when shrinking the asterisk icon down to 5x5.

🧪 Testing

  • Manually tested
  • New matrix tests
  • Unit tests for the new mixin
  • New unit tests for the ARIA behavior of each element

✅ Checklist

  • I have updated the project documentation to reflect my changes or determined no changes are needed.

@mollykreis
Copy link
Copy Markdown
Contributor Author

@msmithNI - will you buddy this PR for me?

@mollykreis mollykreis requested a review from msmithNI December 12, 2024 20:49
@mollykreis mollykreis changed the title Required indicator Required indicator on radio-group, select, combobox, and text-area Dec 12, 2024
Comment thread packages/storybook/src/nimble/radio-group/radio-group.stories.ts
@fredvisser
Copy link
Copy Markdown
Contributor

Looks like nodejs/node#56127 highlights the build issue we have here.

@mollykreis mollykreis marked this pull request as ready for review January 2, 2025 20:09
Comment thread packages/nimble-components/src/patterns/required-visible/template.ts Outdated
Comment thread packages/nimble-components/src/icon-base/styles.ts Outdated
Comment thread packages/nimble-components/src/icon-base/styles.ts Outdated
@mollykreis mollykreis requested a review from fredvisser as a code owner January 3, 2025 21:20
@mollykreis mollykreis requested a review from rajsite January 3, 2025 22:27
Comment thread packages/nimble-components/src/icon-base/styles.ts Outdated
Copy link
Copy Markdown
Contributor

@jattasNI jattasNI left a comment

Choose a reason for hiding this comment

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

No need to wait for @fredvisser to review; I think he might be OOO this week and we can address any feedback from him in follow up PRs.

@mollykreis mollykreis merged commit f558bd7 into main Jan 6, 2025
@mollykreis mollykreis deleted the required-indicator branch January 6, 2025 19:48
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.

6 participants