Skip to content

Commit

Permalink
Side nav items only behave clickable if they are
Browse files Browse the repository at this point in the history
  • Loading branch information
cchaos committed Feb 21, 2018
1 parent 27bd089 commit 5b3a7b9
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 54 deletions.
44 changes: 22 additions & 22 deletions src/components/side_nav/__snapshots__/side_nav.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ exports[`EuiSideNav items is rendered 1`] = `
<div
class="euiSideNavItem euiSideNavItem--root"
>
<button
<div
class="euiSideNavItemButton"
>
<span
Expand All @@ -178,14 +178,14 @@ exports[`EuiSideNav items is rendered 1`] = `
A
</span>
</span>
</button>
</div>
<div
class="euiSideNavItem__items"
>
<div
class="euiSideNavItem euiSideNavItem--trunk"
>
<button
<div
class="euiSideNavItemButton"
>
<span
Expand All @@ -197,12 +197,12 @@ exports[`EuiSideNav items is rendered 1`] = `
B
</span>
</span>
</button>
</div>
</div>
<div
class="euiSideNavItem euiSideNavItem--trunk"
>
<button
<div
class="euiSideNavItemButton"
>
<span
Expand Down Expand Up @@ -233,7 +233,7 @@ exports[`EuiSideNav items is rendered 1`] = `
/>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -283,7 +283,7 @@ exports[`EuiSideNav items renders items using a specified callback 1`] = `
class="euiSideNavItem euiSideNavItem--root"
>
<a
class="euiSideNavItemButton"
class="euiSideNavItemButton euiSideNavItemButton--isClickable"
data-test-id="my-custom-element"
href="http://www.elastic.co"
>
Expand Down Expand Up @@ -366,7 +366,7 @@ exports[`EuiSideNav items renders items which are links 1`] = `
class="euiSideNavItem euiSideNavItem--root"
>
<a
class="euiSideNavItemButton"
class="euiSideNavItemButton euiSideNavItemButton--isClickable"
href="http://www.elastic.co"
>
<span
Expand All @@ -385,7 +385,7 @@ exports[`EuiSideNav items renders items which are links 1`] = `
<div
class="euiSideNavItem euiSideNavItem--trunk"
>
<button
<div
class="euiSideNavItemButton"
>
<span
Expand All @@ -397,12 +397,12 @@ exports[`EuiSideNav items renders items which are links 1`] = `
B
</span>
</span>
</button>
</div>
</div>
<div
class="euiSideNavItem euiSideNavItem--trunk"
>
<button
<div
class="euiSideNavItemButton"
>
<span
Expand Down Expand Up @@ -433,7 +433,7 @@ exports[`EuiSideNav items renders items which are links 1`] = `
/>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -482,7 +482,7 @@ exports[`EuiSideNav items renders selected item and automatically opens parent i
<div
class="euiSideNavItem euiSideNavItem--root"
>
<button
<div
class="euiSideNavItemButton"
>
<span
Expand All @@ -494,14 +494,14 @@ exports[`EuiSideNav items renders selected item and automatically opens parent i
A
</span>
</span>
</button>
</div>
<div
class="euiSideNavItem__items"
>
<div
class="euiSideNavItem euiSideNavItem--trunk"
>
<button
<div
class="euiSideNavItemButton"
>
<span
Expand All @@ -513,12 +513,12 @@ exports[`EuiSideNav items renders selected item and automatically opens parent i
B
</span>
</span>
</button>
</div>
</div>
<div
class="euiSideNavItem euiSideNavItem--trunk"
>
<button
<div
class="euiSideNavItemButton euiSideNavItemButton-isOpen"
>
<span
Expand All @@ -530,14 +530,14 @@ exports[`EuiSideNav items renders selected item and automatically opens parent i
C
</span>
</span>
</button>
</div>
<div
class="euiSideNavItem__items"
>
<div
class="euiSideNavItem euiSideNavItem--branch"
>
<button
<div
class="euiSideNavItemButton euiSideNavItemButton-isSelected"
>
<span
Expand All @@ -549,15 +549,15 @@ exports[`EuiSideNav items renders selected item and automatically opens parent i
D
</span>
</span>
</button>
</div>
<div
class="euiSideNavItem__items"
/>
</div>
<div
class="euiSideNavItem euiSideNavItem--branch"
>
<button
<div
class="euiSideNavItemButton"
>
<span
Expand All @@ -569,7 +569,7 @@ exports[`EuiSideNav items renders selected item and automatically opens parent i
E
</span>
</span>
</button>
</div>
</div>
</div>
</div>
Expand Down
48 changes: 26 additions & 22 deletions src/components/side_nav/__snapshots__/side_nav_item.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,80 +4,84 @@ exports[`EuiSideNavItem is rendered 1`] = `
<div
class="euiSideNavItem"
>
<button
<div
class="euiSideNavItemButton"
>
<span
class="euiSideNavItemButton__content"
>
<span
class="euiSideNavItemButton__label"
/>
>
<button
aria-label="aria-label"
class="testClass1 testClass2"
data-test-subj="test subject string"
/>
</span>
</span>
</button>
<button
aria-label="aria-label"
class="testClass1 testClass2"
data-test-subj="test subject string"
/>
</div>
</div>
`;

exports[`EuiSideNavItem isSelected defaults to false 1`] = `
<div
class="euiSideNavItem"
>
<button
<div
class="euiSideNavItemButton"
>
<span
class="euiSideNavItemButton__content"
>
<span
class="euiSideNavItemButton__label"
/>
>
<button />
</span>
</span>
</button>
<button />
</div>
</div>
`;

exports[`EuiSideNavItem isSelected is rendered when specified as true 1`] = `
<div
class="euiSideNavItem"
>
<button
<div
class="euiSideNavItemButton euiSideNavItemButton-isSelected"
>
<span
class="euiSideNavItemButton__content"
>
<span
class="euiSideNavItemButton__label"
/>
>
<button />
</span>
</span>
</button>
<button />
</div>
</div>
`;

exports[`EuiSideNavItem preserves child's classes 1`] = `
<div
class="euiSideNavItem"
>
<button
<div
class="euiSideNavItemButton"
>
<span
class="euiSideNavItemButton__content"
>
<span
class="euiSideNavItemButton__label"
/>
>
<button
class="test"
/>
</span>
</span>
</button>
<button
class="test"
/>
</div>
</div>
`;
16 changes: 9 additions & 7 deletions src/components/side_nav/_side_nav_item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
18 changes: 15 additions & 3 deletions src/components/side_nav/side_nav_item.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,25 @@ const defaultRenderItem = ({ href, onClick, className, children, ...rest }) => {
);
}

else if (onClick) {
return (
<button
className={className}
onClick={onClick}
{...rest}
>
{children}
</button>
);
}

return (
<button
<div
className={className}
onClick={onClick}
{...rest}
>
{children}
</button>
</div>
);
};

Expand Down Expand Up @@ -71,6 +82,7 @@ export const EuiSideNavItem = ({
});

const buttonClasses = classNames('euiSideNavItemButton', {
'euiSideNavItemButton--isClickable': onClick || href,
'euiSideNavItemButton-isOpen': depth > 0 && isOpen && !isSelected,
'euiSideNavItemButton-isSelected': isSelected,
});
Expand Down

0 comments on commit 5b3a7b9

Please sign in to comment.