@fluentui/react-dialog 9.0.0-beta.7 → 9.0.0-beta.9

package/CHANGELOG.json

@@ -2,7 +2,191 @@
   "name": "@fluentui/react-dialog",
   "entries": [
     {
-      "date": "Wed, 03 Aug 2022 16:00:14 GMT",
+      "date": "Tue, 20 Sep 2022 20:54:06 GMT",
+      "tag": "@fluentui/react-dialog_v9.0.0-beta.9",
+      "version": "9.0.0-beta.9",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "79d1b0e32631bf916a52834e3731de464aa4898c",
+            "comment": "bugfix(react-dialog): Adds color style to DialogSurface"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14",
+            "commit": "9617a5a46ef4c5e310a066a5374ff2ed61db3c66"
+          }
+        ],
+        "none": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "81de40f0df0dfa8bac4e4fb522bf830d9fe8e066",
+            "comment": "Includes Tooltip Escape scenarios on e2e tests"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "cf5f5e14c86cc35ee8bfff6c6be130a36fb6d16d",
+            "comment": "chore: scaffold DialogContent component"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 15 Sep 2022 09:48:59 GMT",
+      "tag": "@fluentui/react-dialog_v9.0.0-beta.8",
+      "version": "9.0.0-beta.8",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "0547583ebcebe746110e5ef8d0599b0972b1f4c6",
+            "comment": "chore(react-dialog): Updates trigger to use useARIAButtonProps"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "827dffa4e4a164682c29b157b572ceb63c5dd6a9",
+            "comment": "chore(react-dialog): removes react-button max-width overrides"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "7b46e969e352bd636f7094ac5e29177fb7e8bff2",
+            "comment": "feat: add scroll lock feature to Dialog"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "b02e8f3ab48daf6b9db7f7efebbf026c6cbed740",
+            "comment": "feat(react-dialog): moves backdrop slot from Dialog to DialogSurface"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "9c10bc432b8fc8df6d51975c580a19603a10fd1e",
+            "comment": "feat(react-dialog): adds proper style to make DialogBody responsive"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "c9a58334a7abebf949f59d2c0a4bb1271074d808",
+            "comment": "chore: renames overlay slot to backdrop"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "6c6fe4c8246abec30d9cd3ba2079d379c4d7acb8",
+            "comment": "bugfix: stops propagation on Escape key"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "2630091d8093879d26c38dc6a4c585e886cff057",
+            "comment": "feat: Adds padding-right style to avoid jumping on scroll lock"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "94ab82dd00db0bf177908e7ccc60125efaa4e22d",
+            "comment": "chore(react-dialog): removes document listener to Escape keydown"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "0865ee92c7cab7273aafd21b1b3dff9418c0d479",
+            "comment": "feat(react-dialog): replace `closeButton` to a more generic `action` slot"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "fd88d8b10fe32eb635c949aa28653c3376f64c3d",
+            "comment": "feat(react-dialog): 1st rule of ARIA for Dialog"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-utilities to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.3",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.1",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-aria to v9.2.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-tabster to v9.1.1",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-theme to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-portal to v9.0.5",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
+            "comment": "chore: update package scaffold"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "5cd0e8dbc07b0a71ab0a48813cdcbbbd37a222e1",
+            "comment": "chore: remove localShorthands in favor of griffel shorthands"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "ba9444d594f3a960cc590eae5237c08bf7c5a07f",
+            "comment": "chore: consume cypress.config from it's package boundary"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 03 Aug 2022 16:03:47 GMT",
       "tag": "@fluentui/react-dialog_v9.0.0-beta.7",
       "version": "9.0.0-beta.7",
       "comments": {
@@ -23,25 +207,25 @@
             "author": "beachball",
             "package": "@fluentui/react-dialog",
             "comment": "Bump @fluentui/react-aria to v9.1.0",
-            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-dialog",
             "comment": "Bump @fluentui/react-tabster to v9.1.0",
-            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-dialog",
             "comment": "Bump @fluentui/react-portal to v9.0.4",
-            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-dialog",
             "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
-            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
           }
         ],
         "none": [

package/CHANGELOG.md

@@ -1,22 +1,60 @@
 # Change Log - @fluentui/react-dialog
 
-This log was last generated on Wed, 03 Aug 2022 16:00:14 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Sep 2022 20:54:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.0.0-beta.9)
+
+Tue, 20 Sep 2022 20:54:06 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.0.0-beta.8..@fluentui/react-dialog_v9.0.0-beta.9)
+
+### Changes
+
+- bugfix(react-dialog): Adds color style to DialogSurface ([PR #24832](https://github.com/microsoft/fluentui/pull/24832) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24870](https://github.com/microsoft/fluentui/pull/24870) by beachball)
+
+## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.0.0-beta.8)
+
+Thu, 15 Sep 2022 09:48:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.0.0-beta.7..@fluentui/react-dialog_v9.0.0-beta.8)
+
+### Changes
+
+- chore(react-dialog): Updates trigger to use useARIAButtonProps ([PR #24177](https://github.com/microsoft/fluentui/pull/24177) by bernardo.sunderhus@gmail.com)
+- chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
+- chore(react-dialog): removes react-button max-width overrides ([PR #24674](https://github.com/microsoft/fluentui/pull/24674) by bernardo.sunderhus@gmail.com)
+- feat: add scroll lock feature to Dialog ([PR #24375](https://github.com/microsoft/fluentui/pull/24375) by bernardo.sunderhus@gmail.com)
+- feat(react-dialog): moves backdrop slot from Dialog to DialogSurface ([PR #24669](https://github.com/microsoft/fluentui/pull/24669) by bernardo.sunderhus@gmail.com)
+- feat(react-dialog): adds proper style to make DialogBody responsive ([PR #24354](https://github.com/microsoft/fluentui/pull/24354) by bernardo.sunderhus@gmail.com)
+- chore: renames overlay slot to backdrop ([PR #24220](https://github.com/microsoft/fluentui/pull/24220) by bernardo.sunderhus@gmail.com)
+- bugfix: stops propagation on Escape key ([PR #24750](https://github.com/microsoft/fluentui/pull/24750) by bernardo.sunderhus@gmail.com)
+- feat: Adds padding-right style to avoid jumping on scroll lock ([PR #24408](https://github.com/microsoft/fluentui/pull/24408) by bernardo.sunderhus@gmail.com)
+- chore(react-dialog): removes document listener to Escape keydown ([PR #24668](https://github.com/microsoft/fluentui/pull/24668) by bernardo.sunderhus@gmail.com)
+- feat(react-dialog): replace `closeButton` to a more generic `action` slot ([PR #24719](https://github.com/microsoft/fluentui/pull/24719) by bernardo.sunderhus@gmail.com)
+- feat(react-dialog): 1st rule of ARIA for Dialog ([PR #24525](https://github.com/microsoft/fluentui/pull/24525) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.3 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-aria to v9.2.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-tabster to v9.1.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-portal to v9.0.5 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+
 ## [9.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.0.0-beta.7)
 
-Wed, 03 Aug 2022 16:00:14 GMT 
+Wed, 03 Aug 2022 16:03:47 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.0.0-beta.6..@fluentui/react-dialog_v9.0.0-beta.7)
 
 ### Changes
 
 - chore: adds aria-labelledby and aria-describedby attributes ([PR #24141](https://github.com/microsoft/fluentui/pull/24141) by bernardo.sunderhus@gmail.com)
 - feat: adds react-dialog to react-components unstable ([PR #24140](https://github.com/microsoft/fluentui/pull/24140) by bernardo.sunderhus@gmail.com)
-- Bump @fluentui/react-aria to v9.1.0 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
-- Bump @fluentui/react-tabster to v9.1.0 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
-- Bump @fluentui/react-portal to v9.0.4 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
-- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
+- Bump @fluentui/react-aria to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
+- Bump @fluentui/react-tabster to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
+- Bump @fluentui/react-portal to v9.0.4 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
 
 ## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.0.0-beta.6)
 

package/Spec.md

@@ -83,19 +83,7 @@ Sample usages will be give in the following section of this document [Sample cod
 The root level component serves as an interface for interaction with all possible behaviors exposed. It provides context down the hierarchy to `children` compound components to allow functionality. This component expects to receive as children either a `DialogSurface` or a `DialogTrigger` and a `DialogSurface` (or some component that will eventually render one of those compound components) in this specific order
 
 ```tsx
-type DialogSlots = {
-  /**
-   * Dimmed background of dialog.
-   * The default overlay is rendered as a `<div>` with styling.
-   * This slot expects a `<div>` element which will replace the default overlay.
-   * The overlay should have `aria-hidden="true"`.
-   */
-  overlay?: Slot<'div'>;
-  /**
-   * The root element of the Dialog right after Portal.
-   */
-  root: Slot<'div'>;
-};
+type DialogSlots = {};
 
 type DialogProps = ComponentProps<DialogSlots> & {
   /**
@@ -131,7 +119,7 @@ type DialogOpenChangeData = {
   /**
    * The event source of the callback invocation
    */
-  type: 'escapeKeyDown' | 'overlayClick' | 'triggerClick';
+  type: 'escapeKeyDown' | 'backdropClick' | 'triggerClick';
   /**
    * The next value for the internal state of the dialog
    */
@@ -167,19 +155,26 @@ export type DialogTriggerProps = {
 The `DialogSurface` component represents the visual part of a `Dialog` as a whole, it contains everything that should be visible.
 
 ```tsx
-type DialogTitleSlots = {
+type DialogSurfaceSlots = {
   /**
-   * By default this is a div.
+   * Dimmed background of dialog.
+   * The default backdrop is rendered as a `<div>` with styling.
+   * This slot expects a `<div>` element which will replace the default backdrop.
+   * The backdrop should have `aria-hidden="true"`.
+   *
+   * By default if `DialogSurface` is `<dialog>` element the backdrop is ignored,
+   * since native `<dialog>` element supports [::backdrop](https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop)
    */
-  root: Slot<'div', 'main'>;
+  backdrop?: Slot<'div'>;
+  root: NonNullable<Slot<'dialog', 'div'>>;
 };
 
-type DialogTitleProps = ComponentProps<DialogTitleSlots>;
+type DialogTitleProps = ComponentProps<DialogSurfaceSlots>;
 ```
 
 ### DialogTitle
 
-The DialogTitle component will expect to have a dialog title/header and will show the close (X icon) button if specified so. Apart from styling and presenting `closeButton`, this component does not have other behavior.
+The `DialogTitle` component expects to have a title/header and when `Dialog` is `non-modal` a close (X icon) button is provided through `action` slot by default.
 
 ```tsx
 type DialogTitleSlots = {
@@ -187,7 +182,10 @@ type DialogTitleSlots = {
    * By default this is a div, but can be a heading.
    */
   root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
-  closeButton?: Slot<'button'>;
+  /**
+   * By default a Dialog with modalType='non-modal' will have a close button action
+   */
+  action?: Slot<'div'>;
 };
 
 type DialogTitleProps = ComponentProps<DialogTitleSlots>;
@@ -238,7 +236,7 @@ const dialog = <Dialog>
 <!-- expected DOM output  -->
 <button aria-haspopup="true" class="fui-button">Open Dialog</button>
 <!-- ... portal ... -->
-<div aria-hidden="true" class="fui-dialog-overlay"></div>
+<div aria-hidden="true" class="fui-dialog-backdrop"></div>
 <div aria-modal="true" role="dialog" class="fui-dialog-content">This is as basic as it gets</div>
 ```
 
@@ -271,7 +269,7 @@ const dialog = <Dialog type="alert">
 ```html
 <button aria-haspopup="true" class="fui-button">Open Dialog</button>
 <!-- ... portal ... -->
-<div aria-hidden="true" class="fui-dialog-overlay"></div>
+<div aria-hidden="true" class="fui-dialog-backdrop"></div>
 <div
   aria-describedby="fui-dialog-body-id"
   aria-labelledby="fui-dialog-title-id"
@@ -281,7 +279,7 @@ const dialog = <Dialog type="alert">
 >
   <div id="fui-dialog-title-id" class="fui-dialog-title">
     <span>Title</span>
-    <!-- closeButton -->
+    <!-- action -->
   </div>
   <div id="fui-dialog-body-id" class="fui-dialog-body">This is going to be inside the dialog</div>
   <div class="fui-dialog-actions">
@@ -333,7 +331,7 @@ const CustomDialog = () => {
 ```html
 <button aria-haspopup="true" class="fui-button">Open Dialog</button>
 <!-- ... portal ... -->
-<div aria-hidden="true" class="fui-dialog-overlay"></div>
+<div aria-hidden="true" class="fui-dialog-backdrop"></div>
 <div
   aria-describedby="fui-dialog-body-id"
   aria-labelledby="fui-dialog-title-id"
@@ -343,7 +341,7 @@ const CustomDialog = () => {
 >
   <div id="fui-dialog-title-id" class="fui-dialog-title">
     <span>Title</span>
-    <!-- closeButton -->
+    <!-- action -->
   </div>
   <div id="fui-dialog-body-id" class="fui-dialog-body">This is going to be inside the dialog</div>
   <div class="fui-dialog-actions">
@@ -402,6 +400,27 @@ function AsyncConfirmDialog() {
 }
 ```
 
+### Opting out of native `<dialog>`
+
+```tsx
+const dialog = <Dialog>
+  <DialogTrigger>
+    <Button>Open Dialog</Button>
+  <DialogTrigger>
+  <DialogSurface as="div">
+    This is as basic as it gets.
+  </DialogSurface>
+</Dialog>
+```
+
+```html
+<!-- expected DOM output  -->
+<button aria-haspopup="true" class="fui-button">Open Dialog</button>
+<!-- ... portal ... -->
+<div aria-hidden="true" class="fui-dialog-backdrop"></div>
+<div aria-modal="true" role="dialog" class="fui-dialog-content">This is as basic as it gets</div>
+```
+
 ## Migration
 
 _TBA: Link to migration guide doc_