diff --git a/.changeset/spotty-penguins-sort.md b/.changeset/spotty-penguins-sort.md new file mode 100644 index 00000000000..800349cd889 --- /dev/null +++ b/.changeset/spotty-penguins-sort.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/rating": minor +--- + +Provides more granular control over the hover behavior of child stars within the rating component to prevent hovering in space adjacent to the component from highlighting all stars. diff --git a/components/rating/index.css b/components/rating/index.css index 9d523f0ecdd..2faf39cad46 100644 --- a/components/rating/index.css +++ b/components/rating/index.css @@ -98,17 +98,6 @@ cursor: default; pointer-events: none; } - - /* When the entire component is hovered, show all solid icons */ - &:hover { - .spectrum-Rating-starActive { - display: block; - } - - .spectrum-Rating-starInactive { - display: none; - } - } } .spectrum-Rating-input { @@ -168,6 +157,26 @@ display: block; } } + + &:hover { + .spectrum-Rating-starActive { + display: block; + } + + .spectrum-Rating-starInactive { + display: none; + } + } +} + +.spectrum-Rating-icon:has(+ .spectrum-Rating-icon:hover) { + .spectrum-Rating-starActive { + display: block; + } + + .spectrum-Rating-starInactive { + display: none; + } } .spectrum-Rating-starActive,