fix(breadcrumb): temp fix for spacing (#4368)

* fix(breadcrumb): temp fix for spacing

* update page snapshot

Author: redallen

packages/react-core/src/components/Breadcrumb/Breadcrumb.tsx

@@ -25,6 +25,15 @@ export const Breadcrumb: React.FunctionComponent<BreadcrumbProps & OUIAProps> =
     className={css(styles.breadcrumb, className)}
     {...getOUIAProps('Breadcrumb', ouiaId)}
   >
-    <ol className={css(styles.breadcrumbList)}>{children}</ol>
+    <ol className={styles.breadcrumbList}>
+      {React.Children.map(children, (child, index) => {
+        const showDivider = index > 0;
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, { showDivider });
+        }
+
+        return child;
+      })}
+    </ol>
   </nav>
 );

packages/react-core/src/components/Breadcrumb/BreadcrumbHeading.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import AngleRightIcon from '@patternfly/react-icons/dist/js/icons/angle-right-icon';
 import styles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
 import { css } from '@patternfly/react-styles';
 
@@ -13,6 +14,8 @@ export interface BreadcrumbHeadingProps extends React.HTMLProps<HTMLLIElement> {
   target?: string;
   /** Sets the base component to render. Defaults to <a> */
   component?: React.ReactNode;
+  /** Internal prop set by Breadcrumb on all but the first crumb */
+  showDivider?: boolean;
 }
 
 export const BreadcrumbHeading: React.FunctionComponent<BreadcrumbHeadingProps> = ({
@@ -21,12 +24,18 @@ export const BreadcrumbHeading: React.FunctionComponent<BreadcrumbHeadingProps>
   to = null,
   target = null,
   component = 'a',
+  showDivider,
   ...props
 }: BreadcrumbHeadingProps) => {
   const Component = component as any;
   return (
     <li {...props} className={css(styles.breadcrumbItem, className)}>
-      <h1 className={css(styles.breadcrumbHeading)}>
+      <h1 className={styles.breadcrumbHeading}>
+        {showDivider && (
+          <span className={styles.breadcrumbItemDivider}>
+            <AngleRightIcon />
+          </span>
+        )}
         {to && (
           <Component
             href={to}

packages/react-core/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -12,6 +12,8 @@ export interface BreadcrumbItemProps extends React.HTMLProps<HTMLLIElement> {
   to?: string;
   /** Flag indicating whether the item is active. */
   isActive?: boolean;
+  /** Internal prop set by Breadcrumb on all but the first crumb */
+  showDivider?: boolean;
   /** Target for breadcrumb link. */
   target?: string;
   /** Sets the base component to render. Defaults to <a> */
@@ -23,13 +25,19 @@ export const BreadcrumbItem: React.FunctionComponent<BreadcrumbItemProps> = ({
   className = '',
   to = null,
   isActive = false,
+  showDivider,
   target = null,
   component = 'a',
   ...props
 }: BreadcrumbItemProps) => {
   const Component = component;
   return (
     <li {...props} className={css(styles.breadcrumbItem, className)}>
+      {showDivider && (
+        <span className={styles.breadcrumbItemDivider}>
+          <AngleRightIcon />
+        </span>
+      )}
       {to && (
         <Component
           href={to}
@@ -41,11 +49,6 @@ export const BreadcrumbItem: React.FunctionComponent<BreadcrumbItemProps> = ({
         </Component>
       )}
       {!to && <React.Fragment>{children}</React.Fragment>}
-      {!isActive && (
-        <span className={css(styles.breadcrumbItemDivider)}>
-          <AngleRightIcon />
-        </span>
-      )}
     </li>
   );
 };

packages/react-core/src/components/Breadcrumb/__tests__/Generated/__snapshots__/BreadcrumbItem.test.tsx.snap

@@ -11,14 +11,5 @@ exports[`BreadcrumbItem should match snapshot (auto-generated) 1`] = `
   >
     ReactNode
   </a>
-  <span
-    className="pf-c-breadcrumb__item-divider"
-  >
-    <AngleRightIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
-  </span>
 </li>
 `;

packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap

@@ -31,6 +31,8 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
       className="pf-c-breadcrumb__list"
     >
       <BreadcrumbItem
+        key=".0"
+        showDivider={false}
         to="#"
       >
         <li
@@ -43,51 +45,17 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
           >
             Item 1
           </a>
-          <span
-            className="pf-c-breadcrumb__item-divider"
-          >
-            <AngleRightIcon
-              color="currentColor"
-              noVerticalAlign={false}
-              size="sm"
-            >
-              <svg
-                aria-hidden={true}
-                aria-labelledby={null}
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  transform=""
-                />
-              </svg>
-            </AngleRightIcon>
-          </span>
         </li>
       </BreadcrumbItem>
        
       <BreadcrumbItem
+        key=".2"
+        showDivider={true}
         to="#"
       >
         <li
           className="pf-c-breadcrumb__item"
         >
-          <a
-            className="pf-c-breadcrumb__link"
-            href="#"
-            target={null}
-          >
-            Item 1
-          </a>
           <span
             className="pf-c-breadcrumb__item-divider"
           >
@@ -117,6 +85,13 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
               </svg>
             </AngleRightIcon>
           </span>
+          <a
+            className="pf-c-breadcrumb__link"
+            href="#"
+            target={null}
+          >
+            Item 1
+          </a>
         </li>
       </BreadcrumbItem>
     </ol>

packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/BreadcrumbItem.test.tsx.snap

@@ -13,15 +13,6 @@ exports[`BreadcrumbItem component should render breadcrumbItem with className 1`
   className="pf-c-breadcrumb__item Class"
 >
   Item
-  <span
-    className="pf-c-breadcrumb__item-divider"
-  >
-    <AngleRightIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
-  </span>
 </li>
 `;
 
@@ -30,15 +21,6 @@ exports[`BreadcrumbItem component should render breadcrumbItem with component 1`
   className="pf-c-breadcrumb__item"
 >
   Stuff
-  <span
-    className="pf-c-breadcrumb__item-divider"
-  >
-    <AngleRightIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
-  </span>
 </li>
 `;
 
@@ -49,15 +31,6 @@ exports[`BreadcrumbItem component should render breadcrumbItem with custom eleme
   <h1>
     Header
   </h1>
-  <span
-    className="pf-c-breadcrumb__item-divider"
-  >
-    <AngleRightIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
-  </span>
 </li>
 `;
 
@@ -67,15 +40,6 @@ exports[`BreadcrumbItem component should render breadcrumbItem with id 1`] = `
   id="Item 1"
 >
   Item
-  <span
-    className="pf-c-breadcrumb__item-divider"
-  >
-    <AngleRightIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
-  </span>
 </li>
 `;
 
@@ -84,15 +48,6 @@ exports[`BreadcrumbItem component should render breadcrumbItem with target 1`] =
   className="pf-c-breadcrumb__item"
 >
   Item
-  <span
-    className="pf-c-breadcrumb__item-divider"
-  >
-    <AngleRightIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
-  </span>
 </li>
 `;
 
@@ -101,15 +56,6 @@ exports[`BreadcrumbItem component should render default breadcrumbItem 1`] = `
   className="pf-c-breadcrumb__item"
 >
   Item
-  <span
-    className="pf-c-breadcrumb__item-divider"
-  >
-    <AngleRightIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
-  </span>
 </li>
 `;
 
@@ -124,14 +70,5 @@ exports[`BreadcrumbItem component should render link breadcrumbItem 1`] = `
   >
     Item
   </a>
-  <span
-    className="pf-c-breadcrumb__item-divider"
-  >
-    <AngleRightIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
-  </span>
 </li>
 `;