From 9356b0688a2e2d8d1de0fd88598c702c946f9de4 Mon Sep 17 00:00:00 2001 From: Bernardo Sunderhus Date: Wed, 12 Oct 2022 10:38:21 +0000 Subject: [PATCH] feat(react-dialog): Release `react-dialog` stable version --- .../react-components/src/index.ts | 62 +++++++++++++++++++ .../react-components/src/unstable/index.ts | 62 ------------------- .../react-components/react-dialog/README.md | 44 ++++++++++++- .../react-dialog/package.json | 2 +- .../src/stories/Dialog/DialogDescription.md | 21 ------- .../src/stories/Dialog/index.stories.tsx | 2 +- yarn.lock | 19 +++++- 7 files changed, 124 insertions(+), 88 deletions(-) diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts index ae1a4eea8ebe0b..f6a7ff7ab0e067 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 01e7ca0a7c4abc..bcbc181ddcf42c 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 5e8c4846fb1b15..bc3e0e391deb6e 100644 --- a/packages/react-components/react-dialog/README.md +++ b/packages/react-components/react-dialog/README.md @@ -1,5 +1,45 @@ -# @fluentui/react-dialog +# @fluentui/react-Dialog **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: + +```js +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 5e62c934eb112e..c9b2063df5f559 100644 --- a/packages/react-components/react-dialog/package.json +++ b/packages/react-components/react-dialog/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-dialog", - "version": "9.0.0-beta.11", + "version": "9.0.0", "description": "Dialog component for Fluent UI React", "main": "lib-commonjs/index.js", "module": "lib/index.js", 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 a1459659f0f29f..041ae3715e4f91 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/index.stories.tsx b/packages/react-components/react-dialog/src/stories/Dialog/index.stories.tsx index 1f21483a700d9d..62a7f8f6d4226b 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 @@ -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, diff --git a/yarn.lock b/yarn.lock index 98756e1cd44e78..21e394a5731e8a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1656,6 +1656,23 @@ "@uifabric/set-version" "^7.0.23" tslib "^1.10.0" +"@fluentui/react-dialog@9.0.0-beta.11": + version "9.0.0-beta.11" + resolved "https://registry.yarnpkg.com/@fluentui/react-dialog/-/react-dialog-9.0.0-beta.11.tgz#57596a64a46bd0b2ac3176f84446b014e0e90bb0" + integrity sha512-/2PF2bA7dBxfnHLvobIagRizow+6pnyBVZCBPqEmumc75DGw9Sya/XXWA64Mdw6RfOQYtrGNbTNWbUmPZgg8fg== + dependencies: + "@fluentui/keyboard-keys" "^9.0.0" + "@fluentui/react-aria" "^9.2.1" + "@fluentui/react-context-selector" "^9.0.3" + "@fluentui/react-icons" "^2.0.175" + "@fluentui/react-portal" "^9.0.6" + "@fluentui/react-shared-contexts" "^9.0.1" + "@fluentui/react-tabster" "^9.1.2" + "@fluentui/react-theme" "^9.1.0" + "@fluentui/react-utilities" "^9.1.0" + "@griffel/react" "^1.3.0" + tslib "^2.1.0" + "@fluentui/react-icons@^2.0.175": version "2.0.175" resolved "https://registry.yarnpkg.com/@fluentui/react-icons/-/react-icons-2.0.175.tgz#70f60989b5792c1770253beeb0a1f4dc9329e59d" @@ -1710,7 +1727,7 @@ dependencies: tslib "^2.1.0" -"@griffel/react@1.4.0", "@griffel/react@^1.0.0", "@griffel/react@^1.4.0": +"@griffel/react@1.4.0", "@griffel/react@^1.0.0", "@griffel/react@^1.3.0", "@griffel/react@^1.4.0": version "1.4.0" resolved "https://registry.yarnpkg.com/@griffel/react/-/react-1.4.0.tgz#dbd56924af99d56aa22550f1804ee667ddcd3f30" integrity sha512-AR9tY0AJX734MNno/j4uYpkfjKS8OA9rWreBZYIeQMdPApRBnbZjEnkUqmIUBfT8JcsNgQFPv6ssETCK0+dWtQ==