-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Button: Adding various tests and updating component to include compon…
…entRef (#13718) * Updates. * useMergedRefs update to be immutable. * adding comment. * Change files * more updates. * updates * better. * Fixing unneeded style prop in button. * undo * Change files * update. * cleanup. * Removing oufr dependency from button, updating api * Update change/@fluentui-react-button-2020-06-19-15-32-16-fix-button-fixes.json Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com> * Update packages/react-button/src/components/Button/Button.types.tsx Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com> * updates. * This is wrong - styles should not be injected without being necessary. * undo! * no message Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
- Loading branch information
Showing
11 changed files
with
339 additions
and
188 deletions.
There are no files selected for viewing
8 changes: 8 additions & 0 deletions
8
change/@fluentui-react-button-2020-06-19-15-32-16-fix-button-fixes.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| { | ||
| "type": "minor", | ||
| "comment": "Button: Adding componentRef, focus method, styling, and tests.", | ||
| "packageName": "@fluentui/react-button", | ||
| "email": "dzearing@microsoft.com", | ||
| "dependentChangeType": "patch", | ||
| "date": "2020-06-19T22:32:16.380Z" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,139 +1,147 @@ | ||
| ## API Report File for "@fluentui/react-button" | ||
|
|
||
| > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). | ||
| ```ts | ||
|
|
||
| import { BaseSlots } from '@fluentui/react-compose'; | ||
| import { ColorPlateSet } from '@fluentui/react-theme-provider'; | ||
| import { ComposeOptions } from '@fluentui/react-compose'; | ||
| import { ComposePreparedOptions } from '@fluentui/react-compose'; | ||
| import * as React from 'react'; | ||
| import { SlotProps } from '@fluentui/react-compose'; | ||
|
|
||
| // @public (undocumented) | ||
| export const Button: import("@fluentui/react-compose").ComponentWithAs<"button", ButtonProps>; | ||
|
|
||
| // @public (undocumented) | ||
| export const ButtonBase: import("@fluentui/react-compose").ComponentWithAs<"button", ButtonProps>; | ||
|
|
||
| // Warning: (ae-forgotten-export) The symbol "ComposeStandardStatics" needs to be exported by the entry point index.d.ts | ||
| // | ||
| // @public (undocumented) | ||
| export interface ButtonOptions extends ComposeOptions<ButtonProps, ButtonSlots, ButtonSlotProps, ComposeStandardStatics> { | ||
| } | ||
|
|
||
| // Warning: (ae-forgotten-export) The symbol "ComponentProps" needs to be exported by the entry point index.d.ts | ||
| // | ||
| // @public (undocumented) | ||
| export interface ButtonProps extends ComponentProps, React.HTMLAttributes<HTMLButtonElement> { | ||
| circular?: boolean; | ||
| content?: ShorthandValue<{}>; | ||
| disabled?: boolean; | ||
| fluid?: boolean; | ||
| // Warning: (ae-forgotten-export) The symbol "ShorthandValue" needs to be exported by the entry point index.d.ts | ||
| icon?: ShorthandValue<{}>; | ||
| iconOnly?: boolean; | ||
| iconPosition?: 'before' | 'after'; | ||
| inverted?: boolean; | ||
| loader?: ShorthandValue<{}>; | ||
| loading?: boolean; | ||
| primary?: boolean; | ||
| secondary?: boolean; | ||
| size?: SizeValue; | ||
| // Warning: (ae-forgotten-export) The symbol "RecursivePartial" needs to be exported by the entry point index.d.ts | ||
| tokens?: RecursivePartial<ButtonTokens>; | ||
| } | ||
|
|
||
| // @public (undocumented) | ||
| export type ButtonSlotProps = SlotProps<ButtonSlots, ButtonProps, React.ButtonHTMLAttributes<HTMLButtonElement>>; | ||
|
|
||
| // @public (undocumented) | ||
| export interface ButtonSlots extends BaseSlots { | ||
| // (undocumented) | ||
| content: React.ElementType; | ||
| // (undocumented) | ||
| icon: React.ElementType; | ||
| // (undocumented) | ||
| loader: React.ElementType; | ||
| } | ||
|
|
||
| // @public (undocumented) | ||
| export interface ButtonState extends ButtonProps { | ||
| } | ||
|
|
||
| // @public (undocumented) | ||
| export type ButtonTokens = ColorPlateSet & { | ||
| padding: string; | ||
| margin: string; | ||
| height: string; | ||
| minWidth: string; | ||
| maxWidth: string; | ||
| contentGap: string; | ||
| iconSize: string; | ||
| borderRadius: string; | ||
| borderWidth: string; | ||
| boxShadow: string; | ||
| width: string; | ||
| size: { | ||
| smallest: string; | ||
| smaller: string; | ||
| small: string; | ||
| regular: string; | ||
| large: string; | ||
| larger: string; | ||
| largest: string; | ||
| }; | ||
| transform: string; | ||
| transition: string; | ||
| fontFamily: string; | ||
| fontSize: string; | ||
| fontWeight: string; | ||
| pressed: { | ||
| transform: string; | ||
| }; | ||
| }; | ||
|
|
||
| // @public (undocumented) | ||
| export type SizeValue = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest'; | ||
|
|
||
| // @public (undocumented) | ||
| export const ToggleButton: import("@fluentui/react-compose").ComponentWithAs<"button", ToggleButtonProps>; | ||
|
|
||
| // @public (undocumented) | ||
| export const ToggleButtonBase: import("@fluentui/react-compose").ComponentWithAs<"button", ToggleButtonProps & ButtonProps>; | ||
|
|
||
| // @public (undocumented) | ||
| export interface ToggleButtonOptions extends ComposeOptions<ToggleButtonProps, ToggleButtonSlots, ToggleButtonSlotProps, ComposeStandardStatics> { | ||
| } | ||
|
|
||
| // @public (undocumented) | ||
| export interface ToggleButtonProps extends ButtonProps { | ||
| checked?: boolean; | ||
| defaultChecked?: boolean; | ||
| } | ||
|
|
||
| // @public (undocumented) | ||
| export type ToggleButtonSlotProps = SlotProps<ToggleButtonSlots, ToggleButtonProps, React.ButtonHTMLAttributes<HTMLButtonElement>>; | ||
|
|
||
| // @public (undocumented) | ||
| export interface ToggleButtonSlots extends ButtonSlots { | ||
| } | ||
|
|
||
| // @public (undocumented) | ||
| export interface ToggleButtonState extends ToggleButtonProps { | ||
| } | ||
|
|
||
| // @public | ||
| export const useButton: (props: ButtonProps, ref: import("react").Ref<HTMLElement>, options: ComposePreparedOptions<{}, any, {}>) => ButtonState; | ||
|
|
||
| // Warning: (ae-forgotten-export) The symbol "ToggleProps" needs to be exported by the entry point index.d.ts | ||
| // Warning: (ae-forgotten-export) The symbol "ToggleState" needs to be exported by the entry point index.d.ts | ||
| // | ||
| // @public | ||
| export const useToggle: <TProps, TState extends TProps = TProps>(props: TProps & ToggleProps) => TState & ToggleState; | ||
|
|
||
|
|
||
| // (No @packageDocumentation comment for this package) | ||
|
|
||
| ``` | ||
| ## API Report File for "@fluentui/react-button" | ||
|
|
||
| > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). | ||
| ```ts | ||
|
|
||
| import { BaseSlots } from '@fluentui/react-compose'; | ||
| import { ColorPlateSet } from '@fluentui/react-theme-provider'; | ||
| import { ComposeOptions } from '@fluentui/react-compose'; | ||
| import { ComposePreparedOptions } from '@fluentui/react-compose'; | ||
| import * as React from 'react'; | ||
| import { SlotProps } from '@fluentui/react-compose'; | ||
|
|
||
| // @public (undocumented) | ||
| export const Button: import("@fluentui/react-compose").ComponentWithAs<"button", ButtonProps>; | ||
|
|
||
| // @public (undocumented) | ||
| export const ButtonBase: import("@fluentui/react-compose").ComponentWithAs<"button", ButtonProps>; | ||
|
|
||
| // Warning: (ae-forgotten-export) The symbol "ComposeStandardStatics" needs to be exported by the entry point index.d.ts | ||
| // | ||
| // @public (undocumented) | ||
| export interface ButtonOptions extends ComposeOptions<ButtonProps, ButtonSlots, ButtonSlotProps, ComposeStandardStatics> { | ||
| } | ||
|
|
||
| // Warning: (ae-forgotten-export) The symbol "ComponentProps" needs to be exported by the entry point index.d.ts | ||
| // | ||
| // @public (undocumented) | ||
| export interface ButtonProps extends ComponentProps, React.HTMLAttributes<HTMLButtonElement> { | ||
| circular?: boolean; | ||
| componentRef?: React.RefObject<ButtonRef>; | ||
| content?: ShorthandValue<{}>; | ||
| disabled?: boolean; | ||
| fluid?: boolean; | ||
| // Warning: (ae-forgotten-export) The symbol "ShorthandValue" needs to be exported by the entry point index.d.ts | ||
| icon?: ShorthandValue<{}>; | ||
| iconOnly?: boolean; | ||
| iconPosition?: 'before' | 'after'; | ||
| inverted?: boolean; | ||
| loader?: ShorthandValue<{}>; | ||
| loading?: boolean; | ||
| primary?: boolean; | ||
| secondary?: boolean; | ||
| size?: SizeValue; | ||
| // Warning: (ae-forgotten-export) The symbol "RecursivePartial" needs to be exported by the entry point index.d.ts | ||
| tokens?: RecursivePartial<ButtonTokens>; | ||
| } | ||
|
|
||
| // @public (undocumented) | ||
| export interface ButtonRef { | ||
| focus: () => void; | ||
| } | ||
|
|
||
| // @public (undocumented) | ||
| export type ButtonSlotProps = SlotProps<ButtonSlots, ButtonProps, React.ButtonHTMLAttributes<HTMLButtonElement>>; | ||
|
|
||
| // @public (undocumented) | ||
| export interface ButtonSlots extends BaseSlots { | ||
| // (undocumented) | ||
| content: React.ElementType; | ||
| // (undocumented) | ||
| icon: React.ElementType; | ||
| // (undocumented) | ||
| loader: React.ElementType; | ||
| } | ||
|
|
||
| // @public (undocumented) | ||
| export interface ButtonState extends ButtonProps { | ||
| // (undocumented) | ||
| buttonRef?: React.RefObject<HTMLButtonElement>; | ||
| } | ||
|
|
||
| // @public (undocumented) | ||
| export type ButtonTokens = ColorPlateSet & { | ||
| padding: string; | ||
| margin: string; | ||
| height: string; | ||
| minWidth: string; | ||
| maxWidth: string; | ||
| contentGap: string; | ||
| iconSize: string; | ||
| borderRadius: string; | ||
| borderWidth: string; | ||
| boxShadow: string; | ||
| width: string; | ||
| size: { | ||
| smallest: string; | ||
| smaller: string; | ||
| small: string; | ||
| regular: string; | ||
| large: string; | ||
| larger: string; | ||
| largest: string; | ||
| }; | ||
| transform: string; | ||
| transition: string; | ||
| fontFamily: string; | ||
| fontSize: string; | ||
| fontWeight: string; | ||
| pressed: { | ||
| transform: string; | ||
| }; | ||
| }; | ||
|
|
||
| // @public (undocumented) | ||
| export type SizeValue = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest'; | ||
|
|
||
| // @public (undocumented) | ||
| export const ToggleButton: import("@fluentui/react-compose").ComponentWithAs<"button", ToggleButtonProps>; | ||
|
|
||
| // @public (undocumented) | ||
| export const ToggleButtonBase: import("@fluentui/react-compose").ComponentWithAs<"button", ToggleButtonProps & ButtonProps>; | ||
|
|
||
| // @public (undocumented) | ||
| export interface ToggleButtonOptions extends ComposeOptions<ToggleButtonProps, ToggleButtonSlots, ToggleButtonSlotProps, ComposeStandardStatics> { | ||
| } | ||
|
|
||
| // @public (undocumented) | ||
| export interface ToggleButtonProps extends ButtonProps { | ||
| checked?: boolean; | ||
| defaultChecked?: boolean; | ||
| } | ||
|
|
||
| // @public (undocumented) | ||
| export type ToggleButtonSlotProps = SlotProps<ToggleButtonSlots, ToggleButtonProps, React.ButtonHTMLAttributes<HTMLButtonElement>>; | ||
|
|
||
| // @public (undocumented) | ||
| export interface ToggleButtonSlots extends ButtonSlots { | ||
| } | ||
|
|
||
| // @public (undocumented) | ||
| export interface ToggleButtonState extends ToggleButtonProps { | ||
| } | ||
|
|
||
| // @public | ||
| export const useButton: (props: ButtonProps, ref: import("react").Ref<HTMLElement>, options: ComposePreparedOptions<{}, any, {}>) => ButtonState; | ||
|
|
||
| // Warning: (ae-forgotten-export) The symbol "ToggleProps" needs to be exported by the entry point index.d.ts | ||
| // Warning: (ae-forgotten-export) The symbol "ToggleState" needs to be exported by the entry point index.d.ts | ||
| // | ||
| // @public | ||
| export const useToggle: <TProps, TState extends TProps = TProps>(props: TProps & ToggleProps) => TState & ToggleState; | ||
|
|
||
|
|
||
| // (No @packageDocumentation comment for this package) | ||
|
|
||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.