Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Improve contrast for EuiCollapsibleNav close link #3465

Merged
merged 12 commits into from
May 13, 2020
+54 −67
Merged

Improve contrast for EuiCollapsibleNav close link #3465

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
bef99da
Improving close button contrast
miukimiu May 11, 2020
f6d6e25
Button empty small screens
miukimiu May 11, 2020
35936f5
Changelog
miukimiu May 12, 2020
df2cc38
Addressing pr feedback
miukimiu May 12, 2020
adb279f
Hiding text for xs screens
miukimiu May 13, 2020
9decabc
Updating test
miukimiu May 13, 2020
814851b
Merge remote-tracking branch 'upstream/master' into contrast-collapsi…
miukimiu May 13, 2020
f4d8020
Update src/components/collapsible_nav/collapsible_nav.tsx
miukimiu May 13, 2020
480bc70
Update src/components/collapsible_nav/_collapsible_nav.scss
miukimiu May 13, 2020
1726be9
Updating test
miukimiu May 13, 2020
23800ef
Removing unecessary css and adding missing comment
miukimiu May 13, 2020
14c21e6
Adding missing semicolon
miukimiu May 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
- Added `utcOffset` prop to `EuiSuperDatePicker` ([#3436](https://github.com/elastic/eui/pull/3436))
- Added `partition` key to `EuiChartThemeType` for Partition chart support ([#3387](https://github.com/elastic/eui/pull/3387))
- Updated `EuiImage`'s `caption` prop type from `string` to `ReactNode` ([#3387](https://github.com/elastic/eui/pull/3387))
- Improved contrast for `EuiCollapsibleNav` close button ([#3465](https://github.com/elastic/eui/pull/3465))
- Fixed `EuiCodeEditor` console error when using the editor without import the default theme ([#3454](https://github.com/elastic/eui/pull/3454))

**Bug Fixes**
Expand Down
70 changes: 21 additions & 49 deletions src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ Array [
id="id"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton class"
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton class"
data-test-subj="test"
type="button"
>
Expand All @@ -66,13 +66,9 @@ Array [
data-euiicon-type="cross"
/>
<span
class="euiButtonEmpty__text"
class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
>
<span
class="euiCollapsibleNav__closeButtonLabel"
>
close
</span>
close
</span>
</span>
</button>
Expand Down Expand Up @@ -113,7 +109,7 @@ Array [
id="id"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
type="button"
>
<span
Expand All @@ -125,13 +121,9 @@ Array [
data-euiicon-type="cross"
/>
<span
class="euiButtonEmpty__text"
class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
>
<span
class="euiCollapsibleNav__closeButtonLabel"
>
close
</span>
close
</span>
</span>
</button>
Expand Down Expand Up @@ -174,7 +166,7 @@ Array [
id="id"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
type="button"
>
<span
Expand All @@ -186,13 +178,9 @@ Array [
data-euiicon-type="cross"
/>
<span
class="euiButtonEmpty__text"
class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
>
<span
class="euiCollapsibleNav__closeButtonLabel"
>
close
</span>
close
</span>
</span>
</button>
Expand Down Expand Up @@ -229,7 +217,7 @@ Array [
id="id"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
type="button"
>
<span
Expand All @@ -241,13 +229,9 @@ Array [
data-euiicon-type="cross"
/>
<span
class="euiButtonEmpty__text"
class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
>
<span
class="euiCollapsibleNav__closeButtonLabel"
>
close
</span>
close
</span>
</span>
</button>
Expand Down Expand Up @@ -282,7 +266,7 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
id="id"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
type="button"
>
<span
Expand All @@ -294,13 +278,9 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
data-euiicon-type="cross"
/>
<span
class="euiButtonEmpty__text"
class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
>
<span
class="euiCollapsibleNav__closeButtonLabel"
>
close
</span>
close
</span>
</span>
</button>
Expand Down Expand Up @@ -336,7 +316,7 @@ Array [
id="id"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
type="button"
>
<span
Expand All @@ -348,13 +328,9 @@ Array [
data-euiicon-type="cross"
/>
<span
class="euiButtonEmpty__text"
class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
>
<span
class="euiCollapsibleNav__closeButtonLabel"
>
close
</span>
close
</span>
</span>
</button>
Expand Down Expand Up @@ -396,7 +372,7 @@ Array [
id="id"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
type="button"
>
<span
Expand All @@ -408,13 +384,9 @@ Array [
data-euiicon-type="cross"
/>
<span
class="euiButtonEmpty__text"
class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
>
<span
class="euiCollapsibleNav__closeButtonLabel"
>
close
</span>
close
</span>
</span>
</button>
Expand Down
24 changes: 18 additions & 6 deletions src/components/collapsible_nav/_collapsible_nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,20 @@
position: absolute;
right: 0;
top: $euiSize;
margin-right: -25%;
margin-right: -27%;
padding: $euiSizeM 0;
line-height: 1;
border-radius: $euiBorderRadius;

&:focus {
@include euiFocusRing;
}

&,
&:focus {
// Override default `EuiButtonEmpty` :focus background to ensure better contrast
background: $euiColorEmptyShade;
miukimiu marked this conversation as resolved.
Show resolved Hide resolved
}
}

// The addition of this class is handled through JS
Expand All @@ -38,11 +51,11 @@
// At tiny screens, reduce the close button to a simple `x`
.euiCollapsibleNav__closeButton {
margin-right: -15%;
}

.euiCollapsibleNav__closeButtonLabel {
// But be sure the text can still be read by a screenreader
@include euiScreenReaderOnly;
.euiCollapsibleNav__closeButtonText {
@include euiScreenReaderOnly
margin-left: 0;
miukimiu marked this conversation as resolved.
Show resolved Hide resolved
}
}
}

Expand All @@ -58,4 +71,3 @@
transform: translateX(0%);
}
}

26 changes: 14 additions & 12 deletions src/components/collapsible_nav/collapsible_nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import { EuiOverlayMask } from '../overlay_mask';
import { CommonProps } from '../common';
import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button';
import { EuiI18n } from '../i18n';
import { EuiScreenReaderOnly } from '../accessibility';

export type EuiCollapsibleNavProps = CommonProps &
HTMLAttributes<HTMLElement> & {
Expand Down Expand Up @@ -160,19 +161,20 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
});

const closeButton = showCloseButton && (
<EuiButtonEmpty
onClick={collapse}
size="xs"
iconType="cross"
{...closeButtonProps}
className={classNames(
'euiCollapsibleNav__closeButton',
closeButtonProps && closeButtonProps.className
)}>
<span className="euiCollapsibleNav__closeButtonLabel">
<EuiScreenReaderOnly showOnFocus>
<EuiButtonEmpty
onClick={collapse}
size="xs"
textProps={{ className: 'euiCollapsibleNav__closeButtonText' }}
cchaos marked this conversation as resolved.
Show resolved Hide resolved
iconType="cross"
{...closeButtonProps}
className={classNames(
'euiCollapsibleNav__closeButton',
closeButtonProps && closeButtonProps.className
)}>
<EuiI18n token="euiCollapsibleNav.closeButtonLabel" default="close" />
</span>
</EuiButtonEmpty>
</EuiButtonEmpty>
</EuiScreenReaderOnly>
);

const flyout = (
Expand Down