Web Component Dialog #28569
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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" | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
brianchristopherbrady marked this conversation as resolved.
Show resolved
Hide resolved
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| # 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. | ||
|
There was a problem hiding this comment. This statement is a bit ambiguous to me, what does it mean but not direct parity? I think we should actually say how it differs. There was a problem hiding this comment. Chris and I had a discussion on this blurb and this is what we landed on. Most of the components with README's have this at the beginning. The differences between react and web component implementation is detailed in the "Preparation" section. There was a problem hiding this comment. Perhaps it should say see Preparation section for a fill description of differences. |
||
|
|
||
| ## 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>Content</fluent-text> | ||
|
|
||
| <!-- Footer/Actions --> | ||
| <fluent-button slot="footer-action">Do Something</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. | | ||
| | `change-focus` | public | `string` | `undefined` | Used to set id of desired focus target. | | ||
| | `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 | | ||
| | `footer-action` | slot for actions content | | ||
| | `start` | slot for content at the start of the dialog | | ||
| | `end` | slot for content at the end of the dialog | | ||
|
|
||
| ### **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: footer-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 `actions` slot | | ||
|
|
||
| <br /> | ||
|
|
||
| **Attribute and prop Mapping** | ||
|
|
||
| | Fluent UI React 9 | Fluent Web Components 3 | Description of difference | | ||
| | ------------------------------------ | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | use effect to customize focus target | `change-focus` | Changing the default focused element can be done in an effect. In FUIWC3, the id of the desired target to focus can be passed through the change-focus slot | | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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({ | ||
brianchristopherbrady marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| name: `${FluentDesignSystem.prefix}-dialog`, | ||
| template, | ||
| styles, | ||
| }); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | ||
|
Comment on lines
+7
to
+11
There was a problem hiding this comment. How was this API decided upon? |
||
|
|
||
| export type DialogModalType = ValuesOf<typeof DialogModalType>; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🕵 fluentui-web-components-v3 Open the Visual Regressions report to inspect the affected screenshots
Switch 2 screenshots