diff --git a/change/@fluentui-react-components-03e7f032-b0d9-4221-8522-b7bfb9ffb223.json b/change/@fluentui-react-components-03e7f032-b0d9-4221-8522-b7bfb9ffb223.json new file mode 100644 index 00000000000000..d63c24fd72d066 --- /dev/null +++ b/change/@fluentui-react-components-03e7f032-b0d9-4221-8522-b7bfb9ffb223.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: release Drawer as stable", + "packageName": "@fluentui/react-components", + "email": "marcosvmmoura@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-drawer-3cfc5c74-8b22-419c-a72a-43ecad9c876f.json b/change/@fluentui-react-drawer-3cfc5c74-8b22-419c-a72a-43ecad9c876f.json new file mode 100644 index 00000000000000..999dbee8c915f6 --- /dev/null +++ b/change/@fluentui-react-drawer-3cfc5c74-8b22-419c-a72a-43ecad9c876f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "feat: release stable 9.0.0", + "packageName": "@fluentui/react-drawer", + "email": "marcosvmmoura@gmail.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 dd086ad8ea043a..55077ce08e3ae2 100644 --- a/packages/react-components/react-components/etc/react-components.api.md +++ b/packages/react-components/react-components/etc/react-components.api.md @@ -257,6 +257,31 @@ import { dividerClassNames } from '@fluentui/react-divider'; import { DividerProps } from '@fluentui/react-divider'; import { DividerSlots } from '@fluentui/react-divider'; import { DividerState } from '@fluentui/react-divider'; +import { Drawer } from '@fluentui/react-drawer'; +import { DrawerBody } from '@fluentui/react-drawer'; +import { drawerBodyClassNames } from '@fluentui/react-drawer'; +import { DrawerBodySlots } from '@fluentui/react-drawer'; +import { DrawerBodyState } from '@fluentui/react-drawer'; +import { DrawerFooter } from '@fluentui/react-drawer'; +import { drawerFooterClassNames } from '@fluentui/react-drawer'; +import { DrawerFooterSlots } from '@fluentui/react-drawer'; +import { DrawerFooterState } from '@fluentui/react-drawer'; +import { DrawerHeader } from '@fluentui/react-drawer'; +import { drawerHeaderClassNames } from '@fluentui/react-drawer'; +import { DrawerHeaderNavigation } from '@fluentui/react-drawer'; +import { drawerHeaderNavigationClassNames } from '@fluentui/react-drawer'; +import { DrawerHeaderNavigationProps } from '@fluentui/react-drawer'; +import { DrawerHeaderNavigationSlots } from '@fluentui/react-drawer'; +import { DrawerHeaderNavigationState } from '@fluentui/react-drawer'; +import { DrawerHeaderSlots } from '@fluentui/react-drawer'; +import { DrawerHeaderState } from '@fluentui/react-drawer'; +import { DrawerHeaderTitle } from '@fluentui/react-drawer'; +import { drawerHeaderTitleClassNames } from '@fluentui/react-drawer'; +import { DrawerHeaderTitleSlots } from '@fluentui/react-drawer'; +import { DrawerHeaderTitleState } from '@fluentui/react-drawer'; +import { DrawerProps } from '@fluentui/react-drawer'; +import { DrawerSlots } from '@fluentui/react-drawer'; +import { DrawerState } from '@fluentui/react-drawer'; import { Dropdown } from '@fluentui/react-combobox'; import { dropdownClassNames } from '@fluentui/react-combobox'; import { DropdownContextValues } from '@fluentui/react-combobox'; @@ -319,6 +344,11 @@ import { infoLabelClassNames } from '@fluentui/react-infolabel'; import { InfoLabelProps } from '@fluentui/react-infolabel'; import { InfoLabelSlots } from '@fluentui/react-infolabel'; import { InfoLabelState } from '@fluentui/react-infolabel'; +import { InlineDrawer } from '@fluentui/react-drawer'; +import { inlineDrawerClassNames } from '@fluentui/react-drawer'; +import { InlineDrawerProps } from '@fluentui/react-drawer'; +import { InlineDrawerSlots } from '@fluentui/react-drawer'; +import { InlineDrawerState } from '@fluentui/react-drawer'; import { Input } from '@fluentui/react-input'; import { inputClassNames } from '@fluentui/react-input'; import { InputOnChangeData } from '@fluentui/react-input'; @@ -491,6 +521,11 @@ import { OverflowDivider } from '@fluentui/react-overflow'; import { OverflowItem } from '@fluentui/react-overflow'; import { OverflowItemProps } from '@fluentui/react-overflow'; import { OverflowProps } from '@fluentui/react-overflow'; +import { OverlayDrawer } from '@fluentui/react-drawer'; +import { overlayDrawerClassNames } from '@fluentui/react-drawer'; +import { OverlayDrawerProps } from '@fluentui/react-drawer'; +import { OverlayDrawerSlots } from '@fluentui/react-drawer'; +import { OverlayDrawerState } from '@fluentui/react-drawer'; import { PartialTheme } from '@fluentui/react-theme'; import { PartitionAvatarGroupItems } from '@fluentui/react-avatar'; import { partitionAvatarGroupItems } from '@fluentui/react-avatar'; @@ -593,6 +628,12 @@ import { renderDialogSurface_unstable } from '@fluentui/react-dialog'; import { renderDialogTitle_unstable } from '@fluentui/react-dialog'; import { renderDialogTrigger_unstable } from '@fluentui/react-dialog'; import { renderDivider_unstable } from '@fluentui/react-divider'; +import { renderDrawer_unstable } from '@fluentui/react-drawer'; +import { renderDrawerBody_unstable } from '@fluentui/react-drawer'; +import { renderDrawerFooter_unstable } from '@fluentui/react-drawer'; +import { renderDrawerHeader_unstable } from '@fluentui/react-drawer'; +import { renderDrawerHeaderNavigation_unstable } from '@fluentui/react-drawer'; +import { renderDrawerHeaderTitle_unstable } from '@fluentui/react-drawer'; import { renderDropdown_unstable } from '@fluentui/react-combobox'; import { RendererProvider } from '@griffel/react'; import { renderField_unstable } from '@fluentui/react-field'; @@ -600,6 +641,7 @@ import { renderFlatTree_unstable } from '@fluentui/react-tree'; import { renderFluentProvider_unstable } from '@fluentui/react-provider'; import { renderImage_unstable } from '@fluentui/react-image'; import { renderInfoLabel_unstable } from '@fluentui/react-infolabel'; +import { renderInlineDrawer_unstable } from '@fluentui/react-drawer'; import { renderInput_unstable } from '@fluentui/react-input'; import { renderInteractionTag_unstable } from '@fluentui/react-tags'; import { renderInteractionTagPrimary_unstable } from '@fluentui/react-tags'; @@ -627,6 +669,7 @@ import { renderMessageBarGroup_unstable } from '@fluentui/react-message-bar'; import { renderMessageBarTitle_unstable } from '@fluentui/react-message-bar'; import { renderOption_unstable } from '@fluentui/react-combobox'; import { renderOptionGroup_unstable } from '@fluentui/react-combobox'; +import { renderOverlayDrawer_unstable } from '@fluentui/react-drawer'; import { renderPersona_unstable } from '@fluentui/react-persona'; import { renderPopover_unstable } from '@fluentui/react-popover'; import { renderPopoverSurface_unstable } from '@fluentui/react-popover'; @@ -1068,6 +1111,17 @@ import { useDialogTitleStyles_unstable } from '@fluentui/react-dialog'; import { useDialogTrigger_unstable } from '@fluentui/react-dialog'; import { useDivider_unstable } from '@fluentui/react-divider'; import { useDividerStyles_unstable } from '@fluentui/react-divider'; +import { useDrawer_unstable } from '@fluentui/react-drawer'; +import { useDrawerBody_unstable } from '@fluentui/react-drawer'; +import { useDrawerBodyStyles_unstable } from '@fluentui/react-drawer'; +import { useDrawerFooter_unstable } from '@fluentui/react-drawer'; +import { useDrawerFooterStyles_unstable } from '@fluentui/react-drawer'; +import { useDrawerHeader_unstable } from '@fluentui/react-drawer'; +import { useDrawerHeaderNavigation_unstable } from '@fluentui/react-drawer'; +import { useDrawerHeaderNavigationStyles_unstable } from '@fluentui/react-drawer'; +import { useDrawerHeaderStyles_unstable } from '@fluentui/react-drawer'; +import { useDrawerHeaderTitle_unstable } from '@fluentui/react-drawer'; +import { useDrawerHeaderTitleStyles_unstable } from '@fluentui/react-drawer'; import { useDropdown_unstable } from '@fluentui/react-combobox'; import { useDropdownStyles_unstable } from '@fluentui/react-combobox'; import { useEventCallback } from '@fluentui/react-utilities'; @@ -1095,6 +1149,8 @@ import { useImage_unstable } from '@fluentui/react-image'; import { useImageStyles_unstable } from '@fluentui/react-image'; import { useInfoLabel_unstable } from '@fluentui/react-infolabel'; import { useInfoLabelStyles_unstable } from '@fluentui/react-infolabel'; +import { useInlineDrawer_unstable } from '@fluentui/react-drawer'; +import { useInlineDrawerStyles_unstable } from '@fluentui/react-drawer'; import { useInput_unstable } from '@fluentui/react-input'; import { useInputStyles_unstable } from '@fluentui/react-input'; import { useInteractionTag_unstable } from '@fluentui/react-tags'; @@ -1170,6 +1226,8 @@ import { useOptionGroupStyles_unstable } from '@fluentui/react-combobox'; import { useOptionStyles_unstable } from '@fluentui/react-combobox'; import { useOverflowCount } from '@fluentui/react-overflow'; import { useOverflowMenu } from '@fluentui/react-overflow'; +import { useOverlayDrawer_unstable } from '@fluentui/react-drawer'; +import { useOverlayDrawerStyles_unstable } from '@fluentui/react-drawer'; import { usePersona_unstable } from '@fluentui/react-persona'; import { usePersonaStyles_unstable } from '@fluentui/react-persona'; import { usePopover_unstable } from '@fluentui/react-popover'; @@ -1809,6 +1867,56 @@ export { DividerSlots } export { DividerState } +export { Drawer } + +export { DrawerBody } + +export { drawerBodyClassNames } + +export { DrawerBodySlots } + +export { DrawerBodyState } + +export { DrawerFooter } + +export { drawerFooterClassNames } + +export { DrawerFooterSlots } + +export { DrawerFooterState } + +export { DrawerHeader } + +export { drawerHeaderClassNames } + +export { DrawerHeaderNavigation } + +export { drawerHeaderNavigationClassNames } + +export { DrawerHeaderNavigationProps } + +export { DrawerHeaderNavigationSlots } + +export { DrawerHeaderNavigationState } + +export { DrawerHeaderSlots } + +export { DrawerHeaderState } + +export { DrawerHeaderTitle } + +export { drawerHeaderTitleClassNames } + +export { DrawerHeaderTitleSlots } + +export { DrawerHeaderTitleState } + +export { DrawerProps } + +export { DrawerSlots } + +export { DrawerState } + export { Dropdown } export { dropdownClassNames } @@ -1933,6 +2041,16 @@ export { InfoLabelSlots } export { InfoLabelState } +export { InlineDrawer } + +export { inlineDrawerClassNames } + +export { InlineDrawerProps } + +export { InlineDrawerSlots } + +export { InlineDrawerState } + export { Input } export { inputClassNames } @@ -2277,6 +2395,16 @@ export { OverflowItemProps } export { OverflowProps } +export { OverlayDrawer } + +export { overlayDrawerClassNames } + +export { OverlayDrawerProps } + +export { OverlayDrawerSlots } + +export { OverlayDrawerState } + export { PartialTheme } export { PartitionAvatarGroupItems } @@ -2481,6 +2609,18 @@ export { renderDialogTrigger_unstable } export { renderDivider_unstable } +export { renderDrawer_unstable } + +export { renderDrawerBody_unstable } + +export { renderDrawerFooter_unstable } + +export { renderDrawerHeader_unstable } + +export { renderDrawerHeaderNavigation_unstable } + +export { renderDrawerHeaderTitle_unstable } + export { renderDropdown_unstable } export { RendererProvider } @@ -2495,6 +2635,8 @@ export { renderImage_unstable } export { renderInfoLabel_unstable } +export { renderInlineDrawer_unstable } + export { renderInput_unstable } export { renderInteractionTag_unstable } @@ -2549,6 +2691,8 @@ export { renderOption_unstable } export { renderOptionGroup_unstable } +export { renderOverlayDrawer_unstable } + export { renderPersona_unstable } export { renderPopover_unstable } @@ -3431,6 +3575,28 @@ export { useDivider_unstable } export { useDividerStyles_unstable } +export { useDrawer_unstable } + +export { useDrawerBody_unstable } + +export { useDrawerBodyStyles_unstable } + +export { useDrawerFooter_unstable } + +export { useDrawerFooterStyles_unstable } + +export { useDrawerHeader_unstable } + +export { useDrawerHeaderNavigation_unstable } + +export { useDrawerHeaderNavigationStyles_unstable } + +export { useDrawerHeaderStyles_unstable } + +export { useDrawerHeaderTitle_unstable } + +export { useDrawerHeaderTitleStyles_unstable } + export { useDropdown_unstable } export { useDropdownStyles_unstable } @@ -3485,6 +3651,10 @@ export { useInfoLabel_unstable } export { useInfoLabelStyles_unstable } +export { useInlineDrawer_unstable } + +export { useInlineDrawerStyles_unstable } + export { useInput_unstable } export { useInputStyles_unstable } @@ -3635,6 +3805,10 @@ export { useOverflowCount } export { useOverflowMenu } +export { useOverlayDrawer_unstable } + +export { useOverlayDrawerStyles_unstable } + export { usePersona_unstable } export { usePersonaStyles_unstable } diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts index 4f9b3f0c5babd7..e3feba12bc93a4 100644 --- a/packages/react-components/react-components/src/index.ts +++ b/packages/react-components/react-components/src/index.ts @@ -1423,3 +1423,67 @@ export { useInfoLabel_unstable, } from '@fluentui/react-infolabel'; export type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from '@fluentui/react-infolabel'; + +export { + Drawer, + renderDrawer_unstable, + useDrawer_unstable, + OverlayDrawer, + overlayDrawerClassNames, + renderOverlayDrawer_unstable, + useOverlayDrawerStyles_unstable, + useOverlayDrawer_unstable, + InlineDrawer, + inlineDrawerClassNames, + renderInlineDrawer_unstable, + useInlineDrawerStyles_unstable, + useInlineDrawer_unstable, + DrawerBody, + drawerBodyClassNames, + renderDrawerBody_unstable, + useDrawerBodyStyles_unstable, + useDrawerBody_unstable, + DrawerHeader, + drawerHeaderClassNames, + renderDrawerHeader_unstable, + useDrawerHeaderStyles_unstable, + useDrawerHeader_unstable, + DrawerHeaderTitle, + drawerHeaderTitleClassNames, + renderDrawerHeaderTitle_unstable, + useDrawerHeaderTitleStyles_unstable, + useDrawerHeaderTitle_unstable, + DrawerHeaderNavigation, + drawerHeaderNavigationClassNames, + renderDrawerHeaderNavigation_unstable, + useDrawerHeaderNavigationStyles_unstable, + useDrawerHeaderNavigation_unstable, + DrawerFooter, + drawerFooterClassNames, + renderDrawerFooter_unstable, + useDrawerFooterStyles_unstable, + useDrawerFooter_unstable, +} from '@fluentui/react-drawer'; + +export type { + DrawerProps, + DrawerSlots, + DrawerState, + OverlayDrawerProps, + OverlayDrawerSlots, + OverlayDrawerState, + InlineDrawerProps, + InlineDrawerSlots, + InlineDrawerState, + DrawerBodySlots, + DrawerBodyState, + DrawerHeaderSlots, + DrawerHeaderState, + DrawerHeaderTitleSlots, + DrawerHeaderTitleState, + DrawerFooterSlots, + DrawerFooterState, + DrawerHeaderNavigationProps, + DrawerHeaderNavigationSlots, + DrawerHeaderNavigationState, +} from '@fluentui/react-drawer'; diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts index 07c24a08cf3fc0..0e910aba4d44df 100644 --- a/packages/react-components/react-components/src/unstable/index.ts +++ b/packages/react-components/react-components/src/unstable/index.ts @@ -144,97 +144,156 @@ export type { } from '@fluentui/react-tree'; export { + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ Drawer, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ renderDrawer_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ useDrawer_unstable, - /** @deprecated Use `OverlayDrawer` instead */ + /** @deprecated Use `OverlayDrawer` from @fluentui/react-components instead */ OverlayDrawer as DrawerOverlay, - /** @deprecated Use `OverlayDrawerClassNames` instead */ + /** @deprecated Use `OverlayDrawerClassNames` from @fluentui/react-components instead */ overlayDrawerClassNames as DrawerOverlayClassNames, - /** @deprecated Use `renderOverlayDrawer_unstable` instead */ + /** @deprecated Use `renderOverlayDrawer_unstable` from @fluentui/react-components instead */ renderOverlayDrawer_unstable as renderDrawerOverlay_unstable, - /** @deprecated Use `useOverlayDrawerStyles_unstable` instead */ + /** @deprecated Use `useOverlayDrawerStyles_unstable` from @fluentui/react-components instead */ useOverlayDrawerStyles_unstable as useDrawerOverlayStyles_unstable, - /** @deprecated Use `useOverlayDrawer_unstable` instead */ + /** @deprecated Use `useOverlayDrawer_unstable` from @fluentui/react-components instead */ useOverlayDrawer_unstable as useDrawerOverlay_unstable, - /** @deprecated Use `InlineDrawer` instead */ + /** @deprecated Use `InlineDrawer` from @fluentui/react-components instead */ InlineDrawer as DrawerInline, - /** @deprecated Use `InlineDrawerClassNames` instead */ + /** @deprecated Use `InlineDrawerClassNames` from @fluentui/react-components instead */ inlineDrawerClassNames as DrawerInlineClassNames, - /** @deprecated Use `renderInlineDrawer_unstable` instead */ + /** @deprecated Use `renderInlineDrawer_unstable` from @fluentui/react-components instead */ renderInlineDrawer_unstable as renderDrawerInline_unstable, - /** @deprecated Use `useInlineDrawerStyles_unstable` instead */ + /** @deprecated Use `useInlineDrawerStyles_unstable` from @fluentui/react-components instead */ useInlineDrawerStyles_unstable as useDrawerInlineStyles_unstable, - /** @deprecated Use `useInlineDrawer_unstable` instead */ + /** @deprecated Use `useInlineDrawer_unstable` from @fluentui/react-components instead */ useInlineDrawer_unstable as useDrawerInline_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ OverlayDrawer, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ overlayDrawerClassNames, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ renderOverlayDrawer_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ useOverlayDrawerStyles_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ useOverlayDrawer_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ InlineDrawer, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ inlineDrawerClassNames, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ renderInlineDrawer_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ useInlineDrawerStyles_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ useInlineDrawer_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerBody, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ drawerBodyClassNames, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ renderDrawerBody_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ useDrawerBodyStyles_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ useDrawerBody_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerHeader, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ drawerHeaderClassNames, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ renderDrawerHeader_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ useDrawerHeaderStyles_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ useDrawerHeader_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerHeaderTitle, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ drawerHeaderTitleClassNames, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ renderDrawerHeaderTitle_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ useDrawerHeaderTitleStyles_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ useDrawerHeaderTitle_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerHeaderNavigation, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ drawerHeaderNavigationClassNames, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ renderDrawerHeaderNavigation_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ useDrawerHeaderNavigationStyles_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ useDrawerHeaderNavigation_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerFooter, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ drawerFooterClassNames, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ renderDrawerFooter_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ useDrawerFooterStyles_unstable, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ useDrawerFooter_unstable, } from '@fluentui/react-drawer'; export type { + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerProps, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerSlots, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerState, - /** @deprecated Use `OverlayDrawerProps` instead */ + /** @deprecated Use `OverlayDrawerProps` from @fluentui/react-components instead */ OverlayDrawerProps as DrawerOverlayProps, - /** @deprecated Use `OverlayDrawerSlots` instead */ + /** @deprecated Use `OverlayDrawerSlots` from @fluentui/react-components instead */ OverlayDrawerSlots as DrawerOverlaySlots, - /** @deprecated Use `OverlayDrawerState` instead */ + /** @deprecated Use `OverlayDrawerState` from @fluentui/react-components instead */ OverlayDrawerState as DrawerOverlayState, - /** @deprecated Use `InlineDrawerProps` instead */ + /** @deprecated Use `InlineDrawerProps` from @fluentui/react-components instead */ InlineDrawerProps as DrawerInlineProps, - /** @deprecated Use `InlineDrawerSlots` instead */ + /** @deprecated Use `InlineDrawerSlots` from @fluentui/react-components instead */ InlineDrawerSlots as DrawerInlineSlots, - /** @deprecated Use `InlineDrawerState` instead */ + /** @deprecated Use `InlineDrawerState` from @fluentui/react-components instead */ InlineDrawerState as DrawerInlineState, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ OverlayDrawerProps, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ OverlayDrawerSlots, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ OverlayDrawerState, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ InlineDrawerProps, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ InlineDrawerSlots, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ InlineDrawerState, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerBodySlots, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerBodyState, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerHeaderSlots, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerHeaderState, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerHeaderTitleSlots, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerHeaderTitleState, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerFooterSlots, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerFooterState, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerHeaderNavigationProps, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerHeaderNavigationSlots, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ DrawerHeaderNavigationState, + /** @deprecated Drawer is currently stable. Import from @fluentui/react-components instead */ } from '@fluentui/react-drawer'; diff --git a/packages/react-components/react-drawer/README.md b/packages/react-components/react-drawer/README.md index 410b6a53d39ace..6915c5e62cc168 100644 --- a/packages/react-components/react-drawer/README.md +++ b/packages/react-components/react-drawer/README.md @@ -25,7 +25,7 @@ import { Simple example of Drawer Usage: ```tsx -import { DrawerBody, DrawerHeader, DrawerHeaderTitle, Drawer } from '@fluentui/react-drawer'; +import { DrawerBody, DrawerHeader, DrawerHeaderTitle, Drawer } from '@fluentui/react-components'; import { Button } from '@fluentui/react-components'; import { Dismiss24Regular } from '@fluentui/react-icons'; @@ -59,4 +59,4 @@ See the [Spec.md](./docs/Spec.md) file for background information on the design/ ## API -For information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-drawer--default). +For information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/components-drawer--default). diff --git a/packages/react-components/react-drawer/etc/react-drawer.api.md b/packages/react-components/react-drawer/etc/react-drawer.api.md index 0e08760aba0d25..9bba80976fab8a 100644 --- a/packages/react-components/react-drawer/etc/react-drawer.api.md +++ b/packages/react-components/react-drawer/etc/react-drawer.api.md @@ -11,7 +11,6 @@ import type { ComponentState } from '@fluentui/react-utilities'; import type { DialogProps } from '@fluentui/react-dialog'; import type { DialogSurfaceSlots } from '@fluentui/react-dialog'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { MotionState } from '@fluentui/react-motion-preview'; import * as React_2 from 'react'; import type { Slot } from '@fluentui/react-utilities'; import type { SlotClassNames } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-drawer/package.json b/packages/react-components/react-drawer/package.json index 6e35ede90d32cf..befda652c0a65c 100644 --- a/packages/react-components/react-drawer/package.json +++ b/packages/react-components/react-drawer/package.json @@ -54,8 +54,7 @@ "beachball": { "disallowedChangeTypes": [ "major", - "minor", - "patch" + "prerelease" ] }, "exports": { diff --git a/packages/react-components/react-drawer/src/e2e/DrawerShared.tsx b/packages/react-components/react-drawer/src/e2e/DrawerShared.tsx index 01fb782282af39..3e632c802c8a73 100644 --- a/packages/react-components/react-drawer/src/e2e/DrawerShared.tsx +++ b/packages/react-components/react-drawer/src/e2e/DrawerShared.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { mount } from '@cypress/react'; import { FluentProvider } from '@fluentui/react-provider'; import { webLightTheme } from '@fluentui/react-theme'; -import { DrawerProps } from '@fluentui/react-drawer'; +import { DrawerProps } from '@fluentui/react-components'; const mountFluent = (element: JSX.Element) => { mount({element}); diff --git a/packages/react-components/react-drawer/src/shared/DrawerBase.types.ts b/packages/react-components/react-drawer/src/shared/DrawerBase.types.ts index e8da6ef71a3a2f..4e3cea9c6a6c22 100644 --- a/packages/react-components/react-drawer/src/shared/DrawerBase.types.ts +++ b/packages/react-components/react-drawer/src/shared/DrawerBase.types.ts @@ -1,4 +1,37 @@ -import { MotionState } from '@fluentui/react-motion-preview'; +import * as React from 'react'; + +type MotionType = 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted'; + +type MotionState = { + /** + * Ref to the element. + */ + ref: React.Ref; + + /** + * Current state of the element. + * + * - `unmounted` - The element is not yet rendered or can be safely removed from the DOM. + * - `entering` - The element is performing enter animation. + * - `entered` - The element has finished enter animation. + * - `idle` - The element is currently not animating, but rendered on screen. + * - `exiting` - The element is performing exit animation. + * - `exited` - The element has finished exit animation. + */ + type: MotionType; + + /** + * Indicates whether the component can be rendered. + * Useful to render the element before animating it or to remove it from the DOM after exit animation. + */ + canRender: boolean; + + /** + * Indicates whether the component is ready to receive a CSS transition className. + * Useful to apply CSS transitions when the element is mounted and ready to be animated. + */ + active: boolean; +}; export type DrawerBaseProps = { /** diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerAlwaysOpen.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerAlwaysOpen.stories.tsx index 00e0d8ef6d4371..31697b2fba82b0 100644 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerAlwaysOpen.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerAlwaysOpen.stories.tsx @@ -1,6 +1,12 @@ import * as React from 'react'; -import { DrawerBody, DrawerHeader, DrawerHeaderTitle, InlineDrawer } from '@fluentui/react-drawer'; -import { makeStyles, shorthands } from '@fluentui/react-components'; +import { + DrawerBody, + DrawerHeader, + DrawerHeaderTitle, + InlineDrawer, + makeStyles, + shorthands, +} from '@fluentui/react-components'; const useStyles = makeStyles({ root: { diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerCustomSize.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerCustomSize.stories.tsx index ef0078f5d2ad09..a3065d23749824 100644 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerCustomSize.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerCustomSize.stories.tsx @@ -1,6 +1,16 @@ import * as React from 'react'; -import { DrawerBody, DrawerHeader, DrawerHeaderTitle, OverlayDrawer } from '@fluentui/react-drawer'; -import { Button, Label, useId, tokens, makeStyles, Input } from '@fluentui/react-components'; +import { + DrawerBody, + DrawerHeader, + DrawerHeaderTitle, + OverlayDrawer, + Button, + Label, + useId, + tokens, + makeStyles, + Input, +} from '@fluentui/react-components'; import { Dismiss24Regular } from '@fluentui/react-icons'; const useStyles = makeStyles({ diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerDefault.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerDefault.stories.tsx index 5e468fb6621a8d..d271430ab2274b 100644 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerDefault.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerDefault.stories.tsx @@ -1,6 +1,19 @@ import * as React from 'react'; -import { DrawerBody, DrawerHeader, DrawerHeaderTitle, Drawer, DrawerProps } from '@fluentui/react-drawer'; -import { Button, Label, Radio, RadioGroup, makeStyles, shorthands, tokens, useId } from '@fluentui/react-components'; +import { + DrawerBody, + DrawerHeader, + DrawerHeaderTitle, + Drawer, + DrawerProps, + Button, + Label, + Radio, + RadioGroup, + makeStyles, + shorthands, + tokens, + useId, +} from '@fluentui/react-components'; import { Dismiss24Regular } from '@fluentui/react-icons'; const useStyles = makeStyles({ diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerMotionCustom.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerMotionCustom.stories.tsx index 721996214dc653..bd0adf5dad3a6a 100644 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerMotionCustom.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerMotionCustom.stories.tsx @@ -1,8 +1,17 @@ import * as React from 'react'; -import { Button, makeStyles, mergeClasses, shorthands /* tokens */ } from '@fluentui/react-components'; +import { + Button, + makeStyles, + mergeClasses, + shorthands, + // tokens, + DrawerBody, + DrawerHeader, + DrawerHeaderTitle, + InlineDrawer, +} from '@fluentui/react-components'; import { Dismiss24Regular } from '@fluentui/react-icons'; // import { useMotionClassNames, useMotion } from '@fluentui/react-motion-preview'; -import { DrawerBody, DrawerHeader, DrawerHeaderTitle, InlineDrawer } from '@fluentui/react-drawer'; /** * TODO: The contents of this file should be uncommented when react-motion is stable. diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerMotionDisabled.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerMotionDisabled.stories.tsx index a228426b2337e7..84c022895d44b2 100644 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerMotionDisabled.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerMotionDisabled.stories.tsx @@ -1,6 +1,19 @@ import * as React from 'react'; -import { DrawerBody, DrawerHeader, DrawerHeaderTitle, Drawer, DrawerProps } from '@fluentui/react-drawer'; -import { Button, Label, Radio, RadioGroup, makeStyles, shorthands, tokens, useId } from '@fluentui/react-components'; +import { + DrawerBody, + DrawerHeader, + DrawerHeaderTitle, + Drawer, + DrawerProps, + Button, + Label, + Radio, + RadioGroup, + makeStyles, + shorthands, + tokens, + useId, +} from '@fluentui/react-components'; import { Dismiss24Regular } from '@fluentui/react-icons'; const useStyles = makeStyles({ diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerMultipleLevels.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerMultipleLevels.stories.tsx index b5939a9b961f33..01de17523f1097 100644 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerMultipleLevels.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerMultipleLevels.stories.tsx @@ -6,8 +6,6 @@ import { DrawerHeaderNavigation, DrawerHeaderTitle, DrawerFooter, -} from '@fluentui/react-drawer'; -import { Button, Toolbar, ToolbarGroup, diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerPosition.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerPosition.stories.tsx index 1221e547894782..e57bcbb4efb215 100644 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerPosition.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerPosition.stories.tsx @@ -1,6 +1,14 @@ import * as React from 'react'; -import { DrawerBody, DrawerHeader, DrawerHeaderTitle, OverlayDrawer, DrawerProps } from '@fluentui/react-drawer'; -import { Button, makeStyles, tokens } from '@fluentui/react-components'; +import { + DrawerBody, + DrawerHeader, + DrawerHeaderTitle, + OverlayDrawer, + DrawerProps, + Button, + makeStyles, + tokens, +} from '@fluentui/react-components'; import { Dismiss24Regular } from '@fluentui/react-icons'; const useStyles = makeStyles({ diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerPreventClose.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerPreventClose.stories.tsx index 0e9b3fdc68d8d1..062cb65285422c 100644 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerPreventClose.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerPreventClose.stories.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { OverlayDrawer, DrawerBody, DrawerHeader, DrawerHeaderTitle } from '@fluentui/react-drawer'; -import { Button } from '@fluentui/react-components'; +import { OverlayDrawer, DrawerBody, DrawerHeader, DrawerHeaderTitle, Button } from '@fluentui/react-components'; import { Dismiss24Regular } from '@fluentui/react-icons'; export const PreventClose = () => { diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerPreview.md b/packages/react-components/react-drawer/stories/Drawer/DrawerPreview.md deleted file mode 100644 index 430542b37ed3f6..00000000000000 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerPreview.md +++ /dev/null @@ -1,12 +0,0 @@ - - -> **⚠️ Preview components are considered unstable:** -> -> ```jsx -> -> import { Drawer } 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-drawer/stories/Drawer/DrawerResizable.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerResizable.stories.tsx index b7cd2ab89e7e30..dfd70c41230905 100644 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerResizable.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerResizable.stories.tsx @@ -1,6 +1,14 @@ import * as React from 'react'; -import { DrawerBody, DrawerHeader, DrawerHeaderTitle, InlineDrawer } from '@fluentui/react-drawer'; -import { makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components'; +import { + DrawerBody, + DrawerHeader, + DrawerHeaderTitle, + InlineDrawer, + makeStyles, + mergeClasses, + shorthands, + tokens, +} from '@fluentui/react-components'; const useStyles = makeStyles({ root: { diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerResponsive.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerResponsive.stories.tsx index bee2702fd371c1..d0c611a67f7112 100644 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerResponsive.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerResponsive.stories.tsx @@ -1,6 +1,15 @@ import * as React from 'react'; -import { DrawerBody, DrawerHeader, DrawerHeaderTitle, Drawer, DrawerProps } from '@fluentui/react-drawer'; -import { Button, makeStyles, shorthands, tokens } from '@fluentui/react-components'; +import { + DrawerBody, + DrawerHeader, + DrawerHeaderTitle, + Drawer, + DrawerProps, + Button, + makeStyles, + shorthands, + tokens, +} from '@fluentui/react-components'; import { Dismiss24Regular } from '@fluentui/react-icons'; const useStyles = makeStyles({ diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerSeparator.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerSeparator.stories.tsx index 905c9042eb53f4..010dc5576ad4bb 100644 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerSeparator.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerSeparator.stories.tsx @@ -1,6 +1,14 @@ import * as React from 'react'; -import { DrawerBody, DrawerHeader, DrawerHeaderTitle, InlineDrawer } from '@fluentui/react-drawer'; -import { Button, makeStyles, shorthands, tokens } from '@fluentui/react-components'; +import { + DrawerBody, + DrawerHeader, + DrawerHeaderTitle, + InlineDrawer, + Button, + makeStyles, + shorthands, + tokens, +} from '@fluentui/react-components'; import { Dismiss24Regular } from '@fluentui/react-icons'; const useStyles = makeStyles({ diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerSize.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerSize.stories.tsx index 2d3798998fd4a6..14e0d876951aeb 100644 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerSize.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerSize.stories.tsx @@ -1,6 +1,18 @@ import * as React from 'react'; -import { OverlayDrawer, DrawerBody, DrawerHeader, DrawerHeaderTitle, DrawerProps } from '@fluentui/react-drawer'; -import { Button, Label, RadioGroup, Radio, useId, tokens, makeStyles } from '@fluentui/react-components'; +import { + OverlayDrawer, + DrawerBody, + DrawerHeader, + DrawerHeaderTitle, + DrawerProps, + Button, + Label, + RadioGroup, + Radio, + useId, + tokens, + makeStyles, +} from '@fluentui/react-components'; import { Dismiss24Regular } from '@fluentui/react-icons'; const useStyles = makeStyles({ diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerWithNavigation.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerWithNavigation.stories.tsx index bc67f525c5e904..2f2ebfbda1bc65 100644 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerWithNavigation.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerWithNavigation.stories.tsx @@ -5,8 +5,12 @@ import { DrawerHeader, DrawerHeaderNavigation, DrawerHeaderTitle, -} from '@fluentui/react-drawer'; -import { Button, Toolbar, ToolbarGroup, ToolbarButton, makeStyles } from '@fluentui/react-components'; + Button, + Toolbar, + ToolbarGroup, + ToolbarButton, + makeStyles, +} from '@fluentui/react-components'; import { Dismiss24Regular, ArrowClockwise24Regular, diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerWithScroll.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerWithScroll.stories.tsx index 057123c5869b88..8e1ba36f35f257 100644 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerWithScroll.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerWithScroll.stories.tsx @@ -1,6 +1,14 @@ import * as React from 'react'; -import { InlineDrawer, DrawerBody, DrawerHeader, DrawerHeaderTitle, DrawerFooter } from '@fluentui/react-drawer'; -import { Button, makeStyles, tokens } from '@fluentui/react-components'; +import { + InlineDrawer, + DrawerBody, + DrawerHeader, + DrawerHeaderTitle, + DrawerFooter, + Button, + makeStyles, + tokens, +} from '@fluentui/react-components'; const useStyles = makeStyles({ root: { diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerWithTitle.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerWithTitle.stories.tsx index 5b9b706600962f..9fd774554602d6 100644 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerWithTitle.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerWithTitle.stories.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { InlineDrawer, DrawerHeader, DrawerHeaderTitle } from '@fluentui/react-drawer'; -import { Button, makeStyles } from '@fluentui/react-components'; +import { InlineDrawer, DrawerHeader, DrawerHeaderTitle, Button, makeStyles } from '@fluentui/react-components'; import { Dismiss24Regular } from '@fluentui/react-icons'; const useStyles = makeStyles({ diff --git a/packages/react-components/react-drawer/stories/Drawer/InlineDrawer.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/InlineDrawer.stories.tsx index eb57d78d47ab4d..dedd560e83b702 100644 --- a/packages/react-components/react-drawer/stories/Drawer/InlineDrawer.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/InlineDrawer.stories.tsx @@ -1,6 +1,14 @@ import * as React from 'react'; -import { DrawerBody, DrawerHeader, DrawerHeaderTitle, InlineDrawer } from '@fluentui/react-drawer'; -import { Button, makeStyles, shorthands, tokens } from '@fluentui/react-components'; +import { + DrawerBody, + DrawerHeader, + DrawerHeaderTitle, + InlineDrawer, + Button, + makeStyles, + shorthands, + tokens, +} from '@fluentui/react-components'; import { Dismiss24Regular } from '@fluentui/react-icons'; const useStyles = makeStyles({ diff --git a/packages/react-components/react-drawer/stories/Drawer/OverlayDrawer.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/OverlayDrawer.stories.tsx index c1aec0e7860c24..359296792df685 100644 --- a/packages/react-components/react-drawer/stories/Drawer/OverlayDrawer.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/OverlayDrawer.stories.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { DrawerBody, DrawerHeader, DrawerHeaderTitle, OverlayDrawer } from '@fluentui/react-drawer'; -import { Button } from '@fluentui/react-components'; +import { DrawerBody, DrawerHeader, DrawerHeaderTitle, OverlayDrawer, Button } from '@fluentui/react-components'; import { Dismiss24Regular } from '@fluentui/react-icons'; export const Overlay = () => { diff --git a/packages/react-components/react-drawer/stories/Drawer/OverlayDrawerNoModal.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/OverlayDrawerNoModal.stories.tsx index f00f83abd0ef7d..4aac709059af07 100644 --- a/packages/react-components/react-drawer/stories/Drawer/OverlayDrawerNoModal.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/OverlayDrawerNoModal.stories.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { DrawerBody, DrawerHeader, DrawerHeaderTitle, OverlayDrawer } from '@fluentui/react-drawer'; -import { Button } from '@fluentui/react-components'; +import { DrawerBody, DrawerHeader, DrawerHeaderTitle, OverlayDrawer, Button } from '@fluentui/react-components'; import { Dismiss24Regular } from '@fluentui/react-icons'; export const OverlayNoModal = () => { diff --git a/packages/react-components/react-drawer/stories/Drawer/index.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/index.stories.tsx index ede520a2cb07ea..4933e61c6d800f 100644 --- a/packages/react-components/react-drawer/stories/Drawer/index.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/index.stories.tsx @@ -9,7 +9,6 @@ import { } from '@fluentui/react-drawer'; import descriptionMd from './DrawerDescription.md'; import bestPracticesMd from './DrawerBestPractices.md'; -import previewMd from './DrawerPreview.md'; export { Default } from './DrawerDefault.stories'; export { Overlay } from './OverlayDrawer.stories'; @@ -32,7 +31,7 @@ export { Responsive } from './DrawerResponsive.stories'; export { Resizable } from './DrawerResizable.stories'; export default { - title: 'Preview Components/Drawer', + title: 'Components/Drawer', component: Drawer, subcomponents: { OverlayDrawer, @@ -45,7 +44,7 @@ export default { parameters: { docs: { description: { - component: [descriptionMd, bestPracticesMd, previewMd].join('\n'), + component: [descriptionMd, bestPracticesMd].join('\n'), }, }, },