diff --git a/CHANGELOG.md b/CHANGELOG.md index b26de23bcbf..e2ce5f32c5d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ No public interface changes since `0.0.23`. - Added `EuiInMemoryTable`, which encapsulates sorting, searching, selection, and pagination state and logic ([#390](https://github.com/elastic/eui/pull/390)) - Added stack trace information to `EuiErrorBoundary` ([#428](https://github.com/elastic/eui/pull/428)) +- Removed hover and focus states from non-selectable `EuiSideNavItem`s ([#434](https://github.com/elastic/eui/pull/434)) **Bug fixes** diff --git a/src/components/side_nav/__snapshots__/side_nav.test.js.snap b/src/components/side_nav/__snapshots__/side_nav.test.js.snap index 93cf92eb247..98e0432d8a0 100644 --- a/src/components/side_nav/__snapshots__/side_nav.test.js.snap +++ b/src/components/side_nav/__snapshots__/side_nav.test.js.snap @@ -166,7 +166,7 @@ exports[`EuiSideNav items is rendered 1`] = `
- +
- +
- +
@@ -283,7 +283,7 @@ exports[`EuiSideNav items renders items using a specified callback 1`] = ` class="euiSideNavItem euiSideNavItem--root" > @@ -366,7 +366,7 @@ exports[`EuiSideNav items renders items which are links 1`] = ` class="euiSideNavItem euiSideNavItem--root" > - +
- +
@@ -482,7 +482,7 @@ exports[`EuiSideNav items renders selected item and automatically opens parent i
- +
- +
- +
- +
@@ -557,7 +557,7 @@ exports[`EuiSideNav items renders selected item and automatically opens parent i
- +
diff --git a/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap b/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap index c399b28ecce..fbd52c9f2f5 100644 --- a/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap +++ b/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap @@ -4,7 +4,7 @@ exports[`EuiSideNavItem is rendered 1`] = `
- -
`; @@ -27,7 +28,7 @@ exports[`EuiSideNavItem isSelected defaults to false 1`] = `
- -
`; @@ -46,7 +48,7 @@ exports[`EuiSideNavItem isSelected is rendered when specified as true 1`] = `
- -
`; @@ -65,7 +68,7 @@ exports[`EuiSideNavItem preserves child's classes 1`] = `
- -
`; diff --git a/src/components/side_nav/_side_nav_item.scss b/src/components/side_nav/_side_nav_item.scss index e360c658d4b..db5622f36b2 100644 --- a/src/components/side_nav/_side_nav_item.scss +++ b/src/components/side_nav/_side_nav_item.scss @@ -10,14 +10,16 @@ padding: $euiSizeXS / 2 0; color: $euiColorFullShade; /* 2 */ - &:hover { - text-decoration: underline; - } + &.euiSideNavItemButton--isClickable { + &:hover { + text-decoration: underline; + } - // Focus state background regardless of index/selected state. - &:focus { - background-color: $euiFocusBackgroundColor !important; - color: $euiColorPrimary !important; + // Focus state background regardless of index/selected state. + &:focus { + background-color: $euiFocusBackgroundColor !important; + color: $euiColorPrimary !important; + } } &.euiSideNavItemButton-isOpen { diff --git a/src/components/side_nav/side_nav_item.js b/src/components/side_nav/side_nav_item.js index 0d35f695503..cb3345d909d 100644 --- a/src/components/side_nav/side_nav_item.js +++ b/src/components/side_nav/side_nav_item.js @@ -21,14 +21,25 @@ const defaultRenderItem = ({ href, onClick, className, children, ...rest }) => { ); } + else if (onClick) { + return ( + + ); + } + return ( - + ); }; @@ -71,6 +82,7 @@ export const EuiSideNavItem = ({ }); const buttonClasses = classNames('euiSideNavItemButton', { + 'euiSideNavItemButton--isClickable': onClick || href, 'euiSideNavItemButton-isOpen': depth > 0 && isOpen && !isSelected, 'euiSideNavItemButton-isSelected': isSelected, });