Add EuiFacetButton #1167
Add EuiFacetButton #1167
Conversation
src-docs/src/views/button/facet.js
Outdated
| }, { | ||
| id: 'facet5', | ||
| label: 'Just here to show truncation of really long labels', | ||
| iconColor: VISUALIZATION_COLORS[5], |
There was a problem hiding this comment.
I think it's useful to include quantity on the truncated example, otherwise it looks like the text pushes the quantity display away.
There was a problem hiding this comment.
Makes sense, I'll add
|
|
||
| expect(component) | ||
| .toMatchSnapshot(); | ||
| }); |
There was a problem hiding this comment.
please add tests for the various states, similar to features displayed in the docs (disabled, loading, with color or avatar, etc)
| children, | ||
| className, | ||
| icon, | ||
| isDisabled, |
There was a problem hiding this comment.
I remember we discussed isFoo vs. foo, but don't remember where we ended up?
There was a problem hiding this comment.
I carried this over from the other buttons (specifically empty button). Figured we should at least be consistent there.
There was a problem hiding this comment.
Between types of buttons, that is.
|
Can you update the mockup to show some facets in the selected state? Playing with them in the docs I'm not sure the selected state is communicative enough. |
|
I don't want to update that particular mock up screen, but here is one that where I finalized the selected state.
|
- Updated tests - Allowing `0` as a quantity
|
thanks for the additional mock! |
There was a problem hiding this comment.
Code looks good. Documentation is clever. Visuals looks clean.
I might include a more basic example showing them in their default states. Might also be good to lay them out in a horizontal version just so people have a copy/paste example. Then your current doc example exists as the... ok, now here's all the stuff you can do to configure them.
Not necessary for this PR, just a thought so we follow our existing doc patterns.
|
Ok Can I get a quick re-check? Sorry, and thanks in advance! |
This adds the
EuiButtonFacetcomponent seen in this mockup.The documentation also explains how to lay them out.
cc @bevacqua