From 825192ce1981194f26d7e751cb3d2b3f84421db1 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 11 Mar 2019 20:56:01 -0400 Subject: [PATCH 1/2] More cleanup by applying the common/determined linkItem props directly in the drawer group --- src-docs/src/views/nav_drawer/nav_drawer.js | 70 +------------------ src/components/nav_drawer/_index.scss | 1 + src/components/nav_drawer/_nav_drawer.scss | 14 ---- .../nav_drawer/_nav_drawer_group.scss | 16 +++++ .../nav_drawer/nav_drawer_flyout.js | 5 +- src/components/nav_drawer/nav_drawer_group.js | 13 +++- 6 files changed, 31 insertions(+), 88 deletions(-) create mode 100644 src/components/nav_drawer/_nav_drawer_group.scss diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index 06ffe5f4ce3..d043bf1f906 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -42,9 +42,6 @@ export default class extends Component { { label: 'Recently viewed', iconType: 'clock', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Recently viewed items', flyoutMenu: { title: 'Recent items', listItems: [ @@ -52,9 +49,6 @@ export default class extends Component { label: 'My dashboard', href: '/#/layout/nav-drawer', iconType: 'dashboardApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'My dashboard', extraAction: { color: 'subdued', iconType: 'starEmpty', @@ -66,9 +60,6 @@ export default class extends Component { label: 'Workpad with title that wraps', href: '/#/layout/nav-drawer', iconType: 'canvasApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Workpad with title that wraps', extraAction: { color: 'subdued', iconType: 'starEmpty', @@ -80,9 +71,7 @@ export default class extends Component { label: 'My logs', href: '/#/layout/nav-drawer', iconType: 'loggingApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'My logs', + 'aria-label': 'This is an alternate aria-label', extraAction: { color: 'subdued', iconType: 'starEmpty', @@ -96,9 +85,6 @@ export default class extends Component { { label: 'Favorites', iconType: 'starEmpty', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Favorited items', flyoutMenu: { title: 'Favorite items', listItems: [ @@ -106,9 +92,6 @@ export default class extends Component { label: 'My workpad', href: '/#/layout/nav-drawer', iconType: 'canvasApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'My workpad', extraAction: { color: 'subdued', iconType: 'starFilled', @@ -121,9 +104,6 @@ export default class extends Component { label: 'My logs', href: '/#/layout/nav-drawer', iconType: 'loggingApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'My logs', extraAction: { color: 'subdued', iconType: 'starFilled', @@ -142,9 +122,6 @@ export default class extends Component { label: 'Canvas', href: '/#/layout/nav-drawer', iconType: 'canvasApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Canvas', isActive: true, extraAction: { color: 'subdued', @@ -158,9 +135,6 @@ export default class extends Component { label: 'Discover', href: '/#/layout/nav-drawer', iconType: 'discoverApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Discover', extraAction: { color: 'subdued', iconType: 'pin', @@ -172,9 +146,6 @@ export default class extends Component { label: 'Visualize', href: '/#/layout/nav-drawer', iconType: 'visualizeApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Visualize', extraAction: { color: 'subdued', iconType: 'pin', @@ -186,9 +157,6 @@ export default class extends Component { label: 'Dashboard', href: '/#/layout/nav-drawer', iconType: 'dashboardApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Dashboard', extraAction: { color: 'subdued', iconType: 'pin', @@ -200,9 +168,6 @@ export default class extends Component { label: 'Machine learning', href: '/#/layout/nav-drawer', iconType: 'machineLearningApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Machine learning', extraAction: { color: 'subdued', iconType: 'pin', @@ -214,9 +179,6 @@ export default class extends Component { label: 'Graph', href: '/#/layout/nav-drawer', iconType: 'graphApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Graph', extraAction: { color: 'subdued', iconType: 'pin', @@ -231,9 +193,6 @@ export default class extends Component { label: 'APM', href: '/#/layout/nav-drawer', iconType: 'apmApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'APM', extraAction: { color: 'subdued', iconType: 'pin', @@ -245,9 +204,6 @@ export default class extends Component { label: 'Infrastructure', href: '/#/layout/nav-drawer', iconType: 'infraApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Infra', extraAction: { color: 'subdued', iconType: 'pin', @@ -259,9 +215,6 @@ export default class extends Component { label: 'Log viewer', href: '/#/layout/nav-drawer', iconType: 'loggingApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Logs', extraAction: { color: 'subdued', iconType: 'pin', @@ -273,9 +226,6 @@ export default class extends Component { label: 'Uptime', href: '/#/layout/nav-drawer', iconType: 'upgradeAssistantApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Graph', extraAction: { color: 'subdued', iconType: 'pin', @@ -287,9 +237,6 @@ export default class extends Component { label: 'Maps', href: '/#/layout/nav-drawer', iconType: 'gisApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Maps', extraAction: { color: 'subdued', iconType: 'pin', @@ -301,9 +248,6 @@ export default class extends Component { label: 'SIEM', href: '/#/layout/nav-drawer', iconType: 'securityAnalyticsApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'SIEM', extraAction: { color: 'subdued', iconType: 'pin', @@ -317,9 +261,6 @@ export default class extends Component { { label: 'Admin', iconType: 'managementApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Admin', flyoutMenu: { title: 'Tools and settings', listItems: [ @@ -327,9 +268,6 @@ export default class extends Component { label: 'Dev tools', href: '/#/layout/nav-drawer', iconType: 'devToolsApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Dev tools', extraAction: { color: 'subdued', iconType: 'starEmpty', @@ -341,9 +279,6 @@ export default class extends Component { label: 'Stack Monitoring', href: '/#/layout/nav-drawer', iconType: 'monitoringApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Monitoring', extraAction: { color: 'subdued', iconType: 'starEmpty', @@ -355,9 +290,6 @@ export default class extends Component { label: 'Stack Management', href: '/#/layout/nav-drawer', iconType: 'managementApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Management', extraAction: { color: 'subdued', iconType: 'starEmpty', diff --git a/src/components/nav_drawer/_index.scss b/src/components/nav_drawer/_index.scss index 5ed4c301a2f..bb973574c19 100644 --- a/src/components/nav_drawer/_index.scss +++ b/src/components/nav_drawer/_index.scss @@ -4,3 +4,4 @@ // Components @import 'nav_drawer'; @import 'nav_drawer_flyout'; +@import 'nav_drawer_group'; diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss index e2f6d044fc5..95456c3094e 100644 --- a/src/components/nav_drawer/_nav_drawer.scss +++ b/src/components/nav_drawer/_nav_drawer.scss @@ -22,19 +22,6 @@ &-hasFooter { padding-bottom: $euiSizeXXL; } - - .euiListGroupItem__label { - transition: all $euiAnimSpeedExtraFast; - } - } - - .euiListGroupItem__button:focus { - background-color: $euiFocusBackgroundColor; - border-radius: $euiBorderRadius; - } - - .euiListGroupItem__label { - line-height: $euiSize; } .euiNavDrawer__expandButton { @@ -101,7 +88,6 @@ width: 0; &.euiNavDrawer-isExpanded .euiNavDrawerMenu { - .euiListGroupItem__icon { margin-right: $euiSizeM; } diff --git a/src/components/nav_drawer/_nav_drawer_group.scss b/src/components/nav_drawer/_nav_drawer_group.scss new file mode 100644 index 00000000000..bb9d8a070bf --- /dev/null +++ b/src/components/nav_drawer/_nav_drawer_group.scss @@ -0,0 +1,16 @@ +.euiNavDrawerGroup__item { + line-height: $euiSize; + + .euiListGroupItem__label { + transition: all $euiAnimSpeedExtraFast; + } + + .euiListGroupItem__button { + color: inherit; // Force color to inherit from regular text color in case it's an anchor tag + + &:focus { + background-color: $euiFocusBackgroundColor; + border-radius: $euiBorderRadius; + } + } +} diff --git a/src/components/nav_drawer/nav_drawer_flyout.js b/src/components/nav_drawer/nav_drawer_flyout.js index 3fbbf684db8..01b5477aaae 100644 --- a/src/components/nav_drawer/nav_drawer_flyout.js +++ b/src/components/nav_drawer/nav_drawer_flyout.js @@ -3,7 +3,8 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { EuiTitle } from '../title'; -import { EuiListGroup } from '../list_group'; +import { EuiNavDrawerGroup } from './nav_drawer_group'; +import { EuiListGroup } from '../list_group/list_group'; export const EuiNavDrawerFlyout = ({ className, title, isCollapsed, listItems, wrapText, ...rest }) => { const classes = classNames( @@ -22,7 +23,7 @@ export const EuiNavDrawerFlyout = ({ className, title, isCollapsed, listItems, w {...rest} > - + ); }; diff --git a/src/components/nav_drawer/nav_drawer_group.js b/src/components/nav_drawer/nav_drawer_group.js index adf6158c57b..d5072766b3b 100644 --- a/src/components/nav_drawer/nav_drawer_group.js +++ b/src/components/nav_drawer/nav_drawer_group.js @@ -10,8 +10,10 @@ export const EuiNavDrawerGroup = ({ className, listItems, flyoutMenuButtonClick, className ); - // Create handlers if flyoutMenu exists - const newListItems = listItems.map((item) => { + const listItemsExists = listItems && listItems.length; + + // Alter listItems object with prop flyoutMenu and extra props + const newListItems = listItemsExists && listItems.map((item) => { // If the flyout menu exists, pass back the list of times and the title with the onClick handler of the item const { flyoutMenu, ...itemProps } = item; if (flyoutMenu && flyoutMenuButtonClick) { @@ -20,6 +22,11 @@ export const EuiNavDrawerGroup = ({ className, listItems, flyoutMenuButtonClick, itemProps.onClick = () => flyoutMenuButtonClick(items, title); } + // Make some declarations of props for the side nav implementation + itemProps.className = classNames('euiNavDrawerGroup__item', itemProps.className); + itemProps.size = itemProps.size || 's'; + itemProps['aria-label'] = item['aria-label'] || item.label; + // And return the item with conditional `onClick` and without `flyoutMenu` return { ...itemProps }; }); @@ -37,7 +44,7 @@ EuiNavDrawerGroup.propTypes = { title: PropTypes.string.isRequired, listItems: EuiListGroup.propTypes.listItems.isRequired, }), - })).isRequired, + })), /** * While not normally required, it is required to pass a function for handling * of the flyout menu button click From 2965c2a53886f9d7ce75fd19003a7cee5ade0361 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 11 Mar 2019 21:02:52 -0400 Subject: [PATCH 2/2] typo --- src/components/nav_drawer/nav_drawer_group.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/nav_drawer/nav_drawer_group.js b/src/components/nav_drawer/nav_drawer_group.js index d5072766b3b..68837a24e56 100644 --- a/src/components/nav_drawer/nav_drawer_group.js +++ b/src/components/nav_drawer/nav_drawer_group.js @@ -23,8 +23,8 @@ export const EuiNavDrawerGroup = ({ className, listItems, flyoutMenuButtonClick, } // Make some declarations of props for the side nav implementation - itemProps.className = classNames('euiNavDrawerGroup__item', itemProps.className); - itemProps.size = itemProps.size || 's'; + itemProps.className = classNames('euiNavDrawerGroup__item', item.className); + itemProps.size = item.size || 's'; itemProps['aria-label'] = item['aria-label'] || item.label; // And return the item with conditional `onClick` and without `flyoutMenu`