-
Notifications
You must be signed in to change notification settings - Fork 18
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
Toggle input #397
Conversation
Trying to make this a more generic descriptor so it can be used intiutively on more components than just Popover
Serves as an abstraction of both radio and checkbox inputs
@@ -188,7 +188,7 @@ buttonComposedStories.add( | |||
] | |||
} | |||
popoverType={ | |||
PopoverType[select('popoverType', mapEnumKeys(PopoverType), 'Solid')] | |||
Appearance[select('popoverType', mapEnumKeys(Appearance), 'Solid')] |
There was a problem hiding this comment.
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 :(
There was a problem hiding this comment.
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' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
beep boop comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh good catch!
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 acheckbox
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 forInputType.Checkbox
withinInput
to prevent breaking changesChanges
Toggle
component that supports html "radio" and "checkbox" inputsOutline
orSolid
viaAppearance
IconFont
size
andcolor
can be customized (Large
size will work for the # checkbox)PopoverType
into the more genericAppearance
<SlideToggle.Label />
into a more discreet<InputLabel />
htmlFor
andtabIndex
props toInputLabel
so they can be configured for keyboard usageScreenshots
Checklist
Check all that apply