Skip to content

Conversation

@mofiebiger
Copy link
Contributor

@mofiebiger mofiebiger commented May 4, 2022

✨ What Changed and Why

This PR is a functionally complete implementation of a <RadioGroup /> component based on headlessui.dev/react/radio-group

Things that this PR implements:

  • Support for disabled component and individual options
  • Support for a optional label element
  • Full mouse support for focus and active elements
  • Full keyboard support (Enter/Space/ArrowUp/ArrowDown/ArrowLeft/ArrowRight)
  • Full accessibility implementation and focus management
  • Sample implementation in dummy app
  • Ported the 30 React component tests for radio-group as Ember integration tests.

😈 Before

NA

😇 After

headlessui-radio-group.mp4

🌈 Testing

  1. Check out to branch phorest:feature/radio-group
  2. Visit http://localhost:4200/radio-group

Closes: #103

@mofiebiger mofiebiger changed the title Add supplementary test assertions for radiogroup ✨ Implement <RadioGroup /> component May 4, 2022
@mofiebiger mofiebiger force-pushed the feature/radio-group branch 2 times, most recently from 8133369 to 7f1f661 Compare May 12, 2022 14:57
@mofiebiger mofiebiger force-pushed the feature/radio-group branch from 70b269c to cfaf9a7 Compare May 13, 2022 15:24
@mofiebiger mofiebiger marked this pull request as ready for review May 13, 2022 15:26
@mofiebiger mofiebiger force-pushed the feature/radio-group branch from cfaf9a7 to cee3ed9 Compare May 16, 2022 11:56
Copy link
Collaborator

@dmcnamara-eng dmcnamara-eng left a comment

Choose a reason for hiding this comment

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

Hey @mofiebiger I've made one request for changes, but this looks almost ready to merge 🙌

role='radiogroup'
aria-labelledby={{this.radioGroupLabel}}
aria-disabled={{@disabled}}
{{did-insert this.setTabIndex}}
Copy link
Collaborator

Choose a reason for hiding this comment

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

Hey @mofiebiger did-insert can be considered harmful. Could you convert this to a modifier?

See:

https://nullvoxpopuli.com/avoiding-lifecycle/
https://github.com/GavinJoyce/ember-headlessui/pull/116/files

Copy link
Collaborator

Choose a reason for hiding this comment

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

Also, if someone would be willing to totally remove @ember/render-modifiers, that would be a huge help <3

Copy link

Choose a reason for hiding this comment

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

@NullVoxPopuli is that best done once you've sorted the monorepo? If not, on which branch? Happy to take that job on either way.

Copy link
Collaborator

Choose a reason for hiding this comment

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

I think git is smart enough to figure it out, actually. shouldn't be too bad. could happen on any branch. no need to wait on me <3

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@dmcnamara-eng, the did-insert and will-destroy lifecycle hooks are now converted to modifiers. Please see changes here: 291c4da

@roomman roomman mentioned this pull request Jun 2, 2022
@mofiebiger mofiebiger force-pushed the feature/radio-group branch from cee3ed9 to 291c4da Compare July 11, 2022 13:45
@dmcnamara-eng dmcnamara-eng merged commit 95b1f02 into GavinJoyce:master Jul 12, 2022
@NullVoxPopuli NullVoxPopuli added the enhancement New feature or request label Jul 16, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Implement <RadioGroup> component

5 participants