ToggleButton: Removing legacy patterns from converged component. (#18506

) * ToggleButton: Removing legacy patterns from converged component. * Change files * Calling useButtonStyles at the end of useToggleButtonStyles function.
microsoft · Jun 10, 2021 · 0b25e8d · 0b25e8d
1 parent 2fc9d47
commit 0b25e8d
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 312 deletions.
diff --git a/change/@fluentui-react-button-53d2b6c5-0e15-4e89-a15f-8c76b5ac878b.json b/change/@fluentui-react-button-53d2b6c5-0e15-4e89-a15f-8c76b5ac878b.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "ToggleButton: Removing legacy patterns from converged component.",
+  "packageName": "@fluentui/react-button",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-button/etc/react-button.api.md b/packages/react-button/etc/react-button.api.md
@@ -197,31 +197,21 @@ export const renderMenuButton: (state: MenuButtonState) => JSX.Element;
 // @public
 export const ToggleButton: React_2.ForwardRefExoticComponent<ToggleButtonProps & React_2.RefAttributes<HTMLElement>>;
 
+// @public (undocumented)
+export type ToggleButtonDefaultedProps = ButtonDefaultedProps;
+
 // @public (undocumented)
 export interface ToggleButtonProps extends ButtonProps {
     checked?: boolean;
     defaultChecked?: boolean;
 }
 
 // @public (undocumented)
-export interface ToggleButtonState extends Omit<ToggleButtonProps, 'children' | 'icon' | 'size'>, ButtonState {
-}
-
-// @public (undocumented)
-export type ToggleButtonStyleSelectors = ButtonStyleSelectors & {
-    checked?: boolean;
-};
+export type ToggleButtonShorthandProps = ButtonShorthandProps;
 
 // @public (undocumented)
-export type ToggleButtonTokens = ButtonTokens;
-
-// @public (undocumented)
-export type ToggleButtonVariants = ButtonVariants | 'checked' | 'checkedPrimary' | 'checkedSubtle' | 'checkedTransparent';
-
-// @public (undocumented)
-export type ToggleButtonVariantTokens = Partial<{
-    [variant in ToggleButtonVariants]: Partial<ToggleButtonTokens>;
-}>;
+export interface ToggleButtonState extends ButtonState, ComponentState<ToggleButtonProps, ToggleButtonShorthandProps, ToggleButtonDefaultedProps> {
+}
 
 // @public
 export const useButton: (props: ButtonProps, ref: React_2.Ref<HTMLElement>, defaultProps?: ButtonProps | undefined) => ButtonState;
@@ -254,7 +244,7 @@ export const useMenuButtonStyles: (state: MenuButtonState, selectors: MenuButton
 export const useToggleButton: (props: ToggleButtonProps, ref: React_2.Ref<HTMLElement>, defaultProps?: ToggleButtonProps | undefined) => ToggleButtonState;
 
 // @public (undocumented)
-export const useToggleButtonStyles: (state: ToggleButtonState, selectors: ToggleButtonStyleSelectors) => void;
+export const useToggleButtonStyles: (state: ToggleButtonState) => ToggleButtonState;
 
 
 // (No @packageDocumentation comment for this package)

diff --git a/packages/react-button/src/components/ToggleButton/ToggleButton.test.tsx b/packages/react-button/src/components/ToggleButton/ToggleButton.test.tsx
@@ -1,6 +1,6 @@
-import { ToggleButton } from './ToggleButton';
-import { isConformant } from '../../common/isConformant';
 import { validateBehavior, ComponentTestFacade, toggleButtonBehaviorDefinition } from '@fluentui/a11y-testing';
+import { isConformant } from '../../common/isConformant';
+import { ToggleButton } from './ToggleButton';
 
 describe('ToggleButton', () => {
   isConformant({

diff --git a/packages/react-button/src/components/ToggleButton/ToggleButton.tsx b/packages/react-button/src/components/ToggleButton/ToggleButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ToggleButtonProps, ToggleButtonStyleSelectors } from './ToggleButton.types';
+import { ToggleButtonProps } from './ToggleButton.types';
 import { renderToggleButton } from './renderToggleButton';
 import { useToggleButton } from './useToggleButton';
 import { useToggleButtonStyles } from './useToggleButtonStyles';
@@ -11,17 +11,7 @@ import { useToggleButtonStyles } from './useToggleButtonStyles';
 export const ToggleButton = React.forwardRef<HTMLElement, ToggleButtonProps>((props, ref) => {
   const state = useToggleButton(props, ref);
 
-  const styleSelectors: ToggleButtonStyleSelectors = {
-    checked: state.checked,
-    disabled: state.disabled,
-    iconOnly: state.iconOnly,
-    primary: state.primary,
-    size: state.size,
-    subtle: state.subtle,
-    transparent: state.transparent,
-  };
-
-  useToggleButtonStyles(state, styleSelectors);
+  useToggleButtonStyles(state);
 
   return renderToggleButton(state);
 });

diff --git a/packages/react-button/src/components/ToggleButton/ToggleButton.types.ts b/packages/react-button/src/components/ToggleButton/ToggleButton.types.ts
@@ -1,4 +1,5 @@
-import { ButtonProps, ButtonState, ButtonStyleSelectors, ButtonTokens, ButtonVariants } from '../Button/Button.types';
+import { ComponentState } from '@fluentui/react-utilities';
+import { ButtonDefaultedProps, ButtonProps, ButtonShorthandProps, ButtonState } from '../Button/Button.types';
 
 /**
  * {@docCategory Button}
@@ -24,33 +25,16 @@ export interface ToggleButtonProps extends ButtonProps {
 /**
  * {@docCategory Button}
  */
-export interface ToggleButtonState extends Omit<ToggleButtonProps, 'children' | 'icon' | 'size'>, ButtonState {}
+export type ToggleButtonShorthandProps = ButtonShorthandProps;
 
 /**
  * {@docCategory Button}
  */
-export type ToggleButtonStyleSelectors = ButtonStyleSelectors & { checked?: boolean };
+export type ToggleButtonDefaultedProps = ButtonDefaultedProps;
 
 /**
  * {@docCategory Button}
  */
-export type ToggleButtonTokens = ButtonTokens;
-
-/**
- * {@docCategory Button}
- */
-export type ToggleButtonVariants =
-  | ButtonVariants
-  | 'checked'
-  | 'checkedPrimary'
-  | 'checkedSubtle'
-  | 'checkedTransparent';
-
-/**
- * {@docCategory Button}
- */
-export type ToggleButtonVariantTokens = Partial<
-  {
-    [variant in ToggleButtonVariants]: Partial<ToggleButtonTokens>;
-  }
->;
+export interface ToggleButtonState
+  extends ButtonState,
+    ComponentState<ToggleButtonProps, ToggleButtonShorthandProps, ToggleButtonDefaultedProps> {}