Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make Radio Button groups more composable #693

Closed
lucas-homer opened this issue Jun 27, 2022 · 1 comment · Fixed by #694
Closed

Make Radio Button groups more composable #693

lucas-homer opened this issue Jun 27, 2022 · 1 comment · Fixed by #694
Assignees

Comments

@lucas-homer
Copy link
Contributor

In AQE2, we have requirements for a radio button group where one option, when selected, should enable a supplemental dropdown input. See screenshot.. In the screenshot, you can see we were forced to put the optional dropdown below the radio button group, but we want to show it 'indented' so we can capture the fact that it's an optional "sub-field" only applicable when a particular radio button is the selected value.

At present, the SQFormRadioButtonGroup component only accepts children in the shape of an array of objects including label, value, and a few other properties. This is fine for simple/happy path cases, but in some cases we can have more customized requirements like the requirements in the AQE2 Extra Help radio button group. It would be handy to be able to do something like this, where children is an array of JSX Elements instead of an array of POJOs:

<SQFormRadioButtonGroup groupLabel="Extra Help">
  <SQFormRadioButton name="extraHelpLevel" label="I am not eligible" value="1" />
  <SQFormRadioButton name="extraHelpLevel" label="I receive Full Extra Help" value="2" />
  <SQFormRadioButton name="extraHelpLevel" label="I receive Partial Extra Help" value="3" />
    {values.extraHelpLevel === "3" && (
      <SomeCustomDropdown /> // uses `useSQFormContext` to dynamically render/enable
    )}
  <SQFormRadioButton name="extraHelpLevel" label="I do not receive any Extra Help" value="4" />
</SQFormRadioButtonGroup>
@lucas-homer lucas-homer self-assigned this Jun 27, 2022
@lucas-homer
Copy link
Contributor Author

dropping this here for reference -- https://selectquote.atlassian.net/browse/AQE2-1084

lucas-homer added a commit that referenced this issue Jun 30, 2022
SQFormRadioButtonGroup accepts children in shape of array of React
Elements

✅ Closes: #693
ghost pushed a commit that referenced this issue Jul 1, 2022
## [9.3.0](v9.2.0...v9.3.0) (2022-07-01)

### Features

* 🎸 SQFormRadioButtonGroup accepts React Element child arr ([248bec3](248bec3)), closes [#693](#693)
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 a pull request may close this issue.

1 participant