feat(ui-breadcrumb): migrate to new theming system and add new lucide icon and change separator style calculation

Author: git-nandor

docs/guides/upgrade-guide.md

@@ -78,6 +78,25 @@ The new icons automatically sync with theme changes, support all InstUI color to
 
 ## API Changes
 
+### Breadcrumb
+
+#### New tokens 
+
+- gapSm - Gap spacing for small size breadcrumbs
+- gapMd - Gap spacing for medium size breadcrumbs
+- gapLg - Gap spacing for large size breadcrumbs
+
+#### Theme variable changes
+
+- theme variable `fontFamily` is now removed (handled in link or text component)
+- theme variable `separatorColor` is now removed (handled in link or text component)
+- theme variable `smallSeparatorFontSize` is now removed (handled in link or text component)
+- theme variable `smallFontSize` is now removed (handled in link or text component)
+- theme variable `mediumSeparatorFontSize` is now removed (handled in link or text component)
+- theme variable `mediumFontSize` is now removed (handled in link or text component)
+- theme variable `largeSeparatorFontSize` is now removed (handled in link or text component)
+- theme variable `largeFontSize` is now removed (handled in link or text component)
+
 ### RadioInput
 
 - Setting `readonly` does not set the low level `<input>` to disabled, but to `readonly`. This also means that the input is still focusable when `readonly`

packages/ui-breadcrumb/package.json

@@ -35,7 +35,7 @@
     "@babel/runtime": "^7.27.6",
     "@instructure/emotion": "workspace:*",
     "@instructure/shared-types": "workspace:*",
-    "@instructure/ui-icons": "workspace:*",
+    "@instructure/ui-icons-lucide": "workspace:*",
     "@instructure/ui-link": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
     "@instructure/ui-tooltip": "workspace:*",

packages/ui-breadcrumb/src/Breadcrumb/BreadcrumbLink/index.tsx

@@ -74,9 +74,9 @@ class BreadcrumbLink extends Component<
       iconPlacement,
       onClick,
       onMouseEnter,
-      isCurrentPage
+      isCurrentPage,
+      size
     } = this.props
-
     const { isTruncated } = this.state
     const props = omitProps(this.props, BreadcrumbLink.allowedProps)
 
@@ -99,6 +99,7 @@ class BreadcrumbLink extends Component<
           isWithinText={false}
           elementRef={this.handleRef}
           forceButtonRole={false}
+          size={size}
           {...(isCurrentPage && { 'aria-current': 'page' })}
           {...(isTruncated && {
             ...(typeof children === 'string' && { 'aria-label': children }),

packages/ui-breadcrumb/src/Breadcrumb/README.md

@@ -102,8 +102,8 @@ You can include icons in `Breadcrumb.Link`:
 type: example
 ---
 <Breadcrumb label="Breadcrumb with icons">
-  <Breadcrumb.Link renderIcon={<IconBankLine size="small" />} href="#Breadcrumb">Item Bank</Breadcrumb.Link>
-  <Breadcrumb.Link renderIcon={<IconClockLine size="small" />} onClick={() => {}}>History</Breadcrumb.Link>
+  <Breadcrumb.Link renderIcon={<FolderOpenInstUIIcon />} href="#Breadcrumb">Item Bank</Breadcrumb.Link>
+  <Breadcrumb.Link renderIcon={<Clock4InstUIIcon />} onClick={() => {}}>History</Breadcrumb.Link>
   <Breadcrumb.Link renderIcon={IconPlusLine} iconPlacement="end">New Question</Breadcrumb.Link>
 </Breadcrumb>
 ```

packages/ui-breadcrumb/src/Breadcrumb/index.tsx

@@ -22,22 +22,16 @@
  * SOFTWARE.
  */
 
-import {
-  isValidElement,
-  cloneElement,
-  Children,
-  Component,
-  ReactElement
-} from 'react'
+import { isValidElement, Children, Component, ReactElement } from 'react'
 
 import { View } from '@instructure/ui-view'
+import { safeCloneElement } from '@instructure/ui-react-utils'
 
-import { withStyleRework as withStyle } from '@instructure/emotion'
-import { IconArrowOpenEndSolid } from '@instructure/ui-icons'
+import { withStyle } from '@instructure/emotion'
+import { ChevronRightInstUIIcon } from '@instructure/ui-icons-lucide'
 import { BreadcrumbLink } from './BreadcrumbLink'
 
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 
 import { allowedProps } from './props'
 import type { BreadcrumbProps } from './props'
@@ -48,7 +42,7 @@ category: components
 ---
 **/
 
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle)
 class Breadcrumb extends Component<BreadcrumbProps> {
   static readonly componentId = 'Breadcrumb'
 
@@ -65,7 +59,7 @@ class Breadcrumb extends Component<BreadcrumbProps> {
   }
 
   addAriaCurrent = (child: React.ReactNode) => {
-    const updatedChild = cloneElement(
+    const updatedChild = safeCloneElement(
       child as React.ReactElement<{ 'aria-current'?: string }>,
       {
         'aria-current': 'page'
@@ -77,14 +71,15 @@ class Breadcrumb extends Component<BreadcrumbProps> {
   componentDidMount() {
     this.props.makeStyles?.()
   }
+
   componentDidUpdate() {
     this.props.makeStyles?.()
   }
 
   static Link = BreadcrumbLink
 
   renderChildren() {
-    const { styles, children } = this.props
+    const { styles, children, size } = this.props
     const numChildren = Children.count(children)
     const inlineStyle = {
       maxWidth: `${Math.floor(100 / numChildren)}%`
@@ -105,17 +100,36 @@ class Breadcrumb extends Component<BreadcrumbProps> {
           isAriaCurrentSet = true
         }
       }
+
+      // Clone child (BreadcrumbLink) and pass size prop
+      const childWithSize = isValidElement(child)
+        ? safeCloneElement(child as ReactElement<any>, { size })
+        : child
+
+      // Map Breadcrumb sizes to icon size tokens
+      const breadcrumbSizeToIconSize = {
+        small: 'sm',
+        medium: 'md',
+        large: 'lg'
+      } as const
+
+      const iconSize = breadcrumbSizeToIconSize[size || 'small']
+
       return (
-        <li css={styles?.crumb} style={inlineStyle}>
-          {!isAriaCurrentSet &&
-          isLastElement &&
-          (child as React.ReactElement<any>).props.isCurrentPage !== false
-            ? this.addAriaCurrent(child)
-            : child}
+        <>
+          <li css={styles?.crumb} style={inlineStyle}>
+            {!isAriaCurrentSet &&
+            isLastElement &&
+            (child as React.ReactElement<any>).props.isCurrentPage !== false
+              ? this.addAriaCurrent(childWithSize)
+              : childWithSize}
+          </li>
           {index < numChildren - 1 && (
-            <IconArrowOpenEndSolid color="auto" css={styles?.separator} />
+            <li aria-hidden="true" css={styles?.separator}>
+              <ChevronRightInstUIIcon size={iconSize} />
+            </li>
           )}
-        </li>
+        </>
       )
     })
   }

packages/ui-breadcrumb/src/Breadcrumb/props.ts

@@ -26,7 +26,7 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
-import type { BreadcrumbTheme } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type BreadcrumbOwnProps = {
   /**
@@ -54,9 +54,10 @@ type PropKeys = keyof BreadcrumbOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type BreadcrumbProps = BreadcrumbOwnProps &
-  WithStyleProps<BreadcrumbTheme, BreadcrumbStyle>
+  WithStyleProps<NewComponentTypes['Breadcrumb'], BreadcrumbStyle>
 
 type BreadcrumbStyle = ComponentStyle<'breadcrumb' | 'crumb' | 'separator'>
+
 const allowedProps: AllowedPropKeys = ['children', 'label', 'margin', 'size']
 
 export type { BreadcrumbProps, BreadcrumbStyle }

packages/ui-breadcrumb/src/Breadcrumb/styles.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import type { BreadcrumbTheme } from '@instructure/shared-types'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
 import type { BreadcrumbProps, BreadcrumbStyle } from './props'
 
 /**
@@ -32,83 +32,57 @@ import type { BreadcrumbProps, BreadcrumbStyle } from './props'
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared design tokens
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: BreadcrumbTheme,
-  props: BreadcrumbProps
+  componentTheme: NewComponentTypes['Breadcrumb'],
+  props: BreadcrumbProps,
+  _sharedTokens: SharedTokens
 ): BreadcrumbStyle => {
   const { size } = props
 
-  const crumbSizeVariants = {
-    small: {
-      fontSize: componentTheme.smallFontSize,
-      paddingInlineEnd: `calc(${componentTheme.smallSeparatorFontSize} * 2)`,
-      paddingInlineStart: 0
-    },
-    medium: {
-      fontSize: componentTheme.mediumFontSize,
-      paddingInlineEnd: `calc(${componentTheme.mediumSeparatorFontSize} * 2)`,
-      paddingInlineStart: 0
-    },
-    large: {
-      fontSize: componentTheme.largeFontSize,
-      paddingInlineEnd: `calc(${componentTheme.largeSeparatorFontSize} * 2)`,
-      paddingInlineStart: 0
-    }
-  }
-
-  const separatorSizeVariants = {
-    small: {
-      fontSize: componentTheme.smallSeparatorFontSize,
-      insetInlineEnd: `calc(${componentTheme.smallSeparatorFontSize} / 2)`,
-      insetInlineStart: 'auto',
-      marginTop: `calc(-1 * (${componentTheme.smallSeparatorFontSize} / 2))`
-    },
-    medium: {
-      fontSize: componentTheme.mediumSeparatorFontSize,
-      insetInlineEnd: `calc(${componentTheme.mediumSeparatorFontSize} / 2)`,
-      insetInlineStart: 'auto',
-      marginTop: `calc(-1 * (${componentTheme.mediumSeparatorFontSize} / 2))`
-    },
-    large: {
-      fontSize: componentTheme.largeSeparatorFontSize,
-      insetInlineEnd: `calc(${componentTheme.largeSeparatorFontSize} / 2)`,
-      insetInlineStart: 'auto',
-      marginTop: `calc(-1 * (${componentTheme.largeSeparatorFontSize} / 2))`
-    }
+  const gapSizeVariants = {
+    small: componentTheme.gapSm,
+    medium: componentTheme.gapMd,
+    large: componentTheme.gapLg
   }
 
   return {
     breadcrumb: {
       label: 'breadcrumb',
-      fontFamily: componentTheme.fontFamily,
       margin: 0,
       padding: 0,
       listStyleType: 'none',
       overflow: 'visible',
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      gap: gapSizeVariants[size!]
     },
     crumb: {
       label: 'breadcrumb__crumb',
       boxSizing: 'border-box',
-      position: 'relative',
-      ...crumbSizeVariants[size!],
+      display: 'flex',
+      alignItems: 'center',
+      overflow: 'visible',
+
+      // prevent text clipping
+      '[data-cid~="TruncateText"]': {
+        overflow: 'visible',
 
-      '&:last-child': {
-        paddingInlineEnd: 0
+        // prevent extra spacing after the '...'
+        '& [class*="truncateText__spacer"]': {
+          display: 'inline'
+        }
       }
     },
     separator: {
       label: 'breadcrumb__separator',
-
       boxSizing: 'border-box',
-      position: 'absolute',
-      top: '50%',
-      color: componentTheme.separatorColor,
-      ...separatorSizeVariants[size!]
+      color: '#576773',
+      display: 'inline-flex',
+      alignItems: 'center',
+      flexShrink: 0
     }
   }
 }

packages/ui-breadcrumb/src/Breadcrumb/theme.ts

@@ -11,7 +11,7 @@
     { "path": "../ui-themes/tsconfig.build.json" },
     { "path": "../emotion/tsconfig.build.json" },
     { "path": "../shared-types/tsconfig.build.json" },
-    { "path": "../ui-icons/tsconfig.build.json" },
+    { "path": "../ui-icons-lucide/tsconfig.build.json" },
     { "path": "../ui-link/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
     { "path": "../ui-truncate-text/tsconfig.build.json" },

packages/ui-breadcrumb/tsconfig.build.json

@@ -91,7 +91,7 @@ type LinkOwnProps = {
    * children.
    * When using Lucide icons, Link will automatically pass the appropriate size prop based on the Link's size.
    */
-  renderIcon?: Renderable | Renderable<{ size?: string | number }>
+  renderIcon?: Renderable
 
   /**
    * Place the icon before or after the text in the Link.