[PR feedback] Hide new header styling and nested/popover props from docs

- rename both props to be more specific, since they're now internal only / used for a specific purpose - move both props to an underscore prefixed type and modify props table and playground to not display them
elastic · Jul 22, 2022 · 6051809 · 6051809
1 parent 63d7bdd
commit 6051809
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 46 deletions.
diff --git a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js
@@ -3,8 +3,12 @@ import { Link } from 'react-router-dom';
 
 import { GuideSectionTypes } from '../../components';
 
-import { EuiCode, EuiBreadcrumbs, EuiText } from '../../../../src/components';
-import { BreadcrumbResponsiveMaxCount, BreadcrumbProps } from './props';
+import { EuiCode, EuiText } from '../../../../src/components';
+import {
+  BreadcrumbsProps,
+  BreadcrumbProps,
+  BreadcrumbResponsiveMaxCount,
+} from './props';
 
 import { breadcrumbsConfig } from './playground';
 
@@ -28,8 +32,8 @@ const maxSource = require('!!raw-loader!./max');
 import Color from './color';
 const colorSource = require('!!raw-loader!./color');
 
-const breadcrumpProps = {
-  EuiBreadcrumbs,
+const props = {
+  EuiBreadcrumbs: BreadcrumbsProps,
   EuiBreadcrumb: BreadcrumbProps,
   EuiBreadcrumbResponsiveMaxCount: BreadcrumbResponsiveMaxCount,
 };
@@ -84,7 +88,7 @@ export const BreadcrumbsExample = {
           />
         </>
       ),
-      props: breadcrumpProps,
+      props,
       playground: breadcrumbsConfig,
       snippet: `<EuiBreadcrumbs
   breadcrumbs={[
@@ -124,7 +128,7 @@ export const BreadcrumbsExample = {
           </p>
         </>
       ),
-      props: breadcrumpProps,
+      props,
       snippet: `<EuiBreadcrumbs
   max={4}
   breadcrumbs={breadcrumbs}
@@ -149,7 +153,7 @@ export const BreadcrumbsExample = {
           </p>
         </>
       ),
-      props: breadcrumpProps,
+      props,
       demo: <Truncate />,
       snippet: [
         `<EuiBreadcrumbs
@@ -174,7 +178,7 @@ export const BreadcrumbsExample = {
           </p>
         </>
       ),
-      props: breadcrumpProps,
+      props,
       demo: <TruncateSingle />,
       snippet: [
         `<EuiBreadcrumbs
@@ -206,7 +210,7 @@ export const BreadcrumbsExample = {
           </p>
         </>
       ),
-      props: breadcrumpProps,
+      props,
       snippet: [
         `<EuiBreadcrumbs
   responsive={false}
@@ -231,7 +235,7 @@ export const BreadcrumbsExample = {
           </p>
         </>
       ),
-      props: breadcrumpProps,
+      props,
       snippet: [
         `<EuiBreadcrumbs
   responsive={{
@@ -260,7 +264,7 @@ export const BreadcrumbsExample = {
           </p>
         </>
       ),
-      props: breadcrumpProps,
+      props,
       demo: <Color />,
       source: [
         {

diff --git a/src-docs/src/views/breadcrumbs/playground.js b/src-docs/src/views/breadcrumbs/playground.js
@@ -1,4 +1,4 @@
-import { EuiBreadcrumbs } from '../../../../src/components/breadcrumbs';
+import { BreadcrumbsProps as EuiBreadcrumbs } from './props';
 import {
   propUtilityForPlayground,
   generateCustomProps,

diff --git a/src-docs/src/views/breadcrumbs/props.tsx b/src-docs/src/views/breadcrumbs/props.tsx
@@ -1,12 +1,17 @@
 import React, { FunctionComponent } from 'react';
 
 import {
+  EuiBreadcrumbsProps,
   EuiBreadcrumb,
   EuiBreadcrumbResponsiveMaxCount,
 } from '../../../../src/components/breadcrumbs';
 
-export const BreadcrumbResponsiveMaxCount: FunctionComponent<EuiBreadcrumbResponsiveMaxCount> = () => (
+export const BreadcrumbsProps: FunctionComponent<EuiBreadcrumbsProps> = () => (
   <div />
 );
 
 export const BreadcrumbProps: FunctionComponent<EuiBreadcrumb> = () => <div />;
+
+export const BreadcrumbResponsiveMaxCount: FunctionComponent<EuiBreadcrumbResponsiveMaxCount> = () => (
+  <div />
+);
diff --git a/src/components/breadcrumbs/breadcrumb.styles.ts b/src/components/breadcrumbs/breadcrumb.styles.ts
@@ -48,6 +48,7 @@ export const euiBreadcrumbStyles = (euiThemeContext: UseEuiTheme) => {
     isCollapsed: css`
       flex-shrink: 0;
     `,
+    // EuiHeader-specific breadcrumb styling
     isHeaderBreadcrumb: css`
       &:not(:last-of-type) {
         ${logicalCSS('margin-right', `-${euiTheme.size.xs}`)}
@@ -79,6 +80,10 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
       text-align: center;
       vertical-align: baseline;
     `,
+
+    /**
+     * EuiHeader-specific breadcrumb styling
+     */
     isHeaderBreadcrumb: css`
       ${euiFontSize(euiThemeContext, 'xs')};
       background-color: ${transparentize(euiTheme.colors.darkestShade, 0.2)};

diff --git a/src/components/breadcrumbs/breadcrumb.tsx b/src/components/breadcrumbs/breadcrumb.tsx
@@ -60,20 +60,20 @@ interface _EuiBreadcrumbProps {
   isFirstBreadcrumb?: boolean;
   isLastBreadcrumb?: boolean;
   isOnlyBreadcrumb?: boolean;
-  isHeaderBreadcrumb?: boolean;
-  isNestedBreadcrumb?: boolean;
+  isInEuiHeader?: boolean;
+  isInCollapsedPopover?: boolean;
 }
 
 export const EuiBreadcrumb: FunctionComponent<
   HTMLAttributes<HTMLLIElement> & _EuiBreadcrumbProps
-> = ({ children, className, isHeaderBreadcrumb, ...rest }) => {
+> = ({ children, className, isInEuiHeader, ...rest }) => {
   const classes = classNames('euiBreadcrumb', className);
 
   const euiTheme = useEuiTheme();
   const styles = euiBreadcrumbStyles(euiTheme);
   const cssStyles = [
     styles.euiBreadcrumb,
-    isHeaderBreadcrumb && styles.isHeaderBreadcrumb,
+    isInEuiHeader && styles.isHeaderBreadcrumb,
   ];
 
   return (
@@ -95,8 +95,8 @@ export const EuiBreadcrumbContent: FunctionComponent<
   isFirstBreadcrumb,
   isLastBreadcrumb,
   isOnlyBreadcrumb,
-  isHeaderBreadcrumb,
-  isNestedBreadcrumb,
+  isInEuiHeader,
+  isInCollapsedPopover,
   ...rest
 }) => {
   const classes = classNames('euiBreadcrumb__content', className);
@@ -107,7 +107,7 @@ export const EuiBreadcrumbContent: FunctionComponent<
     styles.euiBreadcrumb__content,
     truncate && !isLastBreadcrumb && styles.isTruncated,
   ];
-  if (isHeaderBreadcrumb) {
+  if (isInEuiHeader) {
     cssStyles.push(styles.isHeaderBreadcrumb);
     if (isOnlyBreadcrumb) {
       cssStyles.push(styles.headerBreadcrumb.onlyChild);
@@ -119,7 +119,7 @@ export const EuiBreadcrumbContent: FunctionComponent<
   }
 
   const ariaCurrent =
-    isLastBreadcrumb && !isNestedBreadcrumb ? 'page' : undefined;
+    isLastBreadcrumb && !isInCollapsedPopover ? 'page' : undefined;
 
   return (
     <EuiInnerText>
@@ -144,7 +144,9 @@ export const EuiBreadcrumbContent: FunctionComponent<
             aria-current={ariaCurrent}
             className={classes}
             css={cssStyles}
-            color={!isNestedBreadcrumb && isLastBreadcrumb ? 'text' : 'subdued'}
+            color={
+              isLastBreadcrumb && !isInCollapsedPopover ? 'text' : 'subdued'
+            }
             onClick={onClick}
             href={href}
             rel={rel}
@@ -161,7 +163,7 @@ export const EuiBreadcrumbContent: FunctionComponent<
 export const EuiBreadcrumbCollapsed: FunctionComponent<_EuiBreadcrumbProps> = ({
   children,
   isFirstBreadcrumb,
-  isHeaderBreadcrumb,
+  isInEuiHeader,
 }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
@@ -186,12 +188,12 @@ export const EuiBreadcrumbCollapsed: FunctionComponent<_EuiBreadcrumbProps> = ({
         </>
       }
       isFirstBreadcrumb={isFirstBreadcrumb}
-      isHeaderBreadcrumb={isHeaderBreadcrumb}
+      isInEuiHeader={isInEuiHeader}
     />
   );
 
   return (
-    <EuiBreadcrumb css={cssStyles} isHeaderBreadcrumb={isHeaderBreadcrumb}>
+    <EuiBreadcrumb css={cssStyles} isInEuiHeader={isInEuiHeader}>
       <EuiPopover
         button={ellipsisButton}
         isOpen={isPopoverOpen}

diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx
@@ -60,18 +60,12 @@ export type EuiBreadcrumbsProps = CommonProps & {
    * The array of individual #EuiBreadcrumb items
    */
   breadcrumbs: EuiBreadcrumbProps[];
+};
 
-  /**
-   * 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;
+// Internal-only props
+type _EuiBreadcrumbsProps = {
+  isInEuiHeader?: boolean; // Applies EuiHeader-specific breadcrumb styling
+  isInCollapsedPopover?: boolean; // Affects display and aria tags of last breadcrumb
 };
 
 const responsiveDefault: EuiBreadcrumbResponsiveMaxCount = {
@@ -80,14 +74,16 @@ const responsiveDefault: EuiBreadcrumbResponsiveMaxCount = {
   m: 4,
 };
 
-export const EuiBreadcrumbs: FunctionComponent<EuiBreadcrumbsProps> = ({
+export const EuiBreadcrumbs: FunctionComponent<
+  EuiBreadcrumbsProps & _EuiBreadcrumbsProps
+> = ({
   breadcrumbs,
   className,
   responsive = responsiveDefault,
   truncate = true,
   max = 5,
-  isHeaderBreadcrumb = false,
-  isNested = false,
+  isInEuiHeader = false,
+  isInCollapsedPopover = false,
   ...rest
 }) => {
   const ariaLabel = useEuiI18n('euiBreadcrumbs.nav.ariaLabel', 'Breadcrumbs');
@@ -120,32 +116,32 @@ export const EuiBreadcrumbs: FunctionComponent<EuiBreadcrumbsProps> = ({
         return breadcrumb.isCollapsedButton ? (
           <EuiBreadcrumbCollapsed
             key="collapsed"
-            isHeaderBreadcrumb={isHeaderBreadcrumb}
+            isInEuiHeader={isInEuiHeader}
             isFirstBreadcrumb={isFirstBreadcrumb}
           >
             <EuiBreadcrumbs
               breadcrumbs={breadcrumb.overflowBreadcrumbs}
-              isNested
+              isInCollapsedPopover
               responsive={false}
               truncate={false}
               max={0}
             />
           </EuiBreadcrumbCollapsed>
         ) : (
-          <EuiBreadcrumb key={index} isHeaderBreadcrumb={isHeaderBreadcrumb}>
+          <EuiBreadcrumb key={index} isInEuiHeader={isInEuiHeader}>
             <EuiBreadcrumbContent
               truncate={truncate}
-              isHeaderBreadcrumb={isHeaderBreadcrumb}
+              isInEuiHeader={isInEuiHeader}
+              isInCollapsedPopover={isInCollapsedPopover}
               isFirstBreadcrumb={isFirstBreadcrumb}
               isLastBreadcrumb={isLastBreadcrumb}
               isOnlyBreadcrumb={isOnlyBreadcrumb}
-              isNestedBreadcrumb={isNested}
               {...breadcrumb}
             />
           </EuiBreadcrumb>
         );
       }),
-    [visibleBreadcrumbs, truncate, isHeaderBreadcrumb, isNested]
+    [visibleBreadcrumbs, truncate, isInEuiHeader, isInCollapsedPopover]
   );
 
   return (

diff --git 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<EuiBreadcrumbsProps> = ({
       breadcrumbs={breadcrumbs}
       className={classes}
       css={cssHeaderBreadcrumbStyles}
-      isHeaderBreadcrumb
+      isInEuiHeader
       {...rest}
     />
   );