Tighten component text props

Author: lifeiscontent

.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

@@ -18,7 +18,7 @@ export type AccordionTriggerProps = Omit<
    */
   icon?: React.ReactNode;
   /** Visible trigger label. */
-  label: React.ReactNode;
+  label: string;
 };
 
 /**

packages/propel/src/components/anchor-button/anchor-button.tsx

@@ -23,7 +23,7 @@ export type AnchorButtonProps = Omit<AnchorButtonElementProps, "children"> & {
   /** Element rendered after the label (inline-end), e.g. `<Icon icon={ArrowUpRight} />`. */
   endIcon?: React.ReactNode;
   /** Visible action/link label. */
-  label: React.ReactNode;
+  label: string;
   /** Shows a spinner, sets `aria-busy`, and makes the control non-interactive. */
   loading?: boolean;
 };

packages/propel/src/components/autocomplete-field/autocomplete-field.tsx

@@ -35,7 +35,7 @@ export type AutocompleteFieldProps<Value = string> = Omit<
   /** Items rendered in the popup. */
   items: readonly Value[];
   /** Visible field label. */
-  label: React.ReactNode;
+  label: string;
   /** Label and helper text size. */
   magnitude: FieldMagnitude;
   /** Input placeholder. */

packages/propel/src/components/badge/badge.tsx

@@ -7,8 +7,8 @@ import {
 } from "../../elements/badge";
 
 export type BadgeProps = Omit<BadgeElementProps, "children"> & {
-  /** The badge label — text, a count, or any inline content. */
-  label?: React.ReactNode;
+  /** The badge label text. */
+  label?: string;
   /** Element rendered before the label (inline-start), e.g. `<Icon icon={Check} />`. */
   startIcon?: React.ReactNode;
   /** Element rendered after the label (inline-end), e.g. `<Icon icon={Sparkles} />`. */

packages/propel/src/components/breadcrumb/breadcrumb-menu-trigger.tsx

@@ -12,7 +12,7 @@ export type BreadcrumbMenuTriggerProps = Omit<
   /** Leading element, typically `<Icon icon={...} tint="tertiary" magnitude="md" />`. */
   icon?: React.ReactNode;
   /** The crumb label. */
-  label?: React.ReactNode;
+  label?: string;
 };
 
 /** The crumb that opens a `BreadcrumbMenu`. */

packages/propel/src/components/button/button.tsx

@@ -20,7 +20,7 @@ export type ButtonProps = Omit<ButtonElementProps, "children"> & {
   /** Element rendered after the label (inline-end), e.g. `<Icon icon={ArrowRight} />`. */
   endIcon?: React.ReactNode;
   /** Visible button label. */
-  label: React.ReactNode;
+  label: string;
   /** Shows a spinner, sets `aria-busy`, and makes the button non-interactive. */
   loading?: boolean;
 };

packages/propel/src/components/checkbox-field/checkbox-field.tsx

@@ -19,7 +19,7 @@ export type CheckboxFieldProps = Omit<
   /** Error text shown below the control. */
   error?: React.ReactNode;
   /** Visible field label. */
-  label: React.ReactNode;
+  label: string;
   /** Label and helper text size. */
   magnitude: FieldMagnitude;
   /** Optional supporting text announced as the checkbox description. */

packages/propel/src/components/checkbox-group-field/checkbox-group-field-option.tsx

@@ -13,7 +13,7 @@ export type CheckboxGroupFieldOptionProps = Omit<
   "aria-label" | "label" | "icon"
 > & {
   /** Visible option label. */
-  label: React.ReactNode;
+  label: string;
   /** Optional supporting text announced as the checkbox description. */
   description?: React.ReactNode;
   /** Label and description size. Inherited from `CheckboxGroupField` when omitted. */

packages/propel/src/components/checkbox-group-field/checkbox-group-field.tsx

@@ -19,7 +19,7 @@ export type CheckboxGroupFieldProps = Omit<CheckboxGroupProps, "children" | "den
   /** Helper text shown below the group. Replaced by `error` when an error is set. */
   hint?: React.ReactNode;
   /** Visible fieldset legend. */
-  label: React.ReactNode;
+  label: string;
   /** Legend and helper text size. */
   magnitude: FieldMagnitude;
   /** Submitted field name. */