Skip to content

Commit b9d2c39

Browse files
mfranzkemichaelmkrausCopilot
authored
docs(HTML): added Invoker Commands (#6514)
* docs(HTML): added Invoker Commands for glueing the trigger (button) and opened element (dialog) together without JS * docs: remove double closing parenthesis * Update Invoker Commands documentation for header and drawer Expanded documentation for Invoker Commands in header and drawer. * Update HTML.md * docs: use IDL attribute detection and safe optional chaining for invoker commands fallback Agent-Logs-Url: https://github.com/db-ux-design-system/core-web/sessions/1d2d7509-0789-41f6-a677-84cfa8ec4856 Co-authored-by: mfranzke <[email protected]> --------- Co-authored-by: Michael Kraus <[email protected]> Co-authored-by: copilot-swe-agent[bot] <[email protected]>
1 parent 26fe79a commit b9d2c39

3 files changed

Lines changed: 78 additions & 2 deletions

File tree

‎.changeset/four-buckets-sneeze.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@db-ux/core-components": patch
3+
---
4+
5+
docs(HTML): added Invoker Commands to header and drawer "how to use" documentation

‎packages/components/src/components/drawer/docs/HTML.md‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,59 @@ If you use `width !== full` you are able to overwrite the `max-width` with `--db
88

99
### Use component
1010

11+
Use [Invoker Commands](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) (`command` and `commandfor` HTML attributes) to declaratively connect buttons with the `<dialog>` element. Supported built-in commands for `<dialog>` are `show-modal` and `close`.
12+
13+
If you do need to provide support for [browser versions that haven't implemented Invoker Commands](https://caniuse.com/wf-invoker-commands), add a feature detection fallback in JavaScript (see example below) or the [polyfill `invokers-polyfill`](https://github.com/keithamus/invokers-polyfill).
14+
1115
```html index.html
1216
<!-- index.html -->
1317
...
1418
<body>
15-
<dialog class="db-drawer" data-backdrop="true" open>
19+
<button class="db-button" command="show-modal" commandfor="my-drawer">
20+
Open Drawer
21+
</button>
22+
<dialog id="my-drawer" class="db-drawer" data-backdrop="true">
1623
<article class="db-drawer-container">
1724
<header class="db-drawer-header">
1825
<button
1926
class="db-button button-close-drawer is-icon-text-replace"
2027
data-icon="cross"
2128
data-variant="ghost"
29+
command="close"
30+
commandfor="my-drawer"
2231
>
2332
Close Button
2433
</button>
2534
</header>
2635
<div class="db-drawer-content">My Drawer content</div>
2736
</article>
2837
</dialog>
38+
39+
<script>
40+
/*
41+
* Feature detection for Invoker Commands:
42+
* If the browser does not support the `command` and `commandfor`
43+
* HTML attributes, we fall back to JavaScript event handlers.
44+
*/
45+
if (
46+
!("command" in HTMLButtonElement.prototype) ||
47+
!("commandFor" in HTMLButtonElement.prototype)
48+
) {
49+
const openButton = document.querySelector(
50+
'[commandfor="my-drawer"][command="show-modal"]'
51+
);
52+
const closeButton = document.querySelector(
53+
'[commandfor="my-drawer"][command="close"]'
54+
);
55+
const drawer = document.getElementById("my-drawer");
56+
57+
openButton?.addEventListener("click", () => {
58+
drawer?.showModal?.();
59+
});
60+
closeButton?.addEventListener("click", () => {
61+
drawer?.close?.();
62+
});
63+
}
64+
</script>
2965
</body>
3066
```

‎packages/components/src/components/header/docs/HTML.md‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,16 @@ For general installation and configuration take a look at the [components](https
44

55
### Use component
66

7+
Use [Invoker Commands](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) (`command` and `commandfor` HTML attributes) to declaratively connect the burger menu button with the drawer `<dialog>` element, and the close button inside the drawer. Supported built-in commands for `<dialog>` are `show-modal` and `close`.
8+
9+
If you do need to provide support for [browser versions that haven't implemented Invoker Commands](https://caniuse.com/wf-invoker-commands), add a feature detection fallback in JavaScript (see example below) or the [polyfill `invokers-polyfill`](https://github.com/keithamus/invokers-polyfill).
10+
711
```html index.html
812
<!-- index.html -->
913
...
1014
<body>
1115
<header class="db-header">
12-
<dialog class="db-drawer">
16+
<dialog id="header-drawer" class="db-drawer">
1317
<article
1418
class="db-drawer-container db-header-drawer"
1519
data-spacing="small"
@@ -21,6 +25,8 @@ For general installation and configuration take a look at the [components](https
2125
class="db-button button-close-drawer is-icon-text-replace"
2226
data-icon="cross"
2327
data-variant="text"
28+
command="close"
29+
commandfor="header-drawer"
2430
>
2531
Close Button
2632
</button>
@@ -139,6 +145,8 @@ For general installation and configuration take a look at the [components](https
139145
class="db-button is-icon-text-replace"
140146
data-icon="menu"
141147
data-variant="text"
148+
command="show-modal"
149+
commandfor="header-drawer"
142150
>
143151
BurgerMenu
144152
</button>
@@ -167,5 +175,32 @@ For general installation and configuration take a look at the [components](https
167175
</div>
168176
</div>
169177
</header>
178+
179+
<script>
180+
/*
181+
* Feature detection for Invoker Commands:
182+
* If the browser does not support the `command` and `commandfor`
183+
* HTML attributes, we fall back to JavaScript event handlers.
184+
*/
185+
if (
186+
!("command" in HTMLButtonElement.prototype) ||
187+
!("commandFor" in HTMLButtonElement.prototype)
188+
) {
189+
const burgerMenuButton = document.querySelector(
190+
'[commandfor="header-drawer"][command="show-modal"]'
191+
);
192+
const closeButton = document.querySelector(
193+
'[commandfor="header-drawer"][command="close"]'
194+
);
195+
const drawer = document.getElementById("header-drawer");
196+
197+
burgerMenuButton?.addEventListener("click", () => {
198+
drawer?.showModal?.();
199+
});
200+
closeButton?.addEventListener("click", () => {
201+
drawer?.close?.();
202+
});
203+
}
204+
</script>
170205
</body>
171206
```

0 commit comments

Comments
 (0)