# Button Fit-Finish

## What's left?

- [ ] Go over `IButtonProps` one by one and list of the ones that are removed and ones that we still need to implement
- [ ] Run comprehensive screener tests to compare V7/V8 button and make sure no unexpected styling changes
- https://github.com/microsoft/fluentui/pull/14653
- https://screener.io/v2/dashboard/Skgr32fUL.microsoft-fluentui/xgao%2Fbutton-fit-finish
- [ ] some of the missing functionality
- [ ] menu expand keycode (recommend not doing this)
- [ ] menu persistence
- [ ] typings
- [ ] styling
- [ ] align with v7
- [ ] make sure high contrast styling is correct
- [ ] RTL - use mixins
- [ ] tests
- [ ] Test button as anchor
- [ ] Documentation updates
- [ ] New styling approach for Buttons
- [ ] Button tokens and variants
- [ ] Recomposition (useButton hook)
- [ ] migration plans for removed props
- [ ] V0 side
- [ ] chidren/as change from Levi
- [ ] P2: v0 theme -> new theme converter
- [ ] SCSS problem
- [ ] contextual RTL
- [ ] loading order (specificity issue) when working with `merge-styles`
- [ ] SSR / child window scenario

## Button props

| V7 Button | Description | V8 Button |
| -------- | -------- | -------- | -------- |
| componentRef | | ref |
| href | If provided, this component will be rendered as an anchor. | [Has bug](https://codesandbox.io/s/musing-solomon-8dvjw?file=/src/App.tsx) |
| primary | | Same |
| uniqueId | Unique id to identify the item. Typically a duplicate of key value. | Removed |
| disabled | | Same |
| allowDisabledFocus | | Removed; https://codesandbox.io/s/button-disabled-focusable-forked-xgz47?file=/src/App.tsx |
| primaryDisabled | If set to true and if this is a splitButton (split == true) then the primary action of a split button is disabled. | Removed, use item.disabled instead |
| styles | | Removed; needs documentation |
| theme | | Removed |
| checked | | only work on `ToggleButton`. |
| toggle | | use `ToggleButton` |
| className | | Same |
| ariaLabel | | aria-label |
| ariaDescription | | aria-description |
| ariaHidden || aria-hidden |
| text | Text to render button label. If text is supplied, it will override any string in button children. Other children components will be passed through after the text. | Removed. use content |
| iconProps | | use `icon` shorthand |
| menuProps | | use `menu` shorthand (can pass as is) |
| menuIconProps | | use `menuIcon` shorthand |
| split | | use`SplitButton` |
| splitButtonAriaLabel | | use `menu` shorthand |
| splitButtonMenuProps| | use `menu` shorthand |
| primaryActionButtonProps | Optional props to be applied only to the primary action button of SplitButton | |
| onAfterMenuDismiss | | Renamed to `onMenuDismiss` |
| onMenuClick | | use menu shorthand |
| onRenderIcon | | use icon shorthand |
| onRenderText | | use content shorthand |
| onRenderDescription | Custom render function for the desciption text. | use `secondaryText` shorthand on `CompoundButton`|
| onRenderAriaDescription | Custom render function for the aria description element. | |
| onRenderChildren | | |
| onRenderMenuIcon | | use `menuIcon` shorthand |
| menuAs | Render a custom menu in place of the normal one. | use `menu` shorthand |
| secondaryText | Only used for compound buttons | |
| keytipProps | | Removed; need documentation |
| menuTriggerKeyCode | a custom KeyCode that can be used to open the button menu. | |
| persistMenu | Menu will not be created or destroyed when opened or closed, instead it | create `ContextualMenu` wrapper (pass hidden) and use as default slot |

Obsolete:

  /**
   * Deprecated at v1.2.3, to be removed at \>= v2.0.0. Use specific button component instead.
   * @defaultvalue ButtonType.default
   * @deprecated Use specific button component instead.
   */

  buttonType?: ButtonType;

  /**
   * Deprecated at v0.56.2, to be removed at \>= v1.0.0. Just pass in button props instead.
   * they will be mixed into the button/anchor element rendered by the component.
   * @deprecated Use button props instead.
   */
  rootProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement>;

  /**
   * Any custom data the developer wishes to associate with the menu item.
   * Deprecated, use `checked` if setting state.
   * @deprecated unused, use `checked` if setting state.
   */
  toggled?: boolean;

  /**
   * Any custom data the developer wishes to associate with the menu item.
   */
  data?: any;

  /**
   * Method to provide the classnames to style a button.
   * The default value for this prop is the getClassnames func
   * defined in BaseButton.classnames.
   * @defaultvalue getBaseButtonClassNames
   */
  getClassNames?: (
    theme: ITheme,
    className: string,
    variantClassName: string,
    iconClassName: string | undefined,
    menuIconClassName: string | undefined,
    disabled: boolean,
    checked: boolean,
    expanded: boolean,
    hasMenu: boolean,
    isSplit: boolean | undefined,
    allowDisabledFocus: boolean,
  ) => IButtonClassNames;

  /**
   * Method to provide the classnames to style a button.
   * The default value for this prop is the getClassnames func
   * defined in BaseButton.classnames.
   * @defaultvalue getBaseSplitButtonClassNames
   */
  getSplitButtonClassNames?: (
    disabled: boolean,
    expanded: boolean,
    checked: boolean,
    allowDisabledFocus: boolean,
  ) => ISplitButtonClassNames;


  /**
   * If true, the persisted menu is rendered hidden when the button
   * initially mounts. Non-persisted menus will
   * not be in the component tree unless they are being shown
   *
   * Note: This increases the time the button will take to mount, but
   * can improve perceived menu open perf. when the user opens the menu.
   *
   * @defaultvalue undefined, equivalent to false
   *
   * @deprecated There is known bug in Edge when this prop is true where scrollbars
   * overlap with the content when a menu is first rendered hidden.
   * See: https://github.com/microsoft/fluentui/issues/9034
   * Please do not start using this. If you are already using this,
   * please make sure that you are doing so only in non-Edge browsers
   */
  renderPersistedMenuHiddenOnMount?: boolean;


  /**
   * Style for the description text if applicable (for compound buttons.)
   * Deprecated, use `secondaryText` instead.
   * @deprecated Use `secondaryText` instead.
   */
  description?: IStyle;

  /**
   * yet unknown docs
   */
  defaultRender?: any;