Move secondary ButtonIcon tone to icons (#1512)

seek-oss · Jun 14, 2024 · 50f9888 · 50f9888
1 parent 14fd45f
commit 50f9888
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 17 deletions.
diff --git a/.changeset/slow-pears-deliver.md b/.changeset/slow-pears-deliver.md
@@ -0,0 +1,18 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - Autosuggest
+  - Dialog
+  - Drawer
+  - PasswordField
+  - Tag
+  - TextField
+  - useToast
+---
+
+Move secondary ButtonIcon tone to icons
+
+Following the deprecation of the `secondary` tone of `ButtonIcon`, this updates all internal usages to apply the `secondary` tone directly to the icon.
diff --git a/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.tsx b/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.tsx
@@ -181,8 +181,7 @@ function SuggestionItem({
           >
             <ButtonIcon
               id={`${id}-clear`}
-              icon={<IconClear />}
-              tone="secondary"
+              icon={<IconClear tone="secondary" />}
               tabIndex={-1}
               size="small"
               label={clearLabel || 'Clear suggestion'}

diff --git a/packages/braid-design-system/src/lib/components/Tag/Tag.tsx b/packages/braid-design-system/src/lib/components/Tag/Tag.tsx
@@ -77,9 +77,8 @@ export const Tag = ({
               // @ts-expect-error With no id, ButtonIcon will fallback from Tooltip to title internally.
               // ID will no longer be required when React 18 has sufficient adoption and we can safely `useId()`
               id={id ? `${id}-clear` : undefined}
-              icon={<IconClear />}
+              icon={<IconClear tone="secondary" />}
               label={clearLabel}
-              tone="secondary"
               size="small"
               variant="transparent"
               onClick={onClear}

diff --git a/packages/braid-design-system/src/lib/components/private/FieldButtonIcon/FieldButtonIcon.tsx b/packages/braid-design-system/src/lib/components/private/FieldButtonIcon/FieldButtonIcon.tsx
@@ -1,8 +1,13 @@
-import React, { type MouseEvent, useCallback, forwardRef } from 'react';
+import React, {
+  type MouseEvent,
+  useCallback,
+  forwardRef,
+  cloneElement,
+} from 'react';
 import { type ButtonIconProps, ButtonIcon } from '../../ButtonIcon/ButtonIcon';
 
 export const FieldButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(
-  ({ label, onClick, onMouseDown, ...restProps }, forwardedRef) => {
+  ({ label, onClick, onMouseDown, icon, ...restProps }, forwardedRef) => {
     const handleMouseDown = useCallback(
       (event: MouseEvent<HTMLButtonElement>) => {
         if (typeof onMouseDown !== 'function') {
@@ -32,7 +37,7 @@ export const FieldButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(
       <ButtonIcon
         ref={forwardedRef}
         label={label}
-        tone="secondary"
+        icon={cloneElement(icon, { tone: icon.props.tone || 'secondary' })}
         variant="transparent"
         size="small"
         onClick={onClick}

diff --git a/packages/braid-design-system/src/lib/components/private/Modal/ModalContent.tsx b/packages/braid-design-system/src/lib/components/private/Modal/ModalContent.tsx
@@ -222,8 +222,7 @@ export const ModalContent = ({
               <ButtonIcon
                 id={`${id}-close`}
                 label={closeLabel}
-                icon={<IconClear />}
-                tone="secondary"
+                icon={<IconClear tone="secondary" />}
                 variant="transparent"
                 size="large"
                 onClick={onClose}

diff --git a/packages/braid-design-system/src/lib/components/useToast/Toast.tsx b/packages/braid-design-system/src/lib/components/useToast/Toast.tsx
@@ -176,8 +176,7 @@ const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
                   >
                     <ButtonIcon
                       id={`${dedupeKey}-clear`}
-                      icon={<IconClear />}
-                      tone="secondary"
+                      icon={<IconClear tone="secondary" />}
                       variant="transparent"
                       onClick={remove}
                       label={closeLabel}

diff --git a/site/src/App/routes/gallery/Gallery.tsx b/site/src/App/routes/gallery/Gallery.tsx
@@ -600,19 +600,17 @@ const GalleryInternal = () => {
               <ButtonIcon
                 id="fitToScreen"
                 label="Fit to screen"
-                tone="secondary"
                 variant="transparent"
                 onClick={fitToScreen}
-                icon={<IconFitToScreen />}
+                icon={<IconFitToScreen tone="secondary" />}
               />
               <ButtonIcon
                 id="zoomOut"
                 ref={zoomOutRef}
                 label="Zoom Out"
-                tone="secondary"
                 variant="transparent"
                 onClick={zoomOut}
-                icon={<IconMinus />}
+                icon={<IconMinus tone="secondary" />}
               />
               <TooltipRenderer
                 id="zoomToActual"
@@ -635,10 +633,9 @@ const GalleryInternal = () => {
                 id="zoomIn"
                 ref={zoomInRef}
                 label="Zoom In"
-                tone="secondary"
                 variant="transparent"
                 onClick={zoomIn}
-                icon={<IconAdd />}
+                icon={<IconAdd tone="secondary" />}
               />
             </Inline>
           </Box>