From 494769cddc5834145ca111f04282b2d442e0273b Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Tue, 17 Dec 2024 10:38:49 -0800 Subject: [PATCH 01/11] chore: resolve conflict --- yarn.lock | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/yarn.lock b/yarn.lock index 52215ee9ffd..1404badc487 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7413,7 +7413,18 @@ __metadata: languageName: node linkType: hard -"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.1, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3, cross-spawn@npm:^7.0.5": +"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.1, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3": + version: 7.0.3 + resolution: "cross-spawn@npm:7.0.3" + dependencies: + path-key: "npm:^3.1.0" + shebang-command: "npm:^2.0.0" + which: "npm:^2.0.1" + checksum: 10c0/5738c312387081c98d69c98e105b6327b069197f864a60593245d64c8089c8a0a744e16349281210d56835bb9274130d825a78b2ad6853ca13cfbeffc0c31750 + languageName: node + linkType: hard + +"cross-spawn@npm:^7.0.5": version: 7.0.6 resolution: "cross-spawn@npm:7.0.6" dependencies: @@ -8789,13 +8800,13 @@ __metadata: linkType: hard "eslint-compat-utils@npm:^0.6.0": - version: 0.6.4 - resolution: "eslint-compat-utils@npm:0.6.4" + version: 0.6.3 + resolution: "eslint-compat-utils@npm:0.6.3" dependencies: semver: "npm:^7.5.4" peerDependencies: eslint: ">=6.0.0" - checksum: 10c0/5b665c4051e978b9f9c48621f63d07e6b2a8ba1b334fc430f1ce0d8b596968677bdb54c23c00ca961ad5b4673d5e83e014a52b4baf9a2f7d4ccd79e3c213acfb + checksum: 10c0/5015cd92590ab4630dfddc4416b058c2e40c58c548203761745e6874bf3e06f15dd84fc447187853025924f86d1870efc959032fcffaf5003e32a7d4f822c43f languageName: node linkType: hard @@ -12289,11 +12300,11 @@ __metadata: linkType: hard "nanoid@npm:^3.3.7": - version: 3.3.8 - resolution: "nanoid@npm:3.3.8" + version: 3.3.7 + resolution: "nanoid@npm:3.3.7" bin: nanoid: bin/nanoid.cjs - checksum: 10c0/4b1bb29f6cfebf3be3bc4ad1f1296fb0a10a3043a79f34fbffe75d1621b4318319211cd420549459018ea3592f0d2f159247a6f874911d6d26eaaadda2478120 + checksum: 10c0/e3fb661aa083454f40500473bb69eedb85dc160e763150b9a2c567c7e9ff560ce028a9f833123b618a6ea742e311138b591910e795614a629029e86e180660f3 languageName: node linkType: hard From da7d7a3e397b6aa248c06873db5ad9cb5723d0f3 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 30 Sep 2024 12:39:55 -0700 Subject: [PATCH 02/11] fix(rating): use indices to better track selected/hover state of rating icons --- .changeset/spotty-penguins-sort.md | 5 +++ components/rating/index.css | 21 +++++----- components/rating/metadata/metadata.json | 6 +-- components/rating/stories/template.js | 52 ++++++++++++++++++++++++ 4 files changed, 70 insertions(+), 14 deletions(-) create mode 100644 .changeset/spotty-penguins-sort.md 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 ff4f5bd8195..ee90e64fe3e 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,16 @@ display: block; } } + + &.is-hovered { + .spectrum-Rating-starActive { + display: block; + } + + .spectrum-Rating-starInactive { + display: none; + } + } } .spectrum-Rating-starActive, diff --git a/components/rating/metadata/metadata.json b/components/rating/metadata/metadata.json index 7902bda44e7..ae0e99c9503 100644 --- a/components/rating/metadata/metadata.json +++ b/components/rating/metadata/metadata.json @@ -15,6 +15,8 @@ ".spectrum-Rating-icon .spectrum-Rating-starActive", ".spectrum-Rating-icon .spectrum-Rating-starInactive", ".spectrum-Rating-icon.is-currentValue:after", + ".spectrum-Rating-icon.is-hovered .spectrum-Rating-starActive", + ".spectrum-Rating-icon.is-hovered .spectrum-Rating-starInactive", ".spectrum-Rating-icon.is-selected", ".spectrum-Rating-icon.is-selected .spectrum-Rating-starActive", ".spectrum-Rating-icon.is-selected .spectrum-Rating-starInactive", @@ -34,9 +36,7 @@ ".spectrum-Rating:hover .spectrum-Rating-icon", ".spectrum-Rating:hover .spectrum-Rating-icon.is-currentValue:after", ".spectrum-Rating:hover .spectrum-Rating-icon:active", - ".spectrum-Rating:hover .spectrum-Rating-icon:hover", - ".spectrum-Rating:hover .spectrum-Rating-starActive", - ".spectrum-Rating:hover .spectrum-Rating-starInactive" + ".spectrum-Rating:hover .spectrum-Rating-icon:hover" ], "modifiers": [ "--mod-rating-border-radius", diff --git a/components/rating/stories/template.js b/components/rating/stories/template.js index 245694af8fa..d0d5ef9bf78 100644 --- a/components/rating/stories/template.js +++ b/components/rating/stories/template.js @@ -19,6 +19,58 @@ export const Template = ({ id = getRandomId("rating"), } = {}, context = {}) => { const { updateArgs } = context; + document.addEventListener("DOMContentLoaded", function() { + const rating = document.getElementById(id); + if (rating.classList.contains("is-disabled") || rating.classList.contains("is-readOnly")) return; + const icons = Array.from(rating.getElementsByClassName("spectrum-Rating-icon")); + let hoverIndex = -1; + let selectedIndex = -1; + + const updateHoverState = () => { + icons.forEach((icon, index) => { + const activeStar = icon.querySelector(".spectrum-Rating-starActive"); + const inactiveStar = icon.querySelector(".spectrum-Rating-starInactive"); + + if (index <= hoverIndex) { + icon.classList.add("is-hovered"); + activeStar.style.display = "block"; + inactiveStar.style.display = "none"; + } + else if (index <= selectedIndex && hoverIndex === -1) { + activeStar.style.display = "block"; + inactiveStar.style.display = "none"; + } + else { + icon.classList.remove("is-hovered"); + activeStar.style.display = "none"; + inactiveStar.style.display = "block"; + } + }); + }; + + icons.forEach((icon, index) => { + if (icon.classList.contains("is-selected")) selectedIndex = index; + + icon.addEventListener("mouseover", function() { + hoverIndex = index; + updateHoverState(); + }); + + icon.addEventListener("mouseleave", function(event) { + if (!rating.contains(event.relatedTarget)) { + hoverIndex = -1; + updateHoverState(); + } + }); + + icon.addEventListener("click", function() { + selectedIndex = index; + updateHoverState(); + }); + }); + + updateHoverState(); + }); return html`
Date: Mon, 14 Oct 2024 08:48:22 -0700 Subject: [PATCH 03/11] fix: conflict --- .changeset/spotty-penguins-sort.md | 2 +- components/rating/index.css | 4 +++- components/rating/metadata/metadata.json | 8 ++++++-- components/rating/stories/rating.stories.js | 9 +++++---- components/rating/stories/template.js | 12 ++++++++---- 5 files changed, 23 insertions(+), 12 deletions(-) diff --git a/.changeset/spotty-penguins-sort.md b/.changeset/spotty-penguins-sort.md index 800349cd889..48a32c8a39c 100644 --- a/.changeset/spotty-penguins-sort.md +++ b/.changeset/spotty-penguins-sort.md @@ -1,5 +1,5 @@ --- -"@spectrum-css/rating": minor +"@spectrum-css/rating": major --- 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 ee90e64fe3e..a788c9c7aea 100644 --- a/components/rating/index.css +++ b/components/rating/index.css @@ -43,8 +43,10 @@ --spectrum-rating-icon-count: var(--spectrum-rating-icon-count); } +/* stylelint-disable-next-line no-duplicate-selectors */ .spectrum-Rating { - &.is-focused { + &:has(:focus-visible), + &.is-keyboardFocused { box-shadow: 0 0 0 var(--mod-rating-focus-indicator-thickness, var(--spectrum-rating-focus-indicator-thickness)) var(--highcontrast-rating-focus-indicator-color, var(--mod-rating-focus-indicator-color, var(--spectrum-rating-focus-indicator-color))); .spectrum-Rating-icon { diff --git a/components/rating/metadata/metadata.json b/components/rating/metadata/metadata.json index ae0e99c9503..8cd2f994eeb 100644 --- a/components/rating/metadata/metadata.json +++ b/components/rating/metadata/metadata.json @@ -30,9 +30,13 @@ ".spectrum-Rating.is-disabled .spectrum-Rating-icon", ".spectrum-Rating.is-disabled .spectrum-Rating-icon.is-selected", ".spectrum-Rating.is-focused", - ".spectrum-Rating.is-focused .spectrum-Rating-icon", - ".spectrum-Rating.is-focused .spectrum-Rating-icon.is-selected", + ".spectrum-Rating.is-keyboardFocused", + ".spectrum-Rating.is-keyboardFocused .spectrum-Rating-icon", + ".spectrum-Rating.is-keyboardFocused .spectrum-Rating-icon.is-selected", ".spectrum-Rating.is-readOnly", + ".spectrum-Rating:has(:focus-visible)", + ".spectrum-Rating:has(:focus-visible) .spectrum-Rating-icon", + ".spectrum-Rating:has(:focus-visible) .spectrum-Rating-icon.is-selected", ".spectrum-Rating:hover .spectrum-Rating-icon", ".spectrum-Rating:hover .spectrum-Rating-icon.is-currentValue:after", ".spectrum-Rating:hover .spectrum-Rating-icon:active", diff --git a/components/rating/stories/rating.stories.js b/components/rating/stories/rating.stories.js index 79efe8c3b83..70d42eebc65 100644 --- a/components/rating/stories/rating.stories.js +++ b/components/rating/stories/rating.stories.js @@ -1,5 +1,5 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, isEmphasized, isFocused, isReadOnly } from "@spectrum-css/preview/types"; +import { isDisabled, isEmphasized, isKeyboardFocused, isReadOnly } from "@spectrum-css/preview/types"; import metadata from "../metadata/metadata.json"; import packageJson from "../package.json"; import { RatingGroup } from "./rating.test.js"; @@ -11,14 +11,14 @@ import { Template } from "./template.js"; * ### Usage notes * - All active stars have the class `is-selected` applied. * - The current value (the last active star) has the class `is-currentValue` applied. - * - When the rating receives focus, the class `is-focused` should be added to the component's root element (`.spectrum-Rating`). + * - When the rating receives keyboard focus, the class `is-keyboardFocused` should be added to the component's root element (`.spectrum-Rating`). */ export default { title: "Rating", component: "Rating", argTypes: { isEmphasized, - isFocused, + isKeyboardFocused, isDisabled, isReadOnly, max: { @@ -49,6 +49,7 @@ export default { isDisabled: false, isEmphasized: false, isReadOnly: false, + isKeyboardFocused: false, max: 5, value: 3, }, @@ -59,7 +60,7 @@ export default { }; /** - * A initial value of three is used for the following examples, to demonstrate both active and inactive stars. + * An initial value of three is used for the following examples, to demonstrate both active and inactive stars. * When hovering over a rating component that has a previously entered value, an underline appears under the * current selection to provide context. */ diff --git a/components/rating/stories/template.js b/components/rating/stories/template.js index d0d5ef9bf78..bd274c86290 100644 --- a/components/rating/stories/template.js +++ b/components/rating/stories/template.js @@ -12,7 +12,7 @@ export const Template = ({ max = 5, value = 0, isReadOnly = false, - isFocused = false, + isKeyboardFocused = false, isDisabled = true, isEmphasized = false, customClasses = [], @@ -32,7 +32,7 @@ export const Template = ({ const inactiveStar = icon.querySelector(".spectrum-Rating-starInactive"); if (index <= hoverIndex) { - icon.classList.add("is-hovered"); + icon.classList.add("is-hoverSelection"); activeStar.style.display = "block"; inactiveStar.style.display = "none"; } @@ -41,13 +41,17 @@ export const Template = ({ inactiveStar.style.display = "none"; } else { - icon.classList.remove("is-hovered"); + icon.classList.remove("is-hoverSelection"); activeStar.style.display = "none"; inactiveStar.style.display = "block"; } }); }; + rating.addEventListener("mouseleave", function() { + icons.forEach(icon => icon.classList.remove("is-hoverSelection")); + }); + icons.forEach((icon, index) => { if (icon.classList.contains("is-selected")) selectedIndex = index; @@ -78,7 +82,7 @@ export const Template = ({ [rootClass]: true, "is-disabled": isDisabled, "is-readOnly": isReadOnly, - "is-focused": isFocused, + "is-keyboardFocused": isKeyboardFocused, [`${rootClass}--emphasized`]: isEmphasized, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} From 0bc67fea86cb42072ab10c11d27624870973d693 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 7 Oct 2024 12:05:23 -0700 Subject: [PATCH 04/11] fix(rating): hover refinements --- components/rating/index.css | 14 ++------------ components/rating/metadata/metadata.json | 8 ++++---- components/rating/stories/rating.stories.js | 1 + components/rating/stories/template.js | 6 +++++- 4 files changed, 12 insertions(+), 17 deletions(-) diff --git a/components/rating/index.css b/components/rating/index.css index a788c9c7aea..90a9411e44f 100644 --- a/components/rating/index.css +++ b/components/rating/index.css @@ -149,18 +149,8 @@ position: absolute; } - /* All stars following the hovered star */ - &:hover ~ .spectrum-Rating-icon { - .spectrum-Rating-starActive { - display: none; - } - - .spectrum-Rating-starInactive { - display: block; - } - } - - &.is-hovered { + &:hover, + &.is-hoverSelection { .spectrum-Rating-starActive { display: block; } diff --git a/components/rating/metadata/metadata.json b/components/rating/metadata/metadata.json index 8cd2f994eeb..46b725b0ce9 100644 --- a/components/rating/metadata/metadata.json +++ b/components/rating/metadata/metadata.json @@ -15,14 +15,14 @@ ".spectrum-Rating-icon .spectrum-Rating-starActive", ".spectrum-Rating-icon .spectrum-Rating-starInactive", ".spectrum-Rating-icon.is-currentValue:after", - ".spectrum-Rating-icon.is-hovered .spectrum-Rating-starActive", - ".spectrum-Rating-icon.is-hovered .spectrum-Rating-starInactive", + ".spectrum-Rating-icon.is-hoverSelection .spectrum-Rating-starActive", + ".spectrum-Rating-icon.is-hoverSelection .spectrum-Rating-starInactive", ".spectrum-Rating-icon.is-selected", ".spectrum-Rating-icon.is-selected .spectrum-Rating-starActive", ".spectrum-Rating-icon.is-selected .spectrum-Rating-starInactive", + ".spectrum-Rating-icon:hover .spectrum-Rating-starActive", + ".spectrum-Rating-icon:hover .spectrum-Rating-starInactive", ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon", - ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starActive", - ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starInactive", ".spectrum-Rating-input", ".spectrum-Rating-starActive", ".spectrum-Rating-starInactive", diff --git a/components/rating/stories/rating.stories.js b/components/rating/stories/rating.stories.js index 70d42eebc65..c713124aab3 100644 --- a/components/rating/stories/rating.stories.js +++ b/components/rating/stories/rating.stories.js @@ -12,6 +12,7 @@ import { Template } from "./template.js"; * - All active stars have the class `is-selected` applied. * - The current value (the last active star) has the class `is-currentValue` applied. * - When the rating receives keyboard focus, the class `is-keyboardFocused` should be added to the component's root element (`.spectrum-Rating`). + * - When the rating is hovered, the class `is-hoverSelection` should be added to the `spectrum-Rating-icon` being hovered over. */ export default { title: "Rating", diff --git a/components/rating/stories/template.js b/components/rating/stories/template.js index bd274c86290..5b75aff32ba 100644 --- a/components/rating/stories/template.js +++ b/components/rating/stories/template.js @@ -49,7 +49,11 @@ export const Template = ({ }; rating.addEventListener("mouseleave", function() { - icons.forEach(icon => icon.classList.remove("is-hoverSelection")); + icons.forEach(icon => { + icon.classList.remove("is-hoverSelection"); + icon.querySelector(".spectrum-Rating-starActive").style.display = ""; + icon.querySelector(".spectrum-Rating-starInactive").style.display = ""; + }); }); icons.forEach((icon, index) => { From 6d98fa8113ab8f8f2bc5722969d1792685ac274a Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 14 Oct 2024 08:48:58 -0700 Subject: [PATCH 05/11] fix: conflict --- .changeset/spotty-penguins-sort.md | 3 +++ components/rating/stories/template.js | 9 ++++----- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/.changeset/spotty-penguins-sort.md b/.changeset/spotty-penguins-sort.md index 48a32c8a39c..716b4e14b14 100644 --- a/.changeset/spotty-penguins-sort.md +++ b/.changeset/spotty-penguins-sort.md @@ -3,3 +3,6 @@ --- 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. + +- `.is-focused` has been renamed to `.is-keyboardFocused` to better reflect its intended use. Clicking the rating component no longer renders the focus ring. +- `.is-hoverSelection` has been added to the rating component and may be leveraged to update the hover and select state of the star icons the component contains. diff --git a/components/rating/stories/template.js b/components/rating/stories/template.js index 5b75aff32ba..bf5fc2a1aa8 100644 --- a/components/rating/stories/template.js +++ b/components/rating/stories/template.js @@ -21,6 +21,7 @@ export const Template = ({ const { updateArgs } = context; document.addEventListener("DOMContentLoaded", function() { const rating = document.getElementById(id); + if (!rating) return; if (rating.classList.contains("is-disabled") || rating.classList.contains("is-readOnly")) return; const icons = Array.from(rating.getElementsByClassName("spectrum-Rating-icon")); let hoverIndex = -1; @@ -31,15 +32,13 @@ export const Template = ({ const activeStar = icon.querySelector(".spectrum-Rating-starActive"); const inactiveStar = icon.querySelector(".spectrum-Rating-starInactive"); - if (index <= hoverIndex) { + if (index <= hoverIndex || + (index <= selectedIndex && hoverIndex === -1) + ) { icon.classList.add("is-hoverSelection"); activeStar.style.display = "block"; inactiveStar.style.display = "none"; } - else if (index <= selectedIndex && hoverIndex === -1) { - activeStar.style.display = "block"; - inactiveStar.style.display = "none"; - } else { icon.classList.remove("is-hoverSelection"); activeStar.style.display = "none"; From bb9e22ef76624d14a6dd1b8c3027be6e3675e48e Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Wed, 9 Oct 2024 14:42:59 -0700 Subject: [PATCH 06/11] Update components/rating/stories/rating.stories.js Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> --- components/rating/stories/rating.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/rating/stories/rating.stories.js b/components/rating/stories/rating.stories.js index c713124aab3..fc2301160d6 100644 --- a/components/rating/stories/rating.stories.js +++ b/components/rating/stories/rating.stories.js @@ -11,7 +11,7 @@ import { Template } from "./template.js"; * ### Usage notes * - All active stars have the class `is-selected` applied. * - The current value (the last active star) has the class `is-currentValue` applied. - * - When the rating receives keyboard focus, the class `is-keyboardFocused` should be added to the component's root element (`.spectrum-Rating`). +* - When the rating receives keyboard focus, the class `.is-keyboardFocused` should be added to the component's root element (`.spectrum-Rating`). * - When the rating is hovered, the class `is-hoverSelection` should be added to the `spectrum-Rating-icon` being hovered over. */ export default { From 7af024597067e91378f1cb7e0d1745f8c6b8e127 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Wed, 9 Oct 2024 14:43:12 -0700 Subject: [PATCH 07/11] Update components/rating/stories/rating.stories.js Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> --- components/rating/stories/rating.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/rating/stories/rating.stories.js b/components/rating/stories/rating.stories.js index fc2301160d6..ae167db91c8 100644 --- a/components/rating/stories/rating.stories.js +++ b/components/rating/stories/rating.stories.js @@ -12,7 +12,7 @@ import { Template } from "./template.js"; * - All active stars have the class `is-selected` applied. * - The current value (the last active star) has the class `is-currentValue` applied. * - When the rating receives keyboard focus, the class `.is-keyboardFocused` should be added to the component's root element (`.spectrum-Rating`). - * - When the rating is hovered, the class `is-hoverSelection` should be added to the `spectrum-Rating-icon` being hovered over. +* - When the rating is hovered, the class `.is-hoverSelection` should be added to the `.spectrum-Rating-icon` being hovered over. */ export default { title: "Rating", From 7c2d32679725278c42dcda8824e9e68ddc4ae34f Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Wed, 9 Oct 2024 14:46:10 -0700 Subject: [PATCH 08/11] fix(rating): heading order for rating component story --- components/rating/stories/rating.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/rating/stories/rating.stories.js b/components/rating/stories/rating.stories.js index ae167db91c8..f70f5e1d399 100644 --- a/components/rating/stories/rating.stories.js +++ b/components/rating/stories/rating.stories.js @@ -8,7 +8,7 @@ import { Template } from "./template.js"; /** * The rating component is used to display or collect a user's rating of an item as represented by a number of stars. * - * ### Usage notes + * ## Usage notes * - All active stars have the class `is-selected` applied. * - The current value (the last active star) has the class `is-currentValue` applied. * - When the rating receives keyboard focus, the class `.is-keyboardFocused` should be added to the component's root element (`.spectrum-Rating`). From 08a62c551b716a0c40a4eeccdf2b5f876176a87d Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Wed, 23 Oct 2024 08:44:49 -0700 Subject: [PATCH 09/11] chore: resolve conflict --- components/rating/index.css | 2 +- components/rating/metadata/metadata.json | 3 +-- components/rating/stories/rating.test.js | 4 ++-- components/rating/stories/template.js | 6 +++--- 4 files changed, 7 insertions(+), 8 deletions(-) diff --git a/components/rating/index.css b/components/rating/index.css index 90a9411e44f..307fa42da98 100644 --- a/components/rating/index.css +++ b/components/rating/index.css @@ -182,7 +182,7 @@ } .spectrum-Rating--emphasized { - &.is-focused { + &.is-keyboardFocused { .spectrum-Rating-icon.is-selected { color: var(--highcontrast-rating-emphasized-icon-color-key-focus, var(--mod-rating-emphasized-icon-color-key-focus, var(--spectrum-rating-emphasized-icon-color-key-focus))); } diff --git a/components/rating/metadata/metadata.json b/components/rating/metadata/metadata.json index 46b725b0ce9..233fed1c14c 100644 --- a/components/rating/metadata/metadata.json +++ b/components/rating/metadata/metadata.json @@ -5,7 +5,7 @@ ".spectrum-Rating--emphasized .spectrum-Rating-icon", ".spectrum-Rating--emphasized .spectrum-Rating-icon.is-selected", ".spectrum-Rating--emphasized .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon", - ".spectrum-Rating--emphasized.is-focused .spectrum-Rating-icon.is-selected", + ".spectrum-Rating--emphasized.is-keyboardFocused .spectrum-Rating-icon.is-selected", ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon", ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon.is-currentValue:after", ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon:active", @@ -29,7 +29,6 @@ ".spectrum-Rating.is-disabled", ".spectrum-Rating.is-disabled .spectrum-Rating-icon", ".spectrum-Rating.is-disabled .spectrum-Rating-icon.is-selected", - ".spectrum-Rating.is-focused", ".spectrum-Rating.is-keyboardFocused", ".spectrum-Rating.is-keyboardFocused .spectrum-Rating-icon", ".spectrum-Rating.is-keyboardFocused .spectrum-Rating-icon.is-selected", diff --git a/components/rating/stories/rating.test.js b/components/rating/stories/rating.test.js index 3de9373689b..8cada8d4210 100644 --- a/components/rating/stories/rating.test.js +++ b/components/rating/stories/rating.test.js @@ -18,8 +18,8 @@ export const RatingGroup = Variants({ isDisabled: true, }, { - testHeading: "Focused", - isFocused: true, + testHeading: "Keyboard focused", + isKeyboardFocused: true, }, { testHeading: "Read-only", diff --git a/components/rating/stories/template.js b/components/rating/stories/template.js index bf5fc2a1aa8..4bb48f69b2f 100644 --- a/components/rating/stories/template.js +++ b/components/rating/stories/template.js @@ -91,10 +91,10 @@ export const Template = ({ })} id=${ifDefined(id)} @focusin=${function() { - updateArgs({ isFocused: true }); + updateArgs({ isKeyboardFocused: true }); }} @focusout=${function() { - updateArgs({ isFocused: false }); + updateArgs({ isKeyboardFocused: false }); }} > ${Icon({ From f27e7a6e498169ab7b9baeb6b588d2bcfd5e54c6 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 14 Oct 2024 09:15:35 -0700 Subject: [PATCH 10/11] fix(rating): click should not trigger keyboard focus --- components/rating/stories/template.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/rating/stories/template.js b/components/rating/stories/template.js index 4bb48f69b2f..26bf868e37d 100644 --- a/components/rating/stories/template.js +++ b/components/rating/stories/template.js @@ -128,7 +128,7 @@ export const Template = ({ "is-currentValue": idx === value - 1, })} @click=${function() { - updateArgs({ value: idx + 1, isKeyboardFocused: true }); + updateArgs({ value: idx + 1 }); }} > ${Icon({ From eaf9568281f96e65ffdfc6648b65875bf4924044 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Wed, 23 Oct 2024 08:45:25 -0700 Subject: [PATCH 11/11] chore(rating): remove stylelint disable --- components/rating/index.css | 1 - 1 file changed, 1 deletion(-) diff --git a/components/rating/index.css b/components/rating/index.css index 307fa42da98..d1cb4757341 100644 --- a/components/rating/index.css +++ b/components/rating/index.css @@ -43,7 +43,6 @@ --spectrum-rating-icon-count: var(--spectrum-rating-icon-count); } -/* stylelint-disable-next-line no-duplicate-selectors */ .spectrum-Rating { &:has(:focus-visible), &.is-keyboardFocused {