feat(react-button): [CAP] Introduce new Button appearance prop tint

packages/react-components/react-button/library/docs/SPEC.md

@@ -45,6 +45,7 @@ The `Button` component has several apparance variants depending on where it's be
 - appearance="primary": The `Button` is styled to emphasize that it represents the primary action.
 - appearance="subtle": The `Button` is styled to blend into its background to become less emphasized.
 - appearance="transparent": The `Button` is styled such that it has no background or border styling and is just emphasized through its content styling.
+- appearance="tint": The `Button` is styled with a tinted background using brand colors.
 
 ### Icon
 

packages/react-components/react-button/library/etc/react-button.api.md

@@ -37,7 +37,7 @@ export interface ButtonContextValue {
 
 // @public (undocumented)
 export type ButtonProps = ComponentProps<ButtonSlots> & {
-    appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';
+    appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent' | 'tint';
     disabledFocusable?: boolean;
     disabled?: boolean;
     iconPosition?: 'before' | 'after';

packages/react-components/react-button/library/src/components/Button/Button.types.ts

@@ -26,11 +26,11 @@ export type ButtonProps = ComponentProps<ButtonSlots> & {
    * - 'outline': Removes background styling.
    * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
    * - 'transparent': Removes background and border styling.
+   * - 'tint': Applies a tinted background with brand colors.
    *
    * @default 'secondary'
    */
-  appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';
-
+  appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent' | 'tint';
   /**
    * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it
    * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this

packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts

@@ -279,6 +279,9 @@ const useRootStyles = makeStyles({
       },
     },
   },
+  tint: {
+    /* Styles provided by consumer via custom hooks */
+  },
 
   // Shape variations
   circular: { borderRadius: tokens.borderRadiusCircular },
@@ -459,6 +462,9 @@ const useRootDisabledStyles = makeStyles({
       ...shorthands.borderColor('transparent'),
     },
   },
+  tint: {
+    /* Styles provided by consumer via custom hooks */
+  },
 });
 
 const useRootFocusStyles = makeStyles({

packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButtonStyles.styles.ts

@@ -129,6 +129,9 @@ const useRootStyles = makeStyles({
       },
     },
   },
+  tint: {
+    /* Styles provided by custom hooks */
+  },
 
   // Size variations
   small: {

packages/react-components/react-button/library/src/components/MenuButton/useMenuButtonStyles.styles.ts

@@ -45,6 +45,9 @@ const useRootExpandedStyles = makeStyles({
     backgroundColor: tokens.colorTransparentBackgroundSelected,
     color: tokens.colorNeutralForeground2BrandSelected,
   },
+  tint: {
+    /* Styles provided by consumer via custom hooks */
+  },
 });
 
 const useIconExpandedStyles = makeStyles({
@@ -64,6 +67,9 @@ const useIconExpandedStyles = makeStyles({
   transparent: {
     color: tokens.colorNeutralForeground2BrandSelected,
   },
+  tint: {
+    /* Styles provided by consumer via custom hooks */
+  },
   highContrast: {
     // High contrast styles
     '@media (forced-colors: active)': {

packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts

@@ -126,6 +126,9 @@ const useRootStyles = makeStyles({
       },
     },
   },
+  tint: {
+    /* Styles provided by consumer via custom hooks */
+  },
 
   // Shape variations
   circular: {},

packages/react-components/react-button/library/src/components/ToggleButton/useToggleButtonStyles.styles.ts

@@ -142,6 +142,9 @@ const useRootCheckedStyles = makeStyles({
       color: tokens.colorNeutralForeground2BrandPressed,
     },
   },
+  tint: {
+    /* Styles provided by custom hooks */
+  },
 });
 
 const useCheckedAccessibleStyles = makeStyles({
@@ -266,6 +269,9 @@ const useRootDisabledStyles = makeStyles({
       ...shorthands.borderColor('transparent'),
     },
   },
+  tint: {
+    /* Styles provided by custom hooks */
+  },
 });
 
 const useIconCheckedStyles = makeStyles({

packages/react-components/react-button/stories/src/Button/ButtonAppearance.stories.tsx

@@ -9,6 +9,8 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    flexWrap: 'wrap',
+    rowGap: '15px',
   },
 });
 
@@ -30,6 +32,9 @@ export const Appearance = (): JSXElement => {
       <Button appearance="transparent" icon={<CalendarMonth />}>
         Transparent
       </Button>
+      <Button appearance="tint" icon={<CalendarMonth />}>
+        Tint
+      </Button>
     </div>
   );
 };
@@ -42,7 +47,8 @@ Appearance.parameters = {
         '- `primary`: emphasizes the button as a primary action.\n' +
         '- `outline`: removes background styling.\n' +
         '- `subtle`: minimizes emphasis to blend into the background until hovered or focused\n' +
-        '- `transparent`: removes background and border styling.\n',
+        '- `transparent`: removes background and border styling.\n' +
+        '- `tint`: applies a tinted background with brand colors.\n',
     },
   },
 };

packages/react-components/react-button/stories/src/CompoundButton/CompoundButtonAppearance.stories.tsx

@@ -9,6 +9,8 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    flexWrap: 'wrap',
+    rowGap: '15px',
     minWidth: 'min-content',
   },
 });
@@ -33,6 +35,9 @@ export const Appearance = (): JSXElement => {
       <CompoundButton secondaryContent="Secondary content" appearance="transparent" icon={<CalendarMonth />}>
         Transparent
       </CompoundButton>
+      <CompoundButton secondaryContent="Secondary content" appearance="tint" icon={<CalendarMonth />}>
+        Tint
+      </CompoundButton>
     </div>
   );
 };
@@ -45,7 +50,8 @@ Appearance.parameters = {
         '- `primary`: emphasizes the compound button as a primary action.\n' +
         '- `outline`: removes background styling.\n' +
         '- `subtle`: minimizes emphasis to blend into the background until hovered or focused\n' +
-        '- `transparent`: removes background and border styling.\n',
+        '- `transparent`: removes background and border styling.\n' +
+        '- `tint`: applies a tinted background with brand colors.\n',
     },
   },
 };

packages/react-components/react-button/stories/src/MenuButton/MenuButtonAppearance.stories.tsx

@@ -9,6 +9,8 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    flexWrap: 'wrap',
+    rowGap: '15px',
     minWidth: 'min-content',
   },
 });
@@ -90,6 +92,21 @@ export const Appearance = (): JSXElement => {
           </MenuList>
         </MenuPopover>
       </Menu>
+
+      <Menu>
+        <MenuTrigger disableButtonEnhancement>
+          <MenuButton appearance="tint" icon={<CalendarMonth />}>
+            Tint
+          </MenuButton>
+        </MenuTrigger>
+
+        <MenuPopover>
+          <MenuList>
+            <MenuItem>Item a</MenuItem>
+            <MenuItem>Item b</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
     </div>
   );
 };
@@ -102,7 +119,8 @@ Appearance.parameters = {
         '- `primary`: emphasizes the menu button as a primary action.\n' +
         '- `outline`: removes background styling.\n' +
         '- `subtle`: minimizes emphasis to blend into the background until hovered or focused\n' +
-        '- `transparent`: removes background and border styling.\n',
+        '- `transparent`: removes background and border styling.\n' +
+        '- `tint`: applies a tinted background with brand colors.\n',
     },
   },
 };

packages/react-components/react-button/stories/src/SplitButton/SplitButtonAppearance.stories.tsx

@@ -15,6 +15,8 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    flexWrap: 'wrap',
+    rowGap: '15px',
     minWidth: 'min-content',
   },
 });
@@ -104,6 +106,23 @@ export const Appearance = (): JSXElement => {
           </MenuList>
         </MenuPopover>
       </Menu>
+
+      <Menu positioning="below-end">
+        <MenuTrigger disableButtonEnhancement>
+          {(triggerProps: MenuButtonProps) => (
+            <SplitButton menuButton={triggerProps} appearance="tint">
+              Tint
+            </SplitButton>
+          )}
+        </MenuTrigger>
+
+        <MenuPopover>
+          <MenuList>
+            <MenuItem>Item a</MenuItem>
+            <MenuItem>Item b</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
     </div>
   );
 };
@@ -116,7 +135,8 @@ Appearance.parameters = {
         '- `primary`: emphasizes the split button as a primary action.\n' +
         '- `outline`: removes background styling.\n' +
         '- `subtle`: minimizes emphasis to blend into the background until hovered or focused\n' +
-        '- `transparent`: removes background and border styling.\n',
+        '- `transparent`: removes background and border styling.\n' +
+        '- `tint`: applies a tinted background with brand colors.\n',
     },
   },
 };

packages/react-components/react-button/stories/src/ToggleButton/ToggleButtonAppearance.stories.tsx

@@ -9,6 +9,8 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    flexWrap: 'wrap',
+    rowGap: '15px',
     minWidth: 'min-content',
   },
 });
@@ -58,6 +60,9 @@ export const Appearance = (): JSXElement => {
       <ToggleButton appearance="transparent" icon={<CalendarMonth />}>
         Transparent
       </ToggleButton>
+      <ToggleButton appearance="tint" icon={<CalendarMonth />}>
+        Tint
+      </ToggleButton>
     </div>
   );
 };
@@ -70,7 +75,8 @@ Appearance.parameters = {
         '- `primary`: emphasizes the toggle button as a primary action.\n' +
         '- `outline`: removes background styling.\n' +
         '- `subtle`: minimizes emphasis to blend into the background until hovered or focused\n' +
-        '- `transparent`: removes background and border styling.\n',
+        '- `transparent`: removes background and border styling.\n' +
+        '- `tint`: applies a tinted background with brand colors.\n',
     },
   },
 };