Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ToggleButton: Removing legacy patterns from converged component. #18506

Merged
merged 3 commits into from
Jun 10, 2021
Merged

ToggleButton: Removing legacy patterns from converged component. #18506

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e2a52ce
ToggleButton: Removing legacy patterns from converged component.
khmakoto Jun 10, 2021
579c36d
Change files
khmakoto Jun 10, 2021
2006471
Calling useButtonStyles at the end of useToggleButtonStyles function.
khmakoto Jun 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-button-53d2b6c5-0e15-4e89-a15f-8c76b5ac878b.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
24 changes: 7 additions & 17 deletions packages/react-button/etc/react-button.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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)
Expand Down
4 changes: 2 additions & 2 deletions packages/react-button/src/components/ToggleButton/ToggleButton.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand Down
14 changes: 2 additions & 12 deletions packages/react-button/src/components/ToggleButton/ToggleButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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);
});
Expand Down
30 changes: 7 additions & 23 deletions packages/react-button/src/components/ToggleButton/ToggleButton.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}
Expand All @@ -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> {}