Repository navigation
Refresh components, theme and tooltip for a modern instrument-panel look (v5.6.0) - #650
Merged
Merged
Conversation
- Theme: green70 primary with hover/pressed keys, surface ladder (grey195
panels, grey190 sidebar), neutral field borders (controlBorder grey130),
soft status text keys, dark limedSpruce tooltip, flat panelBgGrad.
- Controls sized by CONTROL_SIZES (24/28/32), green keyboard focus rings,
0.4 disabled; Button link flavour and compact size, IconButton sizes,
focusableWhenDisabled and useRovingFocus, segmented ButtonGroup.
- Pill soft default with filled, dot and muted; StatusWord and MarkCounts.
- Tabs line/contained variants with icon and count slots and tablist ARIA.
- Tooltip: 600ms delay, no arrow, { title, description } content, bubble
inks custom content with tooltipText; TooltipInk for app-drawn surfaces;
IconButton uses the standard bubble; inputs keep a given background on
focus.
- Exported focusRing mixins plus fieldFocusWithinRing.
- IBM Plex Sans in global styles; News organism removed.
- Storybook autodocs and usage pages for every component, story render test
in light and dark, Playwright visual test setup.
…and Toggle - Focusable disabled IconButtons cancel activation so they cannot submit or reset a surrounding form, while keeping focus and their tooltip. - Tooltip treats only plain objects with title or description as the structured card; arrays and other React content render as given. - useRovingFocus clamps the active index to the remaining items so one item always stays reachable by Tab. - StatusWord renders its detail node without string coercion. - Toggle forwards aria-* and title from toggleProps to the switch input.
…Word detail
- One visuallyHidden mixin for toggle, checkbox, mark counts and copy live region
- controlSize falls back to the canonical CONTROL_SIZES
- dropdownStyles exports floatingShadowValue so Select no longer parses a css fragment
- StatusWord renders detail={0} with its separator
- Merge MarkCounts tests that shared one arrangement
kapantzak
approved these changes
Nov 5, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Refresh the components, theme and tooltip for a modern instrument-panel look. Existing prop contracts are kept. Released as v5.6.0.
What changed
controlBorder,textInfo,primaryHover,primaryPressed,*SoftText),constants.CONTROL_SIZES(24/28/32px) shared by buttons, fields, selects and icon buttons, lightprimaryis nowgreen70, and IBM Plex Sans in typography.linkflavour andcompact. IconButton: square control sizes,focusableWhenDisabled, and the standard Tooltip. ButtonGroupvariant="segmented". NewuseRovingFocushook for toolbars.variant,icon,count, built-in tab roles and arrow keys.filledkeeps the old look),dot,muted. NewStatusWordandMarkCounts.{ title, description }. NewTooltipInkinks custom content (and your own dark surfaces) withtooltipText.focusRing,focusRingOutline,fieldFocusRingandfieldFocusWithinRingmixins. Keyboard focus rings across controls.aria-*andtitlereach the hidden switch input. Icon falls back tocurrentColor.Breaking
Newsis no longer exported. No usage found in cloud-frontend or charts.Tests
build:cjsandbuild:es6succeed.