Refine Propel slot component APIs

.changeset/clean-label-slots.md

@@ -0,0 +1,9 @@
+---
+"@makeplane/propel": minor
+---
+
+Tighten component text props, add a decorative `Shortcut` component slot with `aria-keyshortcuts`
+examples on actionable controls, remove shortcut-specific menu element wrappers, and add an accent
+menu row tone for emphasized menu actions. Remove unused/story-only element exports, including
+group-label wrappers, popover anatomy wrappers, pass-through select scroll arrows, scroll-area
+content, tooltip shortcut, and the unused `initialsToneClass` avatar style-map export.

packages/propel/src/components/accordion/accordion-trigger.tsx

@@ -7,26 +7,30 @@ import {
   AccordionTriggerTitle,
 } from "../../elements/accordion";
 import { DisclosureIndicator } from "../../internal/disclosure-indicator";
-import { Icon } from "../../internal/icon";
 
-export type AccordionTriggerProps = Omit<BaseAccordion.Trigger.Props, "className" | "style"> & {
+export type AccordionTriggerProps = Omit<
+  BaseAccordion.Trigger.Props,
+  "children" | "className" | "style"
+> & {
   /**
-   * Node rendered before the label (inline-start), matching the Figma header icon. Sized to the
-   * trigger's `--node-size`. Decorative, kept out of the name.
+   * Element rendered before the label (inline-start), e.g. `<Icon icon={Folder} tint="secondary"
+   * />`.
    */
   icon?: React.ReactNode;
+  /** Visible trigger label. */
+  label: string;
 };
 
 /**
  * The ready-made accordion trigger: grafts Base UI's trigger behavior onto the styled
  * `AccordionTrigger`, composing an optional `icon`, the `AccordionTriggerTitle`, and the
  * `AccordionTriggerIndicator` chevron that rotates when the panel opens.
  */
-export function AccordionTrigger({ icon, children, ...props }: AccordionTriggerProps) {
+export function AccordionTrigger({ icon, label, ...props }: AccordionTriggerProps) {
   return (
     <BaseAccordion.Trigger {...props} render={<AccordionTriggerElement />}>
-      {icon ? <Icon tint="secondary">{icon}</Icon> : null}
-      <AccordionTriggerTitle>{children}</AccordionTriggerTitle>
+      {icon}
+      <AccordionTriggerTitle>{label}</AccordionTriggerTitle>
       <DisclosureIndicator motion="disclose" tint="secondary" magnitude="sm">
         <ChevronDown />
       </DisclosureIndicator>

packages/propel/src/components/accordion/accordion.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CircleHelp } from "lucide-react";
 import { expect } from "storybook/test";
 
+import { Icon } from "../icon";
 import {
   Accordion,
   AccordionHeader,
@@ -75,7 +76,7 @@ export const Default: Story = {
       {ITEMS.map((item) => (
         <AccordionItem key={item.value} value={item.value}>
           <AccordionHeader>
-            <AccordionTrigger>{item.label}</AccordionTrigger>
+            <AccordionTrigger label={item.label} />
           </AccordionHeader>
           <AccordionPanel>{item.body}</AccordionPanel>
         </AccordionItem>
@@ -91,7 +92,10 @@ export const WithIcon: Story = {
       {ITEMS.map((item) => (
         <AccordionItem key={item.value} value={item.value}>
           <AccordionHeader>
-            <AccordionTrigger icon={<CircleHelp />}>{item.label}</AccordionTrigger>
+            <AccordionTrigger
+              icon={<Icon icon={CircleHelp} tint="secondary" />}
+              label={item.label}
+            />
           </AccordionHeader>
           <AccordionPanel>{item.body}</AccordionPanel>
         </AccordionItem>
@@ -131,7 +135,7 @@ export const States: Story = {
       ).map(([label, id]) => (
         <AccordionItem key={label} value={id}>
           <AccordionHeader>
-            <AccordionTrigger id={id}>{label} — What is Plane?</AccordionTrigger>
+            <AccordionTrigger id={id} label={`${label} — What is Plane?`} />
           </AccordionHeader>
           <AccordionPanel>Plane is an open-source project management tool.</AccordionPanel>
         </AccordionItem>
@@ -149,7 +153,7 @@ export const MultipleItems: Story = {
       {ITEMS.map((item) => (
         <AccordionItem key={item.value} value={item.value}>
           <AccordionHeader>
-            <AccordionTrigger>{item.label}</AccordionTrigger>
+            <AccordionTrigger label={item.label} />
           </AccordionHeader>
           <AccordionPanel>{item.body}</AccordionPanel>
         </AccordionItem>
@@ -168,7 +172,7 @@ export const Interaction: Story = {
     <Accordion>
       <AccordionItem value="a">
         <AccordionHeader>
-          <AccordionTrigger>Section A</AccordionTrigger>
+          <AccordionTrigger label="Section A" />
         </AccordionHeader>
         <AccordionPanel>Panel A content</AccordionPanel>
       </AccordionItem>
@@ -239,7 +243,7 @@ export const KeyboardToggle: Story = {
     <Accordion>
       <AccordionItem value="a">
         <AccordionHeader>
-          <AccordionTrigger>Section A</AccordionTrigger>
+          <AccordionTrigger label="Section A" />
         </AccordionHeader>
         <AccordionPanel>Panel A content</AccordionPanel>
       </AccordionItem>

packages/propel/src/components/alert-dialog/alert-dialog-close.tsx

@@ -7,9 +7,13 @@ export type AlertDialogCloseProps = Omit<BaseAlertDialog.Close.Props, "className
  * `Button` so the styled primitive's look wins via render-composition:
  *
  * ```tsx
- * <Button prominence="secondary" tone="neutral" magnitude="xl" render={<AlertDialogClose />}>
- *   Cancel
- * </Button>;
+ * <Button
+ *   prominence="secondary"
+ *   tone="neutral"
+ *   magnitude="xl"
+ *   label="Cancel"
+ *   render={<AlertDialogClose />}
+ * />;
  * ```
  *
  * Maps 1:1 to `AlertDialog.Close`.

packages/propel/src/components/alert-dialog/alert-dialog-trigger.tsx

@@ -7,9 +7,13 @@ export type AlertDialogTriggerProps = Omit<BaseAlertDialog.Trigger.Props, "class
  * primitive's look wins via render-composition:
  *
  * ```tsx
- * <Button prominence="primary" tone="danger" magnitude="xl" render={<AlertDialogTrigger />}>
- *   Delete project
- * </Button>;
+ * <Button
+ *   prominence="primary"
+ *   tone="danger"
+ *   magnitude="xl"
+ *   label="Delete project"
+ *   render={<AlertDialogTrigger />}
+ * />;
  * ```
  *
  * Base UI manages `aria-haspopup`/`aria-expanded` and focus restoration when the alert dialog

packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx

@@ -3,7 +3,7 @@ import { TriangleAlert } from "lucide-react";
 import * as React from "react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
-import { Button } from "../../elements/button";
+import { Button } from "../button";
 import {
   Dialog,
   DialogActions,
@@ -66,9 +66,8 @@ export const Default: Story = {
         tone="danger"
         magnitude="xl"
         render={<AlertDialogTrigger />}
-      >
-        Delete project
-      </Button>
+        label="Delete project"
+      />
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogIcon tone="danger">
@@ -89,18 +88,16 @@ export const Default: Story = {
             tone="neutral"
             magnitude="xl"
             render={<AlertDialogClose />}
-          >
-            Cancel
-          </Button>
+            label="Cancel"
+          />
           <Button
             sizing="hug"
             prominence="primary"
             tone="danger"
             magnitude="xl"
             render={<AlertDialogClose />}
-          >
-            Delete
-          </Button>
+            label="Delete"
+          />
         </AlertDialogActions>
       </AlertDialogContent>
     </AlertDialog>
@@ -152,13 +149,12 @@ export const OpenFromMenu: Story = {
             tone="neutral"
             magnitude="xl"
             render={<MenuTrigger />}
-          >
-            Project options
-          </Button>
+            label="Project options"
+          />
           <MenuContent sizing="sm">
-            <MenuItem>Rename</MenuItem>
-            <MenuItem>Duplicate</MenuItem>
-            <MenuItem onClick={() => setConfirmOpen(true)}>Delete project…</MenuItem>
+            <MenuItem label="Rename" />
+            <MenuItem label="Duplicate" />
+            <MenuItem onClick={() => setConfirmOpen(true)} label="Delete project…" />
           </MenuContent>
         </Menu>
         <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
@@ -182,18 +178,16 @@ export const OpenFromMenu: Story = {
                 tone="neutral"
                 magnitude="xl"
                 render={<AlertDialogClose />}
-              >
-                Cancel
-              </Button>
+                label="Cancel"
+              />
               <Button
                 sizing="hug"
                 prominence="primary"
                 tone="danger"
                 magnitude="xl"
                 render={<AlertDialogClose />}
-              >
-                Delete
-              </Button>
+                label="Delete"
+              />
             </AlertDialogActions>
           </AlertDialogContent>
         </AlertDialog>
@@ -259,9 +253,8 @@ export const CloseConfirmation: Story = {
           tone="neutral"
           magnitude="xl"
           render={<DialogTrigger />}
-        >
-          Write a comment
-        </Button>
+          label="Write a comment"
+        />
         <DialogContent magnitude="md">
           <DialogHeader>
             <DialogHeading>
@@ -289,9 +282,8 @@ export const CloseConfirmation: Story = {
               tone="neutral"
               magnitude="xl"
               render={<DialogClose />}
-            >
-              Close
-            </Button>
+              label="Close"
+            />
           </DialogActions>
           <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
             <AlertDialogContent>
@@ -313,9 +305,8 @@ export const CloseConfirmation: Story = {
                   tone="neutral"
                   magnitude="xl"
                   render={<AlertDialogClose />}
-                >
-                  Keep writing
-                </Button>
+                  label="Keep writing"
+                />
                 <Button
                   sizing="hug"
                   prominence="primary"
@@ -326,9 +317,8 @@ export const CloseConfirmation: Story = {
                     setComposerOpen(false);
                     setDraft("");
                   }}
-                >
-                  Discard
-                </Button>
+                  label="Discard"
+                />
               </AlertDialogActions>
             </AlertDialogContent>
           </AlertDialog>
@@ -411,9 +401,8 @@ export const MultipleTriggers: Story = {
             tone="neutral"
             magnitude="xl"
             render={<AlertDialogTrigger handle={deleteProjectHandle} payload={project} />}
-          >
-            Delete {project}
-          </Button>
+            label={`Delete ${project}`}
+          />
         ))}
       </div>
       <AlertDialog handle={deleteProjectHandle}>
@@ -440,18 +429,16 @@ export const MultipleTriggers: Story = {
                 tone="neutral"
                 magnitude="xl"
                 render={<AlertDialogClose />}
-              >
-                Cancel
-              </Button>
+                label="Cancel"
+              />
               <Button
                 sizing="hug"
                 prominence="primary"
                 tone="danger"
                 magnitude="xl"
                 render={<AlertDialogClose />}
-              >
-                Delete
-              </Button>
+                label="Delete"
+              />
             </AlertDialogActions>
           </AlertDialogContent>
         )}