diff --git a/change/@fluentui-react-components-bcef16b9-804c-48f4-a270-835ac8748384.json b/change/@fluentui-react-components-bcef16b9-804c-48f4-a270-835ac8748384.json new file mode 100644 index 0000000000000..16763e8fee528 --- /dev/null +++ b/change/@fluentui-react-components-bcef16b9-804c-48f4-a270-835ac8748384.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Release `@fluentui/react-toolbar` as stable", + "packageName": "@fluentui/react-components", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-toolbar-0491daa8-2b96-481e-88d2-92fa5bba1a2b.json b/change/@fluentui-react-toolbar-0491daa8-2b96-481e-88d2-92fa5bba1a2b.json new file mode 100644 index 0000000000000..76d4c1e2c5f3d --- /dev/null +++ b/change/@fluentui-react-toolbar-0491daa8-2b96-481e-88d2-92fa5bba1a2b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Release `@fluentui/react-toolbar` as stable", + "packageName": "@fluentui/react-toolbar", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md index ad4415efc8da1..43441c19e26a8 100644 --- a/packages/react-components/react-components/etc/react-components.api.md +++ b/packages/react-components/react-components/etc/react-components.api.md @@ -389,6 +389,8 @@ import { renderTabList_unstable } from '@fluentui/react-tabs'; import { renderText_unstable } from '@fluentui/react-text'; import { renderTextarea_unstable } from '@fluentui/react-textarea'; import { renderToggleButton_unstable } from '@fluentui/react-button'; +import { renderToolbar_unstable } from '@fluentui/react-toolbar'; +import { renderToolbarGroup_unstable } from '@fluentui/react-toolbar'; import { renderTooltip_unstable } from '@fluentui/react-tooltip'; import { renderToStyleElements } from '@griffel/react'; import { resetIdsForTests } from '@fluentui/react-utilities'; @@ -484,6 +486,32 @@ import { toggleButtonClassNames } from '@fluentui/react-button'; import { ToggleButtonProps } from '@fluentui/react-button'; import { ToggleButtonState } from '@fluentui/react-button'; import { tokens } from '@fluentui/react-theme'; +import { Toolbar } from '@fluentui/react-toolbar'; +import { ToolbarButton } from '@fluentui/react-toolbar'; +import { ToolbarButtonProps } from '@fluentui/react-toolbar'; +import { ToolbarButtonState } from '@fluentui/react-toolbar'; +import { toolbarClassNames } from '@fluentui/react-toolbar'; +import { ToolbarContextValue } from '@fluentui/react-toolbar'; +import { ToolbarContextValues } from '@fluentui/react-toolbar'; +import { ToolbarDivider } from '@fluentui/react-toolbar'; +import { ToolbarDividerProps } from '@fluentui/react-toolbar'; +import { ToolbarDividerState } from '@fluentui/react-toolbar'; +import { ToolbarGroup } from '@fluentui/react-toolbar'; +import { toolbarGroupClassNames } from '@fluentui/react-toolbar'; +import { ToolbarGroupProps } from '@fluentui/react-toolbar'; +import { ToolbarGroupState } from '@fluentui/react-toolbar'; +import { ToolbarProps } from '@fluentui/react-toolbar'; +import { ToolbarRadioButton } from '@fluentui/react-toolbar'; +import { ToolbarRadioButtonProps } from '@fluentui/react-toolbar'; +import { ToolbarRadioButtonState } from '@fluentui/react-toolbar'; +import { ToolbarRadioGroup } from '@fluentui/react-toolbar'; +import { ToolbarRadioGroupProps } from '@fluentui/react-toolbar'; +import { ToolbarRadioGroupState } from '@fluentui/react-toolbar'; +import { ToolbarSlots } from '@fluentui/react-toolbar'; +import { ToolbarState } from '@fluentui/react-toolbar'; +import { ToolbarToggleButton } from '@fluentui/react-toolbar'; +import { ToolbarToggleButtonProps } from '@fluentui/react-toolbar'; +import { ToolbarToggleButtonState } from '@fluentui/react-toolbar'; import { Tooltip } from '@fluentui/react-tooltip'; import { tooltipClassNames } from '@fluentui/react-tooltip'; import { TooltipProps } from '@fluentui/react-tooltip'; @@ -635,6 +663,18 @@ import { useThemeClassName_unstable as useThemeClassName } from '@fluentui/react import { useToggleButton_unstable } from '@fluentui/react-button'; import { useToggleButtonStyles_unstable } from '@fluentui/react-button'; import { useToggleState } from '@fluentui/react-button'; +import { useToolbar_unstable } from '@fluentui/react-toolbar'; +import { useToolbarButton_unstable } from '@fluentui/react-toolbar'; +import { useToolbarButtonStyles_unstable } from '@fluentui/react-toolbar'; +import { useToolbarDivider_unstable } from '@fluentui/react-toolbar'; +import { useToolbarDividerStyles_unstable } from '@fluentui/react-toolbar'; +import { useToolbarGroup_unstable } from '@fluentui/react-toolbar'; +import { useToolbarGroupStyles_unstable } from '@fluentui/react-toolbar'; +import { useToolbarRadioButton_unstable } from '@fluentui/react-toolbar'; +import { useToolbarRadioButtonStyles_unstable } from '@fluentui/react-toolbar'; +import { useToolbarStyles_unstable } from '@fluentui/react-toolbar'; +import { useToolbarToggleButton_unstable } from '@fluentui/react-toolbar'; +import { useToolbarToggleButtonStyles_unstable } from '@fluentui/react-toolbar'; import { useTooltip_unstable } from '@fluentui/react-tooltip'; import { useTooltipStyles_unstable } from '@fluentui/react-tooltip'; import { useTooltipVisibility_unstable as useTooltipVisibility } from '@fluentui/react-shared-contexts'; @@ -1412,6 +1452,10 @@ export { renderTextarea_unstable } export { renderToggleButton_unstable } +export { renderToolbar_unstable } + +export { renderToolbarGroup_unstable } + export { renderTooltip_unstable } export { renderToStyleElements } @@ -1602,6 +1646,58 @@ export { ToggleButtonState } export { tokens } +export { Toolbar } + +export { ToolbarButton } + +export { ToolbarButtonProps } + +export { ToolbarButtonState } + +export { toolbarClassNames } + +export { ToolbarContextValue } + +export { ToolbarContextValues } + +export { ToolbarDivider } + +export { ToolbarDividerProps } + +export { ToolbarDividerState } + +export { ToolbarGroup } + +export { toolbarGroupClassNames } + +export { ToolbarGroupProps } + +export { ToolbarGroupState } + +export { ToolbarProps } + +export { ToolbarRadioButton } + +export { ToolbarRadioButtonProps } + +export { ToolbarRadioButtonState } + +export { ToolbarRadioGroup } + +export { ToolbarRadioGroupProps } + +export { ToolbarRadioGroupState } + +export { ToolbarSlots } + +export { ToolbarState } + +export { ToolbarToggleButton } + +export { ToolbarToggleButtonProps } + +export { ToolbarToggleButtonState } + export { Tooltip } export { tooltipClassNames } @@ -1904,6 +2000,30 @@ export { useToggleButtonStyles_unstable } export { useToggleState } +export { useToolbar_unstable } + +export { useToolbarButton_unstable } + +export { useToolbarButtonStyles_unstable } + +export { useToolbarDivider_unstable } + +export { useToolbarDividerStyles_unstable } + +export { useToolbarGroup_unstable } + +export { useToolbarGroupStyles_unstable } + +export { useToolbarRadioButton_unstable } + +export { useToolbarRadioButtonStyles_unstable } + +export { useToolbarStyles_unstable } + +export { useToolbarToggleButton_unstable } + +export { useToolbarToggleButtonStyles_unstable } + export { useTooltip_unstable } export { useTooltipStyles_unstable } diff --git a/packages/react-components/react-components/etc/react-components.unstable.api.md b/packages/react-components/react-components/etc/react-components.unstable.api.md index a77f2a1d8e415..34749f513b092 100644 --- a/packages/react-components/react-components/etc/react-components.unstable.api.md +++ b/packages/react-components/react-components/etc/react-components.unstable.api.md @@ -173,8 +173,6 @@ import { renderTableHeader_unstable } from '@fluentui/react-table'; import { renderTableHeaderCell_unstable } from '@fluentui/react-table'; import { renderTableRow_unstable } from '@fluentui/react-table'; import { renderTableSelectionCell_unstable } from '@fluentui/react-table'; -import { renderToolbar_unstable } from '@fluentui/react-toolbar'; -import { renderToolbarGroup_unstable } from '@fluentui/react-toolbar'; import { Select } from '@fluentui/react-select'; import { selectClassNames } from '@fluentui/react-select'; import { SelectField_unstable as SelectField } from '@fluentui/react-select'; @@ -259,32 +257,6 @@ import { TableState } from '@fluentui/react-table'; import { TextareaField_unstable as TextareaField } from '@fluentui/react-textarea'; import { textareaFieldClassNames } from '@fluentui/react-textarea'; import { TextareaFieldProps_unstable as TextareaFieldProps } from '@fluentui/react-textarea'; -import { Toolbar } from '@fluentui/react-toolbar'; -import { ToolbarButton } from '@fluentui/react-toolbar'; -import { ToolbarButtonProps } from '@fluentui/react-toolbar'; -import { ToolbarButtonState } from '@fluentui/react-toolbar'; -import { toolbarClassNames } from '@fluentui/react-toolbar'; -import { ToolbarContextValue } from '@fluentui/react-toolbar'; -import { ToolbarContextValues } from '@fluentui/react-toolbar'; -import { ToolbarDivider } from '@fluentui/react-toolbar'; -import { ToolbarDividerProps } from '@fluentui/react-toolbar'; -import { ToolbarDividerState } from '@fluentui/react-toolbar'; -import { ToolbarGroup } from '@fluentui/react-toolbar'; -import { toolbarGroupClassNames } from '@fluentui/react-toolbar'; -import { ToolbarGroupProps } from '@fluentui/react-toolbar'; -import { ToolbarGroupState } from '@fluentui/react-toolbar'; -import { ToolbarProps } from '@fluentui/react-toolbar'; -import { ToolbarRadioButton } from '@fluentui/react-toolbar'; -import { ToolbarRadioButtonProps } from '@fluentui/react-toolbar'; -import { ToolbarRadioButtonState } from '@fluentui/react-toolbar'; -import { ToolbarRadioGroup } from '@fluentui/react-toolbar'; -import { ToolbarRadioGroupProps } from '@fluentui/react-toolbar'; -import { ToolbarRadioGroupState } from '@fluentui/react-toolbar'; -import { ToolbarSlots } from '@fluentui/react-toolbar'; -import { ToolbarState } from '@fluentui/react-toolbar'; -import { ToolbarToggleButton } from '@fluentui/react-toolbar'; -import { ToolbarToggleButtonProps } from '@fluentui/react-toolbar'; -import { ToolbarToggleButtonState } from '@fluentui/react-toolbar'; import { useAlert_unstable } from '@fluentui/react-alert'; import { useAlertStyles_unstable } from '@fluentui/react-alert'; import { useCard_unstable } from '@fluentui/react-card'; @@ -356,18 +328,6 @@ import { useTableSelectionCell_unstable } from '@fluentui/react-table'; import { useTableSelectionCellStyles_unstable } from '@fluentui/react-table'; import { useTableSort } from '@fluentui/react-table'; import { useTableStyles_unstable } from '@fluentui/react-table'; -import { useToolbar_unstable } from '@fluentui/react-toolbar'; -import { useToolbarButton_unstable } from '@fluentui/react-toolbar'; -import { useToolbarButtonStyles_unstable } from '@fluentui/react-toolbar'; -import { useToolbarDivider_unstable } from '@fluentui/react-toolbar'; -import { useToolbarDividerStyles_unstable } from '@fluentui/react-toolbar'; -import { useToolbarGroup_unstable } from '@fluentui/react-toolbar'; -import { useToolbarGroupStyles_unstable } from '@fluentui/react-toolbar'; -import { useToolbarRadioButton_unstable } from '@fluentui/react-toolbar'; -import { useToolbarRadioButtonStyles_unstable } from '@fluentui/react-toolbar'; -import { useToolbarStyles_unstable } from '@fluentui/react-toolbar'; -import { useToolbarToggleButton_unstable } from '@fluentui/react-toolbar'; -import { useToolbarToggleButtonStyles_unstable } from '@fluentui/react-toolbar'; export { Alert } @@ -707,10 +667,6 @@ export { renderTableRow_unstable } export { renderTableSelectionCell_unstable } -export { renderToolbar_unstable } - -export { renderToolbarGroup_unstable } - export { Select } export { selectClassNames } @@ -879,58 +835,6 @@ export { textareaFieldClassNames } export { TextareaFieldProps } -export { Toolbar } - -export { ToolbarButton } - -export { ToolbarButtonProps } - -export { ToolbarButtonState } - -export { toolbarClassNames } - -export { ToolbarContextValue } - -export { ToolbarContextValues } - -export { ToolbarDivider } - -export { ToolbarDividerProps } - -export { ToolbarDividerState } - -export { ToolbarGroup } - -export { toolbarGroupClassNames } - -export { ToolbarGroupProps } - -export { ToolbarGroupState } - -export { ToolbarProps } - -export { ToolbarRadioButton } - -export { ToolbarRadioButtonProps } - -export { ToolbarRadioButtonState } - -export { ToolbarRadioGroup } - -export { ToolbarRadioGroupProps } - -export { ToolbarRadioGroupState } - -export { ToolbarSlots } - -export { ToolbarState } - -export { ToolbarToggleButton } - -export { ToolbarToggleButtonProps } - -export { ToolbarToggleButtonState } - export { useAlert_unstable } export { useAlertStyles_unstable } @@ -1073,30 +977,6 @@ export { useTableSort } export { useTableStyles_unstable } -export { useToolbar_unstable } - -export { useToolbarButton_unstable } - -export { useToolbarButtonStyles_unstable } - -export { useToolbarDivider_unstable } - -export { useToolbarDividerStyles_unstable } - -export { useToolbarGroup_unstable } - -export { useToolbarGroupStyles_unstable } - -export { useToolbarRadioButton_unstable } - -export { useToolbarRadioButtonStyles_unstable } - -export { useToolbarStyles_unstable } - -export { useToolbarToggleButton_unstable } - -export { useToolbarToggleButtonStyles_unstable } - // (No @packageDocumentation comment for this package) ``` diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts index 84183435b5228..3dd91a3135239 100644 --- a/packages/react-components/react-components/src/index.ts +++ b/packages/react-components/react-components/src/index.ts @@ -705,3 +705,49 @@ export type { DialogContentSlots, DialogContentState, } from '@fluentui/react-dialog'; + +export { + Toolbar, + ToolbarButton, + useToolbarButtonStyles_unstable, + useToolbarButton_unstable, + ToolbarRadioButton, + useToolbarRadioButton_unstable, + useToolbarRadioButtonStyles_unstable, + ToolbarDivider, + useToolbarDivider_unstable, + ToolbarGroup, + useToolbarGroupStyles_unstable, + useToolbarGroup_unstable, + renderToolbarGroup_unstable, + toolbarGroupClassNames, + ToolbarToggleButton, + useToolbarToggleButtonStyles_unstable, + useToolbarToggleButton_unstable, + renderToolbar_unstable, + toolbarClassNames, + useToolbar_unstable, + useToolbarDividerStyles_unstable, + useToolbarStyles_unstable, + ToolbarRadioGroup, +} from '@fluentui/react-toolbar'; + +export type { + ToolbarButtonProps, + ToolbarButtonState, + ToolbarContextValue, + ToolbarContextValues, + ToolbarDividerProps, + ToolbarDividerState, + ToolbarProps, + ToolbarSlots, + ToolbarState, + ToolbarToggleButtonProps, + ToolbarToggleButtonState, + ToolbarGroupProps, + ToolbarGroupState, + ToolbarRadioButtonProps, + ToolbarRadioButtonState, + ToolbarRadioGroupProps, + ToolbarRadioGroupState, +} from '@fluentui/react-toolbar'; diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts index 9ea5708f295a4..44aa2b453cc30 100644 --- a/packages/react-components/react-components/src/unstable/index.ts +++ b/packages/react-components/react-components/src/unstable/index.ts @@ -112,52 +112,6 @@ export { } from '@fluentui/react-select'; export type { SelectProps, SelectSlots, SelectState } from '@fluentui/react-select'; -export { - Toolbar, - ToolbarButton, - useToolbarButtonStyles_unstable, - useToolbarButton_unstable, - ToolbarRadioButton, - useToolbarRadioButton_unstable, - useToolbarRadioButtonStyles_unstable, - ToolbarDivider, - useToolbarDivider_unstable, - ToolbarGroup, - useToolbarGroupStyles_unstable, - useToolbarGroup_unstable, - renderToolbarGroup_unstable, - toolbarGroupClassNames, - ToolbarToggleButton, - useToolbarToggleButtonStyles_unstable, - useToolbarToggleButton_unstable, - renderToolbar_unstable, - toolbarClassNames, - useToolbar_unstable, - useToolbarDividerStyles_unstable, - useToolbarStyles_unstable, - ToolbarRadioGroup, -} from '@fluentui/react-toolbar'; - -export type { - ToolbarButtonProps, - ToolbarButtonState, - ToolbarContextValue, - ToolbarContextValues, - ToolbarDividerProps, - ToolbarDividerState, - ToolbarProps, - ToolbarSlots, - ToolbarState, - ToolbarToggleButtonProps, - ToolbarToggleButtonState, - ToolbarGroupProps, - ToolbarGroupState, - ToolbarRadioButtonProps, - ToolbarRadioButtonState, - ToolbarRadioGroupProps, - ToolbarRadioGroupState, -} from '@fluentui/react-toolbar'; - export { InfoButton, infoButtonClassNames, diff --git a/packages/react-components/react-toolbar/package.json b/packages/react-components/react-toolbar/package.json index 54c9d5556675b..729763a7cae24 100644 --- a/packages/react-components/react-toolbar/package.json +++ b/packages/react-components/react-toolbar/package.json @@ -52,9 +52,8 @@ }, "beachball": { "disallowedChangeTypes": [ - "major", - "minor", - "patch" + "prerelease", + "major" ] }, "exports": { diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx index f60ef280c3031..d7c6b4dc6657d 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons'; -import { Toolbar, ToolbarToggleButton, ToolbarProps } from '@fluentui/react-components/unstable'; +import { Toolbar, ToolbarToggleButton, ToolbarProps } from '@fluentui/react-components'; export const ControlledToggleButton = () => { const [checkedValues, setCheckedValues] = React.useState>({ diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarDefault.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarDefault.stories.tsx index 657ddf28056ae..72b287e464aa2 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarDefault.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarDefault.stories.tsx @@ -5,9 +5,17 @@ import { TextFont24Regular, MoreHorizontal24Filled, } from '@fluentui/react-icons'; -import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-components'; -import { Toolbar, ToolbarButton, ToolbarDivider } from '@fluentui/react-components/unstable'; -import type { ToolbarProps } from '@fluentui/react-components/unstable'; +import { + Toolbar, + ToolbarButton, + ToolbarDivider, + Menu, + MenuTrigger, + MenuPopover, + MenuList, + MenuItem, +} from '@fluentui/react-components'; +import type { ToolbarProps } from '@fluentui/react-components'; export const Default = (props: Partial) => ( diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarDescription.md b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarDescription.md index a43581f834c08..55f124b509338 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarDescription.md +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarDescription.md @@ -1,14 +1 @@ A toolbar is a container for grouping a set of controls, such as buttons, menu buttons, or checkboxes. - - - -> **⚠️ Preview components are considered unstable:** -> -> ```jsx -> -> import { Toolbar } from '@fluentui/react-components/unstable'; -> -> ``` -> -> - Features and APIs may change before final release -> - Please contact us if you intend to use this in your product diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarFarGroup.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarFarGroup.stories.tsx index 203103cff26ad..f9803c23055c8 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarFarGroup.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarFarGroup.stories.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { makeStyles } from '@fluentui/react-components'; import { FontIncreaseRegular, FontDecreaseRegular, TextFontRegular } from '@fluentui/react-icons'; -import { Toolbar, ToolbarButton, ToolbarDivider, ToolbarGroup } from '@fluentui/react-components/unstable'; -import type { ToolbarProps } from '@fluentui/react-components/unstable'; +import { Toolbar, ToolbarButton, ToolbarDivider, ToolbarGroup } from '@fluentui/react-components'; +import type { ToolbarProps } from '@fluentui/react-components'; const useStyles = makeStyles({ toolbar: { diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarLarge.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarLarge.stories.tsx index db4b0ab703c25..9cb3391e3e277 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarLarge.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarLarge.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { FontIncrease24Regular, FontDecrease24Regular, TextFont24Regular } from '@fluentui/react-icons'; -import { Toolbar, ToolbarButton } from '@fluentui/react-components/unstable'; -import type { ToolbarProps } from '@fluentui/react-components/unstable'; +import { Toolbar, ToolbarButton } from '@fluentui/react-components'; +import type { ToolbarProps } from '@fluentui/react-components'; export const Large = (props: Partial) => ( ) => ( { id: string; diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarRadio.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarRadio.stories.tsx index 6112730ddf080..47b86ea4f6251 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarRadio.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarRadio.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { AlignCenterHorizontal24Regular, AlignLeft24Regular, AlignRight24Regular } from '@fluentui/react-icons'; -import { Toolbar, ToolbarRadioButton, ToolbarRadioGroup } from '@fluentui/react-components/unstable'; -import type { ToolbarProps } from '@fluentui/react-components/unstable'; +import { Toolbar, ToolbarRadioButton, ToolbarRadioGroup } from '@fluentui/react-components'; +import type { ToolbarProps } from '@fluentui/react-components'; export const Radio = (props: Partial) => ( ) => { const [checkedValues, setCheckedValues] = React.useState>({ diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarSmall.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarSmall.stories.tsx index 50979685cc52d..98fa8f5d07817 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarSmall.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarSmall.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { FontIncrease24Regular, FontDecrease24Regular, TextFont24Regular } from '@fluentui/react-icons'; -import { Toolbar, ToolbarButton } from '@fluentui/react-components/unstable'; -import type { ToolbarProps } from '@fluentui/react-components/unstable'; +import { Toolbar, ToolbarButton } from '@fluentui/react-components'; +import type { ToolbarProps } from '@fluentui/react-components'; export const Small = (props: Partial) => ( ) => ( diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarVertical.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarVertical.stories.tsx index e367bd03ca8be..ba501ef5c3925 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarVertical.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarVertical.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons'; -import { Toolbar, ToolbarToggleButton } from '@fluentui/react-components/unstable'; -import type { ToolbarProps } from '@fluentui/react-components/unstable'; +import { Toolbar, ToolbarToggleButton } from '@fluentui/react-components'; +import type { ToolbarProps } from '@fluentui/react-components'; export const Vertical = (props: Partial) => ( diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarVerticalButton.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarVerticalButton.stories.tsx index a3841e00320a2..2cfb47d9d88e4 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarVerticalButton.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarVerticalButton.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { FontIncreaseRegular, FontDecreaseRegular, TextFontRegular } from '@fluentui/react-icons'; -import { Toolbar, ToolbarButton } from '@fluentui/react-components/unstable'; -import type { ToolbarProps } from '@fluentui/react-components/unstable'; +import { Toolbar, ToolbarButton } from '@fluentui/react-components'; +import type { ToolbarProps } from '@fluentui/react-components'; export const VerticalButton = (props: Partial) => ( diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarWithPopover.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarWithPopover.stories.tsx index 3c3bee8d62330..e592ba53da9da 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarWithPopover.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarWithPopover.stories.tsx @@ -1,7 +1,14 @@ import * as React from 'react'; -import { Toolbar, ToolbarButton, ToolbarDivider } from '@fluentui/react-components/unstable'; -import type { ToolbarProps } from '@fluentui/react-components/unstable'; -import { Popover, PopoverSurface, PopoverTrigger, Button } from '@fluentui/react-components'; +import type { ToolbarProps } from '@fluentui/react-components'; +import { + Toolbar, + ToolbarButton, + ToolbarDivider, + Popover, + PopoverSurface, + PopoverTrigger, + Button, +} from '@fluentui/react-components'; import { MathFormatLinear24Regular, Image24Regular, Table24Filled } from '@fluentui/react-icons'; export const WithPopover = (props: Partial) => { diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarWithTooltip.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarWithTooltip.stories.tsx index d90728bc89795..922734c9fd6a4 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarWithTooltip.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarWithTooltip.stories.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; -import { Toolbar, ToolbarToggleButton, ToolbarDivider, ToolbarButton } from '@fluentui/react-components/unstable'; -import type { ToolbarProps } from '@fluentui/react-components/unstable'; -import { Tooltip } from '@fluentui/react-components'; +import type { ToolbarProps } from '@fluentui/react-components'; +import { Toolbar, ToolbarToggleButton, ToolbarDivider, ToolbarButton, Tooltip } from '@fluentui/react-components'; import { TextUnderline24Regular, TextBold24Regular, diff --git a/packages/react-components/react-toolbar/stories/Toolbar/index.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/index.stories.tsx index dc34fd96f4a51..e96c40394a7ca 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/index.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/index.stories.tsx @@ -1,4 +1,4 @@ -import { Toolbar } from '@fluentui/react-components/unstable'; +import { Toolbar } from '@fluentui/react-components'; import descriptionMd from './ToolbarDescription.md'; import bestPracticesMd from './ToolbarBestPractices.md'; @@ -19,7 +19,7 @@ export { VerticalButton } from './ToolbarVerticalButton.stories'; export { FarGroup } from './ToolbarFarGroup.stories'; export default { - title: 'Preview Components/Toolbar', + title: 'Components/Toolbar', component: Toolbar, parameters: { docs: {