Remove inPopover CSS/nesting

- in favor of JS logic instead
elastic · Jul 21, 2022 · e50a5f9 · e50a5f9
1 parent 8aa914e
commit e50a5f9
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 38 deletions.
diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
@@ -230,7 +230,6 @@ exports[`EuiBreadcrumbs props max doesn't break when max exceeds the number of b
       class="euiBreadcrumb emotion-euiBreadcrumb"
     >
       <span
-        aria-current="false"
         class="euiBreadcrumb__content emotion-euiBreadcrumb__content-isTruncated"
       >
         Tetrapods
@@ -240,7 +239,6 @@ exports[`EuiBreadcrumbs props max doesn't break when max exceeds the number of b
       class="euiBreadcrumb emotion-euiBreadcrumb"
     >
       <button
-        aria-current="false"
         class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-isTruncated"
         type="button"
       >
@@ -251,7 +249,6 @@ exports[`EuiBreadcrumbs props max doesn't break when max exceeds the number of b
       class="euiBreadcrumb emotion-euiBreadcrumb"
     >
       <a
-        aria-current="false"
         class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-isTruncated"
         href="#"
         rel="noreferrer"
@@ -370,7 +367,6 @@ exports[`EuiBreadcrumbs props max renders all items with null 1`] = `
       class="euiBreadcrumb emotion-euiBreadcrumb"
     >
       <span
-        aria-current="false"
         class="euiBreadcrumb__content emotion-euiBreadcrumb__content-isTruncated"
       >
         Tetrapods
@@ -380,7 +376,6 @@ exports[`EuiBreadcrumbs props max renders all items with null 1`] = `
       class="euiBreadcrumb emotion-euiBreadcrumb"
     >
       <button
-        aria-current="false"
         class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-isTruncated"
         type="button"
       >
@@ -391,7 +386,6 @@ exports[`EuiBreadcrumbs props max renders all items with null 1`] = `
       class="euiBreadcrumb emotion-euiBreadcrumb"
     >
       <a
-        aria-current="false"
         class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-isTruncated"
         href="#"
         rel="noreferrer"
@@ -470,7 +464,6 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = `
       class="euiBreadcrumb emotion-euiBreadcrumb"
     >
       <button
-        aria-current="false"
         class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-isTruncated"
         type="button"
       >
@@ -559,7 +552,6 @@ exports[`EuiBreadcrumbs props responsive is rendered as false 1`] = `
       class="euiBreadcrumb emotion-euiBreadcrumb"
     >
       <button
-        aria-current="false"
         class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-isTruncated"
         type="button"
       >
@@ -693,7 +685,6 @@ exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = `
       class="euiBreadcrumb emotion-euiBreadcrumb"
     >
       <button
-        aria-current="false"
         class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content"
         type="button"
       >
@@ -704,7 +695,6 @@ exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = `
       class="euiBreadcrumb emotion-euiBreadcrumb"
     >
       <a
-        aria-current="false"
         class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-isTruncated"
         href="#"
         rel="noreferrer"

diff --git a/src/components/breadcrumbs/breadcrumb.tsx b/src/components/breadcrumbs/breadcrumb.tsx
@@ -61,6 +61,7 @@ interface _EuiBreadcrumbProps {
   isLastBreadcrumb?: boolean;
   isOnlyBreadcrumb?: boolean;
   isHeaderBreadcrumb?: boolean;
+  isNestedBreadcrumb?: boolean;
 }
 
 export const EuiBreadcrumb: FunctionComponent<
@@ -95,6 +96,7 @@ export const EuiBreadcrumbContent: FunctionComponent<
   isLastBreadcrumb,
   isOnlyBreadcrumb,
   isHeaderBreadcrumb,
+  isNestedBreadcrumb,
   ...rest
 }) => {
   const classes = classNames('euiBreadcrumb__content', className);
@@ -116,7 +118,8 @@ export const EuiBreadcrumbContent: FunctionComponent<
     }
   }
 
-  const ariaCurrent = isLastBreadcrumb ? 'page' : undefined;
+  const ariaCurrent =
+    isLastBreadcrumb && !isNestedBreadcrumb ? 'page' : undefined;
 
   return (
     <EuiInnerText>
@@ -141,7 +144,7 @@ export const EuiBreadcrumbContent: FunctionComponent<
             aria-current={ariaCurrent}
             className={classes}
             css={cssStyles}
-            color={isLastBreadcrumb ? 'text' : 'subdued'}
+            color={!isNestedBreadcrumb && isLastBreadcrumb ? 'text' : 'subdued'}
             onClick={onClick}
             href={href}
             rel={rel}

diff --git a/src/components/breadcrumbs/breadcrumbs.styles.ts b/src/components/breadcrumbs/breadcrumbs.styles.ts
@@ -33,13 +33,3 @@ export const euiBreadcrumbsListStyles = (euiThemeContext: UseEuiTheme) => {
     `,
   };
 };
-
-export const euiBreadcrumbsInPopoverStyles = ({ euiTheme }: UseEuiTheme) => ({
-  // Styles cast to breadcrumbs in EUI Popover
-  euiBreadcrumbs__inPopover: css`
-    & li:last-of-type > a,
-    & li:last-of-type > span {
-      color: ${euiTheme.colors.subduedText};
-    }
-  `,
-});
diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx
@@ -26,10 +26,7 @@ import {
   EuiBreadcrumbProps,
 } from './breadcrumb';
 
-import {
-  euiBreadcrumbsListStyles,
-  euiBreadcrumbsInPopoverStyles,
-} from './breadcrumbs.styles';
+import { euiBreadcrumbsListStyles } from './breadcrumbs.styles';
 
 export type EuiBreadcrumbResponsiveMaxCount = {
   /**
@@ -73,6 +70,13 @@ export type EuiBreadcrumbsProps = CommonProps & {
    * Determines regular or EuiHeader breadcrumb styling
    */
   isHeaderBreadcrumb?: boolean;
+
+  /**
+   * Whether this is a (contextually) nested set of breadcrumbs
+   * (e.g. the collapsed/overflow breadcrumbs popover).
+   * Determines if the last breadcrumb should be highlighted as the 'current' page.
+   */
+  isNested?: boolean;
 };
 
 const responsiveDefault: EuiBreadcrumbResponsiveMaxCount = {
@@ -88,6 +92,7 @@ export const EuiBreadcrumbs: FunctionComponent<EuiBreadcrumbsProps> = ({
   truncate = true,
   max = 5,
   isHeaderBreadcrumb = false,
+  isNested = false,
   ...rest
 }) => {
   const ariaLabel = useEuiI18n('euiBreadcrumbs.nav.ariaLabel', 'Breadcrumbs');
@@ -122,12 +127,6 @@ export const EuiBreadcrumbs: FunctionComponent<EuiBreadcrumbsProps> = ({
     truncate && breadcrumbsListStyles.isTruncated,
   ];
 
-  // Breadcrumb link styles in EuiPopover
-  const breadcrumbsInPopoverStyles = euiBreadcrumbsInPopoverStyles(euiTheme);
-  const cssBreadcrumbsInPopoverStyles = [
-    breadcrumbsInPopoverStyles.euiBreadcrumbs__inPopover,
-  ];
-
   const limitBreadcrumbs = (
     breadcrumbs: ReactNode[],
     max: number,
@@ -142,11 +141,6 @@ export const EuiBreadcrumbs: FunctionComponent<EuiBreadcrumbsProps> = ({
       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
@@ -176,7 +170,7 @@ export const EuiBreadcrumbs: FunctionComponent<EuiBreadcrumbsProps> = ({
           isFirstBreadcrumb={breadcrumbsAtStart.length === 0}
         >
           <EuiBreadcrumbs
-            css={cssBreadcrumbsInPopoverStyles}
+            isNested
             breadcrumbs={overflowBreadcrumbs}
             responsive={false}
             truncate={false}
@@ -197,6 +191,7 @@ export const EuiBreadcrumbs: FunctionComponent<EuiBreadcrumbsProps> = ({
         isFirstBreadcrumb={index === 0}
         isLastBreadcrumb={index === breadcrumbs.length - 1}
         isOnlyBreadcrumb={breadcrumbs.length === 1}
+        isNestedBreadcrumb={isNested}
         {...breadcrumb}
       />
     </EuiBreadcrumb>