-
Notifications
You must be signed in to change notification settings - Fork 843
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Feature Branch] EuiCollapsibleNav #3019
Conversation
Preview documentation changes for this PR: https://eui.elastic.co/pr_3019/ |
EuiCollapsibleNav
component (#2977)
Preview documentation changes for this PR: https://eui.elastic.co/pr_3019/ |
2 similar comments
Preview documentation changes for this PR: https://eui.elastic.co/pr_3019/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3019/ |
942cc34
to
6d62843
Compare
Preview documentation changes for this PR: https://eui.elastic.co/pr_3019/ |
1 similar comment
Preview documentation changes for this PR: https://eui.elastic.co/pr_3019/ |
43dab28
to
e322ded
Compare
Preview documentation changes for this PR: https://eui.elastic.co/pr_3019/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3019/ |
Wasn't sure where else to put this so hopefully this is ok...
|
As usual, fantastic work! Just took a quick pass (these auto-generated preview links are 🔥) and noticed one small change that might be missing. In response to the user testing feedback, I believe @johnbarrierwilson added some weight and darker color to the Home/pinned links to make them more visible. Is that correct John? |
Sure, that's just a matter of changing the example from |
@myasonik The reason there are Also, the home link really shouldn't have a |
@ryankeairns @myasonik I have addressed those in #3168 |
Got it! Ye ol' hard refresh fixed it :) Thank you |
* Setting up file structure * Added EuiFlyout to render, moved to left, and added docking * mock euioverlaymask * Better docs for EuiCollapsibleNav * Cleanup css * Adding responsive behavior * No longer using EuiFlyout directly * added a `close` button
* Added color=ghost to list group item And fixed class names for list group * Added `color` prop to EuiListGroup Fixed color on disabled list group items * Fixing hover colors for each list item color * ghost example * Increase the height of large items too Fixes the hidden underline in focus state * Fixing demo to not apply black bg to list item * Snaps
* Added `EuiCollapsibleNavGroup` component * Initial render of nav group * Adding background color options * Fixing more colors * Added `collapsible` prop * cleanup * remove slugify * Added `titleSize` and `titleElement` to groups and better docs * better docs * snaps * doc cleanoup * Fixing contrast of focus state of dark bg * specific classname target * Using EuiTitle and sizing to wrap title * `collapsible` -> `isCollapsible` * Fixing `id` as state and exporting proper Prop types
* 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>
* Fixed the passing of `size` from EuiListGroup to items * Fix padding of `EuiCollapsibleNavGroup` if extra action is passed * Reset line-height of heading in button * Fix `title` type for EuiCollapsibleNavGroup * Starting full pattern example * Adjusted EuiFlyout position based on fixed EuiHeader * Utility CSS helper for simple overflow scroll without shadows * Adding GuideFullScreen component * Adding content and storing states * Fixing incompatible type with `href` * Fix EuiHorizontalSizing when in flex groups * Cleanup * Quick fix to nav heading * Using subdued text color * Ghost button in dark section for now * Some browser fixes * Fixes for mobile - Including the addition of the EuiCollapsibleNavToggle component * render prop pattern * clean up * Adding accessibility (?) * One more a11y piece * Addressing some a11y concerns - Focus state for accordions without arrow toggles (underline) - Added link name in pin/unpin titles * More a11y fixes
…iCollapsibleNav (#3168) * Move collapsible nav toggle button to be part of EuiCollapsibleNav * No role group * Alterations to top links and added `pinnable` prop to pinnable list items
16518ef
to
ac79449
Compare
Pulling this out of draft and working on a changelog. 🎉 |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3019/ |
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.
Did code reviews on previous PRs. I ran a browser and accessibility check as well as double checked all functionality. This is mergible.
The following are extremely small quibles I'd prefer we leave to later PRs.
I think we could probably improve the animation hiccup that happens when you undock.
I think we could improve the mobile experience by removing the dual scroll system and make it scroll against a single list.
Preview documentation changes for this PR: https://eui.elastic.co/pr_3019/ |
* [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 branch is the culmination of work needed to achieve the new K8 navigation.
PR's:
1. #2977 Added
EuiCollapsibleNav
component : Added the flyout mechanism and docking ability.2. #3018 Added
ghost
colored EuiListGroupItem andcolor
to EuiListGroup, and increased overall size oflarge
EuiListGroupItem3. #3031 Added
EuiCollapsibleNavGroup
4. #3061 Added
EuiPinnableListGroup
5. #3117 Final docs examples and patterns
6. #3168 Move collapsible nav toggle button to be part of EuiCollapsibleNav
Consuming app todos:
1. Remove any hacks for flyouts with fixed headers See this comment
Checklist
[ ] Checked for breaking changes and labeled appropriately