From 92a4fdb0ead494014eb22c2f39b5106017bb4a83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundga=CC=8Ard?= <studio@mariuslundgard.com>
Date: Thu, 28 Nov 2024 13:41:30 +0100
Subject: [PATCH] test: update workshop stories

---
 src/core/__workshop__/constants.ts            |  4 +-
 .../breadcrumbs/__workshop__/buttons.tsx      | 58 +++++++++++++++++++
 .../breadcrumbs/__workshop__/example.tsx      |  6 +-
 .../breadcrumbs/__workshop__/index.ts         |  5 ++
 .../primitives/button/__workshop__/custom.tsx |  7 ++-
 .../button/__workshop__/mixedChildren.tsx     |  2 +-
 .../primitives/button/__workshop__/props.tsx  | 12 +++-
 .../__workshop__/sanityUploadButton.tsx       |  2 +-
 .../button/__workshop__/stacked.tsx           |  6 +-
 .../primitives/label/__workshop__/plain.tsx   |  2 +-
 10 files changed, 89 insertions(+), 15 deletions(-)
 create mode 100644 src/core/components/breadcrumbs/__workshop__/buttons.tsx

diff --git a/src/core/__workshop__/constants.ts b/src/core/__workshop__/constants.ts
index 1fd4c983b..42666ecda 100644
--- a/src/core/__workshop__/constants.ts
+++ b/src/core/__workshop__/constants.ts
@@ -246,8 +246,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',
 }
 
diff --git a/src/core/components/breadcrumbs/__workshop__/buttons.tsx b/src/core/components/breadcrumbs/__workshop__/buttons.tsx
new file mode 100644
index 000000000..2cd7cfe59
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/core/components/breadcrumbs/__workshop__/example.tsx b/src/core/components/breadcrumbs/__workshop__/example.tsx
index 446bb3241..df3b0c9ad 100644
--- a/src/core/components/breadcrumbs/__workshop__/example.tsx
+++ b/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>
diff --git a/src/core/components/breadcrumbs/__workshop__/index.ts b/src/core/components/breadcrumbs/__workshop__/index.ts
index bd5385907..eec0e7793 100644
--- a/src/core/components/breadcrumbs/__workshop__/index.ts
+++ b/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')),
+    },
   ],
 })
diff --git a/src/core/primitives/button/__workshop__/custom.tsx b/src/core/primitives/button/__workshop__/custom.tsx
index af77c5531..e6fb3b528 100644
--- a/src/core/primitives/button/__workshop__/custom.tsx
+++ b/src/core/primitives/button/__workshop__/custom.tsx
@@ -3,11 +3,12 @@ import {WORKSHOP_BUTTON_TONE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function CustomStory() {
   const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
+  const len = tones.length
 
   return (
-    <Flex align="center" height="fill" justify="center">
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Stack space={2}>
-        <Grid columns={5} gap={1}>
+        <Grid columns={len} gap={1}>
           {tones.map(([title, tone]) => (
             <Button key={tone} mode="ghost" padding={3} tone={tone}>
               <Stack space={2}>
@@ -24,7 +25,7 @@ export default function CustomStory() {
             </Button>
           ))}
         </Grid>
-        <Grid columns={5} gap={1}>
+        <Grid columns={len} gap={1}>
           {tones.map(([title, tone]) => (
             <Button key={tone} mode="default" padding={3} tone={tone}>
               <Stack space={2}>
diff --git a/src/core/primitives/button/__workshop__/mixedChildren.tsx b/src/core/primitives/button/__workshop__/mixedChildren.tsx
index 614a2498d..b586a02a7 100644
--- a/src/core/primitives/button/__workshop__/mixedChildren.tsx
+++ b/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>
   )
diff --git a/src/core/primitives/button/__workshop__/props.tsx b/src/core/primitives/button/__workshop__/props.tsx
index ecca2863e..6e167ddf9 100644
--- a/src/core/primitives/button/__workshop__/props.tsx
+++ b/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}
       />
diff --git a/src/core/primitives/button/__workshop__/sanityUploadButton.tsx b/src/core/primitives/button/__workshop__/sanityUploadButton.tsx
index ff30eacc3..0ed0497be 100644
--- a/src/core/primitives/button/__workshop__/sanityUploadButton.tsx
+++ b/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;
diff --git a/src/core/primitives/button/__workshop__/stacked.tsx b/src/core/primitives/button/__workshop__/stacked.tsx
index d93c751eb..4017c348f 100644
--- a/src/core/primitives/button/__workshop__/stacked.tsx
+++ b/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')
 
diff --git a/src/core/primitives/label/__workshop__/plain.tsx b/src/core/primitives/label/__workshop__/plain.tsx
index 1fc81e196..be165bbf4 100644
--- a/src/core/primitives/label/__workshop__/plain.tsx
+++ b/src/core/primitives/label/__workshop__/plain.tsx
@@ -10,7 +10,7 @@ export default function PlainStory() {
   const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS, undefined, 'Props')
   const textChild = useText('Text', 'Label text', 'Props')
   const textOverflow =
-    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, '', 'Props') || undefined
+    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, 'none', 'Props') || undefined
   const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props')
 
   return (