Skip to content

Commit c93849c

Browse files
dmytrokirpadmytrokirpa
authored
feat(react-toolbar): expose base hooks and types for Toolbar components (#35903)
1 parent 800dd31 commit c93849c

12 files changed

Lines changed: 136 additions & 53 deletions

File tree

‎change/@fluentui-react-toolbar-c4d2e81f-6a3b-4c90-d5e7-1f8b2a3c4d5e.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "minor",
3+
"comment": "feat: expose base hooks for Toolbar components",
4+
"packageName": "@fluentui/react-toolbar",
5+
"email": "dmytrokirpa@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

‎packages/react-components/react-toolbar/library/etc/react-toolbar.api.md‎

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import type { ButtonState } from '@fluentui/react-button';
1010
import type { ComponentProps } from '@fluentui/react-utilities';
1111
import type { ComponentState } from '@fluentui/react-utilities';
1212
import type { ContextSelector } from '@fluentui/react-context-selector';
13+
import type { DistributiveOmit } from '@fluentui/react-utilities';
14+
import type { DividerBaseState } from '@fluentui/react-divider';
1315
import type { DividerSlots } from '@fluentui/react-divider';
1416
import type { DividerState } from '@fluentui/react-divider';
1517
import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -21,17 +23,29 @@ import type { ToggleButtonProps } from '@fluentui/react-button';
2123
import type { ToggleButtonState } from '@fluentui/react-button';
2224

2325
// @public
24-
export const renderToolbar_unstable: (state: ToolbarState, contextValues: ToolbarContextValues) => JSXElement;
26+
export const renderToolbar_unstable: (state: ToolbarBaseState, contextValues: ToolbarContextValues) => JSXElement;
2527

2628
// @public
2729
export const renderToolbarGroup_unstable: (state: ToolbarGroupState) => JSXElement;
2830

2931
// @public
3032
export const Toolbar: ForwardRefComponent<ToolbarProps>;
3133

34+
// @public (undocumented)
35+
export type ToolbarBaseProps = Omit<ToolbarProps, 'size'>;
36+
37+
// @public (undocumented)
38+
export type ToolbarBaseState = Omit<ToolbarState, 'size'>;
39+
3240
// @public
3341
export const ToolbarButton: ForwardRefComponent<ToolbarButtonProps>;
3442

43+
// @public (undocumented)
44+
export type ToolbarButtonBaseProps = DistributiveOmit<ToolbarButtonProps, 'appearance'>;
45+
46+
// @public (undocumented)
47+
export type ToolbarButtonBaseState = DistributiveOmit<ToolbarButtonState, 'appearance' | 'size' | 'shape'>;
48+
3549
// @public
3650
export type ToolbarButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ButtonProps, 'disabled' | 'disabledFocusable'>> & {
3751
appearance?: 'primary' | 'subtle' | 'transparent';
@@ -59,6 +73,12 @@ export type ToolbarContextValues = {
5973
// @public
6074
export const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps>;
6175

76+
// @public (undocumented)
77+
export type ToolbarDividerBaseProps = ToolbarDividerProps;
78+
79+
// @public (undocumented)
80+
export type ToolbarDividerBaseState = ComponentState<Partial<DividerSlots>> & DividerBaseState;
81+
6282
// @public
6383
export type ToolbarDividerProps = ComponentProps<Partial<DividerSlots>> & {
6484
vertical?: boolean;
@@ -93,6 +113,12 @@ export type ToolbarProps = ComponentProps<ToolbarSlots> & {
93113
// @public
94114
export const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps>;
95115

116+
// @public (undocumented)
117+
export type ToolbarRadioButtonBaseProps = DistributiveOmit<ToolbarRadioButtonProps, 'appearance'>;
118+
119+
// @public (undocumented)
120+
export type ToolbarRadioButtonBaseState = DistributiveOmit<ToolbarRadioButtonState, 'appearance' | 'size' | 'shape'>;
121+
96122
// @public
97123
export type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
98124
appearance?: 'primary' | 'subtle' | 'transparent';
@@ -126,6 +152,12 @@ export type ToolbarState = ComponentState<ToolbarSlots> & Required<Pick<ToolbarP
126152
// @public
127153
export const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps>;
128154

155+
// @public (undocumented)
156+
export type ToolbarToggleButtonBaseProps = DistributiveOmit<ToolbarToggleButtonProps, 'appearance'>;
157+
158+
// @public (undocumented)
159+
export type ToolbarToggleButtonBaseState = DistributiveOmit<ToolbarToggleButtonState, 'appearance' | 'size' | 'shape'>;
160+
129161
// @public
130162
export type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
131163
appearance?: 'primary' | 'subtle' | 'transparent';
@@ -139,9 +171,15 @@ export type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> & To
139171
// @public
140172
export const useToolbar_unstable: (props: ToolbarProps, ref: React_2.Ref<HTMLElement>) => ToolbarState;
141173

174+
// @internal
175+
export const useToolbarBase_unstable: (props: ToolbarBaseProps, ref: React_2.Ref<HTMLElement>) => ToolbarBaseState;
176+
142177
// @public
143178
export const useToolbarButton_unstable: (props: ToolbarButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarButtonState;
144179

180+
// @internal
181+
export const useToolbarButtonBase_unstable: (props: ToolbarButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarButtonBaseState;
182+
145183
// @public
146184
export const useToolbarButtonStyles_unstable: (state: ToolbarButtonState) => void;
147185

@@ -154,6 +192,9 @@ export function useToolbarContextValues_unstable(state: ToolbarState): ToolbarCo
154192
// @public
155193
export const useToolbarDivider_unstable: (props: ToolbarDividerProps, ref: React_2.Ref<HTMLElement>) => ToolbarDividerState;
156194

195+
// @internal
196+
export const useToolbarDividerBase_unstable: (props: ToolbarDividerBaseProps, ref: React_2.Ref<HTMLElement>) => ToolbarDividerBaseState;
197+
157198
// @public
158199
export const useToolbarDividerStyles_unstable: (state: ToolbarDividerState) => ToolbarDividerState;
159200

@@ -166,6 +207,9 @@ export const useToolbarGroupStyles_unstable: (state: ToolbarGroupState) => Toolb
166207
// @public
167208
export const useToolbarRadioButton_unstable: (props: ToolbarRadioButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarRadioButtonState;
168209

210+
// @internal
211+
export const useToolbarRadioButtonBase_unstable: (props: ToolbarRadioButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarRadioButtonBaseState;
212+
169213
// @public
170214
export const useToolbarRadioButtonStyles_unstable: (state: ToolbarRadioButtonState) => ToolbarRadioButtonState;
171215

@@ -175,6 +219,9 @@ export const useToolbarStyles_unstable: (state: ToolbarState) => ToolbarState;
175219
// @public
176220
export const useToolbarToggleButton_unstable: (props: ToolbarToggleButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarToggleButtonState;
177221

222+
// @internal
223+
export const useToolbarToggleButtonBase_unstable: (props: ToolbarToggleButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarToggleButtonBaseState;
224+
178225
// @public
179226
export const useToolbarToggleButtonStyles_unstable: (state: ToolbarToggleButtonState) => ToolbarToggleButtonState;
180227

‎packages/react-components/react-toolbar/library/src/components/Toolbar/renderToolbar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
/** @jsxImportSource @fluentui/react-jsx-runtime */
33
import { assertSlots } from '@fluentui/react-utilities';
44
import type { JSXElement } from '@fluentui/react-utilities';
5-
import type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';
5+
import type { ToolbarBaseState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';
66
import { ToolbarContext } from './ToolbarContext';
77

88
/**
99
* Render the final JSX of Toolbar
1010
*/
11-
export const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues): JSXElement => {
11+
export const renderToolbar_unstable = (state: ToolbarBaseState, contextValues: ToolbarContextValues): JSXElement => {
1212
assertSlots<ToolbarSlots>(state);
1313

1414
return (

‎packages/react-components/react-toolbar/library/src/components/ToolbarButton/useToolbarButton.ts‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import type * as React from 'react';
4-
import { useButton_unstable } from '@fluentui/react-button';
4+
import { useButtonBase_unstable } from '@fluentui/react-button';
55
import type {
66
ToolbarButtonBaseProps,
77
ToolbarButtonBaseState,
@@ -19,10 +19,11 @@ export const useToolbarButton_unstable = (
1919
props: ToolbarButtonProps,
2020
ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
2121
): ToolbarButtonState => {
22-
const state = useToolbarButtonBase_unstable(props, ref);
22+
const { appearance = 'subtle', ...baseProps } = props;
23+
const state = useToolbarButtonBase_unstable(baseProps, ref);
2324

2425
return {
25-
appearance: 'subtle',
26+
appearance,
2627
size: 'medium',
2728
shape: 'rounded',
2829
...state,
@@ -42,14 +43,7 @@ export const useToolbarButtonBase_unstable = (
4243
ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
4344
): ToolbarButtonBaseState => {
4445
const { vertical = false, ...buttonProps } = props;
45-
const state = useButton_unstable(
46-
{
47-
appearance: 'subtle',
48-
...buttonProps,
49-
size: 'medium',
50-
},
51-
ref,
52-
);
46+
const state = useButtonBase_unstable(buttonProps, ref);
5347

5448
return {
5549
vertical,

‎packages/react-components/react-toolbar/library/src/components/ToolbarDivider/ToolbarDivider.types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
2-
import type { DividerSlots, DividerState } from '@fluentui/react-divider';
2+
import type { DividerSlots, DividerState, DividerBaseState } from '@fluentui/react-divider';
33

44
/**
55
* ToolbarDivider Props
@@ -20,4 +20,4 @@ export type ToolbarDividerBaseProps = ToolbarDividerProps;
2020
*/
2121
export type ToolbarDividerState = ComponentState<Partial<DividerSlots>> & DividerState;
2222

23-
export type ToolbarDividerBaseState = Omit<ToolbarDividerState, 'appearance'>;
23+
export type ToolbarDividerBaseState = ComponentState<Partial<DividerSlots>> & DividerBaseState;

‎packages/react-components/react-toolbar/library/src/components/ToolbarDivider/useToolbarDivider.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import type {
77
ToolbarDividerProps,
88
ToolbarDividerState,
99
} from './ToolbarDivider.types';
10-
import { useDivider_unstable } from '@fluentui/react-divider';
10+
import { useDividerBase_unstable } from '@fluentui/react-divider';
1111
import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
1212

1313
/**
@@ -25,8 +25,10 @@ export const useToolbarDivider_unstable = (
2525
): ToolbarDividerState => {
2626
const state = useToolbarDividerBase_unstable(props, ref);
2727
return {
28-
...state,
28+
alignContent: 'center',
2929
appearance: 'default',
30+
inset: false,
31+
...state,
3032
};
3133
};
3234

@@ -43,5 +45,5 @@ export const useToolbarDividerBase_unstable = (
4345
ref: React.Ref<HTMLElement>,
4446
): ToolbarDividerBaseState => {
4547
const vertical = useToolbarContext_unstable(ctx => ctx.vertical);
46-
return useDivider_unstable({ vertical: !vertical, ...props }, ref);
48+
return useDividerBase_unstable({ vertical: !vertical, ...props }, ref);
4749
};

‎packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/ToolbarRadioButton.types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,4 @@ export type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> &
2121
Required<Pick<ToggleButtonProps, 'checked'>> &
2222
Pick<ToolbarRadioButtonProps, 'name' | 'value'>;
2323

24-
export type ToolbarRadioButtonBaseState = DistributiveOmit<ToolbarRadioButtonState, 'appearance' | 'size'>;
24+
export type ToolbarRadioButtonBaseState = DistributiveOmit<ToolbarRadioButtonState, 'appearance' | 'size' | 'shape'>;

‎packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/useToolbarRadioButton.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import type * as React from 'react';
44
import { useEventCallback } from '@fluentui/react-utilities';
5-
import { useToggleButton_unstable } from '@fluentui/react-button';
5+
import { useToggleButtonBase_unstable } from '@fluentui/react-button';
66
import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
77
import type {
88
ToolbarRadioButtonProps,
@@ -21,15 +21,15 @@ export const useToolbarRadioButton_unstable = (
2121
props: ToolbarRadioButtonProps,
2222
ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
2323
): ToolbarRadioButtonState => {
24-
const { appearance = 'secondary' } = props;
25-
const size = useToolbarContext_unstable(ctx => ctx.size);
26-
const state = useToolbarRadioButtonBase_unstable(props, ref);
24+
const contextSize = useToolbarContext_unstable(ctx => ctx.size);
25+
const { appearance = 'secondary', size = contextSize, ...baseProps } = props;
26+
const state = useToolbarRadioButtonBase_unstable(baseProps, ref);
2727

2828
return {
2929
...state,
30-
3130
appearance,
32-
size: props.size || size,
31+
size,
32+
shape: 'rounded',
3333
};
3434
};
3535

@@ -49,7 +49,7 @@ export const useToolbarRadioButtonBase_unstable = (
4949
const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));
5050

5151
const { onClick: onClickOriginal } = props;
52-
const toggleButtonState = useToggleButton_unstable(
52+
const toggleButtonState = useToggleButtonBase_unstable(
5353
{ checked, role: 'radio', 'aria-checked': checked, ...props },
5454
ref,
5555
);

‎packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/ToolbarToggleButton.types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,4 @@ export type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> &
2121
Required<Pick<ToggleButtonProps, 'checked'>> &
2222
Pick<ToolbarToggleButtonProps, 'name' | 'value'>;
2323

24-
export type ToolbarToggleButtonBaseState = DistributiveOmit<ToolbarToggleButtonState, 'appearance'>;
24+
export type ToolbarToggleButtonBaseState = DistributiveOmit<ToolbarToggleButtonState, 'appearance' | 'size' | 'shape'>;

‎packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/useToolbarToggleButton.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ describe('useToolbarToggleButton_unstable', () => {
4141
const { result } = renderHook(() => useToolbarToggleButton_unstable(propsMock, ref));
4242

4343
expect(result.current).toMatchObject({
44-
appearance: 'secondary',
44+
appearance: 'subtle',
4545
checked: false,
4646
name: 'text',
4747
size: 'medium',
@@ -59,7 +59,7 @@ describe('useToolbarToggleButton_unstable', () => {
5959
);
6060

6161
expect(result.current).toMatchObject({
62-
appearance: 'secondary',
62+
appearance: 'primary',
6363
checked: true,
6464
name: 'text',
6565
size: 'small',

0 commit comments

Comments
 (0)