fix: breadcrumbs

src/core/__workshop__/constants.ts

@@ -251,8 +251,8 @@ export const WORKSHOP_TEXT_INPUT_TYPE_OPTIONS: {[key: string]: TextInputType} =
   'color': 'color',
 }
 
-export const WORKSHOP_TEXT_OVERFLOW_OPTIONS: {[key: string]: 'ellipsis' | ''} = {
-  None: '',
+export const WORKSHOP_TEXT_OVERFLOW_OPTIONS: {[key: string]: 'ellipsis' | 'none'} = {
+  None: 'none',
   Ellipsis: 'ellipsis',
 }
 

src/core/components/breadcrumbs/__workshop__/buttons.tsx

@@ -0,0 +1,58 @@
+import {ChevronRightIcon} from '@sanity/icons'
+import {Box, Breadcrumbs, Button, Card, Flex, Text} from '@sanity/ui'
+import {useSelect} from '@sanity/ui-workshop'
+
+const BREADCRUMBS_MAX_LENGTH_OPTIONS = {
+  '(none)': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+  '6': 6,
+  '7': 7,
+}
+
+export default function Example() {
+  const maxLength =
+    useSelect('Max. length', BREADCRUMBS_MAX_LENGTH_OPTIONS, 0, 'Props') || undefined
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Card padding={1} radius={3} shadow={1}>
+        <Breadcrumbs
+          gapX={0}
+          expandButton={{padding: 2}}
+          maxLength={maxLength}
+          separator={
+            <Box paddingY={2} style={{opacity: 0.5}}>
+              <Text muted size={1}>
+                <ChevronRightIcon />
+              </Text>
+            </Box>
+          }
+          // space={0}
+        >
+          <Button href="#" mode="bleed" padding={2} text="Root" />
+          <Button href="#" mode="bleed" padding={2} text="Category A of some length" />
+          <Button href="#" mode="bleed" padding={2} text="Category B" />
+          <Button href="#" mode="bleed" padding={2} text="Category C" />
+          <Button
+            href="#"
+            mode="bleed"
+            padding={2}
+            text="Category D of an every larger and more extended length"
+            textOverflow="none"
+          />
+          <Button href="#" mode="bleed" padding={2} text="Category E" />
+          <Button href="#" mode="bleed" padding={2} text="Category F" />
+          <Box padding={2}>
+            <Text size={1} weight="semibold">
+              Item
+            </Text>
+          </Box>
+        </Breadcrumbs>
+      </Card>
+    </Flex>
+  )
+}

src/core/components/breadcrumbs/__workshop__/example.tsx

@@ -17,15 +17,17 @@ export default function Example() {
     useSelect('Max. length', BREADCRUMBS_MAX_LENGTH_OPTIONS, 0, 'Props') || undefined
 
   return (
-    <Flex align="center" height="fill" justify="center">
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Breadcrumbs
+        gapX={1}
+        gapY={3}
         maxLength={maxLength}
         separator={
           <Text muted size={1}>
             /
           </Text>
         }
-        space={2}
+        // space={2}
       >
         <Text size={1}>
           <a href="#">Root</a>

src/core/components/breadcrumbs/__workshop__/index.ts

@@ -10,5 +10,10 @@ export default defineScope({
       title: 'Example',
       component: lazy(() => import('./example')),
     },
+    {
+      name: 'buttons',
+      title: 'Buttons',
+      component: lazy(() => import('./buttons')),
+    },
   ],
 })

src/core/components/breadcrumbs/breadcrumbs.styles.ts

@@ -1,17 +1,5 @@
 import {styled} from 'styled-components'
-import {Button} from '../../primitives'
 
-export const Root = styled.ol`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  list-style: none;
-  align-items: center;
-  white-space: nowrap;
+export const Root = styled.nav`
   line-height: 0;
 `
-
-export const ExpandButton = styled(Button)`
-  appearance: none;
-  margin: -4px;
-`

src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -1,35 +1,56 @@
 import {
   Children,
+  CSSProperties,
   forwardRef,
-  Fragment,
   isValidElement,
   useCallback,
   useMemo,
   useRef,
   useState,
 } from 'react'
-import {useArrayProp, useClickOutsideEvent} from '../../hooks'
-import {Box, Popover, Stack, Text} from '../../primitives'
-import {ExpandButton, Root} from './breadcrumbs.styles'
+import {useClickOutsideEvent} from '../../hooks'
+import {Box, Button, ButtonProps, Flex, Popover, Stack, Text} from '../../primitives'
+import {Root} from './breadcrumbs.styles'
 
 /**
  * @beta
  */
 export interface BreadcrumbsProps {
+  expandButton?: Omit<ButtonProps, 'onClick' | 'selected'> & {style?: CSSProperties}
+  gap?: number | number[]
+  gapX?: number | number[]
+  gapY?: number | number[]
   maxLength?: number
   separator?: React.ReactNode
+  /** @deprecated - Use `gap`, `gapX`, `gapY` instead */
   space?: number | number[]
 }
 
+const DEFAULT_EXPAND_BUTTON_PROPS: BreadcrumbsProps['expandButton'] = {
+  padding: 1,
+  style: {margin: '-4px 0'},
+}
+
 /**
  * @beta
  */
 export const Breadcrumbs = forwardRef(function Breadcrumbs(
   props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'ref' | 'type'>,
   ref: React.ForwardedRef<HTMLOListElement>,
 ) {
-  const {children, maxLength, separator, space: spaceRaw = 2, ...restProps} = props
-  const space = useArrayProp(spaceRaw)
+  const {
+    children,
+    expandButton: expandButtonProps = DEFAULT_EXPAND_BUTTON_PROPS,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    gap: _gapProp,
+    gapX = props.gap ?? props.space ?? 2,
+    gapY = props.gap ?? props.space ?? 2,
+    maxLength,
+    separator,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    space: _spaceProp,
+    ...restProps
+  } = props
   const [open, setOpen] = useState(false)
   const expandElementRef = useRef<HTMLButtonElement | null>(null)
   const popoverElementRef = useRef<HTMLDivElement | null>(null)
@@ -53,45 +74,45 @@
         <Popover
           constrainSize
           content={
-            <Stack as="ol" overflow="auto" padding={space} space={space}>
+            <Stack as="ol" overflow="auto" space={gapY}>
               {rawItems.slice(beforeLength - 1, len - afterLength)}
             </Stack>
           }
           key="button"
           open={open}
+          padding={2}
           placement="top"
           portal
           ref={popoverElementRef}
         >
-          <ExpandButton
-            fontSize={1}
+          <Button
             mode="bleed"
+            text="…"
+            {...expandButtonProps}
             onClick={open ? collapse : expand}
-            padding={1}
             ref={expandElementRef}
             selected={open}
-            text="…"
           />
         </Popover>,
         ...rawItems.slice(len - afterLength),
       ]
     }
 
     return rawItems
-  }, [collapse, expand, maxLength, open, rawItems, space])
+  }, [collapse, expand, expandButtonProps, gapY, maxLength, open, rawItems])
+
+  const len = items.length
 
   return (
     <Root data-ui="Breadcrumbs" {...restProps} ref={ref}>
-      {items.map((item, itemIndex) => (
-        <Fragment key={itemIndex}>
-          {itemIndex > 0 && (
-            <Box aria-hidden as="li" paddingX={space}>
-              {separator || <Text muted>/</Text>}
-            </Box>
-          )}
-          <Box as="li">{item}</Box>
-        </Fragment>
-      ))}
+      <Flex align="flex-start" as="ol" gapX={gapX} gapY={gapY} wrap="wrap">
+        {items.map((item, itemIndex) => (
+          <Flex align="flex-start" as="li" gapX={gapX} gapY={gapY} key={itemIndex}>
+            <Box>{item}</Box>
+            {itemIndex < len - 1 && <Box aria-hidden>{separator || <Text muted>/</Text>}</Box>}
+          </Flex>
+        ))}
+      </Flex>
     </Root>
   )
 })

src/core/primitives/button/__workshop__/mixedChildren.tsx

@@ -5,7 +5,7 @@ export default function MixedChildrenStory() {
   return (
     <Flex align="center" height="fill" justify="center">
       <Button fontSize={[2, 2, 3]} icon={AddIcon} mode="ghost" padding={[3, 3, 4]} text="Create">
-        <span style={{display: 'none'}}>test</span>
+        <span style={{opacity: 0.5}}>raw span</span>
       </Button>
     </Flex>
   )

src/core/primitives/button/__workshop__/props.tsx

@@ -9,11 +9,12 @@ import {
   WORKSHOP_ICON_SYMBOL_OPTIONS,
   WORKSHOP_TEXT_SIZE_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
+  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
 } from '../../../__workshop__/constants'
 
 export default function ButtonStory() {
   const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 1, 'Props')
   const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
   const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
   const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
@@ -26,9 +27,15 @@ export default function ButtonStory() {
   const textAlign =
     useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS, undefined, 'Props') || undefined
   const textProp = useText('Text', 'Label', 'Props')
+  const textOverflow = useSelect(
+    'Text overflow',
+    WORKSHOP_TEXT_OVERFLOW_OPTIONS,
+    'ellipsis',
+    'Props',
+  )
 
   return (
-    <Flex align="center" height="fill" justify="center">
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Button
         disabled={disabled}
         fontSize={fontSize}
@@ -42,6 +49,7 @@ export default function ButtonStory() {
         selected={selected}
         space={space}
         textAlign={textAlign}
+        textOverflow={textOverflow}
         text={textProp}
         tone={tone}
       />

src/core/primitives/button/__workshop__/sanityUploadButton.tsx

@@ -18,7 +18,7 @@ const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
     width: stretch;
   }
 
-  & span:nth-child(2) {
+  & > span:nth-child(2) {
     width: 0;
     flex: none;
     padding: 0;

src/core/primitives/button/__workshop__/stacked.tsx

@@ -13,14 +13,14 @@ import {
 export default function StackedStory() {
   const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
   const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 1, 'Props')
   const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
   const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
   const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
   const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default', 'Props')
   const onClick = useAction('onClick')
-  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 2, 'Props')
+  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 2, 'Props')
   const selected = useBoolean('Selected', false, 'Props')
   const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')