Align API and styles of boolean inputs #2105

connor-baer · 2023-05-12T11:50:39Z

Addresses #1875.

Purpose

The Checkbox, RadioButton, and Selector components and their grouped variants provide a way for users to select one or multiple options from a predefined list. Conidering their similarities, it's surprising how inconsistent their user experience and APIs are.

This PR aims to align the components as much as possible without introducing breaking changes.

Approach and changes

Consistency: Use the internal atomic field component in the CheckboxGroup and SelectorGroup components. Align the types for the options prop. Added the ability to mark fields as optional using the new required and optionalLabel props.
State: Added support for components to be used as uncontrolled components for better compatibility with form libraries such as react-hook-form. Group props take precedence over option props. New props: defaultValue, onBlur.
Deprecations: Deprecated the RadioButton and Selector components with plans to remove them in v7. They only make sense in groups and using the prebuilt RadioButtonGroup and SelectorGroup components ensures accessibility. Kept the Checkbox component which can be used standalone e.g. for terms & conditions.
Documentation: Added more detailed usage instructions. Used more realistic example content in the stories. Grouped related stories to shorten the length of the docs page and reduce our usage of Chromatic snapshots.
Tests: Removed all snapshot tests since styles are tested by the visual story tests powered by Chromatic. Aligned unit tests to be consistent between all components.

Definition of done

changeset-bot · 2023-05-12T11:50:43Z

🦋 Changeset detected

Latest commit: 5c0b401

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@sumup/circuit-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2023-05-12T11:50:44Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
oss-circuit-ui	✅ Ready (Inspect)	Visit Preview	✅ 1 resolved	May 22, 2023 3:49pm

codecov · 2023-05-12T11:55:13Z

Codecov Report

Merging #2105 (5c0b401) into main (b9500fc) will increase coverage by 0.05%.
The diff coverage is 97.50%.

@@            Coverage Diff             @@
##             main    #2105      +/-   ##
==========================================
+ Coverage   92.04%   92.10%   +0.05%     
==========================================
  Files         170      170              
  Lines        3571     3595      +24     
  Branches     1248     1266      +18     
==========================================
+ Hits         3287     3311      +24     
  Misses        263      263              
  Partials       21       21

Impacted Files	Coverage Δ
...cuit-ui/components/FieldAtoms/FieldDescription.tsx	`100.00% <ø> (ø)`
...ircuit-ui/components/FieldAtoms/FieldLabelText.tsx	`90.00% <ø> (ø)`
...t-ui/components/FieldAtoms/FieldValidationHint.tsx	`94.59% <ø> (ø)`
...cuit-ui/components/SelectorGroup/SelectorGroup.tsx	`86.66% <92.30%> (+2.66%)`	⬆️
...cuit-ui/components/CheckboxGroup/CheckboxGroup.tsx	`90.90% <100.00%> (+2.67%)`	⬆️
...s/circuit-ui/components/FieldAtoms/FieldLabels.tsx	`100.00% <100.00%> (ø)`
...circuit-ui/components/FieldAtoms/FieldWrappers.tsx	`100.00% <100.00%> (ø)`
.../circuit-ui/components/RadioButton/RadioButton.tsx	`92.30% <100.00%> (+1.39%)`	⬆️
...i/components/RadioButtonGroup/RadioButtonGroup.tsx	`90.90% <100.00%> (+2.02%)`	⬆️
...ckages/circuit-ui/components/Selector/Selector.tsx	`90.24% <100.00%> (+1.05%)`	⬆️

connor-baer · 2023-05-14T11:04:53Z

packages/circuit-ui/components/FieldAtoms/FieldDescription.tsx

@@ -29,8 +29,7 @@ const baseStyles = () => css`
  display: block;
  color: var(--cui-fg-subtle);

-  // TODO: Remove the next line once the Selector component is wrapped in the FieldWrapper component.


This component is no longer used in the Selector component.

connor-baer · 2023-05-14T11:13:02Z

packages/circuit-ui/components/RadioButton/RadioButton.tsx

@@ -186,7 +187,7 @@ const RadioButtonInput = styled('input')<InputElProps>(
 );

 /**
- * RadioButton component for forms.
+ * @deprecated Use the {@link RadioButtonGroup} component instead.


Trying out this new JSDoc syntax. In my editor it's just displayed as plain text, but ideally it links to the type definition of the RadioButtonGroup component.

connor-baer · 2023-05-16T09:37:31Z

@robinmetral Requesting an early review from you to get some feedback on the changes if you have time before you leave. The only thing missing are the rewritten/expanded unit tests.

I plan to release a canary version of these changes to test that there are no inadvertent breaking changes.

robinmetral

I really really like the improvements here!! Super nice to align component APIs, docs, stories. Thank you! 💯

Is this the one that you were thinking of releasing as a canary? While it looks fine to me I think it might be worth testing in an app before the stable release 🙂

robinmetral · 2023-05-16T12:19:41Z

packages/circuit-ui/components/Checkbox/Checkbox.mdx

- **Don not** rely on tooltips to explain a checkbox
- **Do not** use commas or semicolons at the end of each line
+- **Do** accompany the checkbox with a descriptive label
+- **Do** write the label in a positive manner (e.g. _"Send me reports"_ instead of _"Do not send me reports"_)


We should review these with Frank at some point 😬 but fine to keep in here for now

Side note: I started to move away from the do/don't bullet points in some new docs (I usually moved the points to relevant sections, e.g. accessibility, or component variations). At some point it might make sense to rethink structure for the docs and make it consistent across components

packages/circuit-ui/components/Checkbox/Checkbox.mdx

packages/circuit-ui/components/CheckboxGroup/CheckboxGroup.mdx

packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.mdx

packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.tsx

packages/circuit-ui/components/Selector/Selector.tsx

Co-authored-by: Robin Métral <robin.metral@sumup.com>

Squashed commit of the following: * Clarify label docs * Add tests for empty options * Refactor test suite * Update packages/circuit-ui/components/CheckboxGroup/CheckboxGroup.mdx * Align options prop type * Only log deprecation warning outside group components * Revise the boolean input docs * Uncontrolled boolean inputs * Use field atoms in CheckboxGroup * Deprecate the RadioButton and Selector components * Align SelectorGroup with other boolean inputs

github-actions bot added the 🗂 circuit-ui label May 12, 2023

vercel bot deployed to Preview May 12, 2023 12:37 View deployment

connor-baer force-pushed the feature/selectorgroup-validation branch from 3df00f9 to 0106192 Compare May 14, 2023 09:24

vercel bot deployed to Preview May 14, 2023 09:27 View deployment

connor-baer mentioned this pull request May 14, 2023

Various fixes for Storybook docs #2107

Merged

5 tasks

connor-baer force-pushed the feature/selectorgroup-validation branch from 0106192 to cd62e9c Compare May 14, 2023 09:32

vercel bot deployed to Preview May 14, 2023 09:34 View deployment

connor-baer force-pushed the feature/selectorgroup-validation branch from cd62e9c to 060892a Compare May 14, 2023 10:41

vercel bot deployed to Preview May 14, 2023 10:44 View deployment

vercel bot deployed to Preview May 14, 2023 11:36 View deployment

connor-baer commented May 14, 2023

View reviewed changes

connor-baer mentioned this pull request May 15, 2023

Version Packages #2106

Merged

connor-baer requested a review from robinmetral May 16, 2023 09:36

connor-baer added this to the v6.x milestone May 17, 2023

connor-baer mentioned this pull request May 17, 2023

Add field wrapper around RadioButtons #2098

Closed

5 tasks

robinmetral reviewed May 17, 2023

View reviewed changes

vercel bot deployed to Preview May 22, 2023 11:31 View deployment

connor-baer and others added 9 commits May 22, 2023 16:31

Align SelectorGroup with other boolean inputs

247b5f6

Deprecate the RadioButton and Selector components

c31c271

Use field atoms in CheckboxGroup

66ba278

Uncontrolled boolean inputs

2d6b2db

Revise the boolean input docs

a0380a5

Only log deprecation warning outside group components

5b73d0c

Align options prop type

d91743c

Update packages/circuit-ui/components/CheckboxGroup/CheckboxGroup.mdx

c654f46

Co-authored-by: Robin Métral <robin.metral@sumup.com>

Refactor test suite

83bb776

connor-baer force-pushed the feature/selectorgroup-validation branch from 5a29875 to 83bb776 Compare May 22, 2023 14:32

vercel bot deployed to Preview May 22, 2023 14:35 View deployment

Add tests for empty options

29fda64

vercel bot deployed to Preview May 22, 2023 14:51 View deployment

Clarify label docs

29468c6

connor-baer marked this pull request as ready for review May 22, 2023 14:57

connor-baer requested a review from a team as a code owner May 22, 2023 14:57

connor-baer requested review from tareqlol and removed request for a team May 22, 2023 14:57

vercel bot deployed to Preview May 22, 2023 14:57 View deployment

Fix prop type

5c0b401

vercel bot deployed to Preview May 22, 2023 15:49 View deployment

connor-baer merged commit 9aabce8 into main May 22, 2023

connor-baer deleted the feature/selectorgroup-validation branch May 22, 2023 15:57

This was referenced May 25, 2023

Add indeterminate prop to the Checkbox #1415

Merged

Clean up boolean inputs #2124

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Align API and styles of boolean inputs #2105

Align API and styles of boolean inputs #2105

connor-baer commented May 12, 2023 •

edited

Loading

changeset-bot bot commented May 12, 2023 •

edited

Loading

vercel bot commented May 12, 2023 •

edited

Loading

codecov bot commented May 12, 2023 •

edited

Loading

connor-baer May 14, 2023

connor-baer May 14, 2023

connor-baer commented May 16, 2023

robinmetral left a comment

robinmetral May 16, 2023

Align API and styles of boolean inputs #2105

Align API and styles of boolean inputs #2105

Conversation

connor-baer commented May 12, 2023 • edited Loading

Purpose

Approach and changes

Definition of done

changeset-bot bot commented May 12, 2023 • edited Loading

🦋 Changeset detected

vercel bot commented May 12, 2023 • edited Loading

codecov bot commented May 12, 2023 • edited Loading

Codecov Report

connor-baer May 14, 2023

Choose a reason for hiding this comment

connor-baer May 14, 2023

Choose a reason for hiding this comment

connor-baer commented May 16, 2023

robinmetral left a comment

Choose a reason for hiding this comment

robinmetral May 16, 2023

Choose a reason for hiding this comment

connor-baer commented May 12, 2023 •

edited

Loading

changeset-bot bot commented May 12, 2023 •

edited

Loading

vercel bot commented May 12, 2023 •

edited

Loading

codecov bot commented May 12, 2023 •

edited

Loading