diff --git a/site/src/components/navigation/navigation.astro b/site/src/components/navigation/navigation.astro index 1bfffb06e..c3f0e12bb 100644 --- a/site/src/components/navigation/navigation.astro +++ b/site/src/components/navigation/navigation.astro @@ -12,7 +12,7 @@ const sortedMenuNodes = menuNodes.sort((a, b) => { }) const groupedNodes = groupBy(sortedMenuNodes, (node) => node.frontmatter.menu) -const menuHeadings = ["Overview", "Documentation", "Active Proposals", "Non-active Proposals", "Research"] +const menuHeadings = ["Overview", "Documentation", "Graduated Proposals", "Active Proposals", "Non-active Proposals", "Research"] // This is due to the component matrix being 2.2mb page size const routesToNotPrefetch = ['/research/component-matrix'] diff --git a/site/src/env.d.ts b/site/src/env.d.ts index 8c34fb45e..c13bd73c7 100644 --- a/site/src/env.d.ts +++ b/site/src/env.d.ts @@ -1 +1,2 @@ +/// /// \ No newline at end of file diff --git a/site/src/pages/components/accordion.explainer.mdx b/site/src/pages/components/accordion.explainer.mdx index 450f1764e..edd6b1490 100644 --- a/site/src/pages/components/accordion.explainer.mdx +++ b/site/src/pages/components/accordion.explainer.mdx @@ -1,5 +1,5 @@ --- -menu: Active Proposals +menu: Graduated Proposals name: Exclusive Accordion (Explainer) path: /components/accordion.explainer pathToResearch: /components/accordion.research @@ -16,6 +16,9 @@ layout: ../../layouts/ComponentLayout.astro - [openui/open-ui#925](https://github.com/openui/open-ui/issues/925) (UA ability for user to over-ride exclusive accordions functionality) - [w3c/html-aam#509](https://github.com/w3c/html-aam/issues/509) (describe grouping (and naming of the group) for exclusive accordions `
`) - PR [whatwg/html#9400](https://github.com/whatwg/html/pull/9400) (Add name attribute for grouping details elements into an exclusive accordion) +- [Specification](https://html.spec.whatwg.org/multipage/interactive-elements.html#attr-details-name) +- [MDN blog on Exclusive Accordions](https://developer.mozilla.org/en-US/blog/html-details-exclusive-accordions/) +- [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#multiple_named_disclosure_boxes) {/* START doctoc generated TOC please keep comment here to allow auto update */} {/* DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE */} diff --git a/site/src/pages/components/future-invokers.explainer.mdx b/site/src/pages/components/future-invokers.explainer.mdx new file mode 100644 index 000000000..569c645ee --- /dev/null +++ b/site/src/pages/components/future-invokers.explainer.mdx @@ -0,0 +1,258 @@ +--- +menu: Active Proposals +name: Invoker Commands Future (Explainer) +layout: ../../layouts/ComponentLayout.astro +--- + +- Authors: [Keith Cirkel](https://github.com/keithamus), [Luke Warlow](https://github.com/lukewarlow) + +**NOTE:** See the original explainer for the core proposal [here](/components/invokers.explainer). + +{/* START doctoc generated TOC please keep comment here to allow auto update */} +{/* DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE */} + +# Invoker Buttons + +## Introduction + +This document outlines potential future enhancements to [Invoker Commands](/components/invokers.explainer). + +All commands noted here are ideas only and are not included in the initial release of this feature. + +### Defaults + +Depending on the target set by `commandfor`, invoking the button will trigger +additional behaviours alongside the event dispatch, depending on the value of +`command`. The following table represents ideas on how built-in invocations on specific +element types are handled. These need further design on exactly how +they will behave based on implications such as accessibility, security, +interactivity, and how the button may need to respond to such actions. + +| Invokee Element | `command` hint | Behaviour | +| :-------------------- | :--------------------- | :------------------------------------------------------------------------------------------------------------- | +| `` | `'request-close'` | If the `` is `open`, request to close and use the button `value` for returnValue. Similar to `.requestClose(value) | +| `<* openable>` | `'toggle-openable'` | Opens the `openable` if closed, otherwise closes. Similar to `.toggleOpenable()` | +| `<* openable>` | `'close-openable'` | Closes the `openable` if open, otherwise does nothing. Similar to `.closeOpenable()` | +| `<* openable>` | `'open-openable'` | Opens the `openable` if closed, otherwise does nothing. Similar to `.openOpenable()` | +| `
` | `'toggle'` | If the `
` is `open`, then close it, otherwise open it | +| `
` | `'open'` | If the `
` is not `open`, then open it | +| `
` | `'close'` | If the `
` is `open`, then close it | +| `` | `'toggle'` | If the `` is `open`, then close it and use the button `value` for returnValue, otherwise open as modal | +| `` | `'show-picker'` | Shows the native picker. Similar to `.showPicker()` on the invokee | +| `