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
Merged

Improve contrast for EuiCollapsibleNav close link #3465

Show file tree
Hide file tree
Changes from 3 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 @@ -3,6 +3,7 @@
- Added `sortBy` and `sortShift` props to `euiPaletteColorBlind()` for sorting along the color wheel ([#3387](https://github.com/elastic/eui/pull/3387))
- 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))

**Breaking changes**

Expand Down
14 changes: 7 additions & 7 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 Down Expand Up @@ -113,7 +113,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 Down Expand Up @@ -174,7 +174,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 Down Expand Up @@ -229,7 +229,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 Down Expand Up @@ -282,7 +282,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 Down Expand Up @@ -336,7 +336,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 Down Expand Up @@ -396,7 +396,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 Down
18 changes: 17 additions & 1 deletion 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,19 @@
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 {
background: $euiColorEmptyShade;
miukimiu marked this conversation as resolved.
Show resolved Hide resolved
}
}

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

.euiButtonEmpty__text {
miukimiu marked this conversation as resolved.
Show resolved Hide resolved
margin-left: 0;
miukimiu marked this conversation as resolved.
Show resolved Hide resolved
}
}

.euiCollapsibleNav__closeButtonLabel {
Expand Down
29 changes: 16 additions & 13 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,21 @@ 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">
<EuiI18n token="euiCollapsibleNav.closeButtonLabel" default="close" />
</span>
</EuiButtonEmpty>
<EuiScreenReaderOnly showOnFocus>
<EuiButtonEmpty
onClick={collapse}
size="xs"
iconType="cross"
{...closeButtonProps}
className={classNames(
'euiCollapsibleNav__closeButton',
closeButtonProps && closeButtonProps.className
)}>
<span className="euiCollapsibleNav__closeButtonLabel">
<EuiI18n token="euiCollapsibleNav.closeButtonLabel" default="close" />
</span>
</EuiButtonEmpty>
</EuiScreenReaderOnly>
);

const flyout = (
Expand Down