feat(buttons): allow only icons buttons, fix margins

sanity-io · Sep 28, 2023 · 09ffc6f · 09ffc6f
1 parent 9f4abe1
commit 09ffc6f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 15 deletions.
diff --git a/src/primitives/button/button.tsx b/src/primitives/button/button.tsx
@@ -30,9 +30,6 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
   selected?: boolean
   space?: number | number[]
   textAlign?: ButtonTextAlign
-  /**
-   * @default primary
-   */
   textStyle?: ButtonTextStyle
   text?: React.ReactNode
   tone?: ButtonTone
@@ -140,7 +137,7 @@ export const Button = forwardRef(function Button(
 
       {(icon || text || iconRight) && (
         <Box as="span" {...boxProps}>
-          <Flex as="span" justify={justify}>
+          <Flex as="span" justify={justify} gap={space}>
             {icon && (
               <Text size={fontSize} muted={textStyle === 'secondary'}>
                 {isValidElement(icon) && icon}
@@ -149,11 +146,7 @@ export const Button = forwardRef(function Button(
             )}
 
             {text && (
-              <Box
-                flex={iconRight ? 1 : undefined}
-                marginLeft={icon ? space : undefined}
-                marginRight={iconRight ? space : undefined}
-              >
+              <Box flex={iconRight ? 1 : undefined}>
                 <Text
                   muted={textStyle === 'secondary'}
                   align={textAlign}

diff --git a/src/types/button.ts b/src/types/button.ts
@@ -13,4 +13,7 @@ export type ButtonTextAlign = 'left' | 'right' | 'center'
  */
 export type ButtonTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'
 
+/**
+ * @public
+ */
 export type ButtonTextStyle = 'primary' | 'secondary'
diff --git a/stories/primitives/Button.stories.tsx b/stories/primitives/Button.stories.tsx
@@ -169,15 +169,18 @@ const modesConversion: {
 const rows: Array<(typeof buttonTones)[number]> = ['default', 'positive', 'caution', 'critical']
 export const StudioButtons: Story = {
   args: {
-    text: 'Button',
+    // Defaults button props.
     padding: 3,
+    space: 3,
     fontSize: 1,
     radius: 2,
-    icon: 'square',
-    iconRight: 'square',
-    // For small buttons:
+    // Small buttons:
     // space: 2,
     // padding: 2,
+
+    text: 'Button',
+    icon: 'square',
+    iconRight: 'square',
   },
   parameters: {
     controls: {
@@ -194,7 +197,7 @@ export const StudioButtons: Story = {
           title: 'Tone / Mode',
           subHeader: <SubHeader />,
           renderItem: ({row, column}) => (
-            <Flex gap={1} justify={'center'} align={'center'}>
+            <Flex gap={1} justify={'center'} align={'center'} wrap={'wrap'}>
               <Button
                 {...props}
                 tone={row}
@@ -232,7 +235,7 @@ export const StudioButtons: Story = {
           subHeader: <SubHeader />,
 
           renderItem: ({row, column}) => (
-            <Flex gap={1} justify={'center'} align={'center'}>
+            <Flex gap={1} justify={'center'} align={'center'} wrap={'wrap'}>
               <Button
                 {...props}
                 tone={row}