Revery: UI - Component: Radio Buttons

Created on 23 Jan 2019  路  4Comments  路  Source: revery-ui/revery

We need a concept of 'Radio Buttons' in Revery: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

These should be doable with the current set of primitives we have today. Each Radio Button could be represented by a <ClickableOpacity />, and include a glyph (powered by font-awesome - there is a 'dot-circle' glyph that would be perfect for the 'selected' state: https://fontawesome.com/icons/dot-circle?style=regular and an open circle for the 'unselected' state: https://fontawesome.com/icons/circle?style=regular)

The biggest challenge with these is figuring out the right way to represent them. This React component - react-radio-buttons: https://github.com/mu29/react-radio-buttons#readme uses a <RadioGroup /> and nested <RadioButton />. This approach would be a bit awkward today though since we don't have context at the moment (the RadioButton would need a way to communicate selection back up to the 'group' - context would be a convenient abstraction for that).

A-components good first issue help wanted

All 4 comments

All of our current custom components live here: https://github.com/revery-ui/revery/tree/master/src/UI_Components - so that's a good starting point to check out what it looks like to create a component

react-radio-buttons is a great reference! @bryphe I'll take this on!

Sweet! Thank you @schinns!

Think #254 closes this (let me know if I'm wrong)

Was this page helpful?
0 / 5 - 0 ratings