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.

---

0.7.36 — 2026-03-05

Added

• Menu.Label and Menu.Group (Menu)
  New compound components for organizing menu items into labeled groups. Menu.Group wraps related items, Menu.Label renders a non-interactive section heading.

• FloatingLabelSelect component (Floating Label Input)
  New select variant with floating label animation matching FloatingLabelInput. Label floats above when an option is selected.

• FloatingLabelInput endAdornment (Floating Label Input)
  Added endAdornment prop for placing icons or buttons at the end of the input. Includes password toggle, SSN mask, and birthday masked input demos.

• FloatingLabelInput placeholder support (Floating Label Input)
  Added placeholder prop with focus-only visibility — placeholder text appears when the input is focused and the label has floated above.

• Birthday masked input (Field)
  Composition demo for segmented birthday input with segment highlighting, cursor positioning through separators, and live validation. Includes both masked and segmented select variants.

• Phone input and country selector (Select Control)
  Composition demo combining SelectControl with country flag icons and phone number formatting. Flag icons use lipis/flag-icons 4:3 SVGs via jsDelivr CDN.

• Column configuration demo (Select)
  Composition demo for table column visibility toggles using Select with checkbox items.

• Switch description prop (Switch)
  Added description prop to Switch for displaying secondary text below the label.

• Tabs scrollable demo (Tabs)
  Added Scrollable example to Tabs documentation showing horizontal overflow behavior with auto-scroll to active tab. No extra prop needed — just constrain the container width.

Changed

• Alert dismiss button (Alert)
  Replaced raw close icon with a soft Button component for the dismiss action. Consolidated Actions and Dismissible sections into single previews for cleaner documentation.

• Indicator sizes unified (Indicators)
  Standardized all indicator sizes to 18px across LoadingIndicator, CircularProgress, and LoadingDots. Consolidated Indicator and Dismissible demo sections into single preview cards.

• Checkbox alignment unified with RadioGroup (Checkbox)
  Aligned Checkbox indicator size (18×18px) and label gap with RadioGroup for visual consistency. Fixed label vertical alignment to match RadioGroup first-line behavior. Added combined Checkbox + RadioGroup alignment demo to both doc pages.

• FloatingLabelInput focus tokens (Floating Label Input)
  Replaced hardcoded blue focus ring color with neutral design tokens for consistency with the rest of the system.

• Birthday segment highlight token (Field)
  Uses primary/solid token for active segment highlight instead of hardcoded color.

• Removed "New" badges from component index and sidebar
  Cleared all isNew badges from the components index page and sidebar — too many components were flagged, reducing the signal value.

Fixed

• Birthday mask cursor positioning (Field)
  Fixed cursor advancing past separators on complete segment and handling backspace through separator characters in the masked birthday input.

• Birthday inputs browser autocomplete (Field)
  Fixed segmented birthday inputs triggering unwanted browser autocomplete dropdown.

• Flag icon aspect ratio (Select Control)
  Fixed flag icons rendering as squares instead of proper 4:3 rectangles. Switched to same-height CDN endpoints and fixed alignment in dropdown lists.

• Input clear button styling (Input)
  Fixed clear button styling inconsistencies when used alongside FloatingLabelSelect demos.

• Column config demo toggles (Select)
  Fixed broken toggle state and removed unnecessary separator in column configuration popover.

• Button sizing demo height jump (Button)
  Fixed preview card height jumping when switching between button sizes.

• FileDocument icon export (Menu)
  Fixed import using non-existent File icon export — replaced with FileDocument.

---

0.6.0 — 2026-02-01

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 (Tabs)
  Added icon and badge props to Tabs.Tab. Icons automatically size based on control size. Badges support semantic colors (secondary, success, danger, etc.), style variants (soft, solid), and pill shape option.

• 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.

• Pill overflow and text overlap (Tabs)
  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 (Tabs)
  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 calculated radius 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.

• 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 a new Unreleased section at the top
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)