Created compressed EuiButtonGroup #2343
Conversation
|
The design was based on our Sketch file. But I feel that the selected states aren't pronounced enough, the iconOnly version in particular. It really gets lost in the complex example:
I'm open to any suggestions on the design here. |
There was a problem hiding this comment.
Scanned the code and tested in browser.
Noticed the following hover glitch. I think you might always want to add a title to your example. If you're feeling ambitious, these might warrant their own example page at this point, so you could separate out the examples / snippets. It's getting busy.
Other than the glitch issue, I think this is mergeable and my comments are only suggestions.
| border-width: 1px 0; | ||
| // Offset the background color from the border by 1px | ||
| padding: 1px; | ||
| background-clip: content-box; |
There was a problem hiding this comment.
Added more to the comment above
|
|
||
| export interface EuiButtonGroupIdToSelectedMap { | ||
| [id: string]: boolean; | ||
| } | ||
|
|
||
| export type GroupButtonSize = 's' | 'm'; | ||
| export type GroupButtonSize = 's' | 'm' | 'compressed'; |
There was a problem hiding this comment.
I think you could get away with changing this to xs to match the actual buton props. It, similarly, mostly changes the font size.
I know we're running into this a lot, and I'll throw my hands up the same way, but that's just a thought.
There was a problem hiding this comment.
Yeah I had considered this, but I think matching to the same name as the form compressed stuff will help connect the ideas that this should be used within compressed forms.
|
@snide I fixed the glitch @ryankeairns I updated the screenshot in the summary to match the styles we collaborated on. |
cchaos
force-pushed
the
compressed-button-group
branch
from
966fef0 to
3fa4367
Compare
To match our new compressed form controls
EuiButtonGroup's
buttonSizeprop now also acceptscompressed. Which creates the following.I also beefed up the tests for EuiButtonGroup that only had one in it.
Checklist
[ ] Checked for breaking changes and labeled appropriately[ ] Checked for accessibility including keyboard-only and screenreader modes