CompoundButton: Re-introducing CompoundButton using latest version of makeStyles

apps/vr-tests/src/stories/ReactButton.stories.tsx

@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import Screener from 'screener-storybook/src/screener';
-import { Button, ButtonProps } from '@fluentui/react-button';
+import { Button, ButtonProps, CompoundButton } from '@fluentui/react-button';
 
 import { FluentProviderDecorator, FabricDecorator } from '../utilities/index';
 
@@ -51,7 +51,7 @@ const AppearanceExample = (props: ButtonProps) => (
   </>
 );
 
-storiesOf('React Button', module)
+storiesOf('react-button Button', module)
   .addDecorator(FabricDecorator)
   .addDecorator(FluentProviderDecorator)
   .addDecorator(story => (
@@ -93,3 +93,71 @@ storiesOf('React Button', module)
       </Button>
     </>
   ));
+
+storiesOf('react-button CompoundButton', module)
+  .addDecorator(FabricDecorator)
+  .addDecorator(FluentProviderDecorator)
+  .addDecorator(story => (
+    <Screener
+      steps={new Screener.Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .hover('button')
+        .snapshot('hover', { cropTo: '.testWrapper' })
+        .mouseDown('button')
+        .snapshot('pressed', { cropTo: '.testWrapper' })
+        .executeScript(
+          "document.getElementsByClassName('testWrapper')[0].classList.add('ms-Fabric--isFocusVisible')",
+        )
+        .executeScript("document.getElementsByTagName('button')[0].focus()")
+        .snapshot('focus', { cropTo: '.testWrapper' })
+        .executeScript(
+          "document.getElementsByClassName('testWrapper')[0].classList.remove('ms-Fabric--isFocusVisible')",
+        )
+        .end()}
+    >
+      {story()}
+    </Screener>
+  ))
+  .addStory('Default', () => (
+    <CompoundButton secondaryContent="This is some secondary text">Hello, world</CompoundButton>
+  ))
+  .addStory('Primary', () => (
+    <CompoundButton secondaryContent="This is some secondary text" primary>
+      Hello, world
+    </CompoundButton>
+  ))
+  .addStory('Disabled', () => (
+    <CompoundButton secondaryContent="This is some secondary text" disabled>
+      Hello, world
+    </CompoundButton>
+  ))
+  .addStory('Primary Disabled', () => (
+    <CompoundButton secondaryContent="This is some secondary text" primary disabled>
+      Hello, world
+    </CompoundButton>
+  ))
+  .addStory('With icon before content', () => (
+    <CompoundButton secondaryContent="This is some secondary text" icon="X">
+      Hello, world
+    </CompoundButton>
+  ))
+  .addStory('With icon after content', () => (
+    <CompoundButton secondaryContent="This is some secondary text" icon="X" iconPosition="after">
+      Hello, world
+    </CompoundButton>
+  ))
+  .addStory('Size small', () => (
+    <CompoundButton secondaryContent="This is some secondary text" icon="X" size="large">
+      Hello, world
+    </CompoundButton>
+  ))
+  .addStory('Size large', () => (
+    <CompoundButton secondaryContent="This is some secondary text" icon="X" size="large">
+      Hello, world
+    </CompoundButton>
+  ))
+  .addStory('Icon only', () => (
+    <CompoundButton secondaryContent="This is some secondary text" icon="X">
+      Hello, world
+    </CompoundButton>
+  ));

change/@fluentui-react-button-7ead62e3-2881-40ba-8b5f-6dc38469b69d.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "CompoundButton: Re-introducing CompoundButton using latest version of makeStyles.",
+  "packageName": "@fluentui/react-button",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-examples-69121500-1d87-4c68-995b-458d2e8b4ded.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "CompoundButton: Re-introducing CompoundButton using latest version of makeStyles.",
+  "packageName": "@fluentui/react-examples",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -53,29 +53,34 @@ export type ButtonStyleSelectors = {
 // @public (undocumented)
 export type ButtonTokens = {
     height: string;
+    maxWidth: string;
+    minWidth: string;
     paddingX: string;
     paddingY: string;
-    minWidth: string;
-    maxWidth: string;
     fontSize: string;
     fontWeight: number;
     lineHeight: string;
-    iconWidth: string;
+    iconFontSize: string;
     iconHeight: string;
     iconSpacing: string;
-    color: string;
-    content2Color: string;
+    iconWidth: string;
     background: string;
-    backgroundHover: string;
-    backgroundPressed: string;
-    backgroundActive: string;
+    color: string;
     borderColor: string;
-    borderColorHover: string;
-    borderColorActive: string;
-    borderWidth: string;
     borderRadius: string;
+    borderWidth: string;
     shadow: string;
-    shadowPressed: string;
+    hovered: Partial<{
+        background: string;
+        borderColor: string;
+        color: string;
+    }>;
+    pressed: Partial<{
+        background: string;
+        borderColor: string;
+        color: string;
+        shadow: string;
+    }>;
 };
 
 // @public (undocumented)
@@ -86,9 +91,51 @@ export type ButtonVariantTokens = {
     [variant in ButtonVariants]: Partial<ButtonTokens>;
 };
 
+// @public
+export const CompoundButton: React.ForwardRefExoticComponent<CompoundButtonProps & React.RefAttributes<HTMLElement>>;
+
+// @public (undocumented)
+export interface CompoundButtonProps extends ButtonProps {
+    contentContainer?: ShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
+    secondaryContent?: ShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
+}
+
+// @public
+export const compoundButtonShorthandProps: string[];
+
+// @public (undocumented)
+export interface CompoundButtonState extends Omit<CompoundButtonProps, 'children' | 'icon'>, ButtonState {
+    // (undocumented)
+    contentContainer?: ObjectShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
+    // (undocumented)
+    secondaryContent?: ObjectShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
+}
+
+// @public (undocumented)
+export type CompoundButtonStyleSelectors = ButtonStyleSelectors;
+
+// Warning: (ae-forgotten-export) The symbol "CompoundButtonBaseTokens" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export type CompoundButtonTokens = ButtonTokens & CompoundButtonBaseTokens & {
+    hovered: Partial<CompoundButtonBaseTokens>;
+    pressed: Partial<CompoundButtonBaseTokens>;
+};
+
+// @public (undocumented)
+export type CompoundButtonVariants = ButtonVariants;
+
+// @public (undocumented)
+export type CompoundButtonVariantTokens = {
+    [variant in CompoundButtonVariants]: Partial<CompoundButtonTokens>;
+};
+
 // @public
 export const renderButton: (state: ButtonState) => JSX.Element;
 
+// @public
+export const renderCompoundButton: (state: CompoundButtonState) => JSX.Element;
+
 // @public
 export const useButton: (props: ButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ButtonProps | undefined) => ButtonState;
 
@@ -98,6 +145,12 @@ export const useButtonState: (draftState: ButtonState) => void;
 // @public (undocumented)
 export const useButtonStyles: (state: ButtonState, selectors: ButtonStyleSelectors) => void;
 
+// @public
+export const useCompoundButton: (props: CompoundButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: CompoundButtonProps | undefined) => CompoundButtonState;
+
+// @public (undocumented)
+export const useCompoundButtonStyles: (state: CompoundButtonState, selectors: import("../Button").ButtonStyleSelectors) => void;
+
 
 // (No @packageDocumentation comment for this package)
 

packages/react-button/src/CompoundButton.ts

@@ -0,0 +1 @@
+export * from './components/CompoundButton/index';

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

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { ComponentProps, ShorthandProps } from '@fluentui/react-utilities';
 import { ObjectShorthandProps } from '@fluentui/react-utilities';
 
+/**
+ * {@docCategory Button}
+ */
 export type ButtonProps = ComponentProps &
   React.ButtonHTMLAttributes<HTMLElement> & {
     /**
@@ -63,58 +66,76 @@ export interface ButtonState extends ButtonProps {
   children?: ObjectShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
 }
 
+/**
+ * {@docCategory Button}
+ */
 export type ButtonStyleSelectors = {
   disabled?: boolean;
   iconOnly?: boolean;
   primary?: boolean;
   size?: string;
 };
 
-export type ButtonVariants =
-  | 'base'
-  | 'disabled'
-  | 'iconOnly'
-  | 'primary'
-  | 'small'
-  | 'large'
-  // TODO: get rid of these combinations, use individual variants in matchers
-  | 'primaryDisabled'
-  | 'iconOnlySmall'
-  | 'iconOnlyLarge';
-
+/**
+ * {@docCategory Button}
+ */
 export type ButtonTokens = {
   height: string;
+  maxWidth: string;
+  minWidth: string;
   paddingX: string;
   paddingY: string;
-  minWidth: string;
-  maxWidth: string;
 
   fontSize: string;
   fontWeight: number;
   lineHeight: string;
 
-  iconWidth: string;
+  iconFontSize: string;
   iconHeight: string;
   iconSpacing: string;
-
-  color: string;
-  content2Color: string;
+  iconWidth: string;
 
   background: string;
-  backgroundHover: string;
-  backgroundPressed: string;
-  backgroundActive: string;
+  color: string;
 
   borderColor: string;
-  borderColorHover: string;
-  borderColorActive: string;
-  borderWidth: string;
   borderRadius: string;
+  borderWidth: string;
 
   shadow: string;
-  shadowPressed: string;
+
+  hovered: Partial<{
+    background: string;
+    borderColor: string;
+    color: string;
+  }>;
+
+  pressed: Partial<{
+    background: string;
+    borderColor: string;
+    color: string;
+    shadow: string;
+  }>;
 };
 
+/**
+ * {@docCategory Button}
+ */
+export type ButtonVariants =
+  | 'base'
+  | 'disabled'
+  | 'iconOnly'
+  | 'primary'
+  | 'small'
+  | 'large'
+  // TODO: get rid of these combinations, use individual variants in matchers
+  | 'primaryDisabled'
+  | 'iconOnlySmall'
+  | 'iconOnlyLarge';
+
+/**
+ * {@docCategory Button}
+ */
 export type ButtonVariantTokens = {
   [variant in ButtonVariants]: Partial<ButtonTokens>;
 };

packages/react-button/src/components/Button/index.ts

@@ -1,6 +1,6 @@
-export * from './Button.types';
 export * from './Button';
+export * from './Button.types';
 export * from './renderButton';
 export * from './useButton';
-export { useButtonStyles } from './useButtonStyles';
 export * from './useButtonState';
+export { useButtonStyles } from './useButtonStyles';

packages/react-button/src/components/Button/useButton.ts

@@ -23,7 +23,6 @@ export const useButton = (props: ButtonProps, ref: React.Ref<HTMLElement>, defau
       ref: resolvedRef,
       as: 'button',
       icon: { as: 'span' },
-      content: { as: 'span', children: props.children },
       loader: { as: 'span' },
     },
     defaultProps,