diff --git a/change/@fluentui-react-components-eaedf37a-5f6c-454b-afe7-eae07312b67b.json b/change/@fluentui-react-components-eaedf37a-5f6c-454b-afe7-eae07312b67b.json new file mode 100644 index 0000000000000..f912d54290b62 --- /dev/null +++ b/change/@fluentui-react-components-eaedf37a-5f6c-454b-afe7-eae07312b67b.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: react-dialog stable release", + "packageName": "@fluentui/react-components", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-dialog-58599157-0534-4751-ba63-d8df623b3fdc.json b/change/@fluentui-react-dialog-58599157-0534-4751-ba63-d8df623b3fdc.json new file mode 100644 index 0000000000000..9db947a5de4f9 --- /dev/null +++ b/change/@fluentui-react-dialog-58599157-0534-4751-ba63-d8df623b3fdc.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "feat: react-dialog stable release", + "packageName": "@fluentui/react-dialog", + "email": "bernardo.sunderhus@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 d462ae8ac15a9..4a4db1f39fe76 100644 --- a/packages/react-components/react-components/etc/react-components.api.md +++ b/packages/react-components/react-components/etc/react-components.api.md @@ -96,6 +96,43 @@ import { createHighContrastTheme } from '@fluentui/react-theme'; import { createLightTheme } from '@fluentui/react-theme'; import { createTeamsDarkTheme } from '@fluentui/react-theme'; import { CurveTokens } from '@fluentui/react-theme'; +import { Dialog } from '@fluentui/react-dialog'; +import { DialogActions } from '@fluentui/react-dialog'; +import { dialogActionsClassNames } from '@fluentui/react-dialog'; +import { DialogActionsPosition } from '@fluentui/react-dialog'; +import { DialogActionsProps } from '@fluentui/react-dialog'; +import { DialogActionsSlots } from '@fluentui/react-dialog'; +import { DialogActionsState } from '@fluentui/react-dialog'; +import { DialogBody } from '@fluentui/react-dialog'; +import { dialogBodyClassNames } from '@fluentui/react-dialog'; +import { DialogBodyProps } from '@fluentui/react-dialog'; +import { DialogBodySlots } from '@fluentui/react-dialog'; +import { DialogBodyState } from '@fluentui/react-dialog'; +import { DialogContent } from '@fluentui/react-dialog'; +import { dialogContentClassNames } from '@fluentui/react-dialog'; +import { DialogContentProps } from '@fluentui/react-dialog'; +import { DialogContentSlots } from '@fluentui/react-dialog'; +import { DialogContentState } from '@fluentui/react-dialog'; +import { DialogOpenChangeData } from '@fluentui/react-dialog'; +import { DialogOpenChangeEvent } from '@fluentui/react-dialog'; +import { DialogProps } from '@fluentui/react-dialog'; +import { DialogSlots } from '@fluentui/react-dialog'; +import { DialogState } from '@fluentui/react-dialog'; +import { DialogSurface } from '@fluentui/react-dialog'; +import { dialogSurfaceClassNames } from '@fluentui/react-dialog'; +import { DialogSurfaceProps } from '@fluentui/react-dialog'; +import { DialogSurfaceSlots } from '@fluentui/react-dialog'; +import { DialogSurfaceState } from '@fluentui/react-dialog'; +import { DialogTitle } from '@fluentui/react-dialog'; +import { dialogTitleClassNames } from '@fluentui/react-dialog'; +import { DialogTitleProps } from '@fluentui/react-dialog'; +import { DialogTitleSlots } from '@fluentui/react-dialog'; +import { DialogTitleState } from '@fluentui/react-dialog'; +import { DialogTrigger } from '@fluentui/react-dialog'; +import { DialogTriggerAction } from '@fluentui/react-dialog'; +import { DialogTriggerChildProps } from '@fluentui/react-dialog'; +import { DialogTriggerProps } from '@fluentui/react-dialog'; +import { DialogTriggerState } from '@fluentui/react-dialog'; import { Display } from '@fluentui/react-text'; import { displayClassNames } from '@fluentui/react-text'; import { Divider } from '@fluentui/react-divider'; @@ -275,6 +312,13 @@ import { renderBadge_unstable } from '@fluentui/react-badge'; import { renderButton_unstable } from '@fluentui/react-button'; import { renderCheckbox_unstable } from '@fluentui/react-checkbox'; import { renderCompoundButton_unstable } from '@fluentui/react-button'; +import { renderDialog_unstable } from '@fluentui/react-dialog'; +import { renderDialogActions_unstable } from '@fluentui/react-dialog'; +import { renderDialogBody_unstable } from '@fluentui/react-dialog'; +import { renderDialogContent_unstable } from '@fluentui/react-dialog'; +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 { RendererProvider } from '@griffel/react'; import { renderFluentProvider_unstable } from '@fluentui/react-provider'; @@ -443,6 +487,18 @@ import { useCompoundButton_unstable } from '@fluentui/react-button'; import { useCompoundButtonStyles_unstable } from '@fluentui/react-button'; import { useCounterBadge_unstable } from '@fluentui/react-badge'; import { useCounterBadgeStyles_unstable } from '@fluentui/react-badge'; +import { useDialog_unstable } from '@fluentui/react-dialog'; +import { useDialogActions_unstable } from '@fluentui/react-dialog'; +import { useDialogActionsStyles_unstable } from '@fluentui/react-dialog'; +import { useDialogBody_unstable } from '@fluentui/react-dialog'; +import { useDialogBodyStyles_unstable } from '@fluentui/react-dialog'; +import { useDialogContent_unstable } from '@fluentui/react-dialog'; +import { useDialogContentStyles_unstable } from '@fluentui/react-dialog'; +import { useDialogSurface_unstable } from '@fluentui/react-dialog'; +import { useDialogSurfaceStyles_unstable } from '@fluentui/react-dialog'; +import { useDialogTitle_unstable } from '@fluentui/react-dialog'; +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 { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts'; @@ -724,6 +780,80 @@ export { createTeamsDarkTheme } export { CurveTokens } +export { Dialog } + +export { DialogActions } + +export { dialogActionsClassNames } + +export { DialogActionsPosition } + +export { DialogActionsProps } + +export { DialogActionsSlots } + +export { DialogActionsState } + +export { DialogBody } + +export { dialogBodyClassNames } + +export { DialogBodyProps } + +export { DialogBodySlots } + +export { DialogBodyState } + +export { DialogContent } + +export { dialogContentClassNames } + +export { DialogContentProps } + +export { DialogContentSlots } + +export { DialogContentState } + +export { DialogOpenChangeData } + +export { DialogOpenChangeEvent } + +export { DialogProps } + +export { DialogSlots } + +export { DialogState } + +export { DialogSurface } + +export { dialogSurfaceClassNames } + +export { DialogSurfaceProps } + +export { DialogSurfaceSlots } + +export { DialogSurfaceState } + +export { DialogTitle } + +export { dialogTitleClassNames } + +export { DialogTitleProps } + +export { DialogTitleSlots } + +export { DialogTitleState } + +export { DialogTrigger } + +export { DialogTriggerAction } + +export { DialogTriggerChildProps } + +export { DialogTriggerProps } + +export { DialogTriggerState } + export { Display } export { displayClassNames } @@ -1082,6 +1212,20 @@ export { renderCheckbox_unstable } export { renderCompoundButton_unstable } +export { renderDialog_unstable } + +export { renderDialogActions_unstable } + +export { renderDialogBody_unstable } + +export { renderDialogContent_unstable } + +export { renderDialogSurface_unstable } + +export { renderDialogTitle_unstable } + +export { renderDialogTrigger_unstable } + export { renderDivider_unstable } export { RendererProvider } @@ -1418,6 +1562,30 @@ export { useCounterBadge_unstable } export { useCounterBadgeStyles_unstable } +export { useDialog_unstable } + +export { useDialogActions_unstable } + +export { useDialogActionsStyles_unstable } + +export { useDialogBody_unstable } + +export { useDialogBodyStyles_unstable } + +export { useDialogContent_unstable } + +export { useDialogContentStyles_unstable } + +export { useDialogSurface_unstable } + +export { useDialogSurfaceStyles_unstable } + +export { useDialogTitle_unstable } + +export { useDialogTitleStyles_unstable } + +export { useDialogTrigger_unstable } + export { useDivider_unstable } export { useDividerStyles_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 0b550af13ed61..402fe42c7447a 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 @@ -64,43 +64,6 @@ import { ComboboxState } from '@fluentui/react-combobox'; import { DATA_OVERFLOW_ITEM } from '@fluentui/react-overflow'; import { DATA_OVERFLOW_MENU } from '@fluentui/react-overflow'; import { DATA_OVERFLOWING } from '@fluentui/react-overflow'; -import { Dialog } from '@fluentui/react-dialog'; -import { DialogActions } from '@fluentui/react-dialog'; -import { dialogActionsClassNames } from '@fluentui/react-dialog'; -import { DialogActionsPosition } from '@fluentui/react-dialog'; -import { DialogActionsProps } from '@fluentui/react-dialog'; -import { DialogActionsSlots } from '@fluentui/react-dialog'; -import { DialogActionsState } from '@fluentui/react-dialog'; -import { DialogBody } from '@fluentui/react-dialog'; -import { dialogBodyClassNames } from '@fluentui/react-dialog'; -import { DialogBodyProps } from '@fluentui/react-dialog'; -import { DialogBodySlots } from '@fluentui/react-dialog'; -import { DialogBodyState } from '@fluentui/react-dialog'; -import { DialogContent } from '@fluentui/react-dialog'; -import { dialogContentClassNames } from '@fluentui/react-dialog'; -import { DialogContentProps } from '@fluentui/react-dialog'; -import { DialogContentSlots } from '@fluentui/react-dialog'; -import { DialogContentState } from '@fluentui/react-dialog'; -import { DialogOpenChangeData } from '@fluentui/react-dialog'; -import { DialogOpenChangeEvent } from '@fluentui/react-dialog'; -import { DialogProps } from '@fluentui/react-dialog'; -import { DialogSlots } from '@fluentui/react-dialog'; -import { DialogState } from '@fluentui/react-dialog'; -import { DialogSurface } from '@fluentui/react-dialog'; -import { dialogSurfaceClassNames } from '@fluentui/react-dialog'; -import { DialogSurfaceProps } from '@fluentui/react-dialog'; -import { DialogSurfaceSlots } from '@fluentui/react-dialog'; -import { DialogSurfaceState } from '@fluentui/react-dialog'; -import { DialogTitle } from '@fluentui/react-dialog'; -import { dialogTitleClassNames } from '@fluentui/react-dialog'; -import { DialogTitleProps } from '@fluentui/react-dialog'; -import { DialogTitleSlots } from '@fluentui/react-dialog'; -import { DialogTitleState } from '@fluentui/react-dialog'; -import { DialogTrigger } from '@fluentui/react-dialog'; -import { DialogTriggerAction } from '@fluentui/react-dialog'; -import { DialogTriggerChildProps } from '@fluentui/react-dialog'; -import { DialogTriggerProps } from '@fluentui/react-dialog'; -import { DialogTriggerState } from '@fluentui/react-dialog'; import { Dropdown } from '@fluentui/react-combobox'; import { dropdownClassNames } from '@fluentui/react-combobox'; import { DropdownContextValues } from '@fluentui/react-combobox'; @@ -154,13 +117,6 @@ import { renderCardFooter_unstable } from '@fluentui/react-card'; import { renderCardHeader_unstable } from '@fluentui/react-card'; import { renderCardPreview_unstable } from '@fluentui/react-card'; import { renderCombobox_unstable } from '@fluentui/react-combobox'; -import { renderDialog_unstable } from '@fluentui/react-dialog'; -import { renderDialogActions_unstable } from '@fluentui/react-dialog'; -import { renderDialogBody_unstable } from '@fluentui/react-dialog'; -import { renderDialogContent_unstable } from '@fluentui/react-dialog'; -import { renderDialogSurface_unstable } from '@fluentui/react-dialog'; -import { renderDialogTitle_unstable } from '@fluentui/react-dialog'; -import { renderDialogTrigger_unstable } from '@fluentui/react-dialog'; import { renderDropdown_unstable } from '@fluentui/react-combobox'; import { renderField_unstable } from '@fluentui/react-field'; import { renderListbox_unstable } from '@fluentui/react-combobox'; @@ -285,18 +241,6 @@ import { useCardPreviewStyles_unstable } from '@fluentui/react-card'; import { useCardStyles_unstable } from '@fluentui/react-card'; import { useCombobox_unstable } from '@fluentui/react-combobox'; import { useComboboxStyles_unstable } from '@fluentui/react-combobox'; -import { useDialog_unstable } from '@fluentui/react-dialog'; -import { useDialogActions_unstable } from '@fluentui/react-dialog'; -import { useDialogActionsStyles_unstable } from '@fluentui/react-dialog'; -import { useDialogBody_unstable } from '@fluentui/react-dialog'; -import { useDialogBodyStyles_unstable } from '@fluentui/react-dialog'; -import { useDialogContent_unstable } from '@fluentui/react-dialog'; -import { useDialogContentStyles_unstable } from '@fluentui/react-dialog'; -import { useDialogSurface_unstable } from '@fluentui/react-dialog'; -import { useDialogSurfaceStyles_unstable } from '@fluentui/react-dialog'; -import { useDialogTitle_unstable } from '@fluentui/react-dialog'; -import { useDialogTitleStyles_unstable } from '@fluentui/react-dialog'; -import { useDialogTrigger_unstable } from '@fluentui/react-dialog'; import { useDropdown_unstable } from '@fluentui/react-combobox'; import { useDropdownStyles_unstable } from '@fluentui/react-combobox'; import { useField_unstable } from '@fluentui/react-field'; @@ -457,80 +401,6 @@ export { DATA_OVERFLOW_MENU } export { DATA_OVERFLOWING } -export { Dialog } - -export { DialogActions } - -export { dialogActionsClassNames } - -export { DialogActionsPosition } - -export { DialogActionsProps } - -export { DialogActionsSlots } - -export { DialogActionsState } - -export { DialogBody } - -export { dialogBodyClassNames } - -export { DialogBodyProps } - -export { DialogBodySlots } - -export { DialogBodyState } - -export { DialogContent } - -export { dialogContentClassNames } - -export { DialogContentProps } - -export { DialogContentSlots } - -export { DialogContentState } - -export { DialogOpenChangeData } - -export { DialogOpenChangeEvent } - -export { DialogProps } - -export { DialogSlots } - -export { DialogState } - -export { DialogSurface } - -export { dialogSurfaceClassNames } - -export { DialogSurfaceProps } - -export { DialogSurfaceSlots } - -export { DialogSurfaceState } - -export { DialogTitle } - -export { dialogTitleClassNames } - -export { DialogTitleProps } - -export { DialogTitleSlots } - -export { DialogTitleState } - -export { DialogTrigger } - -export { DialogTriggerAction } - -export { DialogTriggerChildProps } - -export { DialogTriggerProps } - -export { DialogTriggerState } - export { Dropdown } export { dropdownClassNames } @@ -637,20 +507,6 @@ export { renderCardPreview_unstable } export { renderCombobox_unstable } -export { renderDialog_unstable } - -export { renderDialogActions_unstable } - -export { renderDialogBody_unstable } - -export { renderDialogContent_unstable } - -export { renderDialogSurface_unstable } - -export { renderDialogTitle_unstable } - -export { renderDialogTrigger_unstable } - export { renderDropdown_unstable } export { renderField_unstable } @@ -899,30 +755,6 @@ export { useCombobox_unstable } export { useComboboxStyles_unstable } -export { useDialog_unstable } - -export { useDialogActions_unstable } - -export { useDialogActionsStyles_unstable } - -export { useDialogBody_unstable } - -export { useDialogBodyStyles_unstable } - -export { useDialogContent_unstable } - -export { useDialogContentStyles_unstable } - -export { useDialogSurface_unstable } - -export { useDialogSurfaceStyles_unstable } - -export { useDialogTitle_unstable } - -export { useDialogTitleStyles_unstable } - -export { useDialogTrigger_unstable } - export { useDropdown_unstable } export { useDropdownStyles_unstable } diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts index ae1a4eea8ebe0..f6a7ff7ab0e06 100644 --- a/packages/react-components/react-components/src/index.ts +++ b/packages/react-components/react-components/src/index.ts @@ -587,3 +587,65 @@ export type { PositioningImperativeRef, PositioningVirtualElement, } from '@fluentui/react-positioning'; + +export { + Dialog, + useDialog_unstable, + renderDialog_unstable, + DialogTitle, + dialogTitleClassNames, + useDialogTitle_unstable, + useDialogTitleStyles_unstable, + renderDialogTitle_unstable, + DialogTrigger, + useDialogTrigger_unstable, + renderDialogTrigger_unstable, + DialogBody, + dialogBodyClassNames, + useDialogBody_unstable, + useDialogBodyStyles_unstable, + renderDialogBody_unstable, + DialogActions, + dialogActionsClassNames, + useDialogActions_unstable, + useDialogActionsStyles_unstable, + renderDialogActions_unstable, + DialogSurface, + dialogSurfaceClassNames, + useDialogSurface_unstable, + useDialogSurfaceStyles_unstable, + renderDialogSurface_unstable, + DialogContent, + dialogContentClassNames, + useDialogContentStyles_unstable, + useDialogContent_unstable, + renderDialogContent_unstable, +} from '@fluentui/react-dialog'; + +export type { + DialogProps, + DialogOpenChangeData, + DialogOpenChangeEvent, + DialogSlots, + DialogState, + DialogTriggerProps, + DialogTriggerChildProps, + DialogTriggerState, + DialogTriggerAction, + DialogActionsProps, + DialogActionsSlots, + DialogActionsState, + DialogActionsPosition, + DialogBodyProps, + DialogBodySlots, + DialogBodyState, + DialogTitleProps, + DialogTitleSlots, + DialogTitleState, + DialogSurfaceProps, + DialogSurfaceSlots, + DialogSurfaceState, + DialogContentProps, + DialogContentSlots, + DialogContentState, +} from '@fluentui/react-dialog'; diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts index 01e7ca0a7c4ab..bcbc181ddcf42 100644 --- a/packages/react-components/react-components/src/unstable/index.ts +++ b/packages/react-components/react-components/src/unstable/index.ts @@ -175,68 +175,6 @@ export { export type { OverflowProps, OverflowItemProps } from '@fluentui/react-overflow'; -export { - Dialog, - useDialog_unstable, - renderDialog_unstable, - DialogTitle, - dialogTitleClassNames, - useDialogTitle_unstable, - useDialogTitleStyles_unstable, - renderDialogTitle_unstable, - DialogTrigger, - useDialogTrigger_unstable, - renderDialogTrigger_unstable, - DialogBody, - dialogBodyClassNames, - useDialogBody_unstable, - useDialogBodyStyles_unstable, - renderDialogBody_unstable, - DialogActions, - dialogActionsClassNames, - useDialogActions_unstable, - useDialogActionsStyles_unstable, - renderDialogActions_unstable, - DialogSurface, - dialogSurfaceClassNames, - useDialogSurface_unstable, - useDialogSurfaceStyles_unstable, - renderDialogSurface_unstable, - DialogContent, - dialogContentClassNames, - useDialogContentStyles_unstable, - useDialogContent_unstable, - renderDialogContent_unstable, -} from '@fluentui/react-dialog'; - -export type { - DialogProps, - DialogOpenChangeData, - DialogOpenChangeEvent, - DialogSlots, - DialogState, - DialogTriggerProps, - DialogTriggerChildProps, - DialogTriggerState, - DialogTriggerAction, - DialogActionsProps, - DialogActionsSlots, - DialogActionsState, - DialogActionsPosition, - DialogBodyProps, - DialogBodySlots, - DialogBodyState, - DialogTitleProps, - DialogTitleSlots, - DialogTitleState, - DialogSurfaceProps, - DialogSurfaceSlots, - DialogSurfaceState, - DialogContentProps, - DialogContentSlots, - DialogContentState, -} from '@fluentui/react-dialog'; - export { TableCell, tableCellClassNames, diff --git a/packages/react-components/react-dialog/README.md b/packages/react-components/react-dialog/README.md index 5e8c4846fb1b1..661e4a9f875a4 100644 --- a/packages/react-components/react-dialog/README.md +++ b/packages/react-components/react-dialog/README.md @@ -2,4 +2,44 @@ **React Dialog components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)** -These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release. +To import React Dialog components: + +```jsx +import * as React from 'react'; +import { + Button, + Dialog, + DialogTrigger, + DialogSurface, + DialogTitle, + DialogBody, + DialogActions, + DialogContent, +} from '@fluentui/react-components'; + +export const DialogExample = () => { + return ( + + + + + + + Dialog title + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque + est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure + cumque eaque? + + + + + + + + + + + ); +}; +``` diff --git a/packages/react-components/react-dialog/package.json b/packages/react-components/react-dialog/package.json index 5e62c934eb112..796ad315a1246 100644 --- a/packages/react-components/react-dialog/package.json +++ b/packages/react-components/react-dialog/package.json @@ -53,9 +53,7 @@ }, "beachball": { "disallowedChangeTypes": [ - "major", - "minor", - "patch" + "major" ] }, "exports": { diff --git a/packages/react-components/react-dialog/src/stories/Dialog/DialogAlert.stories.tsx b/packages/react-components/react-dialog/src/stories/Dialog/DialogAlert.stories.tsx index 0a9f58b3218ac..b9838a48e2eea 100644 --- a/packages/react-components/react-dialog/src/stories/Dialog/DialogAlert.stories.tsx +++ b/packages/react-components/react-dialog/src/stories/Dialog/DialogAlert.stories.tsx @@ -7,8 +7,8 @@ import { DialogContent, DialogBody, DialogActions, -} from '@fluentui/react-dialog'; -import { Button } from '@fluentui/react-components'; + Button, +} from '@fluentui/react-components'; import story from './DialogAlert.md'; export const Alert = () => { diff --git a/packages/react-components/react-dialog/src/stories/Dialog/DialogChangeFocus.stories.tsx b/packages/react-components/react-dialog/src/stories/Dialog/DialogChangeFocus.stories.tsx index 5f45db6728d59..38e00934fda59 100644 --- a/packages/react-components/react-dialog/src/stories/Dialog/DialogChangeFocus.stories.tsx +++ b/packages/react-components/react-dialog/src/stories/Dialog/DialogChangeFocus.stories.tsx @@ -7,8 +7,8 @@ import { DialogContent, DialogBody, DialogActions, -} from '@fluentui/react-dialog'; -import { Button } from '@fluentui/react-components'; + Button, +} from '@fluentui/react-components'; export const ChangeFocus = () => { const buttonRef = React.useRef(null); diff --git a/packages/react-components/react-dialog/src/stories/Dialog/DialogControllingOpenAndClose.stories.tsx b/packages/react-components/react-dialog/src/stories/Dialog/DialogControllingOpenAndClose.stories.tsx index 1569186ec86bc..78ead768b3095 100644 --- a/packages/react-components/react-dialog/src/stories/Dialog/DialogControllingOpenAndClose.stories.tsx +++ b/packages/react-components/react-dialog/src/stories/Dialog/DialogControllingOpenAndClose.stories.tsx @@ -7,8 +7,8 @@ import { DialogContent, DialogBody, DialogActions, -} from '@fluentui/react-dialog'; -import { Button } from '@fluentui/react-components'; + Button, +} from '@fluentui/react-components'; import story from './DialogControllingOpenAndClose.md'; export const ControllingOpenAndClose = () => { diff --git a/packages/react-components/react-dialog/src/stories/Dialog/DialogCustomTrigger.stories.tsx b/packages/react-components/react-dialog/src/stories/Dialog/DialogCustomTrigger.stories.tsx index 3c762d9759fdd..0a88eedc3dd7a 100644 --- a/packages/react-components/react-dialog/src/stories/Dialog/DialogCustomTrigger.stories.tsx +++ b/packages/react-components/react-dialog/src/stories/Dialog/DialogCustomTrigger.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Button } from '@fluentui/react-components'; import { + Button, Dialog, DialogSurface, DialogTitle, @@ -8,8 +8,8 @@ import { DialogContent, DialogActions, DialogTrigger, -} from '@fluentui/react-dialog'; -import type { DialogTriggerChildProps } from '@fluentui/react-dialog'; +} from '@fluentui/react-components'; +import type { DialogTriggerChildProps } from '@fluentui/react-components'; import story from './DialogCustomTrigger.md'; const CustomDialogTrigger = React.forwardRef((props, ref) => { diff --git a/packages/react-components/react-dialog/src/stories/Dialog/DialogDefault.stories.tsx b/packages/react-components/react-dialog/src/stories/Dialog/DialogDefault.stories.tsx index 48d522de2fd26..ad0ebcde56477 100644 --- a/packages/react-components/react-dialog/src/stories/Dialog/DialogDefault.stories.tsx +++ b/packages/react-components/react-dialog/src/stories/Dialog/DialogDefault.stories.tsx @@ -7,8 +7,8 @@ import { DialogBody, DialogActions, DialogContent, -} from '@fluentui/react-dialog'; -import { Button } from '@fluentui/react-components'; + Button, +} from '@fluentui/react-components'; export const Default = () => { return ( diff --git a/packages/react-components/react-dialog/src/stories/Dialog/DialogDescription.md b/packages/react-components/react-dialog/src/stories/Dialog/DialogDescription.md index a1459659f0f29..041ae3715e4f9 100644 --- a/packages/react-components/react-dialog/src/stories/Dialog/DialogDescription.md +++ b/packages/react-components/react-dialog/src/stories/Dialog/DialogDescription.md @@ -1,22 +1 @@ - - -> **⚠️ Preview components are considered unstable:** -> -> ```jsx -> -> import { -> Dialog, -> DialogContent, -> DialogBody, -> DialogTitle, -> DialogSurface, -> DialogActions, -> DialogTrigger, -> } 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 - `Dialog` is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close. diff --git a/packages/react-components/react-dialog/src/stories/Dialog/DialogNoFocusableElement.stories.tsx b/packages/react-components/react-dialog/src/stories/Dialog/DialogNoFocusableElement.stories.tsx index 1cf0abd56a8f5..ce3b7117d7e9f 100644 --- a/packages/react-components/react-dialog/src/stories/Dialog/DialogNoFocusableElement.stories.tsx +++ b/packages/react-components/react-dialog/src/stories/Dialog/DialogNoFocusableElement.stories.tsx @@ -1,6 +1,13 @@ import * as React from 'react'; -import { Dialog, DialogTrigger, DialogSurface, DialogContent, DialogTitle, DialogBody } from '@fluentui/react-dialog'; -import { Button } from '@fluentui/react-components'; +import { + Dialog, + DialogTrigger, + DialogSurface, + DialogContent, + DialogTitle, + DialogBody, + Button, +} from '@fluentui/react-components'; import story from './DialogNoFocusableElement.md'; diff --git a/packages/react-components/react-dialog/src/stories/Dialog/DialogNonModal.stories.tsx b/packages/react-components/react-dialog/src/stories/Dialog/DialogNonModal.stories.tsx index 270d5c0d7e2fe..9834e0aa165da 100644 --- a/packages/react-components/react-dialog/src/stories/Dialog/DialogNonModal.stories.tsx +++ b/packages/react-components/react-dialog/src/stories/Dialog/DialogNonModal.stories.tsx @@ -1,6 +1,13 @@ import * as React from 'react'; -import { Dialog, DialogTrigger, DialogSurface, DialogTitle, DialogBody, DialogContent } from '@fluentui/react-dialog'; -import { Button } from '@fluentui/react-components'; +import { + Dialog, + DialogTrigger, + DialogSurface, + DialogTitle, + DialogBody, + DialogContent, + Button, +} from '@fluentui/react-components'; import story from './DialogNonModal.md'; export const NonModal = () => { diff --git a/packages/react-components/react-dialog/src/stories/Dialog/DialogScrollingLongContent.stories.tsx b/packages/react-components/react-dialog/src/stories/Dialog/DialogScrollingLongContent.stories.tsx index 0654b51b4dc76..37024a4a0ee3b 100644 --- a/packages/react-components/react-dialog/src/stories/Dialog/DialogScrollingLongContent.stories.tsx +++ b/packages/react-components/react-dialog/src/stories/Dialog/DialogScrollingLongContent.stories.tsx @@ -7,8 +7,8 @@ import { DialogBody, DialogContent, DialogActions, -} from '@fluentui/react-dialog'; -import { Button } from '@fluentui/react-components'; + Button, +} from '@fluentui/react-components'; export const ScrollingLongContent = () => { return ( diff --git a/packages/react-components/react-dialog/src/stories/Dialog/DialogTitleCustomAction.stories.tsx b/packages/react-components/react-dialog/src/stories/Dialog/DialogTitleCustomAction.stories.tsx index 6889fde1e0808..275aa634b8489 100644 --- a/packages/react-components/react-dialog/src/stories/Dialog/DialogTitleCustomAction.stories.tsx +++ b/packages/react-components/react-dialog/src/stories/Dialog/DialogTitleCustomAction.stories.tsx @@ -1,6 +1,13 @@ import * as React from 'react'; -import { Dialog, DialogTrigger, DialogSurface, DialogTitle, DialogBody, DialogContent } from '@fluentui/react-dialog'; -import { Button } from '@fluentui/react-components'; +import { + Dialog, + DialogTrigger, + DialogSurface, + DialogTitle, + DialogBody, + DialogContent, + Button, +} from '@fluentui/react-components'; import story from './DialogTitleCustomAction.md'; import { Dismiss24Regular } from '@fluentui/react-icons'; diff --git a/packages/react-components/react-dialog/src/stories/Dialog/DialogTitleNoAction.stories.tsx b/packages/react-components/react-dialog/src/stories/Dialog/DialogTitleNoAction.stories.tsx index 647c9136d6666..577a846b83121 100644 --- a/packages/react-components/react-dialog/src/stories/Dialog/DialogTitleNoAction.stories.tsx +++ b/packages/react-components/react-dialog/src/stories/Dialog/DialogTitleNoAction.stories.tsx @@ -7,8 +7,8 @@ import { DialogActions, DialogContent, DialogBody, -} from '@fluentui/react-dialog'; -import { Button } from '@fluentui/react-components'; + Button, +} from '@fluentui/react-components'; import story from './DialogTitleNoAction.md'; export const TitleNoAction = () => { diff --git a/packages/react-components/react-dialog/src/stories/Dialog/DialogTriggerOutsideDialog.stories.tsx b/packages/react-components/react-dialog/src/stories/Dialog/DialogTriggerOutsideDialog.stories.tsx index 3bbb1240eb819..e0f1c8c408d53 100644 --- a/packages/react-components/react-dialog/src/stories/Dialog/DialogTriggerOutsideDialog.stories.tsx +++ b/packages/react-components/react-dialog/src/stories/Dialog/DialogTriggerOutsideDialog.stories.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { Button } from '@fluentui/react-components'; import { Dialog, DialogSurface, @@ -8,7 +7,8 @@ import { DialogActions, DialogTrigger, DialogBody, -} from '@fluentui/react-dialog'; + Button, +} from '@fluentui/react-components'; import story from './DialogTriggerOutsideDialog.md'; export const TriggerOutsideDialog = () => { diff --git a/packages/react-components/react-dialog/src/stories/Dialog/DialogWithForm.stories.tsx b/packages/react-components/react-dialog/src/stories/Dialog/DialogWithForm.stories.tsx index 25813b3452a31..470ec1b83fc00 100644 --- a/packages/react-components/react-dialog/src/stories/Dialog/DialogWithForm.stories.tsx +++ b/packages/react-components/react-dialog/src/stories/Dialog/DialogWithForm.stories.tsx @@ -7,8 +7,11 @@ import { DialogContent, DialogBody, DialogActions, -} from '@fluentui/react-dialog'; -import { Button, Input, Label, makeStyles } from '@fluentui/react-components'; + Button, + Input, + Label, + makeStyles, +} from '@fluentui/react-components'; import story from './DialogWithForm.md'; const useStyles = makeStyles({ diff --git a/packages/react-components/react-dialog/src/stories/Dialog/index.stories.tsx b/packages/react-components/react-dialog/src/stories/Dialog/index.stories.tsx index 1f21483a700d9..807f74f1d98ee 100644 --- a/packages/react-components/react-dialog/src/stories/Dialog/index.stories.tsx +++ b/packages/react-components/react-dialog/src/stories/Dialog/index.stories.tsx @@ -1,4 +1,4 @@ -import { Dialog, DialogSurface, DialogTitle, DialogActions, DialogTrigger } from '@fluentui/react-dialog'; +import { Dialog, DialogSurface, DialogTitle, DialogActions, DialogTrigger } from '@fluentui/react-components'; import descriptionMd from './DialogDescription.md'; import bestPracticesMd from './DialogBestPractices.md'; @@ -19,7 +19,7 @@ export { TitleCustomAction } from './DialogTitleCustomAction.stories'; export { TitleNoAction } from './DialogTitleNoAction.stories'; const metadata: ComponentMeta = { - title: 'Preview Components/Dialog', + title: 'Components/Dialog', component: Dialog, subcomponents: { DialogTrigger,