Changelog

This changelog documents significant updates, bug fixes, and improvements to components in the Plex UI design system. Entries follow the Keep a Changelog format.

---

Unreleased

Added

• Sidebar component (Sidebar)
  New composable navigation sidebar for application layouts. Includes SidebarProvider for state management, SidebarLayout for layout structure, scrollable SidebarContent, sticky SidebarHeader/SidebarFooter, and organized navigation with SidebarGroup, SidebarMenu, SidebarMenuItem, and SidebarMenuButton. Supports three collapse modes: offcanvas (drawer on mobile, full collapse on desktop), icon (collapses to icon rail), and none (static). Includes keyboard shortcut Cmd+B/Ctrl+B for toggling.

• Sidebar nested navigation (Sidebar)
  Collapsible nested menus with SidebarMenuSub and SidebarMenuSubButton. Animated chevron toggles via SidebarMenuChevron. Supports multi-level hierarchies for documentation and API reference navigation patterns.

• Sidebar footer cards (Sidebar)
  SidebarCard component for promotional content, upgrade CTAs, or announcements in the sidebar footer. Includes SidebarCardTitleLink with dismissible close button, SidebarCardContent for description text, and SidebarCardFooter for action buttons. Cards animate in after sidebar expansion with delayed opacity transition.

• Sidebar badges (Sidebar)
  SidebarMenuBadge container for displaying status indicators, counts, or labels alongside menu items. Pairs with the Badge component supporting all semantic colors (success, warning, danger, info, discovery, caution) and pill shape option.

• Sidebar mobile menu (Sidebar)
  SidebarMobileMenuButton with animated hamburger icon that transforms to close icon. Mobile behavior is automatic via SidebarProvider with responsive breakpoint detection. Drawer slides in from left with backdrop overlay.

• Skeleton component (Skeleton)
  New component for displaying loading placeholders. Supports rectangular and circular shapes via circle prop. Uses design tokens for background color and border-radius. Includes composition examples for avatars, cards, text blocks, forms, and tables.

• Floating Label Input component (Floating Label Input)
  New input component with animated floating label that moves above the input on focus or when filled. Supports error states with errorMessage prop, built-in clear button via onClear, disabled and read-only modes, browser autofill detection with onAutofill callback, and password manager extension blocking with allowAutofillExtensions.

• Progress Steps component (Progress Steps)
  New component for displaying progress through multi-step processes. Supports horizontal and vertical orientations, three sizes (sm, md, lg), solid and dashed connector styles, custom icons per step, and a minimal bar variant for compact layouts. Includes compound components: ProgressSteps.Step, ProgressSteps.Title, and ProgressSteps.Description. Color schemes include default and success variants.

• ShimmerText component (ShimmerText)
  New component for animated shimmer effect on text content. Includes ShimmerText for simple shimmer animation and ShimmerableText for streaming-style text reveal with shimmer on the latest token. Supports customizable speed, shimmer width, and color via CSS custom properties.

• Field component (Field)
  New form field wrapper that provides label, description, and error message with automatic accessibility linking. Generates htmlFor, aria-describedby, and aria-invalid attributes. Supports 9-step size scale, horizontal/vertical orientation, required indicator, and composition with Input, Textarea, Select, Slider, Checkbox, RadioGroup, and Switch controls via render prop pattern.

• Field optical alignment (Field)
  New opticallyAlign prop on Field that forwards to child controls via cloneElement. Compensates for pill gutter padding in form layouts, aligning labels and error messages with the visual text edge of Input, Select, and Button controls.

• Slider range mode (Slider)
  Slider now supports dual-thumb range selection via array value/defaultValue. Also added vertical orientation, disabled state, prefix/suffix units, and step markers with labels.

• Icon and badge support (Segmented Control)
  Added icon and badge props to SegmentedControl.Option. Icons automatically size based on control size with negative left margins for visual alignment. Badges support semantic colors (secondary, success, danger, etc.), style variants (soft, solid), and pill shape option. Badge sizes scale with control size using new 2xs/xs badge tokens for smaller controls.

• Tabs component (Tabs)
  Renamed and extended SegmentedControl into Tabs. Adds variant prop with "segmented" (default, existing behavior) and "underline" (animated line indicator with no background). Adds orientation prop with "horizontal" (default) and "vertical" support. Sub-components: Tabs.Tab (new canonical name) and Tabs.Option (backward-compat alias). The SegmentedControl import continues to work as a backward-compatible alias.

• Tabs flush underline variant (Tabs)
  Added flush boolean prop for the underline variant. Removes tab padding so the indicator matches the text width exactly, uses gap-based spacing between tabs, removes the container bottom border, and renders a 1px indicator with no border-radius. Spacing scales with size prop.

• RadioGroup orientation and block props (Radio Group)
  New orientation prop on RadioGroup.Item positions the radio indicator left (default) or right of the label. New block prop stretches the item to full width with justify-content: space-between for menu-style layouts. Documented with Orientation, With Field, Field error, Choice card, and Card selection examples.

Changed

• Sidebar variants simplified (Sidebar)
  Removed unused sidebar variants (floating, inset, dual-tier) from type definitions, documentation, and CSS. The component now supports only sidebar (default) and docs variants.

• Field horizontal orientation refactored (Field)
  Restructured HTML to use LabelGroup (label + description) and Content (control + error) containers for proper horizontal layout. Added fixed-width CSS variables --field-horizontal-label-width and --field-horizontal-control-width. Label vertical centering now uses calc((control-height - label-line-height) / 2) per size for pixel-perfect alignment.

• Checkbox indicator aligned to Figma (Checkbox)
  Indicator size changed from hardcoded 20×20px to 18×18px using the --menu-checkbox-indicator-size token — matching the Menu CheckboxItem and Figma specification. Border colors changed from solid grays (var(--gray-200)) to alpha-based tokens (var(--alpha-16) default, var(--alpha-20) hover) for consistent rendering on any background.

• Checkbox label layout (Checkbox)
  Label changed from display: flex; align-items: center to display: block for proper text flow in multi-line labels with descriptions. Gap tokens aligned with Menu CheckboxItem: spacing(2) (8px) for left orientation, spacing(3) (12px) for right orientation.

Fixed

• Sidebar collapse animation stability (Sidebar)
  Fixed jitter and layout shifts during sidebar collapse/expand animations. Stabilized flexbox rendering for menu items, improved padding transitions, and ensured footer cards animate in only after sidebar fully expands.

• Sidebar mobile menu label visibility (Sidebar)
  Labels in mobile menu were sometimes hidden due to incorrect collapsed state detection. Fixed to ensure labels are always visible in mobile drawer mode regardless of desktop sidebar state.

• Month stepper sizing and alignment (Date Range Picker)
  Fixed multiple issues with the month stepper trigger: stepper buttons now properly scale with control size using CSS variable overrides with correct specificity; added vertical alignment for buttons; gap between buttons and text scales with control size; month text min-width now uses em units (9em) to scale with font size, preventing width jumps when switching between months with different name lengths (e.g., "May" vs "September"). Stepper buttons now inherit pill prop from parent, matching SelectControl's Clear button behavior. Added size and pill controls to Storybook docs for testing.

• Clear button sizing and consistency (Input)
  Clear button overflow and border collision at various sizes. Refactored to use built-in onClear prop with dedicated sizing tokens matching SelectControl's clear-iso button. Updated gutter values and added per-size offsets for proper alignment in both standard and pill modes.

• FieldError semantic color tokens (Field)
  Replaced hardcoded error colors with --color-text-danger-outline and --color-border-danger-outline semantic tokens. Removed margin-top: -0.1em hack from error icon, now relies on flex centering for alignment.

• ComponentPreview border consistency
  Unified demo control row border color with the outer card border across light and dark themes. Control rows now use theme-aware rgb(0 0 0 / 5%) / rgb(255 255 255 / 5%) instead of the heavier var(--color-fd-border).

• Pill overflow and text overlap (Segmented Control)
  In pill mode, narrow options (icons, single digits) could be narrower than the control height, causing circular hover highlights and the active thumb to overflow or clip. Added min-width to options in pill mode ensuring they're at least as wide as the control height. Also fixed a scrollable mode regression where text items overlapped, and corrected invalid white-space: wrap to white-space: normal.

• Highlight overlay radius mismatch (Segmented Control)
  The hover/active overlay (::before) used the same border-radius as the option, but the overlay is inset by 1px. This caused the inner rounded shape to not nest correctly. Added --segmented-control-option-highlight-radius calculated as option radius minus inset, so the overlay aligns flush with the container.

• Pill gutter scaling with opticallyAlign (Select Control, Input, Button)
  When using opticallyAlign with pill={true}, the margin calculation used only the base gutter and ignored the pill scaling multiplier (1.33×). Controls with pills now correctly multiply the margin by --control-gutter-pill-scaling, aligning properly with Ghost controls.

• Inconsistent gap between Options and Actions (Select)
  Options used gap: spacing(1) (4px) while Actions used --menu-item-gap (6px). Standardized both to use --menu-item-gap for consistency with the base Menu component.

• Search input icon color (Select)
  The search icon had className="fill-secondary" but fill="currentColor" in the SVG path inherited color from the Input container, ignoring the class. Fixed by passing fill="var(--color-text-secondary)" as a prop with !important to override currentColor.

• Missing caution color variant (Badge)
  Badge was missing the caution color option, inconsistent with Button and Alert. Added caution to BadgeProps, implemented CSS styles for all variants (soft, solid, outline), and added to the Colors example matrix.

• Incorrect size documentation (Badge)
  Documentation stated sm size is 18px, but actual computed value is 20px (calc(22px - 2px)). Fixed the JSDoc comment to show correct value.

• Tabs pill variant radius (Tabs)
  Fixed incorrect border-radius in pill mode for both segmented and vertical orientations. The option radius now correctly uses --radius-full when pill is active.

• Field label text selection (Field)
  Removed user-select: none from Field label, allowing users to select and copy label text.

---

Contributing

When adding entries to this changelog:

1. Add new items under the Unreleased section
2. Group by change type: Added, Changed, Deprecated, Removed, Fixed, Security
3. Link to the affected component in parentheses after the fix title
4. Describe the issue and the fix concisely
5. When releasing, move items to a dated version section (e.g., ## 1.2.0 — 2026-01-26)