Skip to content

Commit ec6a650

Browse files
dmytrokirpadmytrokirpa
committed
fixup
1 parent 082e0ad commit ec6a650

File tree

13 files changed

+252
-13
lines changed

13 files changed

+252
-13
lines changed

‎packages/react-components/react-headless-components-preview/library/etc/react-headless-components-preview.api.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,8 @@ import { ToolbarGroupState as ToolbarGroupState_2 } from '@fluentui/react-toolba
134134
import type { ToolbarRadioGroupProps as ToolbarRadioGroupProps_2 } from '@fluentui/react-toolbar';
135135
import type { ToolbarRadioGroupState as ToolbarRadioGroupState_2 } from '@fluentui/react-toolbar';
136136
import type { ToolbarSlots as ToolbarSlots_2 } from '@fluentui/react-toolbar';
137+
import type { ToolbarToggleButtonBaseProps } from '@fluentui/react-toolbar';
138+
import type { ToolbarToggleButtonBaseState } from '@fluentui/react-toolbar';
137139

138140
// @public
139141
export const Accordion: ForwardRefComponent<AccordionProps>;
@@ -591,6 +593,9 @@ export const renderToolbarGroup: (state: ToolbarGroupState_2) => JSXElement;
591593
// @public
592594
export const renderToolbarRadioGroup: (state: ToolbarGroupState_2) => JSXElement;
593595

596+
// @public
597+
export const renderToolbarToggleButton: (state: ButtonBaseState) => JSXElement;
598+
594599
// @public
595600
export const SearchBox: ForwardRefComponent<SearchBoxProps>;
596601

@@ -860,6 +865,24 @@ export type ToolbarState = ToolbarBaseState & {
860865
};
861866
};
862867

868+
// @public
869+
export const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps>;
870+
871+
// @public (undocumented)
872+
export type ToolbarToggleButtonProps = ToolbarToggleButtonBaseProps & {
873+
vertical?: boolean;
874+
};
875+
876+
// @public (undocumented)
877+
export type ToolbarToggleButtonState = ToolbarToggleButtonBaseState & {
878+
root: {
879+
'data-disabled'?: string;
880+
'data-disabled-focusable'?: string;
881+
'data-icon-only'?: string;
882+
'data-checked'?: string;
883+
};
884+
};
885+
863886
// @public
864887
export const useAccordion: (props: AccordionProps, ref: React_2.Ref<HTMLElement>) => AccordionState;
865888

@@ -995,6 +1018,9 @@ export const useToolbarGroup: (props: ToolbarGroupProps, ref: React_2.Ref<HTMLDi
9951018
// @public
9961019
export const useToolbarRadioGroup: (props: ToolbarRadioGroupProps, ref: React_2.Ref<HTMLDivElement>) => ToolbarRadioGroupState;
9971020

1021+
// @public
1022+
export const useToolbarToggleButton: (props: ToolbarToggleButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarToggleButtonState;
1023+
9981024
// (No @packageDocumentation comment for this package)
9991025

10001026
```

‎packages/react-components/react-headless-components-preview/library/src/Toolbar.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,6 @@ export type { ToolbarGroupProps, ToolbarGroupState } from './components/Toolbar'
1212

1313
export { ToolbarRadioGroup, renderToolbarRadioGroup, useToolbarRadioGroup } from './components/Toolbar';
1414
export type { ToolbarRadioGroupProps, ToolbarRadioGroupState } from './components/Toolbar';
15+
16+
export { ToolbarToggleButton, renderToolbarToggleButton, useToolbarToggleButton } from './components/Toolbar';
17+
export type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './components/Toolbar';

‎packages/react-components/react-headless-components-preview/library/src/components/Toolbar/ToolbarToggleButton/ToolbarToggleButton.test.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import * as React from 'react';
2+
import { render } from '@testing-library/react';
3+
import { Toolbar } from '../Toolbar';
4+
import { ToolbarToggleButton } from './ToolbarToggleButton';
5+
6+
describe('ToolbarToggleButton', () => {
7+
it('renders unchecked by default', () => {
8+
const { getByRole } = render(
9+
<Toolbar>
10+
<ToolbarToggleButton name="format" value="bold">
11+
Bold
12+
</ToolbarToggleButton>
13+
</Toolbar>,
14+
);
15+
16+
const button = getByRole('button', { name: 'Bold' });
17+
expect(button).toHaveAttribute('aria-pressed', 'false');
18+
expect(button).not.toHaveAttribute('data-checked');
19+
});
20+
21+
it('renders checked when value is in toolbar checkedValues', () => {
22+
const { getByRole } = render(
23+
<Toolbar defaultCheckedValues={{ format: ['bold'] }}>
24+
<ToolbarToggleButton name="format" value="bold">
25+
Bold
26+
</ToolbarToggleButton>
27+
</Toolbar>,
28+
);
29+
30+
const button = getByRole('button', { name: 'Bold' });
31+
expect(button).toHaveAttribute('aria-pressed', 'true');
32+
expect(button).toHaveAttribute('data-checked');
33+
});
34+
});

‎packages/react-components/react-headless-components-preview/library/src/components/Toolbar/ToolbarToggleButton/ToolbarToggleButton.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
'use client';
2+
3+
import * as React from 'react';
4+
import type { ForwardRefComponent } from '@fluentui/react-utilities';
5+
import type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';
6+
import { useToolbarToggleButton } from './useToolbarToggleButton';
7+
import { renderToolbarToggleButton } from './renderToolbarToggleButton';
8+
9+
/**
10+
* A toggle button designed to be used inside a Toolbar with toolbar toggle-group behavior.
11+
*/
12+
export const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {
13+
const state = useToolbarToggleButton(props, ref);
14+
15+
return renderToolbarToggleButton(state);
16+
});
17+
18+
ToolbarToggleButton.displayName = 'ToolbarToggleButton';

‎packages/react-components/react-headless-components-preview/library/src/components/Toolbar/ToolbarToggleButton/ToolbarToggleButton.types.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import type { ToolbarToggleButtonBaseProps, ToolbarToggleButtonBaseState } from '@fluentui/react-toolbar';
2+
3+
export type ToolbarToggleButtonProps = ToolbarToggleButtonBaseProps & {
4+
/**
5+
* Whether the toolbar toggle button is in a vertically oriented toolbar.
6+
*/
7+
vertical?: boolean;
8+
};
9+
10+
export type ToolbarToggleButtonState = ToolbarToggleButtonBaseState & {
11+
root: {
12+
/**
13+
* Data attribute set when the button is disabled.
14+
*/
15+
'data-disabled'?: string;
16+
17+
/**
18+
* Data attribute set when the button is disabled but still focusable.
19+
*/
20+
'data-disabled-focusable'?: string;
21+
22+
/**
23+
* Data attribute set when the button renders only an icon.
24+
*/
25+
'data-icon-only'?: string;
26+
27+
/**
28+
* Data attribute set when the button is in a checked (pressed) state.
29+
*/
30+
'data-checked'?: string;
31+
};
32+
};

‎packages/react-components/react-headless-components-preview/library/src/components/Toolbar/ToolbarToggleButton/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export { ToolbarToggleButton } from './ToolbarToggleButton';
2+
export { renderToolbarToggleButton } from './renderToolbarToggleButton';
3+
export { useToolbarToggleButton } from './useToolbarToggleButton';
4+
export type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';

‎packages/react-components/react-headless-components-preview/library/src/components/Toolbar/ToolbarToggleButton/renderToolbarToggleButton.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { renderToggleButton_unstable } from '@fluentui/react-button';
2+
3+
/**
4+
* Renders the final JSX of the ToolbarToggleButton component, given the state.
5+
*/
6+
export const renderToolbarToggleButton = renderToggleButton_unstable;

‎packages/react-components/react-headless-components-preview/library/src/components/Toolbar/ToolbarToggleButton/useToolbarToggleButton.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
'use client';
2+
3+
import type * as React from 'react';
4+
import { useToolbarToggleButtonBase_unstable } from '@fluentui/react-toolbar';
5+
6+
import type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';
7+
import { stringifyDataAttribute } from '../../../utils';
8+
9+
/**
10+
* Returns the state for a ToolbarToggleButton component, given its props and ref.
11+
* The returned state can be modified with hooks before being passed to `renderToolbarToggleButton`.
12+
*/
13+
export const useToolbarToggleButton = (
14+
props: ToolbarToggleButtonProps,
15+
ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
16+
): ToolbarToggleButtonState => {
17+
'use no memo';
18+
19+
const state: ToolbarToggleButtonState = useToolbarToggleButtonBase_unstable(props, ref);
20+
21+
state.root['data-disabled'] = stringifyDataAttribute(state.disabled);
22+
state.root['data-disabled-focusable'] = stringifyDataAttribute(state.disabledFocusable);
23+
state.root['data-icon-only'] = stringifyDataAttribute(state.iconOnly);
24+
state.root['data-checked'] = stringifyDataAttribute(state.checked);
25+
26+
return state;
27+
};

‎packages/react-components/react-headless-components-preview/library/src/components/Toolbar/index.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,8 @@ export { ToolbarRadioGroup } from './ToolbarRadioGroup';
2424
export { renderToolbarRadioGroup } from './ToolbarRadioGroup';
2525
export { useToolbarRadioGroup } from './ToolbarRadioGroup';
2626
export type { ToolbarRadioGroupProps, ToolbarRadioGroupState } from './ToolbarRadioGroup';
27+
28+
export { ToolbarToggleButton } from './ToolbarToggleButton';
29+
export { renderToolbarToggleButton } from './ToolbarToggleButton';
30+
export { useToolbarToggleButton } from './ToolbarToggleButton';
31+
export type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton';

‎packages/react-components/react-headless-components-preview/library/src/index.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,9 @@ export {
167167
ToolbarRadioGroup,
168168
renderToolbarRadioGroup,
169169
useToolbarRadioGroup,
170+
ToolbarToggleButton,
171+
renderToolbarToggleButton,
172+
useToolbarToggleButton,
170173
} from './Toolbar';
171174
export type {
172175
ToolbarSlots,
@@ -181,4 +184,6 @@ export type {
181184
ToolbarGroupState,
182185
ToolbarRadioGroupProps,
183186
ToolbarRadioGroupState,
187+
ToolbarToggleButtonProps,
188+
ToolbarToggleButtonState,
184189
} from './Toolbar';

0 commit comments

Comments
 (0)