✨ Breadcrumb: custom separator (#3142)

* ✨ added seperator prop * halve spacing margin for icons * fix typo seperator -> separator * fix alignment * make svg inline spacing -9px
equinor · Nov 15, 2023 · c6eb0b1 · c6eb0b1
1 parent 424e8f1
commit c6eb0b1
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 4 deletions.
diff --git a/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.docs.mdx b/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.docs.mdx
@@ -63,6 +63,12 @@ It might be a good idea to use `forceTooltip` on the `Breadcrumbs.Breadcrumb` wh
 
 <Canvas of={ComponentStories.Wrapped} />
 
+### Custom seperator
+
+Seperator can be a character or an `Icon`.
+
+<Canvas of={ComponentStories.CustomSeperator} />
+
 ### Third-party routing libraries
 
 Use the `as` prop on `Breadcrumbs.Breadcrumb` to utilize third party routers such as react-router with `Breadcrumbs`

diff --git a/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx b/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
@@ -1,4 +1,5 @@
-import { Breadcrumbs, BreadcrumbsProps, Checkbox } from '../..'
+import { Breadcrumbs, BreadcrumbsProps, Checkbox, Icon } from '../..'
+import { chevron_right } from '@equinor/eds-icons'
 import { useState, ChangeEvent } from 'react'
 import { action } from '@storybook/addon-actions'
 import { StoryFn, Meta } from '@storybook/react'
@@ -155,3 +156,44 @@ export const Wrapped: StoryFn<BreadcrumbsProps> = () => {
     </div>
   )
 }
+
+export const CustomSeperator: StoryFn<BreadcrumbsProps> = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Breadcrumbs separator={<Icon data={chevron_right}></Icon>}>
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          Label One
+        </Breadcrumbs.Breadcrumb>
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          Label Two
+        </Breadcrumbs.Breadcrumb>
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          A really rally long label
+        </Breadcrumbs.Breadcrumb>
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          Label Four
+        </Breadcrumbs.Breadcrumb>
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          Label Five
+        </Breadcrumbs.Breadcrumb>
+      </Breadcrumbs>
+      <Breadcrumbs separator="\">
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          Label One
+        </Breadcrumbs.Breadcrumb>
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          Label Two
+        </Breadcrumbs.Breadcrumb>
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          A really rally long label
+        </Breadcrumbs.Breadcrumb>
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          Label Four
+        </Breadcrumbs.Breadcrumb>
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          Label Five
+        </Breadcrumbs.Breadcrumb>
+      </Breadcrumbs>
+    </div>
+  )
+}
diff --git a/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -33,6 +33,11 @@ const Separator = styled(Typography)`
   ${spacingsTemplate(spacings)}
   display: block;
   line-height: 1;
+  display: flex;
+  & > svg {
+    /* Reduce spacing when Icon is used to account for the built in spacing of icons */
+    margin-inline: -9px;
+  }
 `
 
 const Collapsed = styled(Typography)`
@@ -52,6 +57,8 @@ export type BreadcrumbsProps = {
    * @default false
    */
   collapse?: boolean
+  /** Custom separator can be a character or an Icon */
+  separator?: ReactNode
   /** Will not wrap breadcrumbs when set to false, but will instead trunkate each breadcrumb when viewport narrows
    * @default true
    */
@@ -61,7 +68,10 @@ export type BreadcrumbsProps = {
 } & HTMLAttributes<HTMLElement>
 
 export const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(
-  function Breadcrumbs({ children, collapse, wrap = true, ...rest }, ref) {
+  function Breadcrumbs(
+    { children, collapse, wrap = true, separator = '/', ...rest },
+    ref,
+  ) {
     const props = {
       ...rest,
       ref,
@@ -102,7 +112,7 @@ export const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(
             </Collapsed>
           </ListItem>
           <li aria-hidden>
-            <Separator variant="body_short">/</Separator>
+            <Separator variant="body_short">{separator}</Separator>
           </li>
         </Fragment>,
         allCrumbs[allCrumbs.length - 1],
@@ -115,7 +125,7 @@ export const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(
         <ListItem>{child}</ListItem>
         {index !== ReactChildren.toArray(children).length - 1 && (
           <li aria-hidden>
-            <Separator variant="body_short">/</Separator>
+            <Separator variant="body_short">{separator}</Separator>
           </li>
         )}
       </Fragment>

diff --git a/packages/eds-core-react/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap b/packages/eds-core-react/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap
@@ -33,6 +33,11 @@ exports[`Breadcrumbs Matches snapshot 1`] = `
   padding-right: 16px;
   display: block;
   line-height: 1;
+  display: flex;
+}
+
+.c4>svg {
+  margin-inline: -9px;
 }
 
 .c3 {