ButtonIcon: Add small size (#1496)

seek-oss · May 23, 2024 · eb470c8 · eb470c8
1 parent 4152dc6
commit eb470c8
Show file tree

Hide file tree

Showing 11 changed files with 203 additions and 67 deletions.
diff --git a/.changeset/few-ravens-cheat.md b/.changeset/few-ravens-cheat.md
@@ -0,0 +1,22 @@
+---
+'braid-design-system': minor
+---
+
+---
+new:
+  - ButtonIcon
+---
+
+**ButtonIcon:** Add `small` size
+
+Introduce a new `small` size for `ButtonIcon` component.
+This size sits alongside the existing `standard` and `large` sizes.
+
+**EXAMPLE USAGE:**
+```jsx
+<ButtonIcon
+  size="small"
+  icon={<IconEdit />}
+  label="Small size"
+/>
+```
diff --git a/.changeset/mighty-comics-tan.md b/.changeset/mighty-comics-tan.md
@@ -0,0 +1,14 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - Autosuggest
+  - PasswordField
+  - TextField
+---
+
+Adopt `small` sized `ButtonIcon` for field actions
+
+Switch over to `small` (previously `standard`) sized `ButtonIcon` for field actions such as clear field, or toggle password visibility.
diff --git a/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.tsx b/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.tsx
@@ -184,6 +184,7 @@ function SuggestionItem({
               icon={<IconClear />}
               tone="secondary"
               tabIndex={-1}
+              size="small"
               label={clearLabel || 'Clear suggestion'}
               onClick={(event: MouseEvent) => {
                 event.preventDefault();

diff --git a/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.docs.tsx b/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.docs.tsx
@@ -110,19 +110,33 @@ const docs: ComponentDocs = {
         <>
           <Text>
             The button size can be customised via the <Strong>size</Strong>{' '}
-            prop, which accepts either <Strong>standard</Strong> or{' '}
-            <Strong>large</Strong>.
-          </Text>
-          <Text>
-            Both follow the standard text definition from the theme, where{' '}
-            <Strong>standard</Strong> follows the text size and{' '}
-            <Strong>large</Strong> follows the line height.
+            prop, which accepts either <Strong>small</Strong>,{' '}
+            <Strong>standard</Strong> (default) or <Strong>large</Strong>.
           </Text>
+          <Notice>
+            <Text>
+              The <Strong>standard</Strong> and <Strong>large</Strong> sizes
+              both follow the standard text definition from the theme, where{' '}
+              <Strong>standard</Strong> follows the text size and{' '}
+              <Strong>large</Strong> follows the line height.
+            </Text>
+          </Notice>
         </>
       ),
       Example: () =>
         source(
           <Stack space="gutter">
+            <Inline space="gutter" alignY="center">
+              <ButtonIcon
+                size="small"
+                icon={<IconEdit />}
+                label="Small size"
+                id="size-0"
+              />
+              <Text tone="secondary" size="xsmall">
+                SMALL
+              </Text>
+            </Inline>
             <Inline space="gutter" alignY="center">
               <ButtonIcon
                 size="standard"

diff --git a/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.gallery.tsx b/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.gallery.tsx
@@ -11,11 +11,13 @@ import {
   IconShare,
   IconAdd,
   IconClear,
+  Stack,
+  Text,
 } from '../';
 
 export const galleryItems: ComponentExample[] = [
   {
-    label: 'Default',
+    label: 'Soft',
     background: 'surface',
     Example: () =>
       source(
@@ -77,27 +79,45 @@ export const galleryItems: ComponentExample[] = [
       ),
   },
   {
-    label: 'Large size',
+    label: 'Sizes',
     background: 'surface',
     Example: () =>
       source(
-        <Inline space="small">
-          <ButtonIcon
-            size="large"
-            variant="soft"
-            icon={<IconAdd />}
-            label="Add"
-            id="buttonicon-large-1"
-          />
-          <ButtonIcon
-            size="large"
-            variant="transparent"
-            bleed={false}
-            icon={<IconAdd />}
-            label="Add"
-            id="buttonicon-large-2"
-          />
-        </Inline>,
+        <Stack space="medium">
+          <Inline space="medium" alignY="center">
+            <ButtonIcon
+              size="small"
+              icon={<IconAdd />}
+              label="Small size"
+              id="size-0"
+            />
+            <Text tone="secondary" size="xsmall">
+              SMALL
+            </Text>
+          </Inline>
+          <Inline space="medium" alignY="center">
+            <ButtonIcon
+              size="standard"
+              icon={<IconAdd />}
+              label="Standard size"
+              id="size-1"
+            />
+            <Text tone="secondary" size="xsmall">
+              STANDARD
+            </Text>
+          </Inline>
+          <Inline space="medium" alignY="center">
+            <ButtonIcon
+              size="large"
+              icon={<IconAdd />}
+              label="Large size"
+              id="size-2"
+            />
+            <Text tone="secondary" size="xsmall">
+              LARGE
+            </Text>
+          </Inline>
+        </Stack>,
       ),
   },
   {

diff --git a/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.playroom.tsx b/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.playroom.tsx
@@ -5,20 +5,27 @@ import {
   ButtonIcon as BraidButtonIcon,
   buttonIconVariants,
   buttonIconTones,
+  buttonIconSizes,
 } from './ButtonIcon';
 
 export const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(
-  ({ variant, id, tone, ...restProps }, ref) => {
+  ({ variant, id, tone, icon, size, ...restProps }, ref) => {
     const fallbackId = useFallbackId();
     const isValidVariant = variant && buttonIconVariants.indexOf(variant) > -1;
     const isValidTone = tone && buttonIconTones.indexOf(tone) > -1;
 
+    if (!icon || typeof icon === 'boolean') {
+      return null;
+    }
+
     return (
       <BraidButtonIcon
         ref={ref}
         id={id ?? fallbackId}
         variant={isValidVariant ? variant : undefined}
         tone={isValidTone ? tone : undefined}
+        icon={icon}
+        size={size && buttonIconSizes.includes(size) ? size : undefined}
         {...restProps}
       />
     );

diff --git a/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.screenshots.tsx b/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.screenshots.tsx
@@ -15,16 +15,32 @@ export const screenshots: ComponentScreenshot = {
       ),
     },
     {
-      label: 'Soft - large',
+      label: 'Soft',
       background: 'surface',
       Example: () => (
-        <ButtonIcon
-          variant="soft"
-          size="large"
-          icon={<IconBookmark />}
-          label="Bookmark"
-          id="1"
-        />
+        <Inline space="large" alignY="center">
+          <ButtonIcon
+            variant="soft"
+            size="small"
+            icon={<IconBookmark />}
+            label="Small"
+            id="1"
+          />
+          <ButtonIcon
+            variant="soft"
+            size="standard"
+            icon={<IconBookmark />}
+            label="Standard"
+            id="2"
+          />
+          <ButtonIcon
+            variant="soft"
+            size="large"
+            icon={<IconBookmark />}
+            label="Large"
+            id="3"
+          />
+        </Inline>
       ),
     },
     {
@@ -82,25 +98,29 @@ export const screenshots: ComponentScreenshot = {
       label: 'Transparent',
       background: 'surface',
       Example: () => (
-        <ButtonIcon
-          variant="transparent"
-          icon={<IconBookmark />}
-          label="Bookmark"
-          id="1"
-        />
-      ),
-    },
-    {
-      label: 'Transparent - large',
-      background: 'surface',
-      Example: () => (
-        <ButtonIcon
-          variant="transparent"
-          size="large"
-          icon={<IconBookmark />}
-          label="Bookmark"
-          id="1"
-        />
+        <Inline space="large" alignY="center">
+          <ButtonIcon
+            variant="transparent"
+            size="small"
+            icon={<IconBookmark />}
+            label="Small"
+            id="1"
+          />
+          <ButtonIcon
+            variant="transparent"
+            size="standard"
+            icon={<IconBookmark />}
+            label="Standard"
+            id="2"
+          />
+          <ButtonIcon
+            variant="transparent"
+            size="large"
+            icon={<IconBookmark />}
+            label="Large"
+            id="3"
+          />
+        </Inline>
       ),
     },
     {
@@ -122,32 +142,48 @@ export const screenshots: ComponentScreenshot = {
         <Stack space="large" data={{ [debugTouchableAttrForDataProp]: '' }}>
           <Inline space="large">
             <ButtonIcon
+              variant="soft"
               icon={<IconBookmark />}
               label="Bookmark"
-              size="standard"
+              size="small"
               id="1"
             />
             <ButtonIcon
+              variant="soft"
               icon={<IconBookmark />}
               label="Bookmark"
-              size="large"
+              size="standard"
               id="2"
             />
+            <ButtonIcon
+              variant="soft"
+              icon={<IconBookmark />}
+              label="Bookmark"
+              size="large"
+              id="3"
+            />
           </Inline>
           <Inline space="large">
             <ButtonIcon
+              variant="transparent"
               icon={<IconBookmark />}
               label="Bookmark"
-              size="standard"
+              size="small"
+              id="4"
+            />
+            <ButtonIcon
               variant="transparent"
-              id="3"
+              icon={<IconBookmark />}
+              label="Bookmark"
+              size="standard"
+              id="5"
             />
             <ButtonIcon
+              variant="transparent"
               icon={<IconBookmark />}
               label="Bookmark"
               size="large"
-              variant="transparent"
-              id="4"
+              id="6"
             />
           </Inline>
         </Stack>

diff --git a/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.snippets.tsx b/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.snippets.tsx
@@ -32,6 +32,17 @@ export const snippets: Snippets = [
       />,
     ),
   },
+  {
+    name: 'Small',
+    code: source(
+      <ButtonIcon
+        size="small"
+        icon={<IconAdd />}
+        label="Add"
+        id="buttonicon-small"
+      />,
+    ),
+  },
   {
     name: 'Large',
     code: source(