ButtonIcon: Add formAccent tone (#1508)

seek-oss · Jun 11, 2024 · e660f75 · e660f75
1 parent 39c2718
commit e660f75
Show file tree

Hide file tree

Showing 11 changed files with 170 additions and 65 deletions.
diff --git a/.changeset/kind-balloons-cough.md b/.changeset/kind-balloons-cough.md
@@ -0,0 +1,33 @@
+---
+'braid-design-system': minor
+---
+
+---
+updated:
+  - ButtonIcon
+---
+
+**ButtonIcon:** Add `formAccent` tone
+
+Introduces support for the `formAccent` tone on `ButtonIcon`.
+
+The new tone sits alongside the existing `neutral` tone, while the `secondary` tone is now deprecated and will be removed in a future version (see [Migration Guide] below).
+
+**EXAMPLE USAGE:**
+```jsx
+<ButtonIcon tone="formAccent" icon={<IconAdd />} />
+```
+
+**MIGRATION GUIDE:**
+
+For consumers of the now deprecated `secondary` tone, you can pro-actively migrate away from it by moving the `tone` to the icon itself:
+
+```diff
+ <ButtonIcon
+-  tone="secondary"
+-  icon={<IconAdd />}
++  icon={<IconAdd tone="secondary" />}
+```
+
+
+[Migration Guide]: #migration-guide
diff --git a/packages/braid-design-system/src/lib/components/Button/Button.playroom.tsx b/packages/braid-design-system/src/lib/components/Button/Button.playroom.tsx
@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react';
 import {
   type ButtonProps,
   buttonVariants,
-  buttonTones,
   Button as BraidButton,
 } from '../Button/Button';
+import { buttonTones } from './buttonTones';
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ variant, tone, ...restProps }, ref) => {

diff --git a/packages/braid-design-system/src/lib/components/Button/Button.tsx b/packages/braid-design-system/src/lib/components/Button/Button.tsx
@@ -25,6 +25,7 @@ import type { UseIconProps } from '../../hooks/useIcon';
 import { negativeMargin } from '../../css/negativeMargin/negativeMargin';
 import { Bleed } from '../Bleed/Bleed';
 import { useBraidTheme } from '../BraidProvider/BraidThemeContext';
+import type { buttonTones } from './buttonTones';
 import * as styles from './Button.css';
 
 export const buttonVariants = [
@@ -34,13 +35,6 @@ export const buttonVariants = [
   'transparent',
 ] as const;
 
-export const buttonTones = [
-  'formAccent',
-  'brandAccent',
-  'critical',
-  'neutral',
-] as const;
-
 type ButtonSize = 'standard' | 'small';
 type ButtonTone = (typeof buttonTones)[number];
 type ButtonVariant = (typeof buttonVariants)[number];

diff --git a/packages/braid-design-system/src/lib/components/Button/buttonTones.ts b/packages/braid-design-system/src/lib/components/Button/buttonTones.ts
@@ -0,0 +1,6 @@
+export const buttonTones = [
+  'formAccent',
+  'brandAccent',
+  'critical',
+  'neutral',
+] as const;
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
@@ -167,9 +167,9 @@ const docs: ComponentDocs = {
       background: 'surface',
       description: (
         <Text>
-          By default, the foreground color of the icon follows neutral text,
-          however, this can be de-emphasised via the <Strong>tone</Strong> prop
-          by selecting <Strong>secondary</Strong>.
+          By default, the button adopts the <Strong>neutral</Strong> tone,
+          however, actions can be emphasised by setting the{' '}
+          <Strong>tone</Strong> prop to <Strong>formAccent</Strong>.
         </Text>
       ),
       Example: () =>
@@ -178,7 +178,7 @@ const docs: ComponentDocs = {
             <Inline space="gutter" alignY="center">
               <ButtonIcon
                 tone="neutral"
-                variant="transparent"
+                variant="soft"
                 icon={<IconClear />}
                 label="Neutral tone"
                 id="tone-1"
@@ -189,14 +189,14 @@ const docs: ComponentDocs = {
             </Inline>
             <Inline space="gutter" alignY="center">
               <ButtonIcon
-                tone="secondary"
-                variant="transparent"
+                tone="formAccent"
+                variant="soft"
                 icon={<IconClear />}
-                label="Secondary tone"
+                label="Form Accent tone"
                 id="tone-2"
               />
               <Text tone="secondary" size="xsmall">
-                SECONDARY
+                FORMACCENT
               </Text>
             </Inline>
           </Stack>,

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
@@ -121,27 +121,52 @@ export const galleryItems: ComponentExample[] = [
       ),
   },
   {
-    label: 'Secondary',
+    label: 'Tone',
     background: 'surface',
     Example: () =>
       source(
-        <Inline space="small">
-          <ButtonIcon
-            tone="secondary"
-            variant="soft"
-            icon={<IconClear />}
-            label="Close"
-            id="buttonicon-secondary-1"
-          />
-          <ButtonIcon
-            tone="secondary"
-            variant="transparent"
-            bleed={false}
-            icon={<IconClear />}
-            label="Close"
-            id="buttonicon-secondary-2"
-          />
-        </Inline>,
+        <Stack space="medium">
+          <Inline space="small" alignY="center">
+            <ButtonIcon
+              tone="neutral"
+              variant="soft"
+              icon={<IconClear />}
+              label="Close"
+              id="buttonicon-neutral-1"
+            />
+            <ButtonIcon
+              tone="neutral"
+              variant="transparent"
+              bleed={false}
+              icon={<IconClear />}
+              label="Close"
+              id="buttonicon-neutral-2"
+            />
+            <Text tone="secondary" size="xsmall">
+              NEUTRAL
+            </Text>
+          </Inline>
+          <Inline space="small" alignY="center">
+            <ButtonIcon
+              tone="formAccent"
+              variant="soft"
+              icon={<IconAdd />}
+              label="Add"
+              id="buttonicon-formAccent-1"
+            />
+            <ButtonIcon
+              tone="formAccent"
+              variant="transparent"
+              bleed={false}
+              icon={<IconAdd />}
+              label="Add"
+              id="buttonicon-formAccent-2"
+            />
+            <Text tone="secondary" size="xsmall">
+              FORMACCENT
+            </Text>
+          </Inline>
+        </Stack>,
       ),
   },
   {

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
@@ -43,19 +43,6 @@ export const screenshots: ComponentScreenshot = {
         </Inline>
       ),
     },
-    {
-      label: 'Soft - secondary',
-      background: 'surface',
-      Example: () => (
-        <ButtonIcon
-          variant="soft"
-          tone="secondary"
-          icon={<IconBookmark />}
-          label="Bookmark"
-          id="1"
-        />
-      ),
-    },
     {
       label: 'Soft - bleed on',
       background: 'surface',
@@ -124,16 +111,47 @@ export const screenshots: ComponentScreenshot = {
       ),
     },
     {
-      label: 'Transparent - secondary',
+      label: 'Tone - formAccent',
+      background: 'surface',
+      Example: () => (
+        <Inline space="large" alignY="center">
+          <ButtonIcon
+            variant="transparent"
+            tone="formAccent"
+            icon={<IconBookmark />}
+            label="Bookmark"
+            id="1"
+          />
+          <ButtonIcon
+            variant="soft"
+            tone="formAccent"
+            icon={<IconBookmark />}
+            label="Bookmark"
+            id="1"
+          />
+        </Inline>
+      ),
+    },
+    {
+      label: 'Tone - secondary (deprecated)',
       background: 'surface',
       Example: () => (
-        <ButtonIcon
-          variant="transparent"
-          tone="secondary"
-          icon={<IconBookmark />}
-          label="Bookmark"
-          id="1"
-        />
+        <Inline space="large" alignY="center">
+          <ButtonIcon
+            variant="transparent"
+            tone="secondary"
+            icon={<IconBookmark />}
+            label="Bookmark"
+            id="1"
+          />
+          <ButtonIcon
+            variant="soft"
+            tone="secondary"
+            icon={<IconBookmark />}
+            label="Bookmark"
+            id="1"
+          />
+        </Inline>
       ),
     },
     {

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
@@ -5,7 +5,6 @@ import {
   ButtonIcon,
   IconAdd,
   IconBookmark,
-  IconClear,
   IconHelp,
 } from '../../playroom/components';
 
@@ -55,13 +54,13 @@ export const snippets: Snippets = [
     ),
   },
   {
-    name: 'Secondary',
+    name: 'Form accent',
     code: source(
       <ButtonIcon
-        tone="secondary"
-        icon={<IconClear />}
-        label="Close"
-        id="buttonicon-secondary"
+        tone="formAccent"
+        icon={<IconAdd />}
+        label="Add"
+        id="buttonicon-formAccent"
       />,
     ),
   },

diff --git a/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.tsx b/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.tsx
@@ -24,12 +24,15 @@ import { Bleed } from '../Bleed/Bleed';
 import { TooltipRenderer } from '../TooltipRenderer/TooltipRenderer';
 import type { Space } from '../../css/atoms/atoms';
 import * as styles from './ButtonIcon.css';
+import dedent from 'dedent';
 
 export const buttonIconVariants: Array<
   Extract<ButtonStyleProps['variant'], 'soft' | 'transparent'>
 > = ['soft', 'transparent'];
 
-export const buttonIconTones = ['neutral', 'secondary'] as const;
+export const buttonIconTones: Array<
+  Extract<ButtonStyleProps['tone'], 'neutral' | 'formAccent'> | 'secondary'
+> = ['neutral', 'formAccent', 'secondary'];
 export const buttonIconSizes = ['small', 'standard', 'large'] as const;
 
 type ButtonIconSize = (typeof buttonIconSizes)[number];
@@ -87,13 +90,35 @@ const PrivateButtonIcon = forwardRef<
     },
     forwardedRef,
   ) => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (tone === 'secondary') {
+        // eslint-disable-next-line no-console
+        console.warn(
+          dedent`
+            The "secondary" tone has been deprecated for \`ButtonIcon\` and will be removed in a future version. Apply the "tone" directly to the icon.
+               <ButtonIcon
+              %c-   tone="secondary"
+              %c-   icon={<Icon />}
+              %c+   icon={<Icon tone="secondary" />}
+               %c/>
+          `,
+          'color: red',
+          'color: red',
+          'color: green',
+          'color: inherit',
+        );
+      }
+    }
+
+    const buttonTone = tone === 'secondary' ? 'neutral' : tone;
+
     const {
       className: buttonClasses,
       width: _,
       ...buttonStyleProps
     } = useButtonStyles({
       variant,
-      tone: 'neutral',
+      tone: buttonTone,
       size: size === 'small' ? 'small' : 'standard',
       radius: 'full',
     });
@@ -128,7 +153,7 @@ const PrivateButtonIcon = forwardRef<
       >
         <ButtonOverlays
           variant={variant}
-          tone="neutral"
+          tone={buttonTone}
           radius="full"
           keyboardFocusable={typeof tabIndex === 'undefined' || tabIndex >= 0}
           forceActive={ariaExpanded === 'true' || ariaExpanded === true}

diff --git a/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap
@@ -2118,6 +2118,7 @@ exports[`ButtonIcon 1`] = `
         | "standard"
     tabIndex?: number
     tone?: 
+        | "formAccent"
         | "neutral"
         | "secondary"
     tooltipPlacement?: 

diff --git a/site/src/App/DocNavigation/DocNavigation.tsx b/site/src/App/DocNavigation/DocNavigation.tsx
@@ -198,7 +198,11 @@ export const DocNavigation = () => {
     history = getHistory(...relevantNames);
   }
 
-  const updateCount = history.filter((item) => item.isRecent).length;
+  const updateCount = Array.from(
+    new Set(
+      history.filter(({ isRecent }) => isRecent).map(({ version }) => version),
+    ),
+  ).length;
 
   return (
     <Stack space={['xlarge', 'xxlarge']}>