WIP triggers

docs/src/app/(private)/experiments/toolbar/_icons.tsx

@@ -171,3 +171,32 @@ export function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
     </svg>
   );
 }
+
+export function MessageCircleIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+    </svg>
+  );
+}
+
+export function MousePointerIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" />
+      <path d="M13 13l6 6" />
+    </svg>
+  );
+}

docs/src/app/(private)/experiments/toolbar/triggers.module.css

@@ -0,0 +1,14 @@
+.Root {
+  background-color: var(--color-gray-100);
+  padding: 0 0.75rem;
+}
+
+.Toggle {
+  margin-block: 0.5rem;
+}
+
+.Separator[data-orientation='vertical'] {
+  width: 1px;
+  align-self: stretch;
+  background-color: var(--color-gray-200);
+}

docs/src/app/(private)/experiments/toolbar/triggers.tsx

@@ -0,0 +1,102 @@
+'use client';
+import * as React from 'react';
+import { Toolbar } from '@base-ui-components/react/toolbar';
+import { Toggle } from '@base-ui-components/react/toggle';
+import { Switch } from '@base-ui-components/react/switch';
+import { Dialog } from '@base-ui-components/react/dialog';
+import toolbarClasses from './toolbar.module.css';
+import triggerToolbarClasses from './triggers.module.css';
+import switchClasses from '../../../(public)/(content)/react/components/switch/demos/hero/css-modules/index.module.css';
+import dialogClasses from '../../../(public)/(content)/react/components/alert-dialog/demos/hero/css-modules/index.module.css';
+import popoverClasses from '../../../(public)/(content)/react/components/popover/demos/hero/css-modules/index.module.css';
+import { MessageCircleIcon } from './_icons';
+
+const styles = {
+  demo: triggerToolbarClasses,
+  toolbar: toolbarClasses,
+  switch: switchClasses,
+  dialog: dialogClasses,
+};
+
+const TEXT = `Shows toolbar buttons as various triggers:
+- Menu.Trigger
+- Dialog.Trigger
+- Popover.Trigger
+`;
+
+const DISABLED = false;
+
+function classNames(...c: Array<string | undefined | null | false>) {
+  return c.filter(Boolean).join(' ');
+}
+
+export default function App() {
+  return (
+    <React.Fragment>
+      <a
+        className={styles.toolbar.a}
+        href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <h3 className={styles.toolbar.h3}>Toolbar pattern</h3>
+      </a>
+      <div className={styles.toolbar.Wrapper}>
+        <Toolbar.Root className={classNames(styles.toolbar.Root, styles.demo.Root)}>
+          <Dialog.Root>
+            <Toolbar.Button
+              disabled={DISABLED}
+              className={classNames(styles.toolbar.Toggle, styles.demo.Toggle)}
+              render={
+                <Dialog.Trigger>
+                  <MessageCircleIcon className={styles.toolbar.Icon} />
+                </Dialog.Trigger>
+              }
+            />
+
+            <Dialog.Portal keepMounted>
+              <Dialog.Backdrop className={styles.dialog.Backdrop} />
+              <Dialog.Popup className={styles.dialog.Popup}>
+                <Dialog.Title className={styles.dialog.Title}>
+                  Write a comment
+                </Dialog.Title>
+                <textarea name="" id="" className={styles.toolbar.Textarea} />
+                <div className={styles.dialog.Actions}>
+                  <Dialog.Close data-color="red" className={styles.dialog.Button}>
+                    Close
+                  </Dialog.Close>
+                  <Dialog.Close className={styles.dialog.Button}>
+                    Submit
+                  </Dialog.Close>
+                </div>
+              </Dialog.Popup>
+            </Dialog.Portal>
+          </Dialog.Root>
+
+          <Toolbar.Separator className={styles.demo.Separator} />
+
+          <Toolbar.Button
+            disabled={DISABLED}
+            className={classNames(styles.toolbar.Toggle, styles.demo.Toggle)}
+            render={
+              <Switch.Root defaultChecked className={styles.switch.Switch}>
+                <Switch.Thumb
+                  className={styles.switch.Thumb}
+                  style={{ marginRight: 'auto' }}
+                />
+              </Switch.Root>
+            }
+          />
+        </Toolbar.Root>
+
+        <textarea
+          className={styles.toolbar.Textarea}
+          name=""
+          id=""
+          rows={8}
+          defaultValue={TEXT}
+        />
+      </div>
+    </React.Fragment>
+  );
+}