[New Nav Feature] Created `EuiCollapsibleGroup` #3031

cchaos · 2020-03-10T17:24:18Z

EuiCollapsibleGroup

This is the accordion style grouping that will make up these three portions:

The contents of the group doesn't matter, hence the scribbles

Instead of trying to create 3 components, I made one that is child-agnostic and can be an accordion via collapsible=true or not. Consumers can also add a header with title and iconType. They can also choose the background color.

Accessibility

Since it does wrap the EuiAccordion when collapsible=true, if there's any a11y needs for that specifically, we should do it in EuiAccordion and make an issue for that.

The one thing I had to deal with is the focus states of the dark background accordion toggle arrow were hard to see. So I forced a different focus ring color with overrides.

Dark mode

In dark mode, they all just get different shades of dark that aren't that noticeable from each other. 🤷‍♀

Checklist

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in IE11 and Firefox
Props have proper autodocs
Added documentation examples
Added or updated jest tests
~~[ ] Checked for breaking changes and labeled appropriately~~
Checked for accessibility including keyboard-only and screenreader modes
~~[ ] A changelog entry exists and is marked appropriately~~ Will be added to feature PR

myasonik · 2020-03-10T17:47:04Z

...focus states of the dark background accordion toggle arrow are hard to see. Should I force a different color with overrides?

+1

kibanamachine · 2020-03-10T20:21:19Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3031/

kibanamachine · 2020-03-10T20:43:33Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3031/

snide

Looks simple enough. Did a quick screenreader check and browsed the code. Only bit I noticed was collapsable spitting out some weirdness in the autodocs. Note reads well enough though.

src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx

src/global_styling/utility/_animations.scss

src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx

cchaos

Only bit I noticed was collapsable spitting out some weirdness in the autodocs. Note reads well enough though.

Yeah this happens when a prop is technically a boolean, but depending on it's value requires another prop or extends another type. Hopefully that'll all get fixed via GSOC 😏

eui/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx

Lines 50 to 74 in e8d7b39

    
           type GroupAsAccordion = EuiCollapsibleNavGroupProps & 
        
             Omit<EuiAccordionProps, 'id'> & { 
        
               /** 
        
                * If `true`, wraps children in the body of an accordion, 
        
                * using the `title` (required for use with `collapsible`) as the button 
        
                */ 
        
               collapsible: true; 
        
               /** 
        
                * The title gets wrapped in the appropriate heading level 
        
                * with the option to add an iconType 
        
                */ 
        
               title: ReactNode; 
        
             }; 
        
           type GroupAsDiv = EuiCollapsibleNavGroupProps & { 
        
             /** 
        
              * When `false`, simply renders a div without any accordion functionality 
        
              */ 
        
             collapsible?: false; 
        
             /** 
        
              * The title gets wrapped in the appropriate heading level 
        
              * with the option to add an iconType 
        
              */ 
        
             title?: ReactNode; 
        
           };

src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx

kibanamachine · 2020-03-10T21:50:44Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3031/

thompsongl

Looking good; just a couple requests.

src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.test.tsx

src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx

kibanamachine · 2020-03-11T21:23:28Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3031/

thompsongl

LGTM!

* 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

* [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)

* [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)

cchaos added 11 commits March 10, 2020 11:48

Added EuiCollapsibleNavGroup component

2a5078c

Initial render of nav group

c63cf7b

Adding background color options

6e84fc5

Fixing more colors

8a40a0e

Added collapsible prop

3c1c60d

cleanup

14c4b8c

remove slugify

bab71c5

Added titleSize and titleElement to groups and better docs

e61248b

better docs

19274d9

snaps

5f9973d

doc cleanoup

2f1d37b

cchaos added 2 commits March 10, 2020 16:00

Fixing contrast of focus state of dark bg

5342670

specific classname target

c1d46da

Using EuiTitle and sizing to wrap title

e8d7b39

cchaos marked this pull request as ready for review March 10, 2020 20:26

cchaos requested review from snide, thompsongl and elizabetdev March 10, 2020 20:26

cchaos added the priority label Mar 10, 2020

snide approved these changes Mar 10, 2020

View reviewed changes

cchaos commented Mar 10, 2020

View reviewed changes

src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx Outdated Show resolved Hide resolved

collapsible -> isCollapsible

c4cd139

thompsongl suggested changes Mar 11, 2020

View reviewed changes

Fixing id as state and exporting proper Prop types

46b7d80

cchaos requested a review from thompsongl March 11, 2020 21:05

thompsongl approved these changes Mar 12, 2020

View reviewed changes

cchaos merged commit 760d8c0 into elastic:feature/collapsible_nav Mar 12, 2020

cchaos deleted the into-feature/collapsible_group branch March 12, 2020 15:34

cchaos mentioned this pull request Mar 12, 2020

[Feature Branch] EuiCollapsibleNav #3019

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[New Nav Feature] Created `EuiCollapsibleGroup` #3031

[New Nav Feature] Created `EuiCollapsibleGroup` #3031

cchaos commented Mar 10, 2020 •

edited

Loading

myasonik commented Mar 10, 2020

kibanamachine commented Mar 10, 2020

kibanamachine commented Mar 10, 2020

snide left a comment

cchaos left a comment •

edited

Loading

kibanamachine commented Mar 10, 2020

thompsongl left a comment

kibanamachine commented Mar 11, 2020

thompsongl left a comment

	type GroupAsAccordion = EuiCollapsibleNavGroupProps &
	Omit<EuiAccordionProps, 'id'> & {
	/**
	* If `true`, wraps children in the body of an accordion,
	* using the `title` (required for use with `collapsible`) as the button
	*/
	collapsible: true;
	/**
	* The title gets wrapped in the appropriate heading level
	* with the option to add an iconType
	*/
	title: ReactNode;
	};

	type GroupAsDiv = EuiCollapsibleNavGroupProps & {
	/**
	* When `false`, simply renders a div without any accordion functionality
	*/
	collapsible?: false;
	/**
	* The title gets wrapped in the appropriate heading level
	* with the option to add an iconType
	*/
	title?: ReactNode;
	};

[New Nav Feature] Created EuiCollapsibleGroup #3031

[New Nav Feature] Created EuiCollapsibleGroup #3031

Conversation

cchaos commented Mar 10, 2020 • edited Loading

EuiCollapsibleGroup

Accessibility

Dark mode

Checklist

myasonik commented Mar 10, 2020

kibanamachine commented Mar 10, 2020

kibanamachine commented Mar 10, 2020

snide left a comment

Choose a reason for hiding this comment

cchaos left a comment • edited Loading

Choose a reason for hiding this comment

kibanamachine commented Mar 10, 2020

thompsongl left a comment

Choose a reason for hiding this comment

kibanamachine commented Mar 11, 2020

thompsongl left a comment

Choose a reason for hiding this comment

[New Nav Feature] Created `EuiCollapsibleGroup` #3031

[New Nav Feature] Created `EuiCollapsibleGroup` #3031

cchaos commented Mar 10, 2020 •

edited

Loading

cchaos left a comment •

edited

Loading