Skip to content
New issue

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

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

Already on GitHub? # to your account

Toggle input #397

Merged
merged 15 commits into from
Nov 18, 2019
Merged

Toggle input #397

merged 15 commits into from
Nov 18, 2019

Conversation

alexpaxton
Copy link
Contributor

@alexpaxton alexpaxton commented Nov 16, 2019

Closes #387

Rather than create a large checkbox specifically for the # flow, I decided to create a more generic and customizable "toggle" component. Although the Input component currently supports a checkbox type I did not want to add more complexity to its API.

While I would suggest to anyone building a form to use the new Toggle component, I did not remove support for InputType.Checkbox within Input to prevent breaking changes

Changes

  • Introduce Toggle component that supports html "radio" and "checkbox" inputs
    • Can be Outline or Solid via Appearance
    • Has a dot by default, but can be customized to use any icon from IconFont
    • size and color can be customized (Large size will work for the # checkbox)
  • Abstract PopoverType into the more generic Appearance
    • "Appearance" seemed like a more intuitive name now that it is being used across 2 components, and potentially more
  • Refactor <SlideToggle.Label /> into a more discreet <InputLabel />
  • Add htmlFor and tabIndex props to InputLabel so they can be configured for keyboard usage

Screenshots

radio-input-tabbing
toggle-examples
checkbox-tab-mouse

Checklist

Check all that apply

  • Updated documentation to reflect changes
  • Added entry to top of Changelog with link to PR (not issue)
  • Tests pass
  • Peer reviewed and approved
  • Signed CLA (if not already signed)

@alexpaxton alexpaxton requested a review from a team November 18, 2019 18:26
@ghost ghost requested review from asalem1 and ebb-tide and removed request for a team November 18, 2019 18:26
@@ -188,7 +188,7 @@ buttonComposedStories.add(
]
}
popoverType={
PopoverType[select('popoverType', mapEnumKeys(PopoverType), 'Solid')]
Appearance[select('popoverType', mapEnumKeys(Appearance), 'Solid')]

Choose a reason for hiding this comment

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

I'm finding popoverType= Appearance[...] a little confusing :(

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I could rename the popoverType prop to appearance for ease of use

@@ -21,7 +22,7 @@ import {

// Notes
import SlideToggleReadme from './SlideToggle.md'
import SlideToggleLabelReadme from './SlideToggleLabel.md'
// import SlideToggleLabelReadme from './SlideToggleLabel.md'

Choose a reason for hiding this comment

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

beep boop comment

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh good catch!

@alexpaxton alexpaxton merged commit 7289b87 into master Nov 18, 2019
@alexpaxton alexpaxton deleted the toggle-input branch November 18, 2019 22:59
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create large checkbox
2 participants