Re: [w3ctag/design-reviews] Dispatching Toggle Events for Dialog open/close (Issue #1005)

> For properties, attributes, and methods, to what extent are they consistent with the 'toggle' pattern? 

They are indeed inconsistent.

- `<dialog>` has `show()`, `showModal()` which will typically result in the dialog gaining an `open` attribute, and `close()` which will typically result in the dialog losing the `open` attribute. We loosely discussed adding an additional `toggle`/`toggleModal()` in https://github.com/openui/open-ui/issues/954, but ultimately it wasn't deemed a priority. In CSS one can use `dialog[open]` to select for open dialogs, and `dialog:modal` for modal dialogs.
 
- `<details>` does not have any methods to control this, one must instead set the `open` attribute, and use `[open]` in CSS.

- `popover` elements have `showPopover()` and `hidePopover()` (as well as `togglePopover()`), but they do not have an attribute set on them during open, and instead must rely on `:popover-open` to check if they're open or not. Other than the methods (or user interaction) it's also possible to remove the `popover` attribute to close the popover.

Some directions we could go in to make them more consistent:

 - Ensuring `<dialog>` respects the addition/removal of the `open` attribute. This is being discussed in https://github.com/whatwg/html/pull/10124 but it has some issues around timings and has stalled.

 - Adding a universal `:open` pseudo class (and the complementary `:closed` class) to denote any element that transitioned into `newState = 'open'` (e.g. a `<dialog>` with `showModal()`, `popover` with `showPopover()` or `<details open>` element). This is being discussed in https://github.com/whatwg/html/issues/8625.

 - Adding a `show()` method to `<details>` which effectively adds the `open` attribute. I don't think this has been discussed before, but it is a possibility.

 - Having a declarative alternative for `popover`s similar to the `open` attribute for `<dialog>`/`<details>`. One thing we could do is make `open` an enumerated attribute - such that `open=popover`, `open=details`, `open=modal` are valid values. This has been discussed in https://github.com/whatwg/html/issues/10171.

Do you think the above suggestions for improvements would aid in DX?

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/1005#issuecomment-2577396759
You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/1005/2577396759@github.com>