GO UI v3#2402
Draft
frozenhelium wants to merge 5 commits into
Draft
Conversation
BREAKING CHANGE: major API overhaul of @ifrc-go/ui (v3). - specs: replace runtime useSpacingToken with static utility classes + pure resolvers; add textSize/backgroundColor/borderRadius/boxShadow specs with full scales, Extract<> narrowing, and clamped offsets - variants: curated `variant` on Button/ConfirmButton/IconButton; Alert.type and ProgressBar.colorVariant -> variant; `variant` -> `styleVariant` on generic components - props: background/shadow booleans -> backgroundColor/boxShadow tokens; containerRef -> elementRef; unify duplicated textSize scales - structural: add generic RawOutput adapter (TextOutput/KeyFigure rebuilt on it); KeyFigureView -> KeyFigureCard; split RawFileInput into headless primitive + FileInputButton; remove List - migrate all app + storybook consumers; add CONTRIBUTING/MIGRATION docs See packages/ui/MIGRATION.md for call-site rewrites.
🦋 Changeset detectedLatest commit: 6d4a54a The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
… wiring BREAKING CHANGE: many @ifrc-go/ui components are renamed and restructured (v3). Renames (import + JSX tag + Props type): - Modal→Dialog, Popup→Popover, InlineFrame→Iframe, Pager→Pagination, Label→DisplayLabel, TextBadge→CharacterCount, ReducedListDisplay→TruncatedList, InfoPopup→MoreInfo, TextOutput→DataDisplay, and the *Output value family (Number/Date/Boolean/DateRange/Html/Raw) → *Display. - Structural: DropdownMenu→Menu + new generic Dropdown; Chip→ChipLayout plus Tag and Selection/SelectionList (replacing the Dismissable* trio); DropdownMenuContext→MenuContext. Semantics & accessibility: - Form fields wire <label htmlFor>, aria-describedby, aria-invalid and role="alert" via InputContainer; InputLabel renders a real <label>. - Added roles: dialog, switch, live regions, nav landmarks, disclosures. - Formatted outputs render native <data value>/<time dateTime> (machine + test hook) and expose the full reading of abbreviated values to screen readers via role="img" + aria-label. DataDisplay renders <dl>/<dt>/<dd>. - Some widget patterns (combobox, tabs roving-tabindex, tooltip keyboard) are deferred and marked FIXME(a11y-tier2). App and storybook consumers migrated. See packages/ui/MIGRATION.md for exact call-site rewrites.
Overlays now use native browser features where they fit, and the chart
tooltip stays on a lightweight JS-positioned Portal so it works inside <svg>.
- Dialog: rebuilt on the native <dialog> element + showModal() — platform
focus trap/restore, background inerting, top layer and ::backdrop; drops
react-focus-on and the portal; aria-labelledby wired to the Container
heading. Fixes sizing (fit-content + per-size min-heights, properly
centred) and the close button (shown only when onClose is provided;
ConfirmButton now passes one + closeOnEscape).
- Popover (Dropdown/Menu/MoreInfo/selects/InputError): native Popover API
(popover="manual") + CSS anchor positioning, with a feature-detected
Portal fallback. The pointer follows the box's flip via a read-back
orientation.
- Tooltip: deliberately simpler than Popover — Portal + a minimal
useFloatPlacement (below the parent, or above when there's more room; no
clamping/width logic). Keeps the surface in the HTML namespace and uses
getBoundingClientRect, so tooltips inside chart <svg> no longer crash
(SVGElement has no showPopover) and position correctly.
- Reset leaked UA defaults on migrated semantic elements (ChipLayout <li>
list-style).
BREAKING CHANGE: useFloatPlacement is simplified — it now takes only the
parent ref and returns { style, orientation }. The react-focus-on dependency
is removed (the native <dialog> replaces it).
frozenhelium
commented
Jun 13, 2026
Comment on lines
+121
to
+123
| ## Releases | ||
|
|
||
| Versioning is handled with [changesets](https://github.com/changesets/changesets). Run `npx changeset` at the repo root, pick the bump level, and describe the change from a consumer's perspective. |
Member
Author
There was a problem hiding this comment.
We don't need it here
- Desaturate PER palette; add categorical hazard color tokens. - Add KeyFigure supplement, PageHeader overline, TopBanner brand variant. - Add surface-raised background; trim card radius to md. - Square SegmentInput; add active nav-tab underline; drop flipped-tooltip shadow override. - Fix Button wrapper positioning regression for consumer-positioned buttons. - app: resolve hazard chart/map colors from ui tokens at runtime.
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
1 participant
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.
BREAKING CHANGE: major API overhaul of @ifrc-go/ui (v3).
varianton Button/ConfirmButton/IconButton; Alert.type and ProgressBar.colorVariant -> variant;variant->styleVarianton generic components