test: update workshop stories

mariuslundgard · mariuslundgard · commit 36b6a13afbeb · 2024-11-29T13:25:57.000+01:00
diff --git a/src/core/__workshop__/constants.ts b/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',
 }
 
diff --git a/src/core/components/breadcrumbs/__workshop__/buttons.tsx 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
@@ -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
@@ -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__/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
@@ -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
@@ -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
@@ -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
@@ -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 (

Original file line number	Diff line number	Diff line change
`@@ -251,8 +251,8 @@ export const WORKSHOP_TEXT_INPUT_TYPE_OPTIONS: {[key: string]: TextInputType} =`
`251`	`251`	`'color': 'color',`
`252`	`252`	`}`
`253`	`253`
`254`		`-export const WORKSHOP_TEXT_OVERFLOW_OPTIONS: {[key: string]: 'ellipsis' \| ''} = {`
`255`		`- None: '',`
	`254`	`+export const WORKSHOP_TEXT_OVERFLOW_OPTIONS: {[key: string]: 'ellipsis' \| 'none'} = {`
	`255`	`+ None: 'none',`
`256`	`256`	`Ellipsis: 'ellipsis',`
`257`	`257`	`}`
`258`	`258`
Original file line number	Diff line number	Diff line change
`@@ -17,15 +17,17 @@ export default function Example() {`
`17`	`17`	`useSelect('Max. length', BREADCRUMBS_MAX_LENGTH_OPTIONS, 0, 'Props') \|\| undefined`
`18`	`18`
`19`	`19`	`return (`
`20`		`- <Flex align="center" height="fill" justify="center">`
	`20`	`+ <Flex align="center" height="fill" justify="center" padding={4} sizing="border">`
`21`	`21`	`<Breadcrumbs`
	`22`	`+ gapX={1}`
	`23`	`+ gapY={3}`
`22`	`24`	`maxLength={maxLength}`
`23`	`25`	`separator={`
`24`	`26`	`<Text muted size={1}>`
`25`	`27`	`/`
`26`	`28`	`</Text>`
`27`	`29`	`}`
`28`		`- space={2}`
	`30`	`+ // space={2}`
`29`	`31`	`>`
`30`	`32`	`<Text size={1}>`
`31`	`33`	`<a href="#">Root</a>`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ export default function MixedChildrenStory() {`
`5`	`5`	`return (`
`6`	`6`	`<Flex align="center" height="fill" justify="center">`
`7`	`7`	`<Button fontSize={[2, 2, 3]} icon={AddIcon} mode="ghost" padding={[3, 3, 4]} text="Create">`
`8`		`- <span style={{display: 'none'}}>test</span>`
	`8`	`+ <span style={{opacity: 0.5}}>raw span</span>`
`9`	`9`	`</Button>`
`10`	`10`	`</Flex>`
`11`	`11`	`)`
Original file line number	Diff line number	Diff line change
@@ -18,7 +18,7 @@ const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
`18`	`18`	`width: stretch;`
`19`	`19`	`}`
`20`	`20`
`21`		`- & span:nth-child(2) {`
	`21`	`+ & > span:nth-child(2) {`
`22`	`22`	`width: 0;`
`23`	`23`	`flex: none;`
`24`	`24`	`padding: 0;`