From 318eb4c770cc24e78f4b713520ea6b25c84340ca Mon Sep 17 00:00:00 2001
From: Michael Taranto <michaeltaranto@users.noreply.github.com>
Date: Fri, 13 Oct 2023 16:13:36 +1100
Subject: [PATCH] Playroom: Guard tone on Button & ButtonIcon (#1375)

---
 .../src/lib/components/Button/Button.playroom.tsx        | 5 ++++-
 .../src/lib/components/Button/Button.tsx                 | 9 ++++++++-
 .../lib/components/ButtonIcon/ButtonIcon.playroom.tsx    | 5 ++++-
 .../src/lib/components/ButtonIcon/ButtonIcon.tsx         | 4 +++-
 4 files changed, 19 insertions(+), 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
index 8e0eacb20b5..5225a3ddda9 100644
--- 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
index b32c367ae87..b0666e07b15 100644
--- 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
index 7729e36d969..240766927cc 100644
--- 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
index 8435286cf4b..59a4e701198 100644
--- 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'];