Playroom: Guard tone on Button & ButtonIcon (#1375)

seek-oss · Oct 13, 2023 · 318eb4c · 318eb4c
1 parent 23e2d41
commit 318eb4c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
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,17 +2,20 @@ import React, { forwardRef } from 'react';
 import {
   type ButtonProps,
   buttonVariants,
+  buttonTones,
   Button as BraidButton,
 } from '../Button/Button';
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant, ...restProps }, ref) => {
+  ({ variant, tone, ...restProps }, ref) => {
     const isValidVariant = variant && buttonVariants.indexOf(variant) > -1;
+    const isValidTone = tone && buttonTones.indexOf(tone) > -1;
 
     return (
       <BraidButton
         ref={ref}
         variant={isValidVariant ? variant : undefined}
+        tone={isValidTone ? tone : undefined}
         {...restProps}
       />
     );

diff --git a/packages/braid-design-system/src/lib/components/Button/Button.tsx b/packages/braid-design-system/src/lib/components/Button/Button.tsx
@@ -35,8 +35,15 @@ export const buttonVariants = [
   'transparent',
 ] as const;
 
+export const buttonTones = [
+  'formAccent',
+  'brandAccent',
+  'critical',
+  'neutral',
+] as const;
+
 type ButtonSize = 'standard' | 'small';
-type ButtonTone = 'formAccent' | 'brandAccent' | 'critical' | 'neutral';
+type ButtonTone = (typeof buttonTones)[number];
 type ButtonVariant = (typeof buttonVariants)[number];
 export interface ButtonStyleProps {
   size?: ButtonSize;

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
@@ -4,18 +4,21 @@ import {
   type ButtonIconProps,
   ButtonIcon as BraidButtonIcon,
   buttonIconVariants,
+  buttonIconTones,
 } from './ButtonIcon';
 
 export const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(
-  ({ variant, id, ...restProps }, ref) => {
+  ({ variant, id, tone, ...restProps }, ref) => {
     const fallbackId = useFallbackId();
     const isValidVariant = variant && buttonIconVariants.indexOf(variant) > -1;
+    const isValidTone = tone && buttonIconTones.indexOf(tone) > -1;
 
     return (
       <BraidButtonIcon
         ref={ref}
         id={id ?? fallbackId}
         variant={isValidVariant ? variant : undefined}
+        tone={isValidTone ? tone : undefined}
         {...restProps}
       />
     );

diff --git a/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.tsx b/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.tsx
@@ -29,13 +29,15 @@ export const buttonIconVariants: Array<
   Extract<ButtonStyleProps['variant'], 'soft' | 'transparent'>
 > = ['soft', 'transparent'];
 
+export const buttonIconTones = ['neutral', 'secondary'] as const;
+
 type NativeButtonProps = AllHTMLAttributes<HTMLButtonElement>;
 export interface ButtonIconProps {
   id: string;
   icon: ReactElement<UseIconProps>;
   label: string;
   size?: 'standard' | 'large';
-  tone?: 'neutral' | 'secondary';
+  tone?: (typeof buttonIconTones)[number];
   type?: 'button' | 'submit' | 'reset';
   variant?: (typeof buttonIconVariants)[number];
   onClick?: NativeButtonProps['onClick'];