From 62a1154b1f9923991df2c68245d0fc453cc0b2ab Mon Sep 17 00:00:00 2001 From: 1Copenut Date: Tue, 24 May 2022 16:26:48 -0500 Subject: [PATCH 01/22] Moving EuiBreadcrumb styles to Emotion. * Adding basic Emotion styles for links and content. * Adding the truncated link and content styles to Emotion. * Added all rules to Emotion. Testing for visual regression. * Fixed the focus halo for overflow:hidden declarations. * Removed breadcrumb overrides from Amsterdam theme. * Added last styles for individual truncated content. * Final Emotion style updates and a11y QA testing complete. * Updating snapshot tests for breadcrumb Emotion styles. --- .../__snapshots__/breadcrumbs.test.tsx.snap | 204 +- src/components/breadcrumbs/_breadcrumbs.scss | 79 - src/components/breadcrumbs/_index.scss | 2 - src/components/breadcrumbs/_variables.scss | 2 - .../breadcrumbs/breadcrumbs.styles.ts | 109 + src/components/breadcrumbs/breadcrumbs.tsx | 233 +- .../__snapshots__/control_bar.test.tsx.snap | 2814 ++++------------- .../control_bar/control_bar.test.tsx | 14 +- .../header/__snapshots__/header.test.tsx.snap | 6 +- .../header_breadcrumbs.test.tsx.snap | 18 +- src/components/index.scss | 1 - .../__snapshots__/page_header.test.tsx.snap | 10 +- .../page_header_content.test.tsx.snap | 10 +- .../amsterdam/overrides/_breadcrumbs.scss | 12 - src/themes/amsterdam/overrides/_index.scss | 1 - 15 files changed, 976 insertions(+), 2539 deletions(-) delete mode 100644 src/components/breadcrumbs/_breadcrumbs.scss delete mode 100644 src/components/breadcrumbs/_index.scss delete mode 100644 src/components/breadcrumbs/_variables.scss create mode 100644 src/components/breadcrumbs/breadcrumbs.styles.ts diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap index e517c53a518..8846d692774 100644 --- a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap +++ b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap @@ -7,13 +7,13 @@ exports[`EuiBreadcrumbs is rendered 1`] = ` data-test-subj="test subject string" >
  2. Metazoans
  6. Edit @@ -96,13 +96,13 @@ exports[`EuiBreadcrumbs is rendered with final item as link 1`] = ` data-test-subj="test subject string" >
    2. Metazoans
    5. Edit
    6. @@ -185,13 +185,13 @@ exports[`EuiBreadcrumbs props max doesn't break when max exceeds the number of b class="euiBreadcrumbs euiBreadcrumbs--truncate" >
      2. Metazoans
      3. Chordates
      4. Nebulosa subspecies is also a real mouthful, especially for creatures without mouths
      5. Tetrapods
      8. Edit @@ -280,10 +280,10 @@ exports[`EuiBreadcrumbs props max renders 1 item 1`] = ` class="euiBreadcrumbs euiBreadcrumbs--truncate" >
        2. Edit @@ -325,13 +325,13 @@ exports[`EuiBreadcrumbs props max renders all items with null 1`] = ` class="euiBreadcrumbs euiBreadcrumbs--truncate" >
          2. Metazoans
          3. Chordates
          4. Nebulosa subspecies is also a real mouthful, especially for creatures without mouths
          5. Tetrapods
          8. Edit @@ -420,13 +420,13 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = ` class="euiBreadcrumbs euiBreadcrumbs--truncate" >
            2. Metazoans
            6. Edit @@ -509,13 +509,13 @@ exports[`EuiBreadcrumbs props responsive is rendered as false 1`] = ` class="euiBreadcrumbs euiBreadcrumbs--truncate" >
              2. Metazoans
              6. Edit @@ -598,10 +598,10 @@ exports[`EuiBreadcrumbs props responsive is rendered with custom breakpoints 1`] class="euiBreadcrumbs euiBreadcrumbs--truncate" >
                2. Edit @@ -643,13 +643,13 @@ exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = ` class="euiBreadcrumbs" >
                  2. Metazoans
                  6. Edit diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss deleted file mode 100644 index 7d3071ddcda..00000000000 --- a/src/components/breadcrumbs/_breadcrumbs.scss +++ /dev/null @@ -1,79 +0,0 @@ -/** - * 1. Add vertical space between breadcrumbs, - * but make sure the whole breadcrumb set doesn't add space below itself - */ - -.euiBreadcrumbs__list { - @include euiFontSizeS; - display: flex; - align-items: center; - flex-wrap: wrap; - min-width: 0; // Ensure it shrinks if the window is narrow - margin-bottom: -$euiSizeXS; /* 1 */ -} - -.euiBreadcrumb { - margin-bottom: $euiSizeXS; /* 1 */ - display: flex; - align-items: center; - - &:not(.euiBreadcrumb--last) { - color: $euiTextSubduedColor; - - &::after { - content: ''; - margin: $euiSizeXS $euiBreadcrumbSpacing 0; - width: 1px; - height: $euiSize; - transform: translateY(-1px) rotate(15deg); - background: $euiColorLightShade; - flex-shrink: 0; - } - } -} - -.euiBreadcrumb--collapsed { - flex-shrink: 0; -} - -.euiBreadcrumb--last { - font-weight: $euiFontWeightMedium; -} - -.euiBreadcrumbs__inPopover .euiBreadcrumb--last .euiBreadcrumb__content { - font-weight: $euiFontWeightRegular; - color: $euiTextSubduedColor; -} - -.euiBreadcrumbs--truncate { - .euiBreadcrumbs__list { - white-space: nowrap; - flex-wrap: nowrap; - } - - .euiBreadcrumb:not(.euiBreadcrumb--collapsed) { - .euiBreadcrumb__content { - max-width: $euiBreadcrumbTruncateWidth; - overflow: hidden; - text-overflow: ellipsis; - } - - &.euiBreadcrumb--last .euiBreadcrumb__content { - max-width: none; - } - } - - .euiBreadcrumb { - overflow: hidden; - } -} - -.euiBreadcrumbs--truncate, -.euiBreadcrumb--truncate { - .euiBreadcrumb__content { - @include euiTextTruncate; - max-width: $euiBreadcrumbTruncateWidth; - text-align: center; - vertical-align: baseline; - } -} diff --git a/src/components/breadcrumbs/_index.scss b/src/components/breadcrumbs/_index.scss deleted file mode 100644 index 4a1cc52558d..00000000000 --- a/src/components/breadcrumbs/_index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'variables'; -@import 'breadcrumbs'; diff --git a/src/components/breadcrumbs/_variables.scss b/src/components/breadcrumbs/_variables.scss deleted file mode 100644 index 60878e951f6..00000000000 --- a/src/components/breadcrumbs/_variables.scss +++ /dev/null @@ -1,2 +0,0 @@ -$euiBreadcrumbSpacing: $euiSizeS !default; -$euiBreadcrumbTruncateWidth: $euiSize * 10 !default; diff --git a/src/components/breadcrumbs/breadcrumbs.styles.ts b/src/components/breadcrumbs/breadcrumbs.styles.ts new file mode 100644 index 00000000000..b1ba0b3f335 --- /dev/null +++ b/src/components/breadcrumbs/breadcrumbs.styles.ts @@ -0,0 +1,109 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { UseEuiTheme } from '../../services'; +import { euiFontSize, euiTextTruncate } from '../../global_styling/mixins'; + +export const euiBreadcrumbsListStyles = ({ euiTheme }: UseEuiTheme) => ({ + euiBreadcrumbs__list: css` + ${euiFontSize('s', euiTheme)}; + align-items: center; + display: flex; + flex-wrap: wrap; + line-height: ${euiTheme.size.l}; + margin-bottom: -${euiTheme.size.xs}; + min-width: 0; // Ensure it shrinks if the window is narrow + `, + isTruncated: css` + flex-wrap: nowrap; + white-space: nowrap; + `, +}); + +export const euiBreadcrumbStyles = ({ euiTheme }: UseEuiTheme) => ({ + euiBreadcrumb: css` + align-items: center; + display: flex; + margin-bottom: ${euiTheme.size.xs}; /* 1 */ + + &:not(:last-of-type) { + color: ${euiTheme.colors.subdued}; + + &:after { + background: ${euiTheme.colors.lightShade}; + content: ''; + flex-shrink: 0; + height: ${euiTheme.size.base}; + margin: ${euiTheme.size.xs} ${euiTheme.size.s} 0; + transform: translateY(-1px) rotate(15deg); + width: 1px; + } + } + + &:last-of-type { + font-weight: ${euiTheme.font.weight.medium}; + } + `, + isCollapsed: css` + flex-shrink: 0; + + & a, + & button { + :focus { + outline-offset: -1px; + } + } + `, + isTruncated: css` + overflow: hidden; + + &:not([class*='euiBreadcrumb-isCollapsed']) { + & > a, + & > span { + max-width: calc(${euiTheme.size.base} * 10); + overflow: hidden; + text-overflow: ellipsis; + } + } + + &:last-of-type { + & > a, + & > span { + max-width: none; + } + } + `, +}); + +export const euiBreadcrumbContentStyles = ({ euiTheme }: UseEuiTheme) => ({ + euiBreadcrumb__content: css` + font-weight: ${euiTheme.font.weight.medium}; + + &:is(a) { + :focus { + outline-offset: -1px; + } + } + `, + isTruncated: css` + ${euiTextTruncate()}; + max-width: calc(${euiTheme.size.base} * 10); + text-align: center; + vertical-align: baseline; + `, +}); + +export const euiBreadcrumbsInPopoverStyles = ({ euiTheme }: UseEuiTheme) => ({ + euiBreadcrumbs__inPopover: css` + & li:last-of-type > a, + & li:last-of-type > span { + color: ${euiTheme.colors.subdued}; + } + `, +}); diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx index 8f0f08ecb0a..8beceffb0f1 100644 --- a/src/components/breadcrumbs/breadcrumbs.tsx +++ b/src/components/breadcrumbs/breadcrumbs.tsx @@ -23,9 +23,16 @@ import { EuiInnerText } from '../inner_text'; import { EuiLink, EuiLinkColor } from '../link'; import { EuiPopover } from '../popover'; import { EuiIcon } from '../icon'; -import { throttle } from '../../services'; +import { throttle, useEuiTheme } from '../../services'; import { EuiBreakpointSize, getBreakpoint } from '../../services/breakpoint'; +import { + euiBreadcrumbsListStyles, + euiBreadcrumbsInPopoverStyles, + euiBreadcrumbStyles, + euiBreadcrumbContentStyles, +} from './breadcrumbs.styles'; + const CONTENT_CLASSNAME = 'euiBreadcrumb__content'; export type EuiBreadcrumbResponsiveMaxCount = { @@ -95,91 +102,6 @@ const responsiveDefault: EuiBreadcrumbResponsiveMaxCount = { m: 4, }; -const limitBreadcrumbs = ( - breadcrumbs: ReactNode[], - max: number, - allBreadcrumbs: EuiBreadcrumb[] -) => { - const breadcrumbsAtStart = []; - const breadcrumbsAtEnd = []; - const limit = Math.min(max, breadcrumbs.length); - const start = Math.floor(limit / 2); - const overflowBreadcrumbs = allBreadcrumbs.slice( - start, - start + breadcrumbs.length - limit - ); - - if (overflowBreadcrumbs.length) { - overflowBreadcrumbs[overflowBreadcrumbs.length - 1]['aria-current'] = - 'false'; - } - - for (let i = 0; i < limit; i++) { - // We'll alternate with displaying breadcrumbs at the end and at the start, but be biased - // towards breadcrumbs the end so that if max is an odd number, we'll have one more - // breadcrumb visible at the end than at the beginning. - const isEven = i % 2 === 0; - - // We're picking breadcrumbs from the front AND the back, so we treat each iteration as a - // half-iteration. - const normalizedIndex = Math.floor(i * 0.5); - const indexOfBreadcrumb = isEven - ? breadcrumbs.length - 1 - normalizedIndex - : normalizedIndex; - const breadcrumb = breadcrumbs[indexOfBreadcrumb]; - - if (isEven) { - breadcrumbsAtEnd.unshift(breadcrumb); - } else { - breadcrumbsAtStart.push(breadcrumb); - } - } - - const EuiBreadcrumbCollapsed = () => { - const [isPopoverOpen, setIsPopoverOpen] = useState(false); - const ariaLabel = useEuiI18n( - 'euiBreadcrumbs.collapsedBadge.ariaLabel', - 'See collapsed breadcrumbs' - ); - - const ellipsisButton = ( - setIsPopoverOpen(!isPopoverOpen)} - > - … - - ); - - return ( -
                  7. - setIsPopoverOpen(false)} - > - - -
                    8. - ); - }; - - if (max < breadcrumbs.length) { - breadcrumbsAtStart.push(); - } - - return [...breadcrumbsAtStart, ...breadcrumbsAtEnd]; -}; - export const EuiBreadcrumbs: FunctionComponent = ({ breadcrumbs, className, @@ -210,6 +132,126 @@ export const EuiBreadcrumbs: FunctionComponent = ({ }; }, [responsive, functionToCallOnWindowResize]); + // Emotion styles + const euiTheme = useEuiTheme(); + + // Breadcrumb ordered list styles + const breadcrumbsListStyles = euiBreadcrumbsListStyles(euiTheme); + const cssBreadcrumbsListStyles = [ + breadcrumbsListStyles.euiBreadcrumbs__list, + truncate && breadcrumbsListStyles.isTruncated, + ]; + + // Breadcrumb link styles in EuiPopover + const breadcrumbsInPopoverStyles = euiBreadcrumbsInPopoverStyles(euiTheme); + const cssBreadcrumbsInPopoverStyles = [ + breadcrumbsInPopoverStyles.euiBreadcrumbs__inPopover, + ]; + + // Breadcrumb list item styles + const breadcrumbStyles = euiBreadcrumbStyles(euiTheme); + const cssBreadcrumbStyles = [ + breadcrumbStyles.euiBreadcrumb, + truncate && breadcrumbStyles.isTruncated, + ]; + + const limitBreadcrumbs = ( + breadcrumbs: ReactNode[], + max: number, + allBreadcrumbs: EuiBreadcrumb[] + ) => { + const breadcrumbsAtStart = []; + const breadcrumbsAtEnd = []; + const limit = Math.min(max, breadcrumbs.length); + const start = Math.floor(limit / 2); + const overflowBreadcrumbs = allBreadcrumbs.slice( + start, + start + breadcrumbs.length - limit + ); + + if (overflowBreadcrumbs.length) { + overflowBreadcrumbs[overflowBreadcrumbs.length - 1]['aria-current'] = + 'false'; + } + + for (let i = 0; i < limit; i++) { + // We'll alternate with displaying breadcrumbs at the end and at the start, but be biased + // towards breadcrumbs the end so that if max is an odd number, we'll have one more + // breadcrumb visible at the end than at the beginning. + const isEven = i % 2 === 0; + + // We're picking breadcrumbs from the front AND the back, so we treat each iteration as a + // half-iteration. + const normalizedIndex = Math.floor(i * 0.5); + const indexOfBreadcrumb = isEven + ? breadcrumbs.length - 1 - normalizedIndex + : normalizedIndex; + const breadcrumb = breadcrumbs[indexOfBreadcrumb]; + + if (isEven) { + breadcrumbsAtEnd.unshift(breadcrumb); + } else { + breadcrumbsAtStart.push(breadcrumb); + } + } + + const EuiBreadcrumbCollapsed = () => { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const ariaLabel = useEuiI18n( + 'euiBreadcrumbs.collapsedBadge.ariaLabel', + 'See collapsed breadcrumbs' + ); + + // Emotion styles for collapsed breadcrumb list items. + // Declared here because the collapsed breadcrumb is determined + // conditionally by number of breadcrumbs instead of a prop. + const cssBreadcrumbStylesCollapsed = [ + breadcrumbStyles.euiBreadcrumb, + breadcrumbStyles.isCollapsed, + ]; + + const ellipsisButton = ( + setIsPopoverOpen(!isPopoverOpen)} + > + … + + ); + + return ( +
                  8. + setIsPopoverOpen(false)} + > + + +
                    9. + ); + }; + + if (max < breadcrumbs.length) { + breadcrumbsAtStart.push(); + } + + return [...breadcrumbsAtStart, ...breadcrumbsAtEnd]; + }; + const breadcrumbElements = breadcrumbs.map((breadcrumb, index) => { const { text, @@ -220,13 +262,26 @@ export const EuiBreadcrumbs: FunctionComponent = ({ ...breadcrumbRest } = breadcrumb; const isLastBreadcrumb = index === breadcrumbs.length - 1; + const className = classNames('euiBreadcrumb', { 'euiBreadcrumb--last': isLastBreadcrumb, 'euiBreadcrumb--truncate': truncate, }); + + // Emotion styles for breadcrumb links, spans, and buttons. + // Individual object overrides to the `truncate` prop will + // not be available if styles are declared outside this + // const `breadcrumbElements` scope. + const breadcrumbContentStyles = euiBreadcrumbContentStyles(euiTheme); + const cssBreadcrumbContentStyles = [ + breadcrumbContentStyles.euiBreadcrumb__content, + truncate && breadcrumbContentStyles.isTruncated, + ]; + const linkProps = { className: classNames(CONTENT_CLASSNAME, breadcrumbClassName), 'aria-current': isLastBreadcrumb ? 'page' : undefined, + css: cssBreadcrumbContentStyles, } as { className: string; 'aria-current': AriaAttributes['aria-current'] }; const link = ( @@ -260,7 +315,7 @@ export const EuiBreadcrumbs: FunctionComponent = ({ ); return ( -
                  9. +
                  10. {link}
                    11. ); @@ -293,7 +348,9 @@ export const EuiBreadcrumbs: FunctionComponent = ({ return ( ); }; diff --git a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap index d41b45eb7ed..86326766588 100644 --- a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap +++ b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap @@ -20,24 +20,24 @@ exports[`EuiControlBar is rendered 1`] = ` class="euiBreadcrumbs euiControlBar__breadcrumbs euiBreadcrumbs--truncate" >
                    1. src
                    2. components @@ -88,2288 +88,656 @@ exports[`EuiControlBar is rendered 1`] = ` `; exports[`EuiControlBar props leftOffset is rendered 1`] = ` - - - -
                      -

                      - Page level controls -

                      -
                      - - -
                      - Close the Hatch -
                      -
                      - - Sample Icon - -
                      - -
                      -
                      -

                      - There is a new region landmark with page level controls at the end of the document. -

                      - - } +Array [ +
                      +

                      + Page level controls +

                      +
                      - -
                      - -

                      - Page level controls -

                      -                       -
                      - - - - - - - - -
                      - Close the Hatch -
                      -
                      - - - Sample Icon - - -
                      - -
                      -
                      -                       - -

                      + src + +

                      3. +
                    3. + + components + +
                      4. +
                    + + +
                    + Close the Hatch +
                    +
                    + + Sample Icon + +
                    + +
                    + , +

                    + There is a new region landmark with page level controls at the end of the document. +

                    , +] `; exports[`EuiControlBar props maxHeight is rendered 1`] = ` - - - -
                    -

                    - Page level controls -

                    -
                    - - -
                    - Close the Hatch -
                    -
                    - - Sample Icon - -
                    - -
                    -
                    -

                    - There is a new region landmark with page level controls at the end of the document. -

                    -
                    - } +Array [ +
                    +

                    - +
                    +

                  + + +
                  + Close the Hatch +
                  +
                  + + Sample Icon + +
                  + +
                  + , +

                  + There is a new region landmark with page level controls at the end of the document. +

                  , +] `; exports[`EuiControlBar props mobile is rendered 1`] = ` - - - -
                  -

                  - Page level controls -

                  -
                  - - -
                  - Close the Hatch -
                  -
                  - - Sample Icon - -
                  - -
                  -
                  -

                  - There is a new region landmark with page level controls at the end of the document. -

                  -
                  - } +Array [ +
                  +

                  + Page level controls +

                  +
                  - -
                  - -

                  - Page level controls -

                  -                   -
                  - - - - - - - - -
                  - Close the Hatch -
                  -
                  - - - Sample Icon - - -
                  - -
                  -
                  -                   - -

                  + src + +

                  3. +
                3. + + components + +
                  4. +
                + + +
                + Close the Hatch +
                +
                + + Sample Icon + +
                + +
                + , +

                + There is a new region landmark with page level controls at the end of the document. +

                , +] `; exports[`EuiControlBar props position is rendered 1`] = ` - - -
                +
                +
                7. +
              7. - Sample Icon + components - -
                -
              + + - - - - + Sound the Alarm + + + +
              + Close the Hatch +
              +
              + + Sample Icon + +
              + +
              + `; exports[`EuiControlBar props rightOffset is rendered 1`] = ` - - - -
              -

              - Page level controls -

              -
              - - -
              - Close the Hatch -
              -
              - - Sample Icon - -
              - -
              -
              -

              - There is a new region landmark with page level controls at the end of the document. -

              -
              - } +Array [ +
              +

              + Page level controls +

              +
              - -
              - -

              - Page level controls -

              -               -
              - - - - - - - - -
              - Close the Hatch -
              -
              - - - Sample Icon - - -
              - -
              -
              -               - -

              + src + +

              7. +
            7. + + components + +
              8. +
            + + +
            + Close the Hatch +
            +
            + + Sample Icon + +
            + +
            + , +

            + There is a new region landmark with page level controls at the end of the document. +

            , +] `; exports[`EuiControlBar props showContent is rendered 1`] = ` - - - -
            -

            - Page level controls -

            -
            - - -
            - Close the Hatch -
            -
            - - Sample Icon - -
            - -
            -
            - Content -
            -
            -

            - There is a new region landmark with page level controls at the end of the document. -

            -
            - } +Array [ +
            +

            + Page level controls +

            +
            - -
            - -

            - Page level controls -

            -             -
            - - - - - - - - -
            - Close the Hatch -
            -
            - - - Sample Icon - - -
            - -
            -
            + src + +
            9. +
          9. - Content - - - - -

            + components + +

            10. +
          + + +
          + Close the Hatch +
          +
          + + Sample Icon + +
          + +
          +
          + Content +
          + , +

          + There is a new region landmark with page level controls at the end of the document. +

          , +] `; exports[`EuiControlBar props size is rendered 1`] = ` - - - -
          -

          - Page level controls -

          -
          - - -
          - Close the Hatch -
          -
          - - Sample Icon - -
          - -
          -
          -

          - There is a new region landmark with page level controls at the end of the document. -

          -
          - } +Array [ +
          +

          + Page level controls +

          +
          - -
          - -

          - Page level controls -

          -           -
          - - - - - - - - -
          - Close the Hatch -
          -
          - - - Sample Icon - - -
          - -
          -
          -           - -

          + src + +

          3. +
        3. + + components + +
          4. +
        + + +
        + Close the Hatch +
        +
        + + Sample Icon + +
        + +
        + , +

        + There is a new region landmark with page level controls at the end of the document. +

        , +] `; diff --git a/src/components/control_bar/control_bar.test.tsx b/src/components/control_bar/control_bar.test.tsx index 59d00c7e0de..56687d6a4b3 100644 --- a/src/components/control_bar/control_bar.test.tsx +++ b/src/components/control_bar/control_bar.test.tsx @@ -78,7 +78,7 @@ describe('EuiControlBar', () => { ); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); test('showContent is rendered', () => { @@ -88,7 +88,7 @@ describe('EuiControlBar', () => { ); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); test('size is rendered', () => { @@ -98,7 +98,7 @@ describe('EuiControlBar', () => { ); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); test('maxHeight is rendered', () => { @@ -108,7 +108,7 @@ describe('EuiControlBar', () => { ); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); test('leftOffset is rendered', () => { @@ -118,7 +118,7 @@ describe('EuiControlBar', () => { ); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); test('rightOffset is rendered', () => { @@ -128,7 +128,7 @@ describe('EuiControlBar', () => { ); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); test('position is rendered', () => { @@ -138,7 +138,7 @@ describe('EuiControlBar', () => { ); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); }); }); diff --git a/src/components/header/__snapshots__/header.test.tsx.snap b/src/components/header/__snapshots__/header.test.tsx.snap index b853869bcdf..d570f66d798 100644 --- a/src/components/header/__snapshots__/header.test.tsx.snap +++ b/src/components/header/__snapshots__/header.test.tsx.snap @@ -43,14 +43,14 @@ exports[`EuiHeader sections render breadcrumbs and props 1`] = ` class="euiBreadcrumbs euiHeaderBreadcrumbs euiBreadcrumbs--truncate" >
        1. Breadcrumb 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 34664e6a8d7..f9b64351ec1 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 @@ -7,13 +7,13 @@ exports[`EuiHeaderBreadcrumbs is rendered 1`] = ` data-test-subj="test subject string" >
          3. @@ -43,11 +43,11 @@ exports[`EuiHeaderBreadcrumbs is rendered 1`] = `
          4. Edit diff --git a/src/components/index.scss b/src/components/index.scss index 865efd19f62..9cf7ca265ed 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -5,7 +5,6 @@ @import 'badge/index'; @import 'basic_table/index'; @import 'button/index'; -@import 'breadcrumbs/index'; @import 'call_out/index'; @import 'card/index'; @import 'code/index'; diff --git a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap index 7340b360625..e249cd6d3b6 100644 --- a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap +++ b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap @@ -207,13 +207,13 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`] data-test-subj="test subject string" >
            2. Edit diff --git a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap index 3e604d39a8d..dab6695ef7e 100644 --- a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap +++ b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap @@ -194,13 +194,13 @@ exports[`EuiPageHeaderContent props breadcrumbs is rendered 1`] = ` data-test-subj="test subject string" >
              2. Edit diff --git a/src/themes/amsterdam/overrides/_breadcrumbs.scss b/src/themes/amsterdam/overrides/_breadcrumbs.scss index 83855df2919..e69de29bb2d 100644 --- a/src/themes/amsterdam/overrides/_breadcrumbs.scss +++ b/src/themes/amsterdam/overrides/_breadcrumbs.scss @@ -1,12 +0,0 @@ - -// Inset outline otherwise the truncation cuts it off -.euiBreadcrumb__content.euiLink:focus { - outline-offset: -1px; -} - -// Fix all the font-weights to be consistent -.euiBreadcrumb--last, -.euiBreadcrumb__content, -.euiBreadcrumbs__inPopover .euiBreadcrumb--last .euiBreadcrumb__content { - font-weight: $euiButtonFontWeight; -} diff --git a/src/themes/amsterdam/overrides/_index.scss b/src/themes/amsterdam/overrides/_index.scss index d0419b0a8d3..350140c499e 100644 --- a/src/themes/amsterdam/overrides/_index.scss +++ b/src/themes/amsterdam/overrides/_index.scss @@ -1,4 +1,3 @@ -@import 'breadcrumbs'; @import 'button'; @import 'button_empty'; @import 'button_group'; From 668ddb5cd26b6832c3edde44e9fcbafdc84b809e Mon Sep 17 00:00:00 2001 From: 1Copenut Date: Wed, 13 Jul 2022 16:00:12 -0500 Subject: [PATCH 02/22] Adding EUIHeaderBreadcrumb styles. * Removing first group of SCSS files ahead of Amsterdam overrides. * Moving Amsterdam overrides to Emotion. * Added majority of the header breadcrumb styles. * Header styles are now contained, not casting into regular breadcrumbs. * Last color and bgColor styles added. * Removed Amsterdam SCSS overrides file. * Updating Jest snapshots for Emotion. * Adding CHANGELOG, final mobile styles. --- .../breadcrumbs/breadcrumbs.styles.ts | 248 +++++++++++++----- src/components/breadcrumbs/breadcrumbs.tsx | 9 + .../header/__snapshots__/header.test.tsx.snap | 6 +- src/components/header/_index.scss | 1 - .../header_breadcrumbs.test.tsx.snap | 22 +- .../_header_breadcrumbs.scss | 8 - .../header/header_breadcrumbs/_index.scss | 1 - .../header_breadcrumbs.styles.ts | 24 ++ .../header_breadcrumbs.test.tsx | 6 +- .../header_breadcrumbs/header_breadcrumbs.tsx | 13 + .../overrides/_header_breadcrumbs.scss | 71 ----- src/themes/amsterdam/overrides/_index.scss | 1 - upcoming_changelogs/5934.md | 3 + 13 files changed, 255 insertions(+), 158 deletions(-) delete mode 100644 src/components/header/header_breadcrumbs/_header_breadcrumbs.scss delete mode 100644 src/components/header/header_breadcrumbs/_index.scss create mode 100644 src/components/header/header_breadcrumbs/header_breadcrumbs.styles.ts delete mode 100644 src/themes/amsterdam/overrides/_header_breadcrumbs.scss create mode 100644 upcoming_changelogs/5934.md diff --git a/src/components/breadcrumbs/breadcrumbs.styles.ts b/src/components/breadcrumbs/breadcrumbs.styles.ts index df861993b16..945ee3fbad4 100644 --- a/src/components/breadcrumbs/breadcrumbs.styles.ts +++ b/src/components/breadcrumbs/breadcrumbs.styles.ts @@ -8,9 +8,15 @@ import { css } from '@emotion/react'; import { UseEuiTheme } from '../../services'; -import { euiFontSize, euiTextTruncate } from '../../global_styling/mixins'; +import { transparentize } from '../../services/color'; +import { + euiFontSize, + euiTextTruncate, + euiFocusRing, +} from '../../global_styling/mixins'; export const euiBreadcrumbsListStyles = (euiThemeContext: UseEuiTheme) => { + // Styles cast to the
      9. Edit @@ -328,7 +328,7 @@ exports[`EuiBreadcrumbs props max renders all items with null 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
      17. Edit @@ -423,7 +423,7 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
      22. Edit @@ -512,7 +512,7 @@ exports[`EuiBreadcrumbs props responsive is rendered as false 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
      27. Edit @@ -624,11 +624,11 @@ exports[`EuiBreadcrumbs props responsive is rendered with custom breakpoints 1`]
      28. Edit @@ -701,7 +701,7 @@ exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = `
      29. { } } `, - isTruncated: css` - overflow: hidden; - - &:not([class*='euiBreadcrumb-isCollapsed']) { - & > a, - & > span { - ${logicalCSS('max-width', `${parseFloat(euiTheme.size.base) * 10}px`)} - overflow: hidden; - text-overflow: ellipsis; - } - } - - &:last-of-type { - & > a, - & > span { - ${logicalCSS('max-width', 'none')} - } - } - `, isHeaderBreadcrumb: css` &:first-child { & > a, @@ -176,8 +157,7 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => { } `, isTruncated: css` - ${euiTextTruncate()}; - max-width: calc(${euiTheme.size.base} * 10); + ${euiTextTruncate(`${parseFloat(euiTheme.size.base) * 10}px`)}; text-align: center; vertical-align: baseline; `, diff --git a/src/components/breadcrumbs/breadcrumb.tsx b/src/components/breadcrumbs/breadcrumb.tsx index 8605e08b279..3b46658af53 100644 --- a/src/components/breadcrumbs/breadcrumb.tsx +++ b/src/components/breadcrumbs/breadcrumb.tsx @@ -60,13 +60,12 @@ interface _EuiBreadcrumbProps { export const EuiBreadcrumb: FunctionComponent< EuiBreadcrumbProps & _EuiBreadcrumbProps > = (props) => { - const { truncate, isHeaderBreadcrumb } = props; + const { isHeaderBreadcrumb } = props; const euiTheme = useEuiTheme(); const styles = euiBreadcrumbStyles(euiTheme); const cssStyles = [ styles.euiBreadcrumb, - truncate && styles.isTruncated, isHeaderBreadcrumb && styles.isHeaderBreadcrumb, ]; @@ -81,13 +80,13 @@ export const EuiBreadcrumbContent: FunctionComponent< EuiBreadcrumbProps & _EuiBreadcrumbProps > = ({ text, + truncate, href, rel, // required by our local href-with-rel eslint rule onClick, className, isLastBreadcrumb, isHeaderBreadcrumb, - truncate, ...rest }) => { const classes = classNames('euiBreadcrumb__content', className); @@ -96,7 +95,7 @@ export const EuiBreadcrumbContent: FunctionComponent< const styles = euiBreadcrumbContentStyles(euiTheme); const cssStyles = [ styles.euiBreadcrumb__content, - truncate && styles.isTruncated, + truncate && !isLastBreadcrumb && styles.isTruncated, isHeaderBreadcrumb && styles.isHeaderBreadcrumb, ]; diff --git a/src/components/header/__snapshots__/header.test.tsx.snap b/src/components/header/__snapshots__/header.test.tsx.snap index babb3e7ac12..5af24331478 100644 --- a/src/components/header/__snapshots__/header.test.tsx.snap +++ b/src/components/header/__snapshots__/header.test.tsx.snap @@ -46,7 +46,7 @@ exports[`EuiHeader sections render breadcrumbs and props 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
      34. Edit diff --git a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap index cbbbcbc31a9..d1ba630fe33 100644 --- a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap +++ b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap @@ -210,10 +210,10 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`] class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
      38. Date: Wed, 20 Jul 2022 14:13:19 -0700 Subject: [PATCH 08/22] Remove unnecessary repeated font-weight declarations - they're already handled in the content CSS and incidentally also in EuiLink styles --- src/components/breadcrumbs/breadcrumb.styles.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/components/breadcrumbs/breadcrumb.styles.ts b/src/components/breadcrumbs/breadcrumb.styles.ts index 566883abf07..6681ef0c3ec 100644 --- a/src/components/breadcrumbs/breadcrumb.styles.ts +++ b/src/components/breadcrumbs/breadcrumb.styles.ts @@ -44,10 +44,6 @@ export const euiBreadcrumbStyles = (euiThemeContext: UseEuiTheme) => { transform: translateY(-1px) rotate(15deg); } } - - &:last-of-type { - font-weight: ${euiTheme.font.weight.medium}; - } `, isCollapsed: css` flex-shrink: 0; @@ -123,7 +119,6 @@ export const euiBreadcrumbStyles = (euiThemeContext: UseEuiTheme) => { 0 100%, ${euiTheme.size.s} 50% ); - font-weight: ${euiTheme.font.weight.medium}; line-height: ${euiTheme.size.base}; padding: ${euiTheme.size.xs} ${euiTheme.size.base}; @@ -173,7 +168,6 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => { ${euiTheme.size.s} 50% ); color: ${euiTheme.colors.darkestShade}; - font-weight: ${euiTheme.font.weight.medium}; line-height: ${euiTheme.size.base}; ${logicalCSS('padding-vertical', euiTheme.size.xs)} ${logicalCSS('padding-horizontal', euiTheme.size.base)} From a4557224f1c03041d789a5c8061a18c2bb74166c Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 20 Jul 2022 16:58:40 -0700 Subject: [PATCH 09/22] Simplify and clean up nested .euiBreadcrumb styles - apply nested CSS to .euiBreadcrumb__content directly instead of using nested selectors - use a nested object and conditional JS logic (vs first/only/last-child) to flatten and DRY out CSS --- .../breadcrumbs/breadcrumb.styles.ts | 127 ++++++------------ src/components/breadcrumbs/breadcrumb.tsx | 15 ++- src/components/breadcrumbs/breadcrumbs.tsx | 2 + .../header/__snapshots__/header.test.tsx.snap | 4 +- .../header_breadcrumbs.test.tsx.snap | 28 +++- .../header_breadcrumbs.test.tsx | 12 +- 6 files changed, 96 insertions(+), 92 deletions(-) diff --git a/src/components/breadcrumbs/breadcrumb.styles.ts b/src/components/breadcrumbs/breadcrumb.styles.ts index 6681ef0c3ec..4f61ba16e96 100644 --- a/src/components/breadcrumbs/breadcrumb.styles.ts +++ b/src/components/breadcrumbs/breadcrumb.styles.ts @@ -17,7 +17,7 @@ import { } from '../../global_styling'; export const euiBreadcrumbStyles = (euiThemeContext: UseEuiTheme) => { - // Styles cast to
      39. and descendant elements + // Styles cast to
      40. element const { euiTheme } = euiThemeContext; return { euiBreadcrumb: css` @@ -47,108 +47,31 @@ export const euiBreadcrumbStyles = (euiThemeContext: UseEuiTheme) => { `, isCollapsed: css` flex-shrink: 0; - - & a, - & button { - :focus { - outline-offset: -1px; - } - } `, isHeaderBreadcrumb: css` - &:first-child { - & > a, - & > [class*='euiPopover'] button, - & > span { - border-radius: ${euiTheme.border.radius.medium} 0 0 - ${euiTheme.border.radius.medium}; - clip-path: polygon( - 0 0, - calc(100% - ${euiTheme.size.s}) 0, - 100% 50%, - calc(100% - ${euiTheme.size.s}) 100%, - 0 100% - ); - padding-left: ${euiTheme.size.m}; - } - } - - &:only-child { - & > a, - & > span { - border-radius: ${euiTheme.border.radius.medium}; - clip-path: none; - padding-left: ${euiTheme.size.m}; - padding-right: ${euiTheme.size.m}; - } - } - - &:last-child { - & > a, - & > span { - border-radius: 0 ${euiTheme.border.radius.medium} - ${euiTheme.border.radius.medium} 0; - clip-path: polygon( - 0 0, - 100% 0, - 100% 100%, - 0 100%, - ${euiTheme.size.s} 50% - ); - padding-right: ${euiTheme.size.m}; - } - } - &:not(:last-of-type) { - margin-right: -${euiTheme.size.xs}; + ${logicalCSS('margin-right', `-${euiTheme.size.xs}`)} } &::after { display: none; } - - > [class*='euiPopover'] button { - ${euiFontSize(euiThemeContext, 'xs')}; - background-color: ${transparentize(euiTheme.colors.primary, 0.2)}; - color: ${euiTheme.colors.link}; - clip-path: polygon( - 0 0, - calc(100% - ${euiTheme.size.s}) 0, - 100% 50%, - calc(100% - ${euiTheme.size.s}) 100%, - 0 100%, - ${euiTheme.size.s} 50% - ); - line-height: ${euiTheme.size.base}; - padding: ${euiTheme.size.xs} ${euiTheme.size.base}; - - :focus { - ${euiFocusRing(euiTheme, 'inset', { - color: `${euiTheme.colors.link}`, - })}; - color: ${euiTheme.colors.link}; - - :focus-visible { - border-radius: ${euiTheme.border.radius.medium}; - clip-path: none; - } - } - } `, }; }; export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => { - // Styles cast to or elements + // Styles cast to , , or collapsed
      `; + +exports[`EuiHeaderBreadcrumbs renders only one breadcrumb with all rounded corners 1`] = ` + +`; diff --git a/src/components/header/header_breadcrumbs/header_breadcrumbs.test.tsx b/src/components/header/header_breadcrumbs/header_breadcrumbs.test.tsx index 1834d222934..5904458428a 100644 --- a/src/components/header/header_breadcrumbs/header_breadcrumbs.test.tsx +++ b/src/components/header/header_breadcrumbs/header_breadcrumbs.test.tsx @@ -13,7 +13,7 @@ import { requiredProps } from '../../../test/required_props'; import { EuiHeaderBreadcrumbs } from './header_breadcrumbs'; describe('EuiHeaderBreadcrumbs', () => { - test('is rendered', () => { + it('is rendered', () => { const breadcrumbs = [ { text: 'Animals', @@ -47,4 +47,14 @@ describe('EuiHeaderBreadcrumbs', () => { expect(component.render()).toMatchSnapshot(); }); + + it('renders only one breadcrumb with all rounded corners', () => { + const breadcrumbs = [{ text: 'Home' }]; + + const component = mount( + + ); + + expect(component.render()).toMatchSnapshot(); + }); }); From 8aa914efc6d5f749459e54559eadb563765e1957 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 20 Jul 2022 17:41:52 -0700 Subject: [PATCH 10/22] Refactor `EuiBreadcrumbCollapsed` into separate component - Remove unnecessary `--collapsed` modifier class - DRY out `
    7. ` and `__content` logic/styles by reusing the `EuiBreadcrumb` and `EuiBreadcrumbContent` components, passing props/overrides as necessary - Allow any children as `EuiBreadcrumb` child to support this behavior/the popover - Pass EuiBreadcrumbContent in at the EuiBreadcrumbs level as a result --- .../views/breadcrumbs/breadcrumbs_example.js | 2 +- .../__snapshots__/breadcrumbs.test.tsx.snap | 28 +++--- src/components/breadcrumbs/breadcrumb.tsx | 59 ++++++++++- src/components/breadcrumbs/breadcrumbs.tsx | 97 ++++++------------- 4 files changed, 99 insertions(+), 87 deletions(-) diff --git a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js index df01a1d5adb..e67b9d44b5a 100644 --- a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js +++ b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js @@ -118,7 +118,7 @@ export const BreadcrumbsExample = { <>

      Use the max prop to collapse breadcrumbs beyond a - certain number. The center breadcrumbs will collpase into a single + certain number. The center breadcrumbs will collapse into a single item allowing the user to navigate these items from within a popover.

      diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap index ab2ced51ff1..f8a8d65ce38 100644 --- a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap +++ b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap @@ -31,7 +31,7 @@ exports[`EuiBreadcrumbs is rendered 1`] = `
    15. Edit @@ -99,10 +99,10 @@ exports[`EuiBreadcrumbs is rendered with final item as link 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    17. Metazoans
    20. Edit
    21. @@ -188,10 +188,10 @@ exports[`EuiBreadcrumbs props max doesn't break when max exceeds the number of b class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    23. Metazoans
    24. Chordates
    25. Nebulosa subspecies is also a real mouthful, especially for creatures without mouths
    26. Tetrapods
    29. Edit @@ -280,7 +280,7 @@ exports[`EuiBreadcrumbs props max renders 1 item 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    31. Edit @@ -325,10 +325,10 @@ exports[`EuiBreadcrumbs props max renders all items with null 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    33. Metazoans
    34. Chordates
    35. Nebulosa subspecies is also a real mouthful, especially for creatures without mouths
    36. Tetrapods
    39. Edit @@ -417,10 +417,10 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    41. Metazoans
    45. Edit @@ -505,10 +505,10 @@ exports[`EuiBreadcrumbs props responsive is rendered as false 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    47. Metazoans
    51. Edit @@ -593,7 +593,7 @@ exports[`EuiBreadcrumbs props responsive is rendered with custom breakpoints 1`] class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    53. Edit @@ -638,10 +638,10 @@ exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list" >
    55. Metazoans
    59. Edit diff --git a/src/components/breadcrumbs/breadcrumb.styles.ts b/src/components/breadcrumbs/breadcrumb.styles.ts index 77848158ad8..66ee44245e6 100644 --- a/src/components/breadcrumbs/breadcrumb.styles.ts +++ b/src/components/breadcrumbs/breadcrumb.styles.ts @@ -28,7 +28,13 @@ export const euiBreadcrumbStyles = (euiThemeContext: UseEuiTheme) => { 'margin-bottom', euiTheme.size.xs )} + `, + isCollapsed: css` + flex-shrink: 0; + `, + // Types + page: css` &:not(:last-of-type) { color: ${euiTheme.colors.subduedText}; @@ -45,18 +51,10 @@ export const euiBreadcrumbStyles = (euiThemeContext: UseEuiTheme) => { } } `, - isCollapsed: css` - flex-shrink: 0; - `, - // EuiHeader-specific breadcrumb styling - isHeaderBreadcrumb: css` + application: css` &:not(:last-of-type) { ${logicalCSS('margin-right', `-${euiTheme.size.xs}`)} } - - &::after { - display: none; - } `, }; }; @@ -67,7 +65,15 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => { return { euiBreadcrumb__content: css` font-weight: ${euiTheme.font.weight.medium}; + `, + isTruncated: css` + ${euiTextTruncate(`${parseFloat(euiTheme.size.base) * 10}px`)}; + text-align: center; + vertical-align: baseline; + `, + // Types + page: css` &:is(a):focus { ${euiFocusRing(euiTheme, 'inset')}; } @@ -75,16 +81,7 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => { ${euiFocusRing(euiTheme, 'center')}; } `, - isTruncated: css` - ${euiTextTruncate(`${parseFloat(euiTheme.size.base) * 10}px`)}; - text-align: center; - vertical-align: baseline; - `, - - /** - * EuiHeader-specific breadcrumb styling - */ - isHeaderBreadcrumb: css` + application: css` ${euiFontSize(euiThemeContext, 'xs')}; background-color: ${transparentize(euiTheme.colors.darkestShade, 0.2)}; clip-path: polygon( @@ -115,7 +112,7 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => { } } `, - headerBreadcrumb: { + applicationStyles: { onlyChild: css` border-radius: ${euiTheme.border.radius.medium}; clip-path: none; diff --git a/src/components/breadcrumbs/breadcrumb.tsx b/src/components/breadcrumbs/breadcrumb.tsx index fa03f829a1a..4e895f0f270 100644 --- a/src/components/breadcrumbs/breadcrumb.tsx +++ b/src/components/breadcrumbs/breadcrumb.tsx @@ -57,6 +57,7 @@ export type EuiBreadcrumbProps = Omit< // Used internally only by the parent EuiBreadcrumbs interface _EuiBreadcrumbProps { + type: 'page' | 'application'; isFirstBreadcrumb?: boolean; isLastBreadcrumb?: boolean; isOnlyBreadcrumb?: boolean; @@ -66,14 +67,14 @@ interface _EuiBreadcrumbProps { export const EuiBreadcrumb: FunctionComponent< HTMLAttributes & _EuiBreadcrumbProps -> = ({ children, className, isInEuiHeader, ...rest }) => { +> = ({ children, className, type, ...rest }) => { const classes = classNames('euiBreadcrumb', className); const euiTheme = useEuiTheme(); const styles = euiBreadcrumbStyles(euiTheme); const cssStyles = [ styles.euiBreadcrumb, - isInEuiHeader && styles.isHeaderBreadcrumb, + styles[type], ]; return ( @@ -88,6 +89,7 @@ export const EuiBreadcrumbContent: FunctionComponent< > = ({ text, truncate, + type, href, rel, // required by our local href-with-rel eslint rule onClick, @@ -95,7 +97,6 @@ export const EuiBreadcrumbContent: FunctionComponent< isFirstBreadcrumb, isLastBreadcrumb, isOnlyBreadcrumb, - isInEuiHeader, isInCollapsedPopover, ...rest }) => { @@ -105,16 +106,16 @@ export const EuiBreadcrumbContent: FunctionComponent< const styles = euiBreadcrumbContentStyles(euiTheme); const cssStyles = [ styles.euiBreadcrumb__content, + styles[type], truncate && !isLastBreadcrumb && styles.isTruncated, ]; - if (isInEuiHeader) { - cssStyles.push(styles.isHeaderBreadcrumb); + if (type === 'application') { if (isOnlyBreadcrumb) { - cssStyles.push(styles.headerBreadcrumb.onlyChild); + cssStyles.push(styles.applicationStyles.onlyChild); } else if (isFirstBreadcrumb) { - cssStyles.push(styles.headerBreadcrumb.firstChild); + cssStyles.push(styles.applicationStyles.firstChild); } else if (isLastBreadcrumb) { - cssStyles.push(styles.headerBreadcrumb.lastChild); + cssStyles.push(styles.applicationStyles.lastChild); } } @@ -163,7 +164,7 @@ export const EuiBreadcrumbContent: FunctionComponent< export const EuiBreadcrumbCollapsed: FunctionComponent<_EuiBreadcrumbProps> = ({ children, isFirstBreadcrumb, - isInEuiHeader, + type, }) => { const [isPopoverOpen, setIsPopoverOpen] = useState(false); @@ -188,12 +189,12 @@ export const EuiBreadcrumbCollapsed: FunctionComponent<_EuiBreadcrumbProps> = ({ } isFirstBreadcrumb={isFirstBreadcrumb} - isInEuiHeader={isInEuiHeader} + type={type} /> ); return ( - + { @@ -116,7 +121,7 @@ export const EuiBreadcrumbs: FunctionComponent< return breadcrumb.isCollapsedButton ? ( ) : ( - + ); }), - [visibleBreadcrumbs, truncate, isInEuiHeader, isInCollapsedPopover] + [visibleBreadcrumbs, truncate, type, isInCollapsedPopover] ); return ( diff --git a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap index 2b7a8861d41..14876f4d9e7 100644 --- a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap +++ b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap @@ -24,20 +24,20 @@ Array [ class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    60. src
    61. components @@ -116,21 +116,21 @@ Array [ class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    62. src
    63. components @@ -210,21 +210,21 @@ Array [ class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    64. src
    65. components @@ -304,21 +304,21 @@ Array [ class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    66. src
    67. components @@ -397,21 +397,21 @@ exports[`EuiControlBar props position is rendered 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    68. src
    69. components @@ -484,21 +484,21 @@ Array [ class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    70. src
    71. components @@ -578,21 +578,21 @@ Array [ class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    72. src
    73. components @@ -677,21 +677,21 @@ Array [ class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    74. src
    75. components diff --git a/src/components/header/__snapshots__/header.test.tsx.snap b/src/components/header/__snapshots__/header.test.tsx.snap index c674f761fe9..3eaa346f2c2 100644 --- a/src/components/header/__snapshots__/header.test.tsx.snap +++ b/src/components/header/__snapshots__/header.test.tsx.snap @@ -46,11 +46,11 @@ exports[`EuiHeader sections render breadcrumbs and props 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    76. Breadcrumb 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 929b2768acf..057afedeaf5 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 @@ -10,10 +10,10 @@ exports[`EuiHeaderBreadcrumbs is rendered 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    80. Edit @@ -70,11 +70,11 @@ exports[`EuiHeaderBreadcrumbs renders only one breadcrumb with all rounded corne class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    81. Home diff --git a/src/components/header/header_breadcrumbs/header_breadcrumbs.tsx b/src/components/header/header_breadcrumbs/header_breadcrumbs.tsx index a01bac0f180..d11b6efcb38 100644 --- a/src/components/header/header_breadcrumbs/header_breadcrumbs.tsx +++ b/src/components/header/header_breadcrumbs/header_breadcrumbs.tsx @@ -31,7 +31,7 @@ export const EuiHeaderBreadcrumbs: FunctionComponent = ({ breadcrumbs={breadcrumbs} className={classes} css={cssHeaderBreadcrumbStyles} - isInEuiHeader + type="application" {...rest} /> ); diff --git a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap index 3af1d45b98a..6a234d812e4 100644 --- a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap +++ b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap @@ -210,10 +210,10 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`] class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    83. Edit diff --git a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap index ba5cebd2761..82fba1638f8 100644 --- a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap +++ b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap @@ -197,10 +197,10 @@ exports[`EuiPageHeaderContent props breadcrumbs is rendered 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    85. Edit From 734690e60fac18ff95b3f7351ce80230e7d959e9 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 25 Jul 2022 13:58:20 -0700 Subject: [PATCH 18/22] Refactor out last internal prop to more descriptive flag - This may be useful to other consumers where their last breadcrumb is not the current page + tweak styling to show color difference for both `span`s and `a` tags - using JS `color` props instead of CSS + fix `color` prop being passed to underlying span tags --- .../views/breadcrumbs/breadcrumbs_example.js | 4 ++ .../__snapshots__/breadcrumbs.test.tsx.snap | 44 +++++++++---------- .../breadcrumbs/breadcrumb.styles.ts | 2 - src/components/breadcrumbs/breadcrumb.tsx | 37 +++++++++------- src/components/breadcrumbs/breadcrumbs.tsx | 23 +++++----- .../__snapshots__/control_bar.test.tsx.snap | 32 +++++++------- .../header/__snapshots__/header.test.tsx.snap | 2 +- .../header_breadcrumbs.test.tsx.snap | 4 +- .../__snapshots__/page_header.test.tsx.snap | 2 +- .../page_header_content.test.tsx.snap | 2 +- 10 files changed, 79 insertions(+), 73 deletions(-) diff --git a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js index 9ff80dea1be..3e1f4161f37 100644 --- a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js +++ b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js @@ -258,6 +258,10 @@ export const BreadcrumbsExample = { emphasis or indicate state like {"'danger'"} for an error. However, use caution not to use color alone.

      +

      + Please also note that link colors cannot be overriden for{' '} + type={'"application"'} breadcrumbs. +

      ), props, diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap index 56ca3e775c1..0c65a5a2f67 100644 --- a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap +++ b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap @@ -25,7 +25,7 @@ exports[`EuiBreadcrumbs is rendered 1`] = ` class="euiBreadcrumb emotion-euiBreadcrumb-page" > Metazoans @@ -80,7 +80,7 @@ exports[`EuiBreadcrumbs is rendered 1`] = ` > Edit @@ -114,7 +114,7 @@ exports[`EuiBreadcrumbs is rendered with final item as link 1`] = ` class="euiBreadcrumb emotion-euiBreadcrumb-page" > Metazoans @@ -158,7 +158,7 @@ exports[`EuiBreadcrumbs is rendered with final item as link 1`] = ` class="euiBreadcrumb emotion-euiBreadcrumb-page" > Edit @@ -203,7 +203,7 @@ exports[`EuiBreadcrumbs props max doesn't break when max exceeds the number of b class="euiBreadcrumb emotion-euiBreadcrumb-page" > Metazoans @@ -212,7 +212,7 @@ exports[`EuiBreadcrumbs props max doesn't break when max exceeds the number of b class="euiBreadcrumb emotion-euiBreadcrumb-page" > Chordates @@ -221,7 +221,7 @@ exports[`EuiBreadcrumbs props max doesn't break when max exceeds the number of b class="euiBreadcrumb emotion-euiBreadcrumb-page" > Nebulosa subspecies is also a real mouthful, especially for creatures without mouths @@ -230,7 +230,7 @@ exports[`EuiBreadcrumbs props max doesn't break when max exceeds the number of b class="euiBreadcrumb emotion-euiBreadcrumb-page" > Tetrapods @@ -262,7 +262,7 @@ exports[`EuiBreadcrumbs props max doesn't break when max exceeds the number of b > Edit @@ -307,7 +307,7 @@ exports[`EuiBreadcrumbs props max renders 1 item 1`] = ` > Edit @@ -340,7 +340,7 @@ exports[`EuiBreadcrumbs props max renders all items with null 1`] = ` class="euiBreadcrumb emotion-euiBreadcrumb-page" > Metazoans @@ -349,7 +349,7 @@ exports[`EuiBreadcrumbs props max renders all items with null 1`] = ` class="euiBreadcrumb emotion-euiBreadcrumb-page" > Chordates @@ -358,7 +358,7 @@ exports[`EuiBreadcrumbs props max renders all items with null 1`] = ` class="euiBreadcrumb emotion-euiBreadcrumb-page" > Nebulosa subspecies is also a real mouthful, especially for creatures without mouths @@ -367,7 +367,7 @@ exports[`EuiBreadcrumbs props max renders all items with null 1`] = ` class="euiBreadcrumb emotion-euiBreadcrumb-page" > Tetrapods @@ -399,7 +399,7 @@ exports[`EuiBreadcrumbs props max renders all items with null 1`] = ` > Edit @@ -432,7 +432,7 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = ` class="euiBreadcrumb emotion-euiBreadcrumb-page" > Metazoans @@ -487,7 +487,7 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = ` > Edit @@ -520,7 +520,7 @@ exports[`EuiBreadcrumbs props responsive is rendered as false 1`] = ` class="euiBreadcrumb emotion-euiBreadcrumb-page" > Metazoans @@ -575,7 +575,7 @@ exports[`EuiBreadcrumbs props responsive is rendered as false 1`] = ` > Edit @@ -620,7 +620,7 @@ exports[`EuiBreadcrumbs props responsive is rendered with custom breakpoints 1`] > Edit @@ -653,7 +653,7 @@ exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = ` class="euiBreadcrumb emotion-euiBreadcrumb-page" > Metazoans @@ -708,7 +708,7 @@ exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = ` > Edit diff --git a/src/components/breadcrumbs/breadcrumb.styles.ts b/src/components/breadcrumbs/breadcrumb.styles.ts index 66ee44245e6..832e2ce0237 100644 --- a/src/components/breadcrumbs/breadcrumb.styles.ts +++ b/src/components/breadcrumbs/breadcrumb.styles.ts @@ -36,8 +36,6 @@ export const euiBreadcrumbStyles = (euiThemeContext: UseEuiTheme) => { // Types page: css` &:not(:last-of-type) { - color: ${euiTheme.colors.subduedText}; - &:after { background: ${euiTheme.colors.lightShade}; content: ''; diff --git a/src/components/breadcrumbs/breadcrumb.tsx b/src/components/breadcrumbs/breadcrumb.tsx index 4e895f0f270..c0d82c350a6 100644 --- a/src/components/breadcrumbs/breadcrumb.tsx +++ b/src/components/breadcrumbs/breadcrumb.tsx @@ -19,6 +19,7 @@ import classNames from 'classnames'; import { useEuiTheme } from '../../services'; import { CommonProps } from '../common'; import { EuiInnerText } from '../inner_text'; +import { EuiTextColor } from '../text'; import { EuiLink, EuiLinkColor } from '../link'; import { EuiPopover } from '../popover'; import { EuiIcon } from '../icon'; @@ -61,8 +62,7 @@ interface _EuiBreadcrumbProps { isFirstBreadcrumb?: boolean; isLastBreadcrumb?: boolean; isOnlyBreadcrumb?: boolean; - isInEuiHeader?: boolean; - isInCollapsedPopover?: boolean; + highlightLastBreadcrumb?: boolean; } export const EuiBreadcrumb: FunctionComponent< @@ -94,10 +94,11 @@ export const EuiBreadcrumbContent: FunctionComponent< rel, // required by our local href-with-rel eslint rule onClick, className, + color, isFirstBreadcrumb, isLastBreadcrumb, isOnlyBreadcrumb, - isInCollapsedPopover, + highlightLastBreadcrumb, ...rest }) => { const classes = classNames('euiBreadcrumb__content', className); @@ -119,8 +120,7 @@ export const EuiBreadcrumbContent: FunctionComponent< } } - const ariaCurrent = - isLastBreadcrumb && !isInCollapsedPopover ? 'page' : undefined; + const ariaCurrent = highlightLastBreadcrumb ? 'page' : undefined; return ( @@ -128,16 +128,21 @@ export const EuiBreadcrumbContent: FunctionComponent< const title = innerText === '' ? undefined : innerText; return !href && !onClick ? ( - - {text} - + + {text} + + ) : ( = ({ +export const EuiBreadcrumbs: FunctionComponent = ({ breadcrumbs, className, responsive = responsiveDefault, truncate = true, max = 5, type = 'page', - isInCollapsedPopover = false, + lastBreadcrumbIsCurrentPage = true, ...rest }) => { const ariaLabel = useEuiI18n('euiBreadcrumbs.nav.ariaLabel', 'Breadcrumbs'); @@ -126,7 +125,7 @@ export const EuiBreadcrumbs: FunctionComponent< > ); }), - [visibleBreadcrumbs, truncate, type, isInCollapsedPopover] + [visibleBreadcrumbs, truncate, type, lastBreadcrumbIsCurrentPage] ); return ( diff --git a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap index 14876f4d9e7..109f80b28c2 100644 --- a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap +++ b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap @@ -27,7 +27,7 @@ Array [ class="euiBreadcrumb emotion-euiBreadcrumb-page" > src @@ -37,7 +37,7 @@ Array [ > components @@ -119,7 +119,7 @@ Array [ class="euiBreadcrumb emotion-euiBreadcrumb-page" > src @@ -130,7 +130,7 @@ Array [ > components @@ -213,7 +213,7 @@ Array [ class="euiBreadcrumb emotion-euiBreadcrumb-page" > src @@ -224,7 +224,7 @@ Array [ > components @@ -307,7 +307,7 @@ Array [ class="euiBreadcrumb emotion-euiBreadcrumb-page" > src @@ -318,7 +318,7 @@ Array [ > components @@ -400,7 +400,7 @@ exports[`EuiControlBar props position is rendered 1`] = ` class="euiBreadcrumb emotion-euiBreadcrumb-page" > src @@ -411,7 +411,7 @@ exports[`EuiControlBar props position is rendered 1`] = ` > components @@ -487,7 +487,7 @@ Array [ class="euiBreadcrumb emotion-euiBreadcrumb-page" > src @@ -498,7 +498,7 @@ Array [ > components @@ -581,7 +581,7 @@ Array [ class="euiBreadcrumb emotion-euiBreadcrumb-page" > src @@ -592,7 +592,7 @@ Array [ > components @@ -680,7 +680,7 @@ Array [ class="euiBreadcrumb emotion-euiBreadcrumb-page" > src @@ -691,7 +691,7 @@ Array [ > components diff --git a/src/components/header/__snapshots__/header.test.tsx.snap b/src/components/header/__snapshots__/header.test.tsx.snap index 3eaa346f2c2..c4a449aa4f1 100644 --- a/src/components/header/__snapshots__/header.test.tsx.snap +++ b/src/components/header/__snapshots__/header.test.tsx.snap @@ -50,7 +50,7 @@ exports[`EuiHeader sections render breadcrumbs and props 1`] = ` > Breadcrumb 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 057afedeaf5..fc82bbe7f1a 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 @@ -50,7 +50,7 @@ exports[`EuiHeaderBreadcrumbs is rendered 1`] = ` > Edit @@ -74,7 +74,7 @@ exports[`EuiHeaderBreadcrumbs renders only one breadcrumb with all rounded corne > Home diff --git a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap index 6a234d812e4..978f9a16e0b 100644 --- a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap +++ b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap @@ -226,7 +226,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`] > Edit diff --git a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap index 82fba1638f8..4a6f2f259d0 100644 --- a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap +++ b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap @@ -213,7 +213,7 @@ exports[`EuiPageHeaderContent props breadcrumbs is rendered 1`] = ` > Edit From 92d71fb657ada6073611af07dacc5d938fae9220 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 25 Jul 2022 14:08:24 -0700 Subject: [PATCH 19/22] Fix the "Truncate each breadcrumb" example not matching production - the `
    86. ` parent still needs an overflow hidden as it turns out - the last breadcrumb also still needs text truncation styles, it's just max-width should be set ot none --- .../__snapshots__/breadcrumbs.test.tsx.snap | 116 +++++++++--------- .../breadcrumbs/breadcrumb.styles.ts | 14 ++- src/components/breadcrumbs/breadcrumb.tsx | 10 +- src/components/breadcrumbs/breadcrumbs.tsx | 9 +- .../__snapshots__/control_bar.test.tsx.snap | 48 ++++---- .../header/__snapshots__/header.test.tsx.snap | 4 +- .../header_breadcrumbs.test.tsx.snap | 14 +-- .../__snapshots__/page_header.test.tsx.snap | 6 +- .../page_header_content.test.tsx.snap | 6 +- 9 files changed, 119 insertions(+), 108 deletions(-) diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap index 0c65a5a2f67..6f2a6d4c9ce 100644 --- a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap +++ b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap @@ -10,7 +10,7 @@ exports[`EuiBreadcrumbs is rendered 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    91. Edit @@ -99,7 +99,7 @@ exports[`EuiBreadcrumbs is rendered with final item as link 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    96. @@ -188,7 +188,7 @@ exports[`EuiBreadcrumbs props max doesn't break when max exceeds the number of b class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    104. Edit @@ -303,11 +303,11 @@ exports[`EuiBreadcrumbs props max renders 1 item 1`] = `
    105. Edit @@ -325,7 +325,7 @@ exports[`EuiBreadcrumbs props max renders all items with null 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    113. Edit @@ -417,7 +417,7 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    118. Edit @@ -505,7 +505,7 @@ exports[`EuiBreadcrumbs props responsive is rendered as false 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    123. Edit @@ -616,11 +616,11 @@ exports[`EuiBreadcrumbs props responsive is rendered with custom breakpoints 1`]
    124. Edit @@ -695,7 +695,7 @@ exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = ` class="euiBreadcrumb emotion-euiBreadcrumb-page" > { euiTheme.size.xs )} `, + isTruncated: css` + overflow: hidden; + `, isCollapsed: css` flex-shrink: 0; `, @@ -63,12 +66,17 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => { return { euiBreadcrumb__content: css` font-weight: ${euiTheme.font.weight.medium}; - `, - isTruncated: css` - ${euiTextTruncate(`${parseFloat(euiTheme.size.base) * 10}px`)}; text-align: center; vertical-align: baseline; `, + isTruncated: css` + ${euiTextTruncate(`${parseFloat(euiTheme.size.base) * 10}px`)} + `, + isTruncatedLast: css` + // This removes the default breadcrumb max-width while ensuring that the last breadcrumb + // still cuts off with a '...' if it's overflowing outside the parent breadcrumbs container + ${euiTextTruncate('none')} + `, // Types page: css` diff --git a/src/components/breadcrumbs/breadcrumb.tsx b/src/components/breadcrumbs/breadcrumb.tsx index c0d82c350a6..895bc70966a 100644 --- a/src/components/breadcrumbs/breadcrumb.tsx +++ b/src/components/breadcrumbs/breadcrumb.tsx @@ -57,17 +57,17 @@ export type EuiBreadcrumbProps = Omit< }; // Used internally only by the parent EuiBreadcrumbs -interface _EuiBreadcrumbProps { +type _EuiBreadcrumbProps = { type: 'page' | 'application'; isFirstBreadcrumb?: boolean; isLastBreadcrumb?: boolean; isOnlyBreadcrumb?: boolean; highlightLastBreadcrumb?: boolean; -} +} & Pick; export const EuiBreadcrumb: FunctionComponent< HTMLAttributes & _EuiBreadcrumbProps -> = ({ children, className, type, ...rest }) => { +> = ({ children, className, type, truncate, ...rest }) => { const classes = classNames('euiBreadcrumb', className); const euiTheme = useEuiTheme(); @@ -75,6 +75,7 @@ export const EuiBreadcrumb: FunctionComponent< const cssStyles = [ styles.euiBreadcrumb, styles[type], + truncate && styles.isTruncated, ]; return ( @@ -108,7 +109,8 @@ export const EuiBreadcrumbContent: FunctionComponent< const cssStyles = [ styles.euiBreadcrumb__content, styles[type], - truncate && !isLastBreadcrumb && styles.isTruncated, + truncate && + (isLastBreadcrumb ? styles.isTruncatedLast : styles.isTruncated), ]; if (type === 'application') { if (isOnlyBreadcrumb) { diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx index 2989430777f..1ebb4648a0d 100644 --- a/src/components/breadcrumbs/breadcrumbs.tsx +++ b/src/components/breadcrumbs/breadcrumbs.tsx @@ -117,10 +117,12 @@ export const EuiBreadcrumbs: FunctionComponent = ({ const isLastBreadcrumb = index === visibleBreadcrumbs.length - 1; const isOnlyBreadcrumb = visibleBreadcrumbs.length === 1; + const sharedProps = { type, truncate }; + return breadcrumb.isCollapsedButton ? ( = ({ /> ) : ( - + diff --git a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap index 109f80b28c2..45f2151d4d0 100644 --- a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap +++ b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap @@ -24,7 +24,7 @@ Array [ class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    126. components @@ -116,7 +116,7 @@ Array [ class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    128. components @@ -210,7 +210,7 @@ Array [ class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    130. components @@ -304,7 +304,7 @@ Array [ class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    132. components @@ -397,7 +397,7 @@ exports[`EuiControlBar props position is rendered 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    134. components @@ -484,7 +484,7 @@ Array [ class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    136. components @@ -578,7 +578,7 @@ Array [ class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    138. components @@ -677,7 +677,7 @@ Array [ class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    140. components diff --git a/src/components/header/__snapshots__/header.test.tsx.snap b/src/components/header/__snapshots__/header.test.tsx.snap index c4a449aa4f1..c7c40d2695e 100644 --- a/src/components/header/__snapshots__/header.test.tsx.snap +++ b/src/components/header/__snapshots__/header.test.tsx.snap @@ -46,11 +46,11 @@ exports[`EuiHeader sections render breadcrumbs and props 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    141. Breadcrumb 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 fc82bbe7f1a..4a3deea0126 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 @@ -10,7 +10,7 @@ exports[`EuiHeaderBreadcrumbs is rendered 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    145. Edit @@ -70,11 +70,11 @@ exports[`EuiHeaderBreadcrumbs renders only one breadcrumb with all rounded corne class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    146. Home diff --git a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap index 978f9a16e0b..7cf7dba1ede 100644 --- a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap +++ b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap @@ -210,7 +210,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`] class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    148. Edit diff --git a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap index 4a6f2f259d0..ccd81402567 100644 --- a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap +++ b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap @@ -197,7 +197,7 @@ exports[`EuiPageHeaderContent props breadcrumbs is rendered 1`] = ` class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated" >
    150. Edit From 5d3de7e1ed17fe3f82aabc9346b4cb2eef6831bb Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 28 Jul 2022 09:37:16 -0700 Subject: [PATCH 20/22] Fix useCurrentEuiBreakpoint refactor lost in merge conflict --- src/components/breadcrumbs/breadcrumbs.tsx | 31 +++++++--------------- 1 file changed, 9 insertions(+), 22 deletions(-) diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx index 1ebb4648a0d..ba0b294c153 100644 --- a/src/components/breadcrumbs/breadcrumbs.tsx +++ b/src/components/breadcrumbs/breadcrumbs.tsx @@ -6,13 +6,16 @@ * Side Public License, v 1. */ -import React, { FunctionComponent, useEffect, useState, useMemo } from 'react'; +import React, { FunctionComponent, useMemo } from 'react'; import classNames from 'classnames'; import { CommonProps, ExclusiveUnion } from '../common'; import { useEuiI18n } from '../i18n'; -import { throttle, useEuiTheme } from '../../services'; -import { EuiBreakpointSize, getBreakpoint } from '../../services/breakpoint'; +import { + useEuiTheme, + EuiBreakpointSize, + useCurrentEuiBreakpoint, +} from '../../services'; import { EuiBreadcrumb, @@ -168,35 +171,19 @@ export const useResponsiveMax = ( responsive: EuiBreadcrumbsProps['responsive'], max: EuiBreadcrumbsProps['max'] ) => { + const currentBreakpoint = useCurrentEuiBreakpoint(); // Use the default object if they simply passed `true` for responsive const responsiveObject = typeof responsive === 'object' ? responsive : responsiveDefault; - const [currentBreakpoint, setCurrentBreakpoint] = useState( - getBreakpoint(typeof window === 'undefined' ? -Infinity : window.innerWidth) - ); - - useEffect(() => { - const onWindowResize = throttle(() => { - const newBreakpoint = getBreakpoint(window.innerWidth); - setCurrentBreakpoint(newBreakpoint); - // reacts every 50ms to resize changes and always gets the final update - }, 50); - - window.addEventListener('resize', onWindowResize); - return () => { - window.removeEventListener('resize', onWindowResize); - }; - }, [responsive]); - // The max property collapses any breadcrumbs past the max quantity. // This is the same behavior we want for responsiveness. // So calculate the max value based on the combination of `max` and `responsive` let responsiveMax: EuiBreadcrumbsProps['max'] = max; // Set the calculated max to the number associated with the currentBreakpoint key if it exists - if (responsive && responsiveObject[currentBreakpoint as EuiBreakpointSize]) { - responsiveMax = responsiveObject[currentBreakpoint as EuiBreakpointSize]!; + if (responsive && currentBreakpoint && responsiveObject[currentBreakpoint]) { + responsiveMax = responsiveObject[currentBreakpoint]; } // Final check is to make sure max is used over a larger breakpoint value From 0d016369acb64eba8bc700badf8420c50da84043 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 28 Jul 2022 09:39:21 -0700 Subject: [PATCH 21/22] Remove deleted Sass variables from JSON files and document in changelog --- src-docs/src/views/theme/_json/eui_theme_dark.json | 4 +--- src-docs/src/views/theme/_json/eui_theme_light.json | 4 +--- upcoming_changelogs/5934.md | 2 +- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src-docs/src/views/theme/_json/eui_theme_dark.json b/src-docs/src/views/theme/_json/eui_theme_dark.json index 9ba0f91bece..978804edb50 100644 --- a/src-docs/src/views/theme/_json/eui_theme_dark.json +++ b/src-docs/src/views/theme/_json/eui_theme_dark.json @@ -3,8 +3,6 @@ "gutterExtraSmall": "4px", "gutterSmall": "8px" }, - "euiBreadcrumbSpacing": "8px", - "euiBreadcrumbTruncateWidth": "160px", "euiButtonEmptyTypes": { "primary": "#36a2ef", "danger": "#f86b63", @@ -660,4 +658,4 @@ "warning": "#f3d371", "danger": "#f86b63" } -} \ No newline at end of file +} diff --git a/src-docs/src/views/theme/_json/eui_theme_light.json b/src-docs/src/views/theme/_json/eui_theme_light.json index d1e7661bd55..acaa0f3983a 100644 --- a/src-docs/src/views/theme/_json/eui_theme_light.json +++ b/src-docs/src/views/theme/_json/eui_theme_light.json @@ -3,8 +3,6 @@ "gutterExtraSmall": "4px", "gutterSmall": "8px" }, - "euiBreadcrumbSpacing": "8px", - "euiBreadcrumbTruncateWidth": "160px", "euiButtonEmptyTypes": { "primary": "#0071c2", "danger": "#bd271e", @@ -660,4 +658,4 @@ "warning": "#fec514", "danger": "#bd271e" } -} \ No newline at end of file +} diff --git a/upcoming_changelogs/5934.md b/upcoming_changelogs/5934.md index cc354dcbdb7..d57345e9fd0 100644 --- a/upcoming_changelogs/5934.md +++ b/upcoming_changelogs/5934.md @@ -1,3 +1,3 @@ **CSS-in-JS conversions** -- Converted `EuiBreadcrumbs` and `EuiHeaderBreadcrumbs` to Emotion +- Converted `EuiBreadcrumbs` and `EuiHeaderBreadcrumbs` to Emotion; removed `$euiBreadcrumbSpacing` and `$euiBreadcrumbTruncateWidth` From 9a90af424422055da0dec47ddc59f923b8a79281 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 28 Jul 2022 09:41:07 -0700 Subject: [PATCH 22/22] woops 1 more smol thing --- src/components/breadcrumbs/breadcrumbs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx index ba0b294c153..e2c978befa4 100644 --- a/src/components/breadcrumbs/breadcrumbs.tsx +++ b/src/components/breadcrumbs/breadcrumbs.tsx @@ -171,7 +171,6 @@ export const useResponsiveMax = ( responsive: EuiBreadcrumbsProps['responsive'], max: EuiBreadcrumbsProps['max'] ) => { - const currentBreakpoint = useCurrentEuiBreakpoint(); // Use the default object if they simply passed `true` for responsive const responsiveObject = typeof responsive === 'object' ? responsive : responsiveDefault; @@ -182,6 +181,7 @@ export const useResponsiveMax = ( let responsiveMax: EuiBreadcrumbsProps['max'] = max; // Set the calculated max to the number associated with the currentBreakpoint key if it exists + const currentBreakpoint = useCurrentEuiBreakpoint(); if (responsive && currentBreakpoint && responsiveObject[currentBreakpoint]) { responsiveMax = responsiveObject[currentBreakpoint]; }