From 2dddcb89d78b60033dff449f114086e2795c38df Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Tue, 27 Apr 2021 20:02:34 -0400 Subject: [PATCH 01/23] breadcrumbs a11y polish --- .../__snapshots__/breadcrumbs.test.tsx.snap | 974 ++++++++++-------- src/components/breadcrumbs/_breadcrumbs.scss | 61 +- src/components/breadcrumbs/breadcrumbs.tsx | 109 +- .../__snapshots__/control_bar.test.tsx.snap | 630 ++++++----- .../header/__snapshots__/header.test.tsx.snap | 20 +- .../header_breadcrumbs.test.tsx.snap | 81 +- 6 files changed, 1045 insertions(+), 830 deletions(-) diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap index 0e37e6eb929..bebf95a2d01 100644 --- a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap +++ b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap @@ -6,529 +6,617 @@ exports[`EuiBreadcrumbs is rendered 1`] = ` class="euiBreadcrumbs testClass1 testClass2 euiBreadcrumbs--truncate" data-test-subj="test subject string" > - - Animals - -
- - Metazoans - -
-
-
+ + Animals + + +
  • + + Metazoans + +
    • +
  • +
    +
    + +
    +
    +
    • +
  • -
    • -
    -
    - -
    - - Boa constrictor - -
    - - Edit - + +
  • + + Boa constrictor + +
    • +
  • + + Edit + +
    • + `; exports[`EuiBreadcrumbs props max doesn't break when max exceeds the number of breadcrumbs 1`] = ` `; exports[`EuiBreadcrumbs props max renders 1 item 1`] = ` `; exports[`EuiBreadcrumbs props max renders all items with null 1`] = ` `; exports[`EuiBreadcrumbs props responsive is rendered 1`] = ` `; exports[`EuiBreadcrumbs props responsive is rendered as false 1`] = ` `; exports[`EuiBreadcrumbs props responsive is rendered with custom breakpoints 1`] = ` `; exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = ` `; diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss index d344b02d303..4366ef53f9f 100644 --- a/src/components/breadcrumbs/_breadcrumbs.scss +++ b/src/components/breadcrumbs/_breadcrumbs.scss @@ -2,23 +2,32 @@ * 1. Add vertical space between breadcrumbs, * but make sure the whole breadcrumb set doesn't add space below itself */ - -.euiBreadcrumbs { +.euiBreadcrumbs__list { @include euiFontSizeS; - margin-bottom: -$euiSizeXS; /* 1 */ display: flex; align-items: center; flex-wrap: wrap; min-width: 0; // Ensure it shrinks if the window is narrow + margin-bottom: -$euiSizeXS; /* 1 */ } .euiBreadcrumb { - display: inline-block; margin-bottom: $euiSizeXS; /* 1 */ + display: flex; + align-items: center; &:not(.euiBreadcrumb--last) { - margin-right: $euiBreadcrumbSpacing; color: $euiTextSubduedColor; + + &::after { + content: ''; + margin: $euiSizeXS $euiBreadcrumbSpacing 0; + width: 1px; + height: $euiSize; + transform: translateY(-1px) rotate(15deg); + background: $euiColorLightShade; + flex-shrink: 0; + } } } @@ -30,39 +39,41 @@ flex-shrink: 0; } -.euiBreadcrumbSeparator { - flex-shrink: 0; - display: inline-block; - margin-right: $euiBreadcrumbSpacing; - width: 1px; - height: $euiSize; - transform: translateY(-1px) rotate(15deg); - background: $euiColorLightShade; -} - .euiBreadcrumbs__inPopover .euiBreadcrumb--last { font-weight: $euiFontWeightRegular; color: $euiColorDarkShade !important; // sass-lint:disable-line no-important } .euiBreadcrumbs--truncate { - white-space: nowrap; - flex-wrap: nowrap; + .euiBreadcrumbs__list { + white-space: nowrap; + flex-wrap: nowrap; + } .euiBreadcrumb:not(.euiBreadcrumb--collapsed) { - max-width: $euiBreadcrumbTruncateWidth; - overflow: hidden; - text-overflow: ellipsis; + .euiBreadcrumb__content { + max-width: $euiBreadcrumbTruncateWidth; + overflow: hidden; + text-overflow: ellipsis; + } - &.euiBreadcrumb--last { + &.euiBreadcrumb--last .euiBreadcrumb__content { max-width: none; } } + + .euiBreadcrumb { + overflow: hidden; + } + + .euiBreadcrumb__content { + @include euiTextTruncate; + max-width: $euiBreadcrumbTruncateWidth; + text-align: center; + vertical-align: top; // overflow hidden causes misalignment of links and slashes, this fixes that + } } .euiBreadcrumb--truncate { - @include euiTextTruncate; - max-width: $euiBreadcrumbTruncateWidth; - text-align: center; - vertical-align: top; // overflow hidden causes misalignment of links and slashes, this fixes that + overflow: hidden; } diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx index b6fb41dc57e..29fbf4913a6 100644 --- a/src/components/breadcrumbs/breadcrumbs.tsx +++ b/src/components/breadcrumbs/breadcrumbs.tsx @@ -18,7 +18,7 @@ */ import React, { - Fragment, + AriaAttributes, FunctionComponent, MouseEventHandler, ReactNode, @@ -28,7 +28,7 @@ import React, { import classNames from 'classnames'; import { CommonProps } from '../common'; -import { EuiI18n } from '../i18n'; +import { useEuiI18n } from '../i18n'; import { EuiInnerText } from '../inner_text'; import { EuiLink } from '../link'; import { EuiPopover } from '../popover'; @@ -131,28 +131,25 @@ const limitBreadcrumbs = ( const EuiBreadcrumbCollapsed = () => { const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const ariaLabel = useEuiI18n( + 'euiBreadcrumbs.collapsedBadge.ariaLabel', + 'See collapsed breadcrumbs' + ); const ellipsisButton = ( - - {(ariaLabel: string) => ( - setIsPopoverOpen(!isPopoverOpen)}> - … - - )} - + setIsPopoverOpen(!isPopoverOpen)}> + … + ); return ( - +
  • setIsPopoverOpen(false)}> @@ -164,8 +161,7 @@ const limitBreadcrumbs = ( max={0} /> - - +
    • ); }; @@ -176,8 +172,6 @@ const limitBreadcrumbs = ( return [...breadcrumbsAtStart, ...breadcrumbsAtEnd]; }; -const EuiBreadcrumbSeparator = () =>
    ; - export const EuiBreadcrumbs: FunctionComponent = ({ breadcrumbs, className, @@ -218,59 +212,50 @@ export const EuiBreadcrumbs: FunctionComponent = ({ } = breadcrumb; const isLastBreadcrumb = index === breadcrumbs.length - 1; - - const breadcrumbClasses = classNames('euiBreadcrumb', breadcrumbClassName, { + const className = classNames('euiBreadcrumb', breadcrumbClassName, { 'euiBreadcrumb--last': isLastBreadcrumb, 'euiBreadcrumb--truncate': truncate, }); - - let link; - - if (!href && !onClick) { - link = ( - - {(ref, innerText) => ( - - {text} - - )} - - ); - } else { - link = ( - - {(ref, innerText) => ( + const linkProps = { + className: 'euiBreadcrumb__content', + 'aria-current': isLastBreadcrumb ? 'page' : undefined, + } as { className: string; 'aria-current': AriaAttributes['aria-current'] }; + + const link = ( + + {(ref, innerText) => { + if (!href && !onClick) { + return ( + + {text} + + ); + } + + return ( {text} - )} - - ); - } - - let separator; - - if (!isLastBreadcrumb) { - separator = ; - } + ); + }} + + ); return ( - +
  • {link} - {separator} - +
    • ); }); @@ -300,8 +285,8 @@ export const EuiBreadcrumbs: FunctionComponent = ({ }); return ( -
    `; diff --git a/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap b/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap index e94cccfdafc..f160d5b38ca 100644 --- a/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap +++ b/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap @@ -6,41 +6,52 @@ exports[`EuiHeaderBreadcrumbs is rendered 1`] = ` class="euiBreadcrumbs euiHeaderBreadcrumbs testClass1 testClass2 euiBreadcrumbs--truncate" data-test-subj="test subject string" > - - Animals - -
    - -
    - - Boa constrictor - -
    - - Edit - +
  • + + Animals + +
    • +
  • + +
    • +
  • + + Boa constrictor + +
    • +
  • + + Edit + +
    • + `; From c5f9aac6e3d7aeb87564c7d8aa150f4c21c67810 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Tue, 6 Jul 2021 16:19:43 -0400 Subject: [PATCH 02/23] fixing final issues --- src/components/breadcrumbs/_breadcrumbs.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss index 4366ef53f9f..0db947dacfa 100644 --- a/src/components/breadcrumbs/_breadcrumbs.scss +++ b/src/components/breadcrumbs/_breadcrumbs.scss @@ -65,7 +65,11 @@ .euiBreadcrumb { overflow: hidden; } +} + +.euiBreadcrumbs--truncate, +.euiBreadcrumb--truncate { .euiBreadcrumb__content { @include euiTextTruncate; max-width: $euiBreadcrumbTruncateWidth; @@ -73,7 +77,3 @@ vertical-align: top; // overflow hidden causes misalignment of links and slashes, this fixes that } } - -.euiBreadcrumb--truncate { - overflow: hidden; -} From d05885fec5c128bb74b06e035590ef9c84d387af Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Tue, 6 Jul 2021 16:22:44 -0400 Subject: [PATCH 03/23] adding CL --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2f927372f45..c421a34dbe4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Updated `EuiContextMenuPanelDescriptor`'s `title` prop type from `string` to `ReactNode` ([#4933](https://github.com/elastic/eui/pull/4933)) +- Improved accessibility of `EuiBreadcrumbs` ([#4763](https://github.com/elastic/eui/pull/4763)) ## [`34.5.2`](https://github.com/elastic/eui/tree/v34.5.2) From 6a78eebf3d97ba7eef3e10ad00f616303adf9cc2 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Wed, 14 Jul 2021 10:44:15 -0400 Subject: [PATCH 04/23] remove seperator from header breadcrumbs --- .../header/header_breadcrumbs/_header_breadcrumbs.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss b/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss index ce8fa5e2c0d..4aec9ea3b6e 100644 --- a/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss +++ b/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss @@ -1,9 +1,13 @@ -// Breadcrumb navigation included in the header. - .euiHeaderBreadcrumbs { margin-left: $euiSizeM; margin-right: $euiSizeM; display: flex; align-items: center; flex-grow: 1; + + .euiBreadcrumb { + &::after { + display: none; + } + } } From 573daf2f525eadd9d41244929a55d2cdf4ed656b Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Tue, 20 Jul 2021 09:24:28 -0400 Subject: [PATCH 05/23] PR feedback --- .../header/header_breadcrumbs/_header_breadcrumbs.scss | 7 +------ .../eui-amsterdam/overrides/_header_breadcrumbs.scss | 7 +++++++ src/themes/eui-amsterdam/overrides/_index.scss | 1 + 3 files changed, 9 insertions(+), 6 deletions(-) create mode 100644 src/themes/eui-amsterdam/overrides/_header_breadcrumbs.scss diff --git a/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss b/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss index 4aec9ea3b6e..eb3d083c48b 100644 --- a/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss +++ b/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss @@ -1,13 +1,8 @@ .euiHeaderBreadcrumbs { + @include euiTextTruncate; margin-left: $euiSizeM; margin-right: $euiSizeM; display: flex; align-items: center; flex-grow: 1; - - .euiBreadcrumb { - &::after { - display: none; - } - } } diff --git a/src/themes/eui-amsterdam/overrides/_header_breadcrumbs.scss b/src/themes/eui-amsterdam/overrides/_header_breadcrumbs.scss new file mode 100644 index 00000000000..a7023e4982f --- /dev/null +++ b/src/themes/eui-amsterdam/overrides/_header_breadcrumbs.scss @@ -0,0 +1,7 @@ +.euiHeaderBreadcrumbs { + .euiBreadcrumb { + &::after { + display: none; + } + } +} diff --git a/src/themes/eui-amsterdam/overrides/_index.scss b/src/themes/eui-amsterdam/overrides/_index.scss index fd2b04991f9..0d92b6968e9 100644 --- a/src/themes/eui-amsterdam/overrides/_index.scss +++ b/src/themes/eui-amsterdam/overrides/_index.scss @@ -12,6 +12,7 @@ @import 'form_control_layout'; @import 'form_control_layout_delimited'; @import 'form_controls'; +@import 'header_breadcrumbs'; @import 'header'; @import 'hue'; @import 'list_group_item'; From 5a36b7c583e05ab7a44d5b23a1ce627a31f68df1 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Tue, 20 Jul 2021 14:08:48 -0400 Subject: [PATCH 06/23] more breadcrumbs css polish --- .../__snapshots__/breadcrumbs.test.tsx.snap | 12 +-- src/components/breadcrumbs/breadcrumbs.tsx | 5 +- .../eui-amsterdam/overrides/_header.scss | 79 ------------------- .../overrides/_header_breadcrumbs.scss | 66 ++++++++++++++++ 4 files changed, 76 insertions(+), 86 deletions(-) diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap index bebf95a2d01..8e32f38290e 100644 --- a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap +++ b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap @@ -34,7 +34,7 @@ exports[`EuiBreadcrumbs is rendered 1`] = ` class="euiBreadcrumb euiBreadcrumb--collapsed" >
    setIsPopoverOpen(false)}> = ({ 'euiBreadcrumb--truncate': truncate, }); const linkProps = { - className: 'euiBreadcrumb__content', + className: CONTENT_CLASSNAME, 'aria-current': isLastBreadcrumb ? 'page' : undefined, } as { className: string; 'aria-current': AriaAttributes['aria-current'] }; diff --git a/src/themes/eui-amsterdam/overrides/_header.scss b/src/themes/eui-amsterdam/overrides/_header.scss index 34232776c56..36529798494 100644 --- a/src/themes/eui-amsterdam/overrides/_header.scss +++ b/src/themes/eui-amsterdam/overrides/_header.scss @@ -28,82 +28,3 @@ .euiHeader--default + .euiHeader--default { border-top: $euiBorderThin; } - -// Breadcrumbs - -.euiHeaderBreadcrumbs { - font-size: $euiFontSizeXS; - line-height: $euiSize; - margin-left: $euiSizeS; - margin-right: $euiSizeS; - - // No separators - .euiBreadcrumbSeparator { - display: none !important; // sass-lint:disable-line no-important - } - - // Only the header breadcrumbs get the new Amsterdam style so that there can - // still be default text only breadcrumbs for places like EuiControlBar - .euiBreadcrumb { - @include euiButtonDefaultStyle($euiTextColor); - line-height: $euiSize; - font-weight: $euiFontWeightMedium; - padding: $euiSizeXS $euiSize; - clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%, $euiSizeS 50%); - - &:focus { - @include euiFocusRing(null, 'inner'); - - &:focus-visible { - // Turn radius and clip path off when in focus so the focus ring looks correct - border-radius: 0; - clip-path: none; - } - } - - // If it's a link the easiest way to detect is via our .euiLink class since it can accept either href or onClick - // Also helps to add specificity for overriding hover state - &.euiBreadcrumb--collapsed, - &.euiLink { - @include euiButtonDefaultStyle($euiColorPrimary); - - &:hover, - &:focus { - color: $euiColorPrimary; - } - } - - &.euiBreadcrumb--collapsed .euiLink { - &, - &:hover, - &:focus { - color: $euiColorPrimary; - } - } - - &:not(.euiBreadcrumb--last) { - margin-right: -$euiSizeXS; - } - - &:first-child { - padding-left: $euiSizeM; - border-radius: $euiBorderRadius 0 0 $euiBorderRadius; - clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%); - } - } - - .euiBreadcrumb--last { - border-radius: 0 $euiBorderRadius $euiBorderRadius 0; - padding-right: $euiSizeM; - clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, #{$euiSizeS} 50%); - } - - // In case the item is first AND last, aka only, just make it a fully rounded item - .euiBreadcrumb:only-child { - clip-path: none; - padding-left: $euiSizeM; - padding-right: $euiSizeM; - border-radius: $euiBorderRadius; - } -} - diff --git a/src/themes/eui-amsterdam/overrides/_header_breadcrumbs.scss b/src/themes/eui-amsterdam/overrides/_header_breadcrumbs.scss index a7023e4982f..f6af52d2e8e 100644 --- a/src/themes/eui-amsterdam/overrides/_header_breadcrumbs.scss +++ b/src/themes/eui-amsterdam/overrides/_header_breadcrumbs.scss @@ -1,7 +1,73 @@ .euiHeaderBreadcrumbs { + line-height: $euiSize; + margin-left: $euiSizeS; + margin-right: $euiSizeS; + .euiBreadcrumb { + .euiBreadcrumb__content { + font-size: $euiFontSizeXS; + clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%, $euiSizeS 50%); + } + &::after { display: none; } + + // In case the item is first AND last, aka only, just make it a fully rounded item + &:only-child { + .euiBreadcrumb__content { + clip-path: none; + padding-left: $euiSizeM; + padding-right: $euiSizeM; + border-radius: $euiBorderRadius; + } + } + + &:not(.euiBreadcrumb--last) { + margin-right: -$euiSizeXS; + } + + &:first-child { + .euiBreadcrumb__content { + padding-left: $euiSizeM; + border-radius: $euiBorderRadius 0 0 $euiBorderRadius; + clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%); + } + } + } + + .euiBreadcrumb--last { + .euiBreadcrumb__content { + border-radius: 0 $euiBorderRadius $euiBorderRadius 0; + padding-right: $euiSizeM; + clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, #{$euiSizeS} 50%); + } + } + + // Only the header breadcrumbs get the new Amsterdam style so that there can + // still be default text only breadcrumbs for places like EuiControlBar + .euiBreadcrumb__content { + @include euiButtonDefaultStyle($euiTextColor); + line-height: $euiSize; + font-weight: $euiFontWeightMedium; + padding: $euiSizeXS $euiSize; + + &.euiLink, + &.euiPopover { + @include euiButtonDefaultStyle($euiColorPrimary); + + &:hover, + &:focus { + @include euiFocusRing(null, 'inner'); + color: $euiColorPrimary; + + // sass-lint:disable nesting-depth + &:focus-visible { + // Turn radius and clip path off when in focus so the focus ring looks correct + border-radius: 0; + clip-path: none; + } + } + } } } From e879f76e39b4c19622d9255d061827ecf4cee3fc Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Wed, 21 Jul 2021 16:27:09 -0400 Subject: [PATCH 07/23] breadcrumbs collapsedLink polish --- .../overrides/_header_breadcrumbs.scss | 28 ++++++++++++++----- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/src/themes/eui-amsterdam/overrides/_header_breadcrumbs.scss b/src/themes/eui-amsterdam/overrides/_header_breadcrumbs.scss index f6af52d2e8e..d0b84d31f14 100644 --- a/src/themes/eui-amsterdam/overrides/_header_breadcrumbs.scss +++ b/src/themes/eui-amsterdam/overrides/_header_breadcrumbs.scss @@ -44,6 +44,19 @@ } } + // copy-pasted color math from euiButtonDefaultStyle() internals to set correct color on collapsed state + // can't use the mixin which would layer semi-transparent backgrounds on top of each other + .euiBreadcrumb__collapsedLink { + $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiColorPrimary, $euiButtonDefaultTransparency * 100%); + color: makeHighContrastColor($euiColorPrimary, $backgroundColorSimulated); + + &:hover, + &:focus { + @include euiFocusRing(null, 'outer'); + color: $euiColorPrimary; + } + } + // Only the header breadcrumbs get the new Amsterdam style so that there can // still be default text only breadcrumbs for places like EuiControlBar .euiBreadcrumb__content { @@ -55,19 +68,20 @@ &.euiLink, &.euiPopover { @include euiButtonDefaultStyle($euiColorPrimary); + } + &.euiLink { &:hover, &:focus { @include euiFocusRing(null, 'inner'); color: $euiColorPrimary; - - // sass-lint:disable nesting-depth - &:focus-visible { - // Turn radius and clip path off when in focus so the focus ring looks correct - border-radius: 0; - clip-path: none; - } } } + + // Turn border-radius and clip path off when in focus so the focus ring looks correct + &:focus:focus-visible { + border-radius: 0; + clip-path: none; + } } } From 0b176523ec9cf3cbbeeb4c255571dfa96ee57e6d Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 22 Jul 2021 11:01:05 -0400 Subject: [PATCH 08/23] test --- .../eui-amsterdam/overrides/_header.scss | 90 +++++++++++++++++++ 1 file changed, 90 insertions(+) diff --git a/src/themes/eui-amsterdam/overrides/_header.scss b/src/themes/eui-amsterdam/overrides/_header.scss index 36529798494..32ce4afcea7 100644 --- a/src/themes/eui-amsterdam/overrides/_header.scss +++ b/src/themes/eui-amsterdam/overrides/_header.scss @@ -28,3 +28,93 @@ .euiHeader--default + .euiHeader--default { border-top: $euiBorderThin; } + +// Breadcrumbs + +.euiHeaderBreadcrumbs { + line-height: $euiSize; + margin-left: $euiSizeS; + margin-right: $euiSizeS; + + .euiBreadcrumb { + .euiBreadcrumb__content { + font-size: $euiFontSizeXS; + clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%, $euiSizeS 50%); + } + + &::after { + display: none; + } + + // In case the item is first AND last, aka only, just make it a fully rounded item + &:only-child { + .euiBreadcrumb__content { + clip-path: none; + padding-left: $euiSizeM; + padding-right: $euiSizeM; + border-radius: $euiBorderRadius; + } + } + + &:not(.euiBreadcrumb--last) { + margin-right: -$euiSizeXS; + } + + &:first-child { + .euiBreadcrumb__content { + padding-left: $euiSizeM; + border-radius: $euiBorderRadius 0 0 $euiBorderRadius; + clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%); + } + } + } + + .euiBreadcrumb--last { + .euiBreadcrumb__content { + border-radius: 0 $euiBorderRadius $euiBorderRadius 0; + padding-right: $euiSizeM; + clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, #{$euiSizeS} 50%); + } + } + + // copy-pasted color math from euiButtonDefaultStyle() internals to set correct color on collapsed state + // can't use the mixin which would layer semi-transparent backgrounds on top of each other + .euiBreadcrumb__collapsedLink { + $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiColorPrimary, $euiButtonDefaultTransparency * 100%); + color: makeHighContrastColor($euiColorPrimary, $backgroundColorSimulated); + + &:hover, + &:focus { + @include euiFocusRing(null, 'outer'); + color: $euiColorPrimary; + } + } + + // Only the header breadcrumbs get the new Amsterdam style so that there can + // still be default text only breadcrumbs for places like EuiControlBar + .euiBreadcrumb__content { + @include euiButtonDefaultStyle($euiTextColor); + line-height: $euiSize; + font-weight: $euiFontWeightMedium; + padding: $euiSizeXS $euiSize; + + &.euiLink, + &.euiPopover { + @include euiButtonDefaultStyle($euiColorPrimary); + } + + &.euiLink { + &:hover, + &:focus { + @include euiFocusRing(null, 'inner'); + color: $euiColorPrimary; + } + } + + // Turn border-radius and clip path off when in focus so the focus ring looks correct + &:focus:focus-visible { + border-radius: 0; + clip-path: none; + } + } +} From 538dec84c000a5119b5ff959512d10245b6b5c7c Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 22 Jul 2021 11:48:33 -0400 Subject: [PATCH 09/23] Revert `test` --- .../eui-amsterdam/overrides/_header.scss | 90 ------------------- 1 file changed, 90 deletions(-) diff --git a/src/themes/eui-amsterdam/overrides/_header.scss b/src/themes/eui-amsterdam/overrides/_header.scss index 32ce4afcea7..36529798494 100644 --- a/src/themes/eui-amsterdam/overrides/_header.scss +++ b/src/themes/eui-amsterdam/overrides/_header.scss @@ -28,93 +28,3 @@ .euiHeader--default + .euiHeader--default { border-top: $euiBorderThin; } - -// Breadcrumbs - -.euiHeaderBreadcrumbs { - line-height: $euiSize; - margin-left: $euiSizeS; - margin-right: $euiSizeS; - - .euiBreadcrumb { - .euiBreadcrumb__content { - font-size: $euiFontSizeXS; - clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%, $euiSizeS 50%); - } - - &::after { - display: none; - } - - // In case the item is first AND last, aka only, just make it a fully rounded item - &:only-child { - .euiBreadcrumb__content { - clip-path: none; - padding-left: $euiSizeM; - padding-right: $euiSizeM; - border-radius: $euiBorderRadius; - } - } - - &:not(.euiBreadcrumb--last) { - margin-right: -$euiSizeXS; - } - - &:first-child { - .euiBreadcrumb__content { - padding-left: $euiSizeM; - border-radius: $euiBorderRadius 0 0 $euiBorderRadius; - clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%); - } - } - } - - .euiBreadcrumb--last { - .euiBreadcrumb__content { - border-radius: 0 $euiBorderRadius $euiBorderRadius 0; - padding-right: $euiSizeM; - clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, #{$euiSizeS} 50%); - } - } - - // copy-pasted color math from euiButtonDefaultStyle() internals to set correct color on collapsed state - // can't use the mixin which would layer semi-transparent backgrounds on top of each other - .euiBreadcrumb__collapsedLink { - $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiColorPrimary, $euiButtonDefaultTransparency * 100%); - color: makeHighContrastColor($euiColorPrimary, $backgroundColorSimulated); - - &:hover, - &:focus { - @include euiFocusRing(null, 'outer'); - color: $euiColorPrimary; - } - } - - // Only the header breadcrumbs get the new Amsterdam style so that there can - // still be default text only breadcrumbs for places like EuiControlBar - .euiBreadcrumb__content { - @include euiButtonDefaultStyle($euiTextColor); - line-height: $euiSize; - font-weight: $euiFontWeightMedium; - padding: $euiSizeXS $euiSize; - - &.euiLink, - &.euiPopover { - @include euiButtonDefaultStyle($euiColorPrimary); - } - - &.euiLink { - &:hover, - &:focus { - @include euiFocusRing(null, 'inner'); - color: $euiColorPrimary; - } - } - - // Turn border-radius and clip path off when in focus so the focus ring looks correct - &:focus:focus-visible { - border-radius: 0; - clip-path: none; - } - } -} From 648fd62e18c6caa90165375544c7a56a7916412b Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 22 Jul 2021 11:51:07 -0400 Subject: [PATCH 10/23] Final fixes - Moved the `content` class to the collapsed EuiLink instead of the popover - Fixed text color of last item in popover - Fixed header focus states - Added more comments in Sass file --- .../__snapshots__/breadcrumbs.test.tsx.snap | 24 ++--- src/components/breadcrumbs/_breadcrumbs.scss | 15 ++- src/components/breadcrumbs/breadcrumbs.tsx | 3 +- .../overrides/_header_breadcrumbs.scss | 94 ++++++++----------- 4 files changed, 59 insertions(+), 77 deletions(-) diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap index 8e32f38290e..9895814a965 100644 --- a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap +++ b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap @@ -34,14 +34,14 @@ exports[`EuiBreadcrumbs is rendered 1`] = ` class="euiBreadcrumb euiBreadcrumb--collapsed" >
    +
    +
    + +
  • + + Boa constrictor + +
    • +
  • + + Edit + +
  • @@ -83,7 +170,7 @@ exports[`EuiBreadcrumbs is rendered 1`] = ` href="#" rel="noreferrer" > - Edit + test
    • @@ -151,6 +238,7 @@ exports[`EuiBreadcrumbs props max doesn't break when max exceeds the number of b class="euiBreadcrumb" > +`; + exports[`EuiStepHorizontal props status danger is rendered 1`] = `