Skip to content

Commit

Permalink
Web Component Dialog (microsoft#28569)
Browse files Browse the repository at this point in the history 
* dialog init

* dialog: updates stories, styles, and docs

* dialog: updates styles

* dialog: removes dead code, cleans up

* dialog: updates styles

* updates docs

* deletes dead code

* dialog: addresses PR feedback

* reverts dead file

* dialog: updates styles per feedback

* drawer: updates template, styles

* dialog: removes attr changed callback

* dialog: updates slot names for react parity, updates docs

* yarn change

* dialog: addresses feedback

* dialog: updates README

* dialog: fixes responsive styles

* dialog: removes dead styles

* dialog: updates readme docs

* dialog: reworks dialog to use navtive html dialog element

* dialog: fixes jsdoc

* dialog: updates slot names for closer parity with fv9, updates stories and docs

* dialog: updates README

* dialog: updates template class names

* dialog: updates backdrop to use fluent token

* dialog: adds two column layout story

* dialog: adds additional stories

* dialog: adds exports to index and package json

* dialog: fixes style token imports

* dialog: cleans up open state

* dialog: updates template slot names

* dialog: updates property name

* dialog: removes change-focus

* dialog: syncs open attr

* dialog: sync open attribute

* dialog: updates storybook docs

* dialog: updates readme docs
  • Loading branch information
@brianchristopherbrady @radium-v
brianchristopherbrady authored and radium-v committed Apr 30, 2024
1 parent 51079f6 commit b4c37da
Show file tree
Hide file tree
Showing 12 changed files with 1,366 additions and 0 deletions.
7 changes: 7 additions & 0 deletions change/@fluentui-web-components-c3eff1b3-5486-4127-9d4b-c9d6d05fdb24.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "feat(dialog): add dialog web component",
"packageName": "@fluentui/web-components",
"email": "[email protected]",
"dependentChangeType": "patch"
}
5 changes: 5 additions & 0 deletions packages/web-components/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,10 @@
"types": "./dist/dts/counter-badge/define.d.ts",
"default": "./dist/esm/counter-badge/define.js"
},
"./dialog.js": {
"types": "./dist/dts/dialog/define.d.ts",
"default": "./dist/esm/dialog/define.js"
},
"./divider.js": {
"types": "./dist/dts/divider/define.d.ts",
"default": "./dist/esm/divider/define.js"
Expand Down Expand Up @@ -150,6 +154,7 @@
"./dist/esm/checkbox/define.js",
"./dist/esm/compound-button/define.js",
"./dist/esm/counter-badge/define.js",
"./dist/esm/dialog/define.js",
"./dist/esm/divider/define.js",
"./dist/esm/image/define.js",
"./dist/esm/label/define.js",
Expand Down
91 changes: 91 additions & 0 deletions packages/web-components/src/dialog/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
# Dialog

> 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.
## **Design Spec**

[Link to Dialog in Figma](https://www.figma.com/file/jtF47yOXDxkI00ZkydE999/Dialog?type=design&node-id=2605%3A15263&mode=dev)

## **Engineering Spec**

Fluent WC3 Dialog has feature parity with the Fluent UI React 9 Dialog implementation but not direct parity.

## Superclass: [FASTElement](https://www.fast.design/docs/fast-element/defining-elements)

## Class: `Dialog`

<br />

### **Component Name**

`<fluent-dialog></fluent-dialog>`

### **Basic Implemenation**

```html
<fluent-dialog open>
<!-- Header -->
<fluent-text slot="title">Dialog</fluent-text>
<fluent-button slot="title-action"><svg></svg></fluent-button>
<!-- Default Content -->
<fluent-text>Default Content</fluent-text>

<!-- Footer/Actions -->
<fluent-button slot="action">Do Something</fluent-button>
<fluent-button slot="action">Close</fluent-button>
</fluent-dialog>
```

### **Attributes**

| Name | Privacy | Type | Default | Description |
| ------------------ | ------- | ----------------- | ----------------------- | --------------------------------------------------------- |
| `modal-type` | public | `DialogModalType` | `DialogModalType.modal` | Indicates that the type of modal to render. |
| `open` | public | `boolean` | `false` | Controls the open state of the dialog |
| `no-title-action` | public | `boolean` | `false` | Used to set whether the default title action is rendered. |
| `aria-labelledby` | public | `string` | `undefined` | optional based on implementation\*\* |
| `aria-describedby` | public | `string` | `undefined` | optional based on implementation\*\* |
| `aria-label ` | public | `string` | `undefined` | optional based on implementation\*\* |

\*\* See the [W3C Specification](https://w3c.github.io/aria-practices/#dialog_roles_states_props) for requirements and details.

<br />

### **Methods**

| Name | Privacy | Description | Parameters | Return | Inherited From |
| ------ | ------- | ------------------------------ | ---------- | ------ | -------------- |
| `hide` | public | The method to hide the dialog. | | void | FASTDialog |
| `show` | public | The method to show the dialog. | | void | FASTDialog |

<br />

### **Slots**

| Name | Description |
| -------------- | ---------------------------------------------------------- |
| `title` | slot for title content |
| `title-action` | slot for close button |
| | default slot for content rendered between title and footer |
| `action` | slot for actions content |

### **Events**

| Name | Description | Details |
| -------------- | --------------------------------------------------------------- | -------------------------------------------------- |
| `onOpenChange` | Event fired when the component transitions from its open state. | `{ open: this.dialog.open, dismissed: dismissed }` |

## **Preparation**

### **Fluent Web Component v3 v.s Fluent React 9**

**Component, Element, and Slot Mapping**

| Fluent UI React 9 | Fluent Web Components 3 | Description of difference |
| ------------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `<Dialog>` | `<fluent-dialog>` | tag name |
| `<DialogTrigger>` | methods: `hide() show()` | In the React version of our components, a "DialogTrigger" component is utilized as part of a composite component of Dialog. The DialogTrigger component provides functionality for toggling the visibility of the Dialog component. <br /> In the Web Component version does not include a dialog trigger. Instead, it expects the user to directly access methods on the Dialog class or utilize CSS to control the visibility of the dialog component. |
| `<DialogSurface>` | `dialog::backdrop` | In the React version of our components, the DialogSurface component is used as part of the composite Dialog component to represent the dimmed background of the dialog. <br /> The Web Component version utilizes the HTML dialog ::backdrop pseudoelement. |
| `<DialogTitle>` | `slot: title` | In the React version of our components, the <DialogTitle> component is used to implement the title of the dialog. <br /> In the Web Component version, the title is provided through the title slot. |
| `<DialogTitle action="">` | `slot: title-action` | In the React version of our components, the <DialogTitle> component the DialogTitles action prop. <br /> In the Web Component version, the title action is provided through the Dialogs title-action slot |
| `<DialogActions>` | `slot: action` | In the React version of our components, the <DialogActions> component is used to implement the actions within the dialog. <br /> In the Web Component version, actions are passsed through the `action` slot |
4 changes: 4 additions & 0 deletions packages/web-components/src/dialog/define.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { FluentDesignSystem } from '../fluent-design-system.js';
import { definition } from './dialog.definition.js';

definition.define(FluentDesignSystem.registry);
17 changes: 17 additions & 0 deletions packages/web-components/src/dialog/dialog.definition.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { FluentDesignSystem } from '../fluent-design-system.js';
import { Dialog } from './dialog.js';
import { template } from './dialog.template.js';
import { styles } from './dialog.styles.js';

/**
* The Fluent Dialog Element
*
* @public
* @remarks
* HTML Element: \<fluent-dialog\>
*/
export const definition = Dialog.compose({
name: `${FluentDesignSystem.prefix}-dialog`,
template,
styles,
});
13 changes: 13 additions & 0 deletions packages/web-components/src/dialog/dialog.options.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';

/**
* Dialog modal type
* @public
*/
export const DialogModalType = {
modal: 'modal',
nonModal: 'non-modal',
alert: 'alert',
} as const;

export type DialogModalType = ValuesOf<typeof DialogModalType>;
Loading

0 comments on commit b4c37da

Please sign in to comment.