@flamingo-stack/openframe-frontend-core 0.0.490 → 0.0.491-snapshot.20260729083908

package/src/components/ui/page-actions.tsx

@@ -6,6 +6,7 @@ import { Chevron02DownIcon } from '../icons-v2-generated'
 import { ActionsMenuDropdown, type ActionsMenuGroup, type ActionsMenuItem } from './actions-menu'
 import type { ButtonProps, SplitButtonIconAction } from './button'
 import { Button, SplitButton } from './button'
+import { Skeleton } from './skeleton'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'
 
 export type PageActionButton = {
@@ -206,26 +207,104 @@ export interface PageActionsProps {
    */
   selector?: React.ReactNode
   className?: string
+  /**
+   * Render placeholders instead of the actions — for pages whose action SET
+   * depends on data still in flight. Opt-in: a page whose actions are already
+   * final while its title loads keeps rendering them.
+   */
+  loading?: boolean
 }
 
 const ACTIONS_GAP = 'gap-[var(--spacing-system-xs)]'
 
+/** Matches `Button` size="icon" / size="default" exactly, so a placeholder and the
+ *  button that replaces it occupy the same box at both breakpoints. `rounded-md`
+ *  is the same token `Button` itself uses — a raw `6px` would agree today and
+ *  drift the moment a platform overrides `--radius`. */
+const SKELETON_HEIGHT = 'h-11 md:h-12'
+const SKELETON_ICON_WIDTH = 'w-11 md:w-12'
+const SKELETON_LABEL_WIDTH = 'w-[120px] md:w-[140px]'
+const SKELETON_RADIUS = 'rounded-md'
+
+/**
+ * Placeholders for actions whose SHAPE isn't known yet — the page is still
+ * loading the record that decides which actions exist (e.g. an archived entity
+ * offers "Unarchive" where an active one offers "Edit").
+ *
+ * Why not render the actions anyway: a button is a promise. Painting the
+ * optimistic set means a flash of the wrong header AND a live click target that
+ * can act on the wrong assumption before the data lands. A grey box promises
+ * nothing and can't be clicked.
+ *
+ * The placeholders are derived from the actions the caller passed — one per
+ * action, each sized like the button that action WILL render — so the common
+ * case (the data confirms that set) settles with no layout shift at all. Sizing
+ * per action matters: `renderRawActionButton` collapses a label-less action (or
+ * one flagged `iconOnlyOnDesktop`) to a square `size="icon"` button, and a
+ * 140px-wide placeholder snapping to 48px is exactly the shift this is meant to
+ * avoid.
+ *
+ * An empty list still yields one placeholder: `loading` means the action set is
+ * unknown, not known-empty. Its shape comes from `emptyFallback`, because what
+ * an empty header settles into differs per variant — `icon-buttons` and
+ * `menu-primary` fall back to the square "…" overflow trigger, `primary-buttons`
+ * has no overflow trigger at all and settles into a labelled button.
+ */
+function ActionSkeletons({
+  actions,
+  fullWidth,
+  emptyFallback = 'icon',
+}: {
+  actions: PageActionButton[]
+  fullWidth?: boolean
+  emptyFallback?: 'icon' | 'label'
+}) {
+  const items = actions.length > 0 ? actions : [null]
+  return (
+    <>
+      {items.map((action, idx) => {
+        // Mirrors `renderRawActionButton`'s `isIconOnly`. The mobile bottom bar
+        // stretches only labelled buttons (`fullWidth: !!action.label`), so an
+        // icon action keeps its square box there too.
+        const isIconOnly = action ? !action.label || !!action.iconOnlyOnDesktop : emptyFallback === 'icon'
+        return (
+          <Skeleton
+            // Static placeholder list — index IS the identity here.
+            key={`action-skeleton-${idx}`}
+            className={cn(
+              SKELETON_HEIGHT,
+              SKELETON_RADIUS,
+              isIconOnly ? SKELETON_ICON_WIDTH : fullWidth ? 'flex-1' : SKELETON_LABEL_WIDTH,
+            )}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+/** Mobile placeholder for the variants that collapse to ONE trigger (icon button or "…"). */
+function MobileTriggerSkeleton() {
+  return <Skeleton className={cn(SKELETON_HEIGHT, SKELETON_ICON_WIDTH, SKELETON_RADIUS)} />
+}
+
 export function PageActions({
   variant = 'icon-buttons',
   actions,
   menuActions,
   selector,
   className,
+  loading,
 }: PageActionsProps) {
   if (variant === 'icon-buttons') {
-    return <IconButtonsVariant actions={actions} menuActions={menuActions} selector={selector} className={className} />
+    return <IconButtonsVariant actions={actions} menuActions={menuActions} selector={selector} className={className} loading={loading} />
   }
 
   if (variant === 'menu-primary') {
-    return <MenuPrimaryVariant actions={actions} menuActions={menuActions || []} selector={selector} className={className} />
+    return <MenuPrimaryVariant actions={actions} menuActions={menuActions || []} selector={selector} className={className} loading={loading} />
   }
 
-  return <PrimaryButtonsVariant actions={actions} className={className} />
+  return <PrimaryButtonsVariant actions={actions} className={className} loading={loading} />
 }
 
 function IconButtonsVariant({
@@ -233,11 +312,13 @@ function IconButtonsVariant({
   menuActions,
   selector,
   className,
+  loading,
 }: {
   actions: PageActionButton[]
   menuActions?: ActionsMenuGroup[]
   selector?: React.ReactNode
   className?: string
+  loading?: boolean
 }) {
   const desktopActions = actions.filter(a => !a.showOnlyMobile)
   const hasMenuActions = !!menuActions && menuActions.some(g => g.items.length > 0)
@@ -257,17 +338,25 @@ function IconButtonsVariant({
       {/* Desktop: every action as an icon button + optional overflow menu */}
       <div className={cn('hidden md:flex items-center', ACTIONS_GAP, className)}>
         {selector}
-        {desktopActions.map((action, idx) => (
-          <React.Fragment key={actionKey(action, idx)}>
-            {renderActionButton(action)}
-          </React.Fragment>
-        ))}
-        {hasMenuActions && <ActionsMenuDropdown groups={menuActions} />}
+        {loading ? (
+          <ActionSkeletons actions={desktopActions} />
+        ) : (
+          <>
+            {desktopActions.map((action, idx) => (
+              <React.Fragment key={actionKey(action, idx)}>
+                {renderActionButton(action)}
+              </React.Fragment>
+            ))}
+            {hasMenuActions && <ActionsMenuDropdown groups={menuActions} />}
+          </>
+        )}
       </div>
 
       {/* Mobile: single icon button OR all actions merged into one "..." menu */}
       <div className={cn('flex md:hidden', className)}>
-        {useSingleActionMobile && singleAction ? (
+        {loading ? (
+          <MobileTriggerSkeleton />
+        ) : useSingleActionMobile && singleAction ? (
           renderActionButton(singleAction, { iconOnly: true })
         ) : hasMobileMenuItems ? (
           <ActionsMenuDropdown groups={mobileMenuGroups} />
@@ -284,9 +373,11 @@ function IconButtonsVariant({
 function PrimaryButtonsVariant({
   actions,
   className,
+  loading,
 }: {
   actions: PageActionButton[]
   className?: string
+  loading?: boolean
 }) {
   // Sort: outline first, accent last (rightmost on desktop).
   const sortedActions = [...actions].sort((a, b) => {
@@ -300,14 +391,20 @@ function PrimaryButtonsVariant({
   return (
     <>
       <div className={cn('hidden md:flex items-center', ACTIONS_GAP, className)}>
-        {desktopActions.map((action, idx) => (
-          <React.Fragment key={`desktop-${actionKey(action, idx)}`}>
-            {renderActionButton(action)}
-          </React.Fragment>
-        ))}
+        {loading ? (
+          // No overflow trigger in this variant — an unknown action set settles
+          // into a labelled button, not a square one.
+          <ActionSkeletons actions={desktopActions} emptyFallback="label" />
+        ) : (
+          desktopActions.map((action, idx) => (
+            <React.Fragment key={`desktop-${actionKey(action, idx)}`}>
+              {renderActionButton(action)}
+            </React.Fragment>
+          ))
+        )}
       </div>
 
-      <MobileBottomActions actions={sortedActions} />
+      <MobileBottomActions actions={sortedActions} loading={loading} />
     </>
   )
 }
@@ -321,11 +418,13 @@ function MenuPrimaryVariant({
   menuActions,
   selector,
   className,
+  loading,
 }: {
   actions: PageActionButton[]
   menuActions: ActionsMenuGroup[]
   selector?: React.ReactNode
   className?: string
+  loading?: boolean
 }) {
   const desktopActions = actions.filter(a => !a.showOnlyMobile)
   const hasMenuActions = menuActions.some(g => g.items.length > 0)
@@ -340,34 +439,47 @@ function MenuPrimaryVariant({
     <>
       <div className={cn('hidden md:flex items-center', ACTIONS_GAP, className)}>
         {selector}
-        {hasMenuActions && <ActionsMenuDropdown groups={menuActions} />}
-        {desktopActions.map((action, idx) => (
-          <React.Fragment key={`desktop-${actionKey(action, idx)}`}>
-            {renderActionButton({ ...action, variant: action.variant || 'accent' })}
-          </React.Fragment>
-        ))}
+        {loading ? (
+          <ActionSkeletons actions={desktopActions} />
+        ) : (
+          <>
+            {hasMenuActions && <ActionsMenuDropdown groups={menuActions} />}
+            {desktopActions.map((action, idx) => (
+              <React.Fragment key={`desktop-${actionKey(action, idx)}`}>
+                {renderActionButton({ ...action, variant: action.variant || 'accent' })}
+              </React.Fragment>
+            ))}
+          </>
+        )}
       </div>
 
       <div className={cn('flex md:hidden', className)}>
-        {hasMobileMenuItems ? <ActionsMenuDropdown groups={mobileMenuGroups} /> : null}
+        {loading ? <MobileTriggerSkeleton /> : hasMobileMenuItems ? <ActionsMenuDropdown groups={mobileMenuGroups} /> : null}
       </div>
     </>
   )
 }
 
-function MobileBottomActions({ actions }: { actions: PageActionButton[] }) {
+function MobileBottomActions({ actions, loading }: { actions: PageActionButton[]; loading?: boolean }) {
   return (
     <div className={cn(
       'fixed md:hidden bottom-0 left-0 right-0 z-50',
       'bg-ods-card border-t border-ods-border',
-      'flex items-start pt-6 pb-6 px-6',
+      // `lf` (24px at every breakpoint), NOT `l` — this bar is `md:hidden`, so the
+      // only value it ever uses is the MOBILE one, and `l` is 16px there. The
+      // fixed variant is what keeps the 24px the bar has always had.
+      'flex items-start p-[var(--spacing-system-lf)]',
       ACTIONS_GAP,
     )}>
-      {actions.map((action, idx) => (
-        <React.Fragment key={`mobile-${actionKey(action, idx)}`}>
-          {renderActionButton(action, { fullWidth: !!action.label })}
-        </React.Fragment>
-      ))}
+      {loading ? (
+        <ActionSkeletons actions={actions} fullWidth emptyFallback="label" />
+      ) : (
+        actions.map((action, idx) => (
+          <React.Fragment key={`mobile-${actionKey(action, idx)}`}>
+            {renderActionButton(action, { fullWidth: !!action.label })}
+          </React.Fragment>
+        ))
+      )}
     </div>
   )
 }

package/src/components/ui/radio-group.tsx

@@ -81,6 +81,10 @@ const RadioGroupBlock = React.forwardRef<
       <div className={cn("relative flex w-full flex-col", className)}>
         <RadioGroupPrimitive.Root
           ref={ref}
+          // Same marker every field exposes — it is how a form finds (and
+          // scrolls to) the first control that failed validation. The GROUP is
+          // the field here; the individual options are not separately invalid.
+          data-invalid={error ? true : undefined}
           className={cn(
             "w-full",
             isGrouped
@@ -106,6 +110,10 @@ const RadioGroupBlock = React.forwardRef<
                   "flex w-full items-center gap-3",
                   "transition-colors duration-200",
                   isDisabled ? "cursor-not-allowed" : "cursor-pointer",
+                  // Hover / active move the BACKGROUND only, like Input and
+                  // CheckboxBlock — the border stays put so an unselected row
+                  // never flashes "selected" under the cursor.
+                  !isDisabled && "hover:bg-ods-bg-hover active:bg-ods-bg-active",
                   isGrouped
                     ? cn(
                         "bg-ods-card px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs,8px)]",
@@ -114,12 +122,17 @@ const RadioGroupBlock = React.forwardRef<
                       )
                     : cn(
                         "rounded-[6px] border bg-ods-card p-[var(--spacing-system-sf)]",
-                        !isDisabled && "hover:border-ods-accent/30",
                         !isDisabled &&
                           "has-[[data-state=checked]]:bg-[var(--ods-system-greys-soft-grey)]/30 has-[[data-state=checked]]:border-ods-accent/40",
                         error ? "border-ods-error" : "border-ods-border"
                       ),
-                  isDisabled && "opacity-50",
+                  // Disabled matches a disabled field: flat `ods-bg` fill and
+                  // greyed text, not a fade of the whole row. The greying lives
+                  // on the TEXT COLUMN below, not here: as a descendant rule on
+                  // the row it also repainted whatever `trailing` renders — a
+                  // `Tag`'s label is a span too, and it went invisible against
+                  // its own fill.
+                  isDisabled && "bg-ods-bg",
                   itemClassName
                 )}
               >
@@ -132,7 +145,10 @@ const RadioGroupBlock = React.forwardRef<
                     error ? "border-ods-error" : "border-[var(--color-border-strong)]",
                     "transition-colors duration-150",
                     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 focus-visible:ring-offset-ods-card",
+                    // Disabled: the EMPTY dot dims with the text; a selected one
+                    // keeps its accent so "on but locked" stays readable.
                     "disabled:cursor-not-allowed",
+                    "disabled:data-[state=unchecked]:bg-ods-bg disabled:data-[state=unchecked]:border-ods-border",
                     "data-[state=checked]:border-ods-accent"
                   )}
                 >
@@ -140,7 +156,16 @@ const RadioGroupBlock = React.forwardRef<
                     <span className="block h-1/2 w-1/2 rounded-full bg-ods-accent" />
                   </RadioGroupPrimitive.Indicator>
                 </RadioGroupPrimitive.Item>
-                <div className="flex min-w-0 flex-1 flex-col justify-center">
+                <div
+                  className={cn(
+                    "flex min-w-0 flex-1 flex-col justify-center",
+                    // Direct children only — these are the two component-owned
+                    // wrappers. `option.label` / `option.description` are
+                    // ReactNode, so a descendant rule would repaint content the
+                    // caller styled itself.
+                    isDisabled && "[&>span]:text-ods-text-disabled",
+                  )}
+                >
                   <span
                     className={cn(
                       "font-[family-name:var(--font-h4-family)] font-[number:var(--font-h4-weight)] text-[length:var(--font-size-h4-body)] leading-[24px]",

package/src/components/ui/search-input.tsx

@@ -106,7 +106,8 @@ const innerInputStyles = cn(
   "flex-1 min-w-[60px] bg-transparent border-none outline-none",
   "text-h4",
   "text-ods-text-primary placeholder:text-ods-text-secondary",
-  "disabled:cursor-not-allowed",
+  // Disabled - match Input exactly (value greys out, placeholder dims further)
+  "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border",
   "touch-manipulation"
 )
 

package/src/components/ui/select.tsx

@@ -42,7 +42,14 @@ const SelectTrigger = React.forwardRef<
         "enabled:hover:bg-ods-bg-hover enabled:hover:border-ods-border-hover enabled:active:bg-ods-bg-active enabled:active:border-ods-border-active",
         !isInvalid && "data-[state=open]:border-ods-accent data-[state=open]:hover:border-ods-accent",
         "group",
+        // Disabled - match Input exactly: value greys out, placeholder dims
+        // further. The `data-[placeholder]` rule above is a class+attribute
+        // selector, so the disabled placeholder rule stacks `:disabled` on top
+        // of it to win on specificity rather than on source order.
         "disabled:!cursor-not-allowed disabled:bg-ods-bg",
+        "disabled:text-ods-text-disabled disabled:data-[placeholder]:text-ods-border",
+        // The chevron sets its own colour — grey it with the value.
+        "disabled:[&_svg]:text-ods-text-disabled",
         "transition-colors duration-200 cursor-pointer",
         "[&>span]:line-clamp-1",
         isInvalid && "border-ods-error enabled:hover:border-ods-error enabled:active:border-ods-error data-[state=open]:border-ods-error",