feat(react-drawer): release Drawer to unstable (#28005)

microsoft · May 29, 2023 · 2780b2f · 2780b2f
1 parent 8a4890f
commit 2780b2f
Show file tree

Hide file tree

Showing 7 changed files with 310 additions and 2 deletions.
diff --git a/change/@fluentui-react-components-5dbe2544-80b6-411c-844b-c47d0f400731.json b/change/@fluentui-react-components-5dbe2544-80b6-411c-844b-c47d0f400731.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: release react-drawer to unstable",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-drawer-317328ea-1d85-486f-baab-6a1206c91ebf.json b/change/@fluentui-react-drawer-317328ea-1d85-486f-baab-6a1206c91ebf.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: release react-drawer to unstable",
+  "packageName": "@fluentui/react-drawer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
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
@@ -9,6 +9,41 @@ import { alertClassNames } from '@fluentui/react-alert';
 import { AlertProps } from '@fluentui/react-alert';
 import { AlertSlots } from '@fluentui/react-alert';
 import { AlertState } from '@fluentui/react-alert';
+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 { DrawerInline } from '@fluentui/react-drawer';
+import { drawerInlineClassNames } from '@fluentui/react-drawer';
+import { DrawerInlineProps } from '@fluentui/react-drawer';
+import { DrawerInlineSlots } from '@fluentui/react-drawer';
+import { DrawerInlineState } from '@fluentui/react-drawer';
+import { DrawerOverlay } from '@fluentui/react-drawer';
+import { drawerOverlayClassNames } from '@fluentui/react-drawer';
+import { DrawerOverlayProps } from '@fluentui/react-drawer';
+import { DrawerOverlaySlots } from '@fluentui/react-drawer';
+import { DrawerOverlayState } from '@fluentui/react-drawer';
+import { DrawerProps } from '@fluentui/react-drawer';
+import { DrawerSlots } from '@fluentui/react-drawer';
+import { DrawerState } from '@fluentui/react-drawer';
 import { flattenTree_unstable } from '@fluentui/react-tree';
 import { FlatTree } from '@fluentui/react-tree';
 import { FlatTreeItem } from '@fluentui/react-tree';
@@ -26,6 +61,14 @@ import { InfoLabelSlots } from '@fluentui/react-infobutton';
 import { InfoLabelState } from '@fluentui/react-infobutton';
 import { NestedTreeItem } from '@fluentui/react-tree';
 import { renderAlert_unstable } from '@fluentui/react-alert';
+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 { renderDrawerInline_unstable } from '@fluentui/react-drawer';
+import { renderDrawerOverlay_unstable } from '@fluentui/react-drawer';
 import { renderInfoButton_unstable } from '@fluentui/react-infobutton';
 import { renderInfoLabel_unstable } from '@fluentui/react-infobutton';
 import { renderTree_unstable } from '@fluentui/react-tree';
@@ -72,6 +115,21 @@ import { TreeSlots } from '@fluentui/react-tree';
 import { TreeState } from '@fluentui/react-tree';
 import { useAlert_unstable } from '@fluentui/react-alert';
 import { useAlertStyles_unstable } from '@fluentui/react-alert';
+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 { useDrawerInline_unstable } from '@fluentui/react-drawer';
+import { useDrawerInlineStyles_unstable } from '@fluentui/react-drawer';
+import { useDrawerOverlay_unstable } from '@fluentui/react-drawer';
+import { useDrawerOverlayStyles_unstable } from '@fluentui/react-drawer';
 import { useDynamicVirtualizerMeasure } from '@fluentui/react-virtualizer';
 import { useFlatTree_unstable } from '@fluentui/react-tree';
 import { useInfoButton_unstable } from '@fluentui/react-infobutton';
@@ -131,6 +189,76 @@ export { AlertSlots }
 
 export { AlertState }
 
+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 { DrawerInline }
+
+export { drawerInlineClassNames }
+
+export { DrawerInlineProps }
+
+export { DrawerInlineSlots }
+
+export { DrawerInlineState }
+
+export { DrawerOverlay }
+
+export { drawerOverlayClassNames }
+
+export { DrawerOverlayProps }
+
+export { DrawerOverlaySlots }
+
+export { DrawerOverlayState }
+
+export { DrawerProps }
+
+export { DrawerSlots }
+
+export { DrawerState }
+
 export { flattenTree_unstable }
 
 export { FlatTree }
@@ -165,6 +293,22 @@ export { NestedTreeItem }
 
 export { renderAlert_unstable }
 
+export { renderDrawer_unstable }
+
+export { renderDrawerBody_unstable }
+
+export { renderDrawerFooter_unstable }
+
+export { renderDrawerHeader_unstable }
+
+export { renderDrawerHeaderNavigation_unstable }
+
+export { renderDrawerHeaderTitle_unstable }
+
+export { renderDrawerInline_unstable }
+
+export { renderDrawerOverlay_unstable }
+
 export { renderInfoButton_unstable }
 
 export { renderInfoLabel_unstable }
@@ -257,6 +401,36 @@ export { useAlert_unstable }
 
 export { useAlertStyles_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 { useDrawerInline_unstable }
+
+export { useDrawerInlineStyles_unstable }
+
+export { useDrawerOverlay_unstable }
+
+export { useDrawerOverlayStyles_unstable }
+
 export { useDynamicVirtualizerMeasure }
 
 export { useFlatTree_unstable }

diff --git a/packages/react-components/react-components/package.json b/packages/react-components/react-components/package.json
@@ -41,6 +41,7 @@
     "@fluentui/react-combobox": "^9.3.4",
     "@fluentui/react-dialog": "^9.5.8",
     "@fluentui/react-divider": "^9.2.14",
+    "@fluentui/react-drawer": "9.0.0-beta.0",
     "@fluentui/react-field": "^9.1.5",
     "@fluentui/react-image": "^9.1.11",
     "@fluentui/react-infobutton": "9.0.0-beta.33",

diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts
@@ -132,3 +132,67 @@ export type {
   TreeItemAsideSlots,
   TreeItemAsideState,
 } from '@fluentui/react-tree';
+
+export {
+  Drawer,
+  renderDrawer_unstable,
+  useDrawer_unstable,
+  DrawerOverlay,
+  drawerOverlayClassNames,
+  renderDrawerOverlay_unstable,
+  useDrawerOverlayStyles_unstable,
+  useDrawerOverlay_unstable,
+  DrawerInline,
+  drawerInlineClassNames,
+  renderDrawerInline_unstable,
+  useDrawerInlineStyles_unstable,
+  useDrawerInline_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,
+  DrawerOverlayProps,
+  DrawerOverlaySlots,
+  DrawerOverlayState,
+  DrawerInlineProps,
+  DrawerInlineSlots,
+  DrawerInlineState,
+  DrawerBodySlots,
+  DrawerBodyState,
+  DrawerHeaderSlots,
+  DrawerHeaderState,
+  DrawerHeaderTitleSlots,
+  DrawerHeaderTitleState,
+  DrawerFooterSlots,
+  DrawerFooterState,
+  DrawerHeaderNavigationProps,
+  DrawerHeaderNavigationSlots,
+  DrawerHeaderNavigationState,
+} from '@fluentui/react-drawer';
diff --git a/packages/react-components/react-drawer/README.md b/packages/react-components/react-drawer/README.md
@@ -3,3 +3,59 @@
 **React Drawer components for [Fluent UI React](https://react.fluentui.dev/)**
 
 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.
+
+The Drawer gives users a quick entry point to configuration and information. It should be used when retaining context is beneficial to users. An overlay is optional depending on whether or not interacting with the background content is beneficial to the user’s context/scenario. An overlay makes the Drawer blocking and signifies that the users full attention is required when making configurations.
+
+## Usage
+
+To import React Drawer components:
+
+```tsx
+import {
+  DrawerOverlay,
+  DrawerInline,
+  DrawerHeader,
+  DrawerHeaderTitle,
+  DrawerHeaderNavigation,
+  DrawerBody
+} from "@fluentui/react-components';
+```
+
+Simple example of Drawer Usage:
+
+```tsx
+import { DrawerBody, DrawerHeader, DrawerHeaderTitle, Drawer } from '@fluentui/react-drawer';
+import { Button } from '@fluentui/react-components';
+import { Dismiss24Regular } from '@fluentui/react-icons';
+
+export const App = () => (
+  <Drawer type="inline" open>
+    <DrawerHeader>
+      <DrawerHeaderTitle
+        action={
+          <Button
+            appearance="subtle"
+            aria-label="Close drawer"
+            icon={<Dismiss24Regular />}
+            onClick={() => setIsOpen(false)}
+          />
+        }
+      >
+        Title goes here
+      </DrawerHeaderTitle>
+    </DrawerHeader>
+
+    <DrawerBody>
+      <p>Content goes here</p>
+    </DrawerBody>
+  </Drawer>
+);
+```
+
+## Specification
+
+See the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.
+
+## API
+
+For information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-drawer--default).
diff --git a/packages/react-components/react-drawer/package.json b/packages/react-components/react-drawer/package.json
@@ -1,7 +1,6 @@
 {
   "name": "@fluentui/react-drawer",
-  "version": "9.0.0-alpha.0",
-  "private": true,
+  "version": "9.0.0-beta.0",
   "description": "Drawer components for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",