From 81f4416b2e4135287d33ef51a151496b942456ef Mon Sep 17 00:00:00 2001 From: Ruriko Araki Date: Fri, 12 Nov 2021 11:50:52 -0800 Subject: [PATCH 1/8] Initial migration file --- packages/experimental/Button/MIGRATION.md | 185 ++++++++++++++++++++++ 1 file changed, 185 insertions(+) create mode 100644 packages/experimental/Button/MIGRATION.md diff --git a/packages/experimental/Button/MIGRATION.md b/packages/experimental/Button/MIGRATION.md new file mode 100644 index 00000000000..1bfc6f12d33 --- /dev/null +++ b/packages/experimental/Button/MIGRATION.md @@ -0,0 +1,185 @@ +# Button Migration + +## STATUS: WIP 🚧 + +This Migration guide is a work in progress and is not yet ready for use. + +## Migration from v0 Button + +### Component renames + +Common buttons now all map to `Button`: + +| v0 `Button` | Converged `Button` | +| --------------------------------------- | ---------------------------------------------------- | +| `` | `` | +| `` | `` | + +### Props that remain as is + +- `children` +- `disabled` + +### Renamed props + +### Props removed because we can get them from HTML props + +- `ariaDescription` => Getting it as `aria-description` instead +- `ariaHidden` => Getting it as `aria-hidden` instead +- `ariaLabel` => Getting it as `aria-label` instead +- `className` + +### Props removed because they were already deprecated + +- `buttonType` => Use correct component instead +- `description` => Use `secondaryText` in `CompoundButton` instead +- `renderPersistedMenuHiddenOnMount` => Removed since legacy Edge has been deprecated +- `rootProps` => Just pass the props instead +- `toggled` => Use `checked` instead in `ToggleButton` + +### Props considered for specific component variant + +- `checked` => Considered for `ToggleButton` +- `menuAs` => Considered for `MenuButton` +- `menuIconProps` => Considered for `MenuButton` +- `menuProps` => Considered for `MenuButton` +- `menuTriggerKeyCode` => Considered for `MenuButton` +- `onAfterMenuDismiss` => Considered for `MenuButton` +- `onMenuClick` => Considered for `MenuButton` +- `onRenderAriaDescription` => Considered for `CompoundButton` +- `onRenderDescription` => Considered for `CompoundButton` +- `onRenderMenu` => Considered for `MenuButton` +- `onRenderMenuIcon` => Considered for `MenuButton` +- `persistMenu` => Considered for `MenuButton` +- `primaryActionButtonProps` => Considered for `SplitButton` +- `primaryDisabled` => Considered for `SplitButton` +- `secondaryText` => Considered for `CompoundButton` +- `splitButtonAriaLabel` => Considered for `SplitButton` +- `splitButtonMenuProps` => Considered for `SplitButton` + +### Props no longer supported with an equivalent functionality in converged Button + +- `componentRef` => Use regular `ref` instead +- `iconProps` => Add the icon customized as you want via the `icon` token +- `keytipProps` => Wrap the component with the `Keytip` component instead +- `onRenderChildren` => Pass the customized `children` as you want instead +- `onRenderIcon` => Add the icon customized as you want via the `icon` token +- `primary` => Use `primary` value in `appearance` prop instead +- `onRenderText` => Add the text customized as you want by passing it as `children` instead +- `split` => Use `SplitButton` component instead +- `styles` => Use new styling system via `tokens` instead +- `text` => Pass the text as `children` instead +- `toggle` => Use `ToggleButton` component instead + +### Props no longer supported without an equivalent functionality in converged Button + +- `data` +- `defaultRender` +- `getClassNames` +- `getSplitButtonClassNames` +- `theme` +- `uniqueId` + +## Migration from v0 + +### Props that remain as is + +- `children` +- `disabled` +- `disabledFocusable` +- `icon` +- `iconPosition` +- `loader` +- `loading` +- `size` + +### Renamed props + +- `fluid` => `block` +- `text` => `transparent` + +### Props removed because we can get them from HTML props + +- `className` +- `onClick` +- `onFocus` + +### Props no longer supported with an equivalent functionality in converged Button + +- `accessibility` => Override accessibility behavior by composing the `Button` how you want +- `circular` => Use `circular` value in `shape` prop instead +- `content` => Pass the content as `children` instead +- `primary` => Use `primary` value in `appearance` prop instead +- `secondary` => Use the `Button` as it comes by default instead + +### Props TBD + +- `iconOnly` +- `inverted` + +## Property mapping + +| v8 `Button` | v0 `Button` | Converged `Button` | +| ---------------------------------- | ------------------- | ---------------------- | +| | `accessibility` | | +| `allowDisabledFocus` | `disabledFocusable` | `disabledFocusable` | +| `ariaDescription` | `aria-description` | `aria-description` | +| `ariaHidden` | `aria-hidden` | `aria-hidden` | +| `ariaLabel` | `aria-label` | `aria-label` | +| `buttonType` | | | +| `checked` | | | +| `children` | `children` | `children` | +| | `circular` | `shape=circular` | +| `className` | `className` | `className` | +| `componentRef` | | | +| `data` | | | +| `defaultRender` | | | +| `description` | | | +| `disabled` | `disabled` | `disabled` | +| `elementRef` | | `ref` | +| | `fluid` | `block` | +| `getClassNames` | | | +| `getSplitButtonClassNames` | | | +| `href` | | `href` | +| | `icon` | `icon` | +| | `iconOnly` | | +| | `iconPosition` | `iconPosition` | +| `iconProps` | | | +| | `inverted` | | +| `keytipProps` | | | +| | `loader` | `loader` | +| | `loading` | `loading` | +| `menuAs` | | | +| `menuIconProps` | | | +| `menuProps` | | | +| `menuTriggerKeyCode` | | | +| `onAfterMenuDismiss` | | | +| `onClick` | `onClick` | `onClick` | +| `onFocus` | `onFocus` | `onFocus` | +| `onMenuClick` | | | +| `onRenderAriaDescription` | | | +| `onRenderChildren` | | | +| `onRenderDescription` | | | +| `onRenderIcon` | | | +| `onRenderMenu` | | | +| `onRenderMenuIcon` | | | +| `onRenderText` | | | +| `persistMenu` | | | +| `primary` | `primary` | `appearance='primary'` | +| `primaryActionButtonProps` | | | +| `primaryDisabled` | | | +| `renderPersistedMenuHiddenOnMount` | | | +| `rootProps` | | | +| | `secondary` | | +| `secondaryText` | | | +| | `size` | `size` | +| `split` | | | +| `splitButtonAriaLabel` | | | +| `splitButtonMenuProps` | | | +| `styles` | | | +| `text` | `content` | | +| | `text` | `transparent` | +| `theme` | | | +| `toggle` | | | +| `toggled` | | | +| `uniqueId` | | | From 1aaef94f3ed8ae651c8e40015877e5c44c09322e Mon Sep 17 00:00:00 2001 From: Ruriko Araki Date: Fri, 12 Nov 2021 14:36:19 -0800 Subject: [PATCH 2/8] Initial migration file for button --- packages/experimental/Button/MIGRATION.md | 179 +++------------------- 1 file changed, 23 insertions(+), 156 deletions(-) diff --git a/packages/experimental/Button/MIGRATION.md b/packages/experimental/Button/MIGRATION.md index 1bfc6f12d33..8bdd9db198f 100644 --- a/packages/experimental/Button/MIGRATION.md +++ b/packages/experimental/Button/MIGRATION.md @@ -10,176 +10,43 @@ This Migration guide is a work in progress and is not yet ready for use. Common buttons now all map to `Button`: -| v0 `Button` | Converged `Button` | +| v0 `Button` | v1 `Button` | | --------------------------------------- | ---------------------------------------------------- | -| `` | `` | +| `` | | `` | `` | +| `` | `` | ### Props that remain as is - `children` - `disabled` - -### Renamed props - -### Props removed because we can get them from HTML props - -- `ariaDescription` => Getting it as `aria-description` instead -- `ariaHidden` => Getting it as `aria-hidden` instead -- `ariaLabel` => Getting it as `aria-label` instead -- `className` - -### Props removed because they were already deprecated - -- `buttonType` => Use correct component instead -- `description` => Use `secondaryText` in `CompoundButton` instead -- `renderPersistedMenuHiddenOnMount` => Removed since legacy Edge has been deprecated -- `rootProps` => Just pass the props instead -- `toggled` => Use `checked` instead in `ToggleButton` - -### Props considered for specific component variant - -- `checked` => Considered for `ToggleButton` -- `menuAs` => Considered for `MenuButton` -- `menuIconProps` => Considered for `MenuButton` -- `menuProps` => Considered for `MenuButton` -- `menuTriggerKeyCode` => Considered for `MenuButton` -- `onAfterMenuDismiss` => Considered for `MenuButton` -- `onMenuClick` => Considered for `MenuButton` -- `onRenderAriaDescription` => Considered for `CompoundButton` -- `onRenderDescription` => Considered for `CompoundButton` -- `onRenderMenu` => Considered for `MenuButton` -- `onRenderMenuIcon` => Considered for `MenuButton` -- `persistMenu` => Considered for `MenuButton` -- `primaryActionButtonProps` => Considered for `SplitButton` -- `primaryDisabled` => Considered for `SplitButton` -- `secondaryText` => Considered for `CompoundButton` -- `splitButtonAriaLabel` => Considered for `SplitButton` -- `splitButtonMenuProps` => Considered for `SplitButton` - -### Props no longer supported with an equivalent functionality in converged Button - -- `componentRef` => Use regular `ref` instead -- `iconProps` => Add the icon customized as you want via the `icon` token -- `keytipProps` => Wrap the component with the `Keytip` component instead -- `onRenderChildren` => Pass the customized `children` as you want instead -- `onRenderIcon` => Add the icon customized as you want via the `icon` token -- `primary` => Use `primary` value in `appearance` prop instead -- `onRenderText` => Add the text customized as you want by passing it as `children` instead -- `split` => Use `SplitButton` component instead -- `styles` => Use new styling system via `tokens` instead -- `text` => Pass the text as `children` instead -- `toggle` => Use `ToggleButton` component instead - -### Props no longer supported without an equivalent functionality in converged Button - -- `data` -- `defaultRender` -- `getClassNames` -- `getSplitButtonClassNames` -- `theme` -- `uniqueId` - -## Migration from v0 - -### Props that remain as is - -- `children` -- `disabled` -- `disabledFocusable` - `icon` -- `iconPosition` -- `loader` -- `loading` -- `size` - -### Renamed props - -- `fluid` => `block` -- `text` => `transparent` - -### Props removed because we can get them from HTML props - -- `className` - `onClick` -- `onFocus` +- `testID` +- `tooltip` -### Props no longer supported with an equivalent functionality in converged Button +### Props no longer supported with an equivalent functionality in v1 Button -- `accessibility` => Override accessibility behavior by composing the `Button` how you want -- `circular` => Use `circular` value in `shape` prop instead +- `componentRef` => Use regular `ref` instead - `content` => Pass the content as `children` instead -- `primary` => Use `primary` value in `appearance` prop instead -- `secondary` => Use the `Button` as it comes by default instead +- `endIcon` => Use `right` value for `iconPosition` prop and pass icon information into `icon` prop instead +- `startIcon` => Use `left` value for `iconPosition` prop and pass icon information into `icon` prop instead -### Props TBD +### Props no longer supported without an equivalent functionality in v1 Button -- `iconOnly` -- `inverted` +- Cannot use both `startIcon` and `endIcon` at the same time in v1 ## Property mapping -| v8 `Button` | v0 `Button` | Converged `Button` | -| ---------------------------------- | ------------------- | ---------------------- | -| | `accessibility` | | -| `allowDisabledFocus` | `disabledFocusable` | `disabledFocusable` | -| `ariaDescription` | `aria-description` | `aria-description` | -| `ariaHidden` | `aria-hidden` | `aria-hidden` | -| `ariaLabel` | `aria-label` | `aria-label` | -| `buttonType` | | | -| `checked` | | | -| `children` | `children` | `children` | -| | `circular` | `shape=circular` | -| `className` | `className` | `className` | -| `componentRef` | | | -| `data` | | | -| `defaultRender` | | | -| `description` | | | -| `disabled` | `disabled` | `disabled` | -| `elementRef` | | `ref` | -| | `fluid` | `block` | -| `getClassNames` | | | -| `getSplitButtonClassNames` | | | -| `href` | | `href` | -| | `icon` | `icon` | -| | `iconOnly` | | -| | `iconPosition` | `iconPosition` | -| `iconProps` | | | -| | `inverted` | | -| `keytipProps` | | | -| | `loader` | `loader` | -| | `loading` | `loading` | -| `menuAs` | | | -| `menuIconProps` | | | -| `menuProps` | | | -| `menuTriggerKeyCode` | | | -| `onAfterMenuDismiss` | | | -| `onClick` | `onClick` | `onClick` | -| `onFocus` | `onFocus` | `onFocus` | -| `onMenuClick` | | | -| `onRenderAriaDescription` | | | -| `onRenderChildren` | | | -| `onRenderDescription` | | | -| `onRenderIcon` | | | -| `onRenderMenu` | | | -| `onRenderMenuIcon` | | | -| `onRenderText` | | | -| `persistMenu` | | | -| `primary` | `primary` | `appearance='primary'` | -| `primaryActionButtonProps` | | | -| `primaryDisabled` | | | -| `renderPersistedMenuHiddenOnMount` | | | -| `rootProps` | | | -| | `secondary` | | -| `secondaryText` | | | -| | `size` | `size` | -| `split` | | | -| `splitButtonAriaLabel` | | | -| `splitButtonMenuProps` | | | -| `styles` | | | -| `text` | `content` | | -| | `text` | `transparent` | -| `theme` | | | -| `toggle` | | | -| `toggled` | | | -| `uniqueId` | | | +| v0 `Button` | v1 `Button` | +| -------------- | -------------- | +| `children` | `children` | +| `componentRef` | `ref` | +| `content` | | +| `disabled` | `disabled` | +| `endIcon` | `iconPosition` | +| `icon` | `icon` | +| `onClick` | `onClick` | +| `statIcon` | `iconPosition` | +| `testID` | `testID` | +| `tooltip` | `tooltip` | From 0eb23c9333fedde2cea7337fb82a3f87199dcaf1 Mon Sep 17 00:00:00 2001 From: Ruriko Araki Date: Fri, 12 Nov 2021 14:45:42 -0800 Subject: [PATCH 3/8] Initial spec file for button --- packages/experimental/Button/SPEC.md | 191 +++++++++++++++++++++++++++ 1 file changed, 191 insertions(+) create mode 100644 packages/experimental/Button/SPEC.md diff --git a/packages/experimental/Button/SPEC.md b/packages/experimental/Button/SPEC.md new file mode 100644 index 00000000000..0fbcbb6687c --- /dev/null +++ b/packages/experimental/Button/SPEC.md @@ -0,0 +1,191 @@ +# Button + +## Background + +The `Button` component enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation. + +## Sample Code + +Basic examples: + +```jsx + + + + + + + +``` + +More examples in the Tester App. + +## Variants + +### Appearance + +The `Button` component has several apparance variants depending on where it's being used: + +- The default `Button` is rendered with its default styling indicating a trigger for an action. +- 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. + +### Icon + +The `Button` component can include an `icon` that appears before or after its `children`. If an `icon` is provided without any `children`, then the `Button` becomes an icon-only `Button`. + +### Shape + +- shape="rounded": The button as rounded corners. This is the default is shape is not set. +- shape="circular": The button has completely round corners. A button of equal width and height will be a circle. +- shape="square": The button has right-angle corners. + +### Sizes + +The `Button` component supports different sizing with at least three different sizes: `small`, `medium` (default) and `large`. + +### Block + +The `Button` component can completely fill the width of its container. + +### Loading + +The `Button` component can be loading if it's waiting for another action to occur before allowing itself to be interacted with. + +## API + +### Slots + +- `root` - The outer container representing the `Button` itself that wraps everything passed via the `children` prop. +- `icon` - If specified, renders an `icon` either before or after the `children` as specified by the `iconPosition` prop. +- `loader` - If specified, renders a `loader` before the `icon` and `children` while the `loading` flag is set to `true`. + +### Props + +```ts +export type ButtonProps = ComponentPropsCompat & + React.ButtonHTMLAttributes & { + /** + * A button can have its content and borders styled for greater emphasis or to be subtle. + * - 'primary': Emphasizes the button as a primary action. + * - 'outline': Removes background styling. + * - 'subtle': Minimzes emphasis to blend into the background until hovered or focused. + * - 'transparent': Removes background and border styling. + */ + appearance?: 'primary' | 'outline' | 'subtle' | 'transparent'; + + /** + * Icon slot that, if specified, renders an icon either before or after the `children` as specified by the + * `iconPosition` prop. + */ + icon?: ShorthandPropsCompat>; + + // /** + // * Loader slot that, if specified, renders a `loader` before the `icon` and `children` while the `loading` flag + // * is set to `true`. + // */ + // loader?: ShorthandPropsCompat>; + + /** + * A button can fill the width of its container. + * @default false + */ + block?: boolean; + + /** + * A button can show that it cannot be interacted with. + * @default false + */ + disabled?: boolean; + + /** + * A button can format its icon to appear before or after its content. + * @default 'before' + */ + iconPosition?: 'before' | 'after'; + + // /** + // * A button can show a loading indicator if it is waiting for another action to happen before allowing itself to + // * be interacted with. + // * @default false + // */ + // loading?: boolean; + + /** + * A button can be rounded, circular, or square. + * @default 'rounded' + */ + shape?: 'rounded' | 'circular' | 'square'; + + /** + * A button supports different sizes. + * @default 'medium' + */ + size?: 'small' | 'medium' | 'large'; + }; +``` + +### Styling Tokens + +TBD once we decide on tokens set. + +## Behaviors + +### States + +The following section describes the different states in which a `Button` can be throughout the course of interaction with it. + +#### Enabled state + +An enabled `Button` communicates interaction by having styling that invites the user to click/tap on it to trigger an action. + +#### Disabled state + +A disabled `Button` is non-interactive, disallowing the user to click/tap on it to trigger an action. + +#### Hovered state + +A hovered `Button` changes styling to communicate that the user has placed a cursor above it. + +#### Focused state + +A focused `Button` changes styling to communicate that the user has placed keyboard focus on it. This styling is usually the same to the one in the hovered state plus extra styling on the outline to indicate keyboard focus has been placed on the component. + +#### Pressed state + +A pressed `Button` changes styling to communicate that the user is currently pressing it. + +#### Loading state + +A loading `Button` renders a `loader` before all the other content to indicate that it is waiting for another action before allowing itself to be interacted with. + +### Interaction + +#### Keyboard interaction + +The following is a set of keys that interact with the `Button` component: + +| Key | Description | +| ------- | ----------------------------- | +| `Enter` | Executes the `Button` action. | +| `Space` | Executes the `Button` action. | + +#### Cursor interaction + +- `mouseenter`: Should immediately change the styling of the `Button` so that it appears to be hovered. +- `mouseleave`: Should immediately remove the hovered styling of the `Button`. +- `mouseup`: If triggered while cursor is still inside of the `Button's` boundaries, then it should execute the `Button` and move focus to its target. + +#### Touch interaction + +The same behavior as above translated for touch events. This means that there is no equivalent for `mouseenter` and `mouseleave`, which makes it so that the hovered state cannot be accessed. + +## Accessibility + +### Expected behavior + +- Should default to render a native `button` element unless something else has been specified for the `root` slot, in which case `role="button"` should be added to it. +- Should mix in the native props expected for the `button` native element. +- Should be keyboard tabbable and focusable. From d2b39e5685b8100d87ef4ca44a379a98204b79a9 Mon Sep 17 00:00:00 2001 From: Ruriko Araki Date: Fri, 12 Nov 2021 15:09:26 -0800 Subject: [PATCH 4/8] Change files --- ...mental-button-e95962f4-54d6-41c5-b827-a4c9f0875f92.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-native-experimental-button-e95962f4-54d6-41c5-b827-a4c9f0875f92.json diff --git a/change/@fluentui-react-native-experimental-button-e95962f4-54d6-41c5-b827-a4c9f0875f92.json b/change/@fluentui-react-native-experimental-button-e95962f4-54d6-41c5-b827-a4c9f0875f92.json new file mode 100644 index 00000000000..66e35c03752 --- /dev/null +++ b/change/@fluentui-react-native-experimental-button-e95962f4-54d6-41c5-b827-a4c9f0875f92.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Initial migration file for button", + "packageName": "@fluentui-react-native/experimental-button", + "email": "ruaraki@microsoft.com", + "dependentChangeType": "none" +} From eb7f067bc8ef65491a92117af193c416bf362c12 Mon Sep 17 00:00:00 2001 From: Ruriko Araki Date: Mon, 15 Nov 2021 17:25:44 -0800 Subject: [PATCH 5/8] Remove some web stuff --- packages/experimental/Button/SPEC.md | 119 +++++++++++++-------------- 1 file changed, 59 insertions(+), 60 deletions(-) diff --git a/packages/experimental/Button/SPEC.md b/packages/experimental/Button/SPEC.md index 0fbcbb6687c..31ad6787da9 100644 --- a/packages/experimental/Button/SPEC.md +++ b/packages/experimental/Button/SPEC.md @@ -65,66 +65,65 @@ The `Button` component can be loading if it's waiting for another action to occu ### Props ```ts -export type ButtonProps = ComponentPropsCompat & - React.ButtonHTMLAttributes & { - /** - * A button can have its content and borders styled for greater emphasis or to be subtle. - * - 'primary': Emphasizes the button as a primary action. - * - 'outline': Removes background styling. - * - 'subtle': Minimzes emphasis to blend into the background until hovered or focused. - * - 'transparent': Removes background and border styling. - */ - appearance?: 'primary' | 'outline' | 'subtle' | 'transparent'; - - /** - * Icon slot that, if specified, renders an icon either before or after the `children` as specified by the - * `iconPosition` prop. - */ - icon?: ShorthandPropsCompat>; - - // /** - // * Loader slot that, if specified, renders a `loader` before the `icon` and `children` while the `loading` flag - // * is set to `true`. - // */ - // loader?: ShorthandPropsCompat>; - - /** - * A button can fill the width of its container. - * @default false - */ - block?: boolean; - - /** - * A button can show that it cannot be interacted with. - * @default false - */ - disabled?: boolean; - - /** - * A button can format its icon to appear before or after its content. - * @default 'before' - */ - iconPosition?: 'before' | 'after'; - - // /** - // * A button can show a loading indicator if it is waiting for another action to happen before allowing itself to - // * be interacted with. - // * @default false - // */ - // loading?: boolean; - - /** - * A button can be rounded, circular, or square. - * @default 'rounded' - */ - shape?: 'rounded' | 'circular' | 'square'; - - /** - * A button supports different sizes. - * @default 'medium' - */ - size?: 'small' | 'medium' | 'large'; - }; +export type ButtonProps = Omit, 'onPress'> & { + /** + * A button can have its content and borders styled for greater emphasis or to be subtle. + * - 'primary': Emphasizes the button as a primary action. + * - 'outline': Removes background styling. + * - 'subtle': Minimzes emphasis to blend into the background until hovered or focused. + * - 'transparent': Removes background and border styling. + */ + appearance?: 'primary' | 'outline' | 'subtle' | 'transparent'; + + /** + * Icon slot that, if specified, renders an icon either before or after the `children` as specified by the + * `iconPosition` prop. + */ + icon?: IconSourcesType; + + // /** + // * Loader slot that, if specified, renders a `loader` before the `icon` and `children` while the `loading` flag + // * is set to `true`. + // */ + // loader?: ShorthandPropsCompat>; + + /** + * A button can fill the width of its container. + * @default false + */ + block?: boolean; + + /** + * A button can show that it cannot be interacted with. + * @default false + */ + disabled?: boolean; + + /** + * A button can format its icon to appear before or after its content. + * @default 'before' + */ + iconPosition?: 'before' | 'after'; + + // /** + // * A button can show a loading indicator if it is waiting for another action to happen before allowing itself to + // * be interacted with. + // * @default false + // */ + // loading?: boolean; + + /** + * A button can be rounded, circular, or square. + * @default 'rounded' + */ + shape?: 'rounded' | 'circular' | 'square'; + + /** + * A button supports different sizes. + * @default 'medium' + */ + size?: 'small' | 'medium' | 'large'; +}; ``` ### Styling Tokens From 2b4a4e94b161aa9532fd19982e87806dc8f66711 Mon Sep 17 00:00:00 2001 From: Ruriko Araki Date: Tue, 16 Nov 2021 14:11:55 -0800 Subject: [PATCH 6/8] Address feedback --- packages/experimental/Button/SPEC.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/experimental/Button/SPEC.md b/packages/experimental/Button/SPEC.md index 31ad6787da9..ae2c9acf796 100644 --- a/packages/experimental/Button/SPEC.md +++ b/packages/experimental/Button/SPEC.md @@ -30,7 +30,6 @@ The `Button` component has several apparance variants depending on where it's be - The default `Button` is rendered with its default styling indicating a trigger for an action. - 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. ### Icon @@ -85,7 +84,7 @@ export type ButtonProps = Omit, 'onPress'> & { // * Loader slot that, if specified, renders a `loader` before the `icon` and `children` while the `loading` flag // * is set to `true`. // */ - // loader?: ShorthandPropsCompat>; + loader?: TBD; /** * A button can fill the width of its container. @@ -110,7 +109,7 @@ export type ButtonProps = Omit, 'onPress'> & { // * be interacted with. // * @default false // */ - // loading?: boolean; + loading?: boolean; /** * A button can be rounded, circular, or square. @@ -185,6 +184,6 @@ The same behavior as above translated for touch events. This means that there is ### Expected behavior -- Should default to render a native `button` element unless something else has been specified for the `root` slot, in which case `role="button"` should be added to it. -- Should mix in the native props expected for the `button` native element. +- Should default to adding `role="button"` to the root slot. +- Should mix in the accessibility props expected for a `button` component. - Should be keyboard tabbable and focusable. From 1497a052f93100cd7a687d00bab9a9e060e8a7dc Mon Sep 17 00:00:00 2001 From: Ruriko Araki Date: Thu, 18 Nov 2021 12:44:54 -0800 Subject: [PATCH 7/8] Address feedback --- packages/experimental/Button/SPEC.md | 29 ++++++++++++---------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/packages/experimental/Button/SPEC.md b/packages/experimental/Button/SPEC.md index ae2c9acf796..3333b762dbd 100644 --- a/packages/experimental/Button/SPEC.md +++ b/packages/experimental/Button/SPEC.md @@ -10,9 +10,6 @@ Basic examples: ```jsx - - @@ -68,9 +65,7 @@ export type ButtonProps = Omit, 'onPress'> & { /** * A button can have its content and borders styled for greater emphasis or to be subtle. * - 'primary': Emphasizes the button as a primary action. - * - 'outline': Removes background styling. * - 'subtle': Minimzes emphasis to blend into the background until hovered or focused. - * - 'transparent': Removes background and border styling. */ appearance?: 'primary' | 'outline' | 'subtle' | 'transparent'; @@ -80,11 +75,11 @@ export type ButtonProps = Omit, 'onPress'> & { */ icon?: IconSourcesType; - // /** - // * Loader slot that, if specified, renders a `loader` before the `icon` and `children` while the `loading` flag - // * is set to `true`. - // */ - loader?: TBD; + /** + * Loader slot that, if specified, renders a `loader` before the `icon` and `children` while the `loading` flag + * is set to `true`. + */ + loader?: ActivityIndicator; /** * A button can fill the width of its container. @@ -135,12 +130,10 @@ TBD once we decide on tokens set. The following section describes the different states in which a `Button` can be throughout the course of interaction with it. -#### Enabled state +#### Enabled and Disabled states An enabled `Button` communicates interaction by having styling that invites the user to click/tap on it to trigger an action. -#### Disabled state - A disabled `Button` is non-interactive, disallowing the user to click/tap on it to trigger an action. #### Hovered state @@ -172,13 +165,13 @@ The following is a set of keys that interact with the `Button` component: #### Cursor interaction -- `mouseenter`: Should immediately change the styling of the `Button` so that it appears to be hovered. -- `mouseleave`: Should immediately remove the hovered styling of the `Button`. -- `mouseup`: If triggered while cursor is still inside of the `Button's` boundaries, then it should execute the `Button` and move focus to its target. +- Cursor moves onto botton: Should immediately change the styling of the `Button` so that it appears to be hovered. +- Cursor moves out of botton: Should immediately remove the hovered styling of the `Button`. +- Mouse click: Should execute the `Button` and move focus to its target. #### Touch interaction -The same behavior as above translated for touch events. This means that there is no equivalent for `mouseenter` and `mouseleave`, which makes it so that the hovered state cannot be accessed. +The same behavior as above translated for touch events. This means that there is no equivalent for `onHoverIn` and `onHoverOut`, which makes it so that the hovered state cannot be accessed. ## Accessibility @@ -187,3 +180,5 @@ The same behavior as above translated for touch events. This means that there is - Should default to adding `role="button"` to the root slot. - Should mix in the accessibility props expected for a `button` component. - Should be keyboard tabbable and focusable. + +See [`useButton` hook](https://github.com/microsoft/fluentui-react-native/blob/master/packages/experimental/Button/src/useButton.ts) for details on accessibility props From 6f111b51a610a66ed236193bf0e12f756bb946e1 Mon Sep 17 00:00:00 2001 From: Ruriko Araki Date: Mon, 22 Nov 2021 17:02:55 -0800 Subject: [PATCH 8/8] Address feedback --- packages/experimental/Button/MIGRATION.md | 2 +- packages/experimental/Button/SPEC.md | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/experimental/Button/MIGRATION.md b/packages/experimental/Button/MIGRATION.md index 8bdd9db198f..6edf3d2a6c8 100644 --- a/packages/experimental/Button/MIGRATION.md +++ b/packages/experimental/Button/MIGRATION.md @@ -8,7 +8,7 @@ This Migration guide is a work in progress and is not yet ready for use. ### Component renames -Common buttons now all map to `Button`: +Primary and Stealth buttons now map to `Button`: | v0 `Button` | v1 `Button` | | --------------------------------------- | ---------------------------------------------------- | diff --git a/packages/experimental/Button/SPEC.md b/packages/experimental/Button/SPEC.md index 3333b762dbd..5c1ad0f5a46 100644 --- a/packages/experimental/Button/SPEC.md +++ b/packages/experimental/Button/SPEC.md @@ -158,10 +158,10 @@ A loading `Button` renders a `loader` before all the other content to indicate t The following is a set of keys that interact with the `Button` component: -| Key | Description | -| ------- | ----------------------------- | -| `Enter` | Executes the `Button` action. | -| `Space` | Executes the `Button` action. | +| Key | Description | +| ------- | ----------------------------------------------------- | +| `Enter` | Executes the function passed into the `onClick` prop. | +| `Space` | Executes the function passed into the `onClick` prop. | #### Cursor interaction