feat(react-dialog): Release react-dialog stable version

microsoft · Oct 12, 2022 · f306c2e · f306c2e
1 parent 16c7bca
commit f306c2e
Show file tree

Hide file tree

Showing 9 changed files with 138 additions and 88 deletions.
diff --git a/change/@fluentui-react-components-2d897c1c-e152-4a06-9a07-e26c48e3f71e.json b/change/@fluentui-react-components-2d897c1c-e152-4a06-9a07-e26c48e3f71e.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: react-dialog stable release",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-dialog-f979ad8c-4df3-4bb9-aaa1-25298cbb6cec.json b/change/@fluentui-react-dialog-f979ad8c-4df3-4bb9-aaa1-25298cbb6cec.json
@@ -0,0 +1,7 @@
+{
+  "comment": "feat: react-dialog stable release",
+  "type": "none",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git 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
@@ -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
@@ -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>
+      <DialogTrigger>
+        <Button>Open dialog</Button>
+      </DialogTrigger>
+      <DialogSurface>
+        <DialogBody>
+          <DialogTitle>Dialog title</DialogTitle>
+          <DialogContent>
+            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?
+          </DialogContent>
+          <DialogActions>
+            <DialogTrigger>
+              <Button appearance="secondary">Close</Button>
+            </DialogTrigger>
+            <Button appearance="primary">Do Something</Button>
+          </DialogActions>
+        </DialogBody>
+      </DialogSurface>
+    </Dialog>
+  );
+};
+```
diff --git 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
@@ -1,22 +1 @@
-<!-- Don't allow prettier to collapse code block into single line -->
-<!-- prettier-ignore -->
-> **⚠️ 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
@@ -19,7 +19,7 @@ export { TitleCustomAction } from './DialogTitleCustomAction.stories';
 export { TitleNoAction } from './DialogTitleNoAction.stories';
 
 const metadata: ComponentMeta<typeof Dialog> = {
-  title: 'Preview Components/Dialog',
+  title: 'Components/Dialog',
   component: Dialog,
   subcomponents: {
     DialogTrigger,

diff --git a/yarn.lock b/yarn.lock
@@ -1656,6 +1656,23 @@
     "@uifabric/set-version" "^7.0.23"
     tslib "^1.10.0"
 
+"@fluentui/[email protected]":
+  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/[email protected]", "@griffel/react@^1.0.0", "@griffel/react@^1.4.0":
+"@griffel/[email protected]", "@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==