Web Component Dialog #28569

brianchristopherbrady · 2023-07-19T00:14:18Z

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

Engineering Spec

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

Superclass: FASTElement

Class: `Dialog`

Component Name

<fluent-dialog></fluent-dialog>

Basic Implemenation

<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 for requirements and details.

Methods

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

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. 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. The Web Component version utilizes the HTML dialog ::backdrop pseudoelement.
`<DialogTitle>`	`slot: title`	In the React version of our components, the component is used to implement the title of the dialog. 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 component the DialogTitles action prop. 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 component is used to implement the actions within the dialog. In the Web Component version, actions are passsed through the `actions` slot

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

…erbrady/fluentui-fork into web-components-v3

fabricteam · 2023-07-19T00:21:41Z

📊 Bundle size report

_{🤖 This report was generated against 079abca6ac7a8572f51f7da2db9f2d21a32da31c}

size-auditor · 2023-07-19T00:26:17Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 079abca6ac7a8572f51f7da2db9f2d21a32da31c (build)

codesandbox-ci · 2023-07-19T00:29:11Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 25b97ae:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

procload

Nice work, @brianchristopherbrady! I left a few comments a couple of questions.

@chrisdholt, @miroslavstastny, or @levithomason I took a first pass on this PR and left my comments.

packages/web-components/src/input/README.md

packages/web-components/src/dialog/dialog.ts

packages/web-components/src/dialog/dialog.styles.ts

packages/web-components/src/dialog/dialog.stories.ts

chrisdholt · 2023-10-25T18:46:59Z

packages/web-components/src/dialog/dialog.template.ts

+          ${when(
+            x => x.modalType === DialogModalType.nonModal && x.titleAction.length === 0 && !x.noTitleAction,
+            html`<fluent-button
+              tabindex="0"


Why does this have tabindex given the control is focusable already?

chrisdholt · 2023-10-25T18:48:28Z

packages/web-components/src/dialog/dialog.template.ts

+          <slot ${slotted({ property: 'titleAction', filter: elements() })} name="title-action"></slot>
+          ${when(
+            x => x.modalType === DialogModalType.nonModal && x.titleAction.length === 0 && !x.noTitleAction,
+            html`<fluent-button


Why are we baking in a button control which we cannot change out? We value composition - I can't manage anything about this button, I can't add telemetry for instance, there is not an aria-label for this...

chrisdholt · 2023-10-25T18:50:49Z

packages/web-components/src/dialog/dialog.template.ts

+  <template ?open="${x => x.open}">
+    <dialog
+      role="${x => (x.modalType === DialogModalType.alert ? 'alertdialog' : 'dialog')}"
+      modal-type="${x => x.modalType}"


Is this an actual valid attribute of dialog?

chrisdholt · 2023-10-25T18:52:04Z

packages/web-components/src/dialog/dialog.template.ts

+export const template: ElementViewTemplate<Dialog> = html`
+  <template ?open="${x => x.open}">
+    <dialog
+      role="${x => (x.modalType === DialogModalType.alert ? 'alertdialog' : 'dialog')}"


Dialog has implicit semantics of dialog, we should only set this if we're overriding the semantics.

chrisdholt · 2023-10-25T18:53:20Z

packages/web-components/src/dialog/dialog.template.ts

+ * @public
+ */
+export const template: ElementViewTemplate<Dialog> = html`
+  <template ?open="${x => x.open}">


This is going to reflect to the host anyways, the template element here doesn't offer anything IMO

chrisdholt · 2023-10-25T18:54:53Z

packages/web-components/src/dialog/dialog.template.ts

+      class="dialog"
+      part="dialog"
+      aria-modal="${x =>
+        x.modalType === DialogModalType.modal || x.modalType === DialogModalType.alert ? 'true' : void 0}"


This could be more efficient by checking for the singular case of !DialogModalType.nonModal.

chrisdholt · 2023-10-25T18:56:07Z

packages/web-components/src/dialog/dialog.options.ts

+export const DialogModalType = {
+  modal: 'modal',
+  nonModal: 'non-modal',
+  alert: 'alert',
+} as const;


How was this API decided upon?

chrisdholt · 2023-10-25T19:04:31Z

packages/web-components/src/dialog/dialog.template.ts

+        <div class="title" part="title">
+          <slot name="title"></slot>
+          <slot ${slotted({ property: 'titleAction', filter: elements() })} name="title-action"></slot>
+          ${when(


It seems like a better pattern would follow allowing for this to be defined by the definition as an "optional" default such as the indicator in "switch". This feels misaligned with that approach.

* 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

brianchristopherbrady and others added 22 commits March 3, 2023 10:45

radio init

7f9af9e

styles radio

70c55e0

Merge branch 'microsoft:web-components-v3' into web-components-v3

f3cb7f4

reverts branch

a72d10f

Merge branch 'web-components-v3' of https://github.com/brianchristoph…

2941fa7

…erbrady/fluentui-fork into web-components-v3

Merge branch 'microsoft:web-components-v3' into web-components-v3

9b350fc

input spec init

2cf59ce

cleans up spec

79b6bff

formatting

5558b93

updates component name to text input

3c045c3

updates component name in spec

2370967

Merge branch 'microsoft:web-components-v3' into web-components-v3

9c4eb6b

Merge branch 'microsoft:web-components-v3' into web-components-v3

056b82e

Merge branch 'microsoft:web-components-v3' into web-components-v3

196ed30

Merge branch 'microsoft:web-components-v3' into web-components-v3

2a9ae23

Merge branch 'microsoft:web-components-v3' into web-components-v3

677a59c

Merge branch 'microsoft:web-components-v3' into web-components-v3

17819f9

dialog init

c6d99b9

dialog: updates stories, styles, and docs

8e367ef

dialog: updates styles

7e6a240

dialog: removes dead code, cleans up

bd041b9

dialog: updates styles

133f49b

brianchristopherbrady added the Draft label Jul 19, 2023

brianchristopherbrady requested a review from a team as a code owner July 19, 2023 00:14

brianchristopherbrady self-assigned this Jul 19, 2023

updates docs

7e3aeae

procload requested changes Jul 27, 2023

View reviewed changes

brianchristopherbrady added 7 commits October 24, 2023 10:31

dialog: updates template slot names

e8823ba

dialog: updates property name

614cfdd

dialog: removes change-focus

7ded032

dialog: syncs open attr

975da6e

dialog: sync open attribute

bd5b13c

dialog: updates storybook docs

0a7ddc4

dialog: updates readme docs

25b97ae

bearcat-msft approved these changes Oct 24, 2023

View reviewed changes

brianchristopherbrady merged commit dd16c56 into microsoft:web-components-v3 Oct 25, 2023
23 checks passed

chrisdholt reviewed Oct 25, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Web Component Dialog #28569

Web Component Dialog #28569

brianchristopherbrady commented Jul 19, 2023 •

edited

Loading

fabricteam commented Jul 19, 2023 •

edited

Loading

size-auditor bot commented Jul 19, 2023 •

edited

Loading

codesandbox-ci bot commented Jul 19, 2023 •

edited

Loading

procload left a comment

chrisdholt Oct 25, 2023

chrisdholt Oct 25, 2023

chrisdholt Oct 25, 2023

chrisdholt Oct 25, 2023

chrisdholt Oct 25, 2023

chrisdholt Oct 25, 2023

chrisdholt Oct 25, 2023

chrisdholt Oct 25, 2023

Web Component Dialog #28569

Web Component Dialog #28569

Conversation

brianchristopherbrady commented Jul 19, 2023 • edited Loading

Dialog

Design Spec

Engineering Spec

Superclass: FASTElement

Class: Dialog

Component Name

Basic Implemenation

Attributes

Methods

Slots

Events

Preparation

Fluent Web Component v3 v.s Fluent React 9

fabricteam commented Jul 19, 2023 • edited Loading

📊 Bundle size report

size-auditor bot commented Jul 19, 2023 • edited Loading

Asset size changes

codesandbox-ci bot commented Jul 19, 2023 • edited Loading

procload left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brianchristopherbrady commented Jul 19, 2023 •

edited

Loading

Class: `Dialog`

fabricteam commented Jul 19, 2023 •

edited

Loading

size-auditor bot commented Jul 19, 2023 •

edited

Loading

codesandbox-ci bot commented Jul 19, 2023 •

edited

Loading