[New Nav Feature] EuiPinnableListGroup#3061
Merged
cchaos merged 12 commits intoelastic:feature/collapsible_navfrom Mar 16, 2020
Merged
[New Nav Feature] EuiPinnableListGroup#3061cchaos merged 12 commits intoelastic:feature/collapsible_navfrom
cchaos merged 12 commits intoelastic:feature/collapsible_navfrom
Conversation
added 8 commits
March 12, 2020 15:23
…list_group` Also made `onPinClick` required
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3061/ |
elizabetdev
approved these changes
Mar 13, 2020
Contributor
elizabetdev
left a comment
There was a problem hiding this comment.
It looks good! I reviewed the code and tested the build preview.
I'm just wondering if the "Pinned button with onClick" focus state shouldn't be similar to the active link state.
thompsongl
suggested changes
Mar 13, 2020
Contributor
thompsongl
left a comment
There was a problem hiding this comment.
This is a good idea 👍
I think we need i18n for the labels
src/components/list_group/pinnable_list_group/pinnable_list_group.tsx
Outdated
Show resolved
Hide resolved
src/components/list_group/pinnable_list_group/pinnable_list_group.tsx
Outdated
Show resolved
Hide resolved
Contributor
Author
Yeah that's an artificat from |
Contributor
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3061/ |
Contributor
Author
|
I have pushed a commit that fixes the EuiListGroup focus/hover states and added the ability for consumers to override the default titles for the pin icons. |
Contributor
Author
|
@myasonik The one thing we should consider with a11y in the underlying EuiListGroup is the tabbing. It might get really cumbersome for users to have to tab from |
Contributor
Author
|
Jenkins, test this |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3061/ |
8 tasks
cchaos
added a commit
that referenced
this pull request
Mar 17, 2020
* Added EuiCollapsibleNavGroupList component * Added content to EuiCollapsibleNavList * Update to use latest props from EuiListGroup * Passing `color` to EuiListGroup * Added active link to examples * Better docs for nav list and added snippets * cleanup * Renamed `EuiCollapsibleList` to `EuiPinnableListGroup` and moved to `list_group` Also made `onPinClick` required * i18n * Fix focus and focus-within states With IE fallback * Allowing pin icon title/aria-labels to be custom Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
cchaos
added a commit
that referenced
this pull request
Mar 18, 2020
* Added EuiCollapsibleNavGroupList component * Added content to EuiCollapsibleNavList * Update to use latest props from EuiListGroup * Passing `color` to EuiListGroup * Added active link to examples * Better docs for nav list and added snippets * cleanup * Renamed `EuiCollapsibleList` to `EuiPinnableListGroup` and moved to `list_group` Also made `onPinClick` required * i18n * Fix focus and focus-within states With IE fallback * Allowing pin icon title/aria-labels to be custom Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
cchaos
added a commit
that referenced
this pull request
Mar 26, 2020
* Added EuiCollapsibleNavGroupList component * Added content to EuiCollapsibleNavList * Update to use latest props from EuiListGroup * Passing `color` to EuiListGroup * Added active link to examples * Better docs for nav list and added snippets * cleanup * Renamed `EuiCollapsibleList` to `EuiPinnableListGroup` and moved to `list_group` Also made `onPinClick` required * i18n * Fix focus and focus-within states With IE fallback * Allowing pin icon title/aria-labels to be custom Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
cchaos
added a commit
that referenced
this pull request
Mar 27, 2020
* [Feature] Added `EuiCollapsibleNav` component (#2977) * [New Nav Feature] Added `ghost` colored EuiListGroupItem (#3018) * [New Nav Feature] Created `EuiCollapsibleGroup` (#3031) * [New Nav Feature] EuiPinnableListGroup (#3061) * [K8 Nav Feature] Added `home` and `menu` glyphs to EuiIcon (#3109) * [New Nav Feature] Final docs examples and patterns (#3117) * [New Nav Feature] Move collapsible nav toggle button to be part of EuiCollapsibleNav (#3168)
elizabetdev
pushed a commit
to elizabetdev/eui
that referenced
this pull request
Mar 30, 2020
* [Feature] Added `EuiCollapsibleNav` component (elastic#2977) * [New Nav Feature] Added `ghost` colored EuiListGroupItem (elastic#3018) * [New Nav Feature] Created `EuiCollapsibleGroup` (elastic#3031) * [New Nav Feature] EuiPinnableListGroup (elastic#3061) * [K8 Nav Feature] Added `home` and `menu` glyphs to EuiIcon (elastic#3109) * [New Nav Feature] Final docs examples and patterns (elastic#3117) * [New Nav Feature] Move collapsible nav toggle button to be part of EuiCollapsibleNav (elastic#3168)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
EuiPinnableListGroup
Collapsible nav groups can take any children they want. Users can put a simple list of links or use EuiListGroup. To support the "pinning" action for K8, I created a component that simply extends EuiListGroup and applies a standardized pinnable action.
I had originally created this as
EuiCollapsibleListbut felt it really wasn't tied to the collapsible nav but just another pattern on top of list group.Checklist
[ ] Checked for breaking changes and labeled appropriately[ ] A changelog entry exists and is marked appropriately