feat(Rating): individual segments, segment count and single fill - #2863
Open
Lisa18289 wants to merge 3 commits into
Open
feat(Rating): individual segments, segment count and single fill#2863Lisa18289 wants to merge 3 commits into
Lisa18289 wants to merge 3 commits into
Conversation
The rule that dims a disabled rating targeted `.star` and `.starFilled`. Those classes are never applied — the icons carry `.empty` and `.filled`, and `star` only exists as a `grid-template-areas` name. The selectors are left over from a rename, so a disabled rating kept its full star colors. Point the rule at the classes that exist. Palette-colored custom icons (`<Icon color="success">`) are dimmed as well; an icon with a free CSS color sets an inline style and stays as it is on purpose. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
Coverage Report for ./packages/components/
File Coverage
|
||||||||||||||||||||||||||||||||||||||
Contributor
🚀 Preview DeploymentPreview environments are ready:
Images:
|
Lisa18289
added
the
update-screenshots
github-actions
Bot
removed
the
update-screenshots
Lisa18289
force-pushed
the
claude/rating-component-improvements-7abafc
branch
7 times, most recently
from
August 20, 2026 11:08
4f8698f to
efd26d7
Compare
A rating was hard-wired to five stars with one icon pair for all of them.
Three additions, all optional and backwards compatible:
- `RatingSegment` is public and remote-capable. Each segment carries its
own `iconEmpty`/`iconFilled`, and an `<Icon color>` inside them already
wins over the rating's own colors, so per-segment colors need no new
API. Segments reach the segment row through the tunnel, the same way
`SegmentedControl` collects its `Segment` children.
- `maxValue` sets the number of segments when no segments are given.
Segments win over `maxValue` when both are present.
- `fill="single"` fills only the selected segment instead of every
segment up to the value, for scales whose steps have their own symbols.
It is a modifier class; the fill logic stays in CSS.
The rating hands its defaults to the segments through the props context,
so a segment's own props win and the icon precedence chain comes for free:
a segment's icon, else the rating's, else the star. `size` rides along as
an `@internal` prop rather than through an `Icon` context, because
`flowComponent` wraps every UI component in a `ClearPropsContext` — a
context set around the segment row does not reach the icons inside a
segment. Only the segment's position needs a context of its own; tunneled
elements cannot be given props.
The icon props of both components are declared `@flr-slot-props`, so they
travel as slotted children instead of cloned property values. Without
that, setting one over a real remote connection throws
`DataCloneError: Symbol(react.transitional.element) could not be cloned`
and takes the whole remote tree down — which is what Rating's existing
icon props did until now. Any React subtree works there now, a raw `<svg>`
or a Tabler icon included. The host markup is unchanged either way,
because the slot wrapper renders a fragment.
The accessible name of a segment is its own `aria-label`, else the
generated "{value} of {count}". That replaces the per-value keys
`segment.0`…`segment.5`, which cannot describe a rating of any other
length.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Lisa18289
force-pushed
the
claude/rating-component-improvements-7abafc
branch
from
August 20, 2026 11:16
efd26d7 to
5e073b0
Compare
Lisa18289
added
the
update-screenshots
github-actions
Bot
removed
the
update-screenshots
Co-authored-by: Lisa18289 <84317589+Lisa18289@users.noreply.github.com>
Lisa18289
marked this pull request as ready for review
August 21, 2026 09:11
Lisa18289
requested review from
Jan-Eimertenbrink,
ins0,
maaaathis and
mfal
as code owners
August 21, 2026 09:11
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.
Adds three optional props/components to
Ratingso a rating is no longer five stars with one icon pair, and fixes two bugs found on the way.Added
RatingSegment— public and remote-capable. Put segments into the rating to give each step its owniconEmpty/iconFilled; an<Icon color>inside them already wins over the rating's colors, so per-segment colors need no new API. Collected through the tunnel likeSegmentedControl'sSegment; position comes from an internal context, so there is no publicindexorvalue.maxValue— the number of segments when no segments are given. Segments win when both are present.fill="single"— fills only the selected segment instead of every segment up to the value, for scales whose steps have their own symbols (default stayscumulative). Pure CSS, no new state.The accessible name of a segment is its own
aria-label, else the generated"{value} of {count}"— replacing the per-value keyssegment.0…segment.5, which cannot describe a rating of any other length.Fixed
A disabled rating did not grey out (own commit). The rule targeted
.star/.starFilled, classes that are never applied — leftovers from a rename.iconEmpty/iconFilledkilled a real remote connection. They were generated as remote properties, and properties travel through structured clone, which cannot carry a React element: setting one threwDataCloneError: Symbol(react.transitional.element) could not be clonedand took the whole remote tree down. Both components now declare@flr-slot-props iconEmpty, iconFilled, so the icons arrive as slotted children and any React subtree works, a raw<svg>or a Tabler icon included. Host markup is unchanged either way — the slot wrapper renders a fragment.The visual suite could not catch this: its Remote environment is in-process and never serializes. Verified in
apps/remote-dom-demoover the iframe connection instead.Verified
Rating.browser.test.tsx— 16/16 in webkit (light) and firefox (dark)pnpm affected:test,pnpm lint,prettier --checkNotes for review
update-screenshotslabel — only the-darwinbaselines are regenerated locally, CI gates on-webkit-linux.crossVersion({ below: "0.2.0-alpha.1039" })in the visual test guesses the release version. If this lands later than.1039, bump it.children?: neverfor a children-less registered component).