fix: minor linting updates #4113

castastrophe · 2025-08-06T15:51:25Z

Description

This PR addresses CSS linting warnings present on the spectrum-two branch. The changes include:

Removed unused custom properties (e.g., --spectrum-alert-banner-neutral-background)
Removed stylelint-disable comments that were no longer needed after fixing the underlying issues
Fixed color function notation by converting rgba() to rgb() where appropriate
Removed duplicate custom property declarations across multiple components
Fixed deprecated CSS properties (e.g., word-wrap → overflow-wrap)

Motivation and context

These are minor linting fixes that improve code quality and consistency without affecting component functionality or appearance.

Author's checklist

I have read the CONTRIBUTING and PULL_REQUESTS documents.
I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
I have added automated tests to cover my changes.
I have included a well-written changeset if my change needs to be published.
I have included updated documentation if my change required it.

Reviewer's checklist

Includes a Github Issue with appropriate flag or Jira ticket number without a link
Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
Automated tests cover all use cases and follow best practices for writing
Validated on all supported browsers
All VRTs are approved before the author can update Golden Hash

Manual review test cases

Verify no visual regressions in affected components
1. Check that alertbanner, assetcard, breadcrumb, calendar, card, coachmark, colorhandle, colorslider, colorwheel, combobox, datepicker, dial, dropzone, inlinealert, page, sidenav, stepper, thumbnail, treeview, underlay, and well components render correctly
2. Confirm no functional changes to component behavior
3. Ensure all components maintain their existing styling and interactions

changeset-bot · 2025-08-06T15:51:30Z

🦋 Changeset detected

Latest commit: c046b31

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 23 packages

Name	Type
@spectrum-css/coachindicator	Patch
@spectrum-css/alertbanner	Patch
@spectrum-css/colorhandle	Patch
@spectrum-css/colorslider	Patch
@spectrum-css/inlinealert	Patch
@spectrum-css/breadcrumb	Patch
@spectrum-css/colorwheel	Patch
@spectrum-css/datepicker	Patch
@spectrum-css/assetcard	Patch
@spectrum-css/thumbnail	Patch
@spectrum-css/calendar	Patch
@spectrum-css/combobox	Patch
@spectrum-css/dropzone	Patch
@spectrum-css/treeview	Patch
@spectrum-css/underlay	Patch
@spectrum-css/sidenav	Patch
@spectrum-css/stepper	Patch
@spectrum-css/card	Patch
@spectrum-css/dial	Patch
@spectrum-css/page	Patch
@spectrum-css/well	Patch
@spectrum-css/bundle	Patch
@spectrum-css/preview	Patch

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

github-actions · 2025-08-06T15:56:28Z

File metrics

Summary

Total size: 1.44 MB^*
✅ No change in file sizes

Package	Size	Minified	Gzipped
alertbanner	6.05 KB	5.80 KB	1.34 KB
assetcard	15.83 KB	15.10 KB	2.23 KB
card	16.07 KB	15.11 KB	2.52 KB
coachmark	7.66 KB	7.29 KB	1.55 KB
combobox	27.27 KB	26.18 KB	3.19 KB
dial	10.80 KB	10.14 KB	1.92 KB
page	0.97 KB	0.95 KB	0.51 KB
sidenav	14.44 KB	13.79 KB	2.22 KB
stepper	28.04 KB	26.98 KB	3.00 KB
treeview	17.53 KB	16.58 KB	2.39 KB

File change details

alertbanner

Filename	Head	Minified	Gzipped	Compared to base
index.css	6.05 KB	5.80 KB	1.34 KB	🟢 ⬇ 0.39 KB
metadata.json	3.62 KB	-	-	🟢 ⬇ 0.05 KB

assetcard

Filename	Head	Minified	Gzipped	Compared to base
index.css	15.83 KB	15.10 KB	2.23 KB	🟢 ⬇ 0.13 KB
metadata.json	8.89 KB	-	-	-

card

Filename	Head	Minified	Gzipped	Compared to base
index.css	16.07 KB	15.11 KB	2.52 KB	🟢 ⬇ 0.13 KB
metadata.json	7.52 KB	-	-	🟢 ⬇ 0.10 KB

coachmark

Filename	Head	Minified	Gzipped	Compared to base
index.css	7.66 KB	7.29 KB	1.55 KB	-
metadata.json	4.55 KB	-	-	-

combobox

Filename	Head	Minified	Gzipped	Compared to base
index.css	27.27 KB	26.18 KB	3.19 KB	🟢 ⬇ 0.16 KB
metadata.json	16.46 KB	-	-	🟢 ⬇ 0.16 KB

dial

Filename	Head	Minified	Gzipped	Compared to base
index.css	10.80 KB	10.14 KB	1.92 KB	-
metadata.json	4.57 KB	-	-	-

page

Filename	Head	Minified	Gzipped	Compared to base
index.css	0.97 KB	0.95 KB	0.51 KB	🔴 ⬆ 0.07 KB
metadata.json	0.36 KB	-	-	-

sidenav

Filename	Head	Minified	Gzipped	Compared to base
index.css	14.44 KB	13.79 KB	2.22 KB	-
metadata.json	8.59 KB	-	-	-

stepper

Filename	Head	Minified	Gzipped	Compared to base
index.css	28.04 KB	26.98 KB	3.00 KB	🟢 ⬇ 0.50 KB
metadata.json	13.92 KB	-	-	🟢 ⬇ 0.14 KB

treeview

Filename	Head	Minified	Gzipped	Compared to base
index.css	17.53 KB	16.58 KB	2.39 KB	-
metadata.json	8.40 KB	-	-	-

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

github-actions · 2025-08-06T15:56:50Z

📚 Branch preview

PR #4113 has been deployed to Azure Blob Storage: https://spectrumcss.z13.web.core.windows.net/pr-4113/index.html.

castastrophe · 2025-08-06T15:53:03Z

components/alertbanner/index.css

 	--spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
 	--spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width);
 	--spectrum-alert-banner-inline-size: auto;

 	--spectrum-alert-banner-font-size: var(--spectrum-font-size-100);
 	--spectrum-alert-banner-line-height: var(--spectrum-line-height-100);
 	--spectrum-alert-banner-font-family: var(--spectrum-sans-font-family-stack);
-	--spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
+	--spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100);


Unnecessary lint ignore rule; passthroughs are accounted for by the no-unused-custom-properties plugin.

castastrophe · 2025-08-06T15:53:11Z

components/alertbanner/index.css

@@ -12,25 +12,23 @@
 */

 .spectrum-AlertBanner {
-	--spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default);


Unused custom property.

castastrophe · 2025-08-06T15:53:27Z

components/assetcard/index.css

@@ -13,15 +13,11 @@

 /* outer container, unstyled */
 .spectrum-AssetCard {
-	--spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%);


Duplicate (and identical) definitions removed.

castastrophe · 2025-08-06T15:53:46Z

components/assetcard/index.css

@@ -42,7 +38,7 @@
 	--spectrum-assetcard-selectionindicator-color: var(--spectrum-white);
 	--spectrum-assetcard-selectionindicator-font-weight: var(--spectrum-bold-font-weight);
 	--spectrum-assetcard-selectionindicator-font-size: var(--spectrum-font-size-400);
-	--spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9);
+	--spectrum-assetcard-selectionindicator-background-color-default: rgb(var(--spectrum-gray-75-rgb), 0.9);


Using rgb shorthand instead of rgba

castastrophe · 2025-08-06T15:54:13Z

components/card/index.css

@@ -65,8 +65,6 @@
 	/* Selected */
 	--spectrum-card-selected-background-opacity: var(--mod-card-selected-background-opacity, 0.1); /* table-selected-row-background-opacity does not exist in tokens yet */

-	--spectrum-card-preview-border-width-selected: var(--mod-card-preview-border-width-selected, var(--spectrum-border-width-100));


Unused custom property

castastrophe · 2025-08-06T15:57:09Z

components/sidenav/index.css

@@ -11,49 +11,7 @@
 * governing permissions and limitations under the License.
 */

-@media (forced-colors: active) {


Moved this down to the bottom to match the format of other components.

castastrophe · 2025-08-06T15:57:19Z

components/sidenav/index.css

 .spectrum-SideNav {
-	--spectrum-sidenav-background-hover: var(--spectrum-gray-100);


These were all duplicate definitions.

castastrophe · 2025-08-06T15:57:41Z

components/stepper/index.css

@@ -72,6 +72,11 @@
 	--spectrum-numberfield-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100);
 	--spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100);

+	/* Button size and offset (to properly position the validation icons/padding) */
+	--spectrum-numberfield-button-inline-padding: var(--spectrum-in-field-button-side-edge-to-fill-medium);


Pulled these up because the variables below here use these definitions.

castastrophe · 2025-08-06T15:58:11Z

components/stepper/index.css

@@ -103,10 +103,10 @@
 		--spectrum-numberfield-spacing-min-inline-end-value-to-icon: var(--spectrum-text-to-visual-75);
 		--spectrum-numberfield-spacing-validation-icon-to-stepper: calc(var(--spectrum-number-field-visual-to-in-field-stepper-small) - var(--spectrum-numberfield-button-inline-padding));

-		--spectrum-numberfield-button-inline-padding: var(--spectrum-infield-button-inline-edge-to-fill, var(--spectrum-in-field-button-side-edge-to-fill-small));


We don't have access to the definitions for --spectrum-infield-button-inline-edge-to-fill at this spot in the DOM

castastrophe · 2025-08-06T15:58:36Z

stylelint.config.js

@@ -186,6 +186,7 @@ module.exports = {
 							/^--mod-/,
 							/^--system-/,
 							/^--spectrum-picked-color$/,
+							/^--spectrum-downstate-(height|width)$/,


Added this as a global exception that is allowed to be empty.

cdransf

Looks great! ✨

castastrophe changed the base branch from main to spectrum-two August 6, 2025 15:51

castastrophe changed the title ~~castastrophe/fix minor linting updates~~ fix: minor linting updates Aug 6, 2025

castastrophe commented Aug 6, 2025

View reviewed changes

castastrophe self-assigned this Aug 6, 2025

castastrophe added size-1 XS ~1-6hrs; nearly trivial, a few hours, could do more than one in a single day. ready-for-review labels Aug 6, 2025

castastrophe marked this pull request as ready for review August 6, 2025 15:59

castastrophe requested review from a team and removed request for a team August 6, 2025 16:00

castastrophe force-pushed the castastrophe/fix-minor-linting-updates branch from a830436 to ebd5ae1 Compare August 6, 2025 16:07

castastrophe added the run_vrt For use on PRs looking to kick off VRT label Aug 6, 2025

castastrophe force-pushed the castastrophe/fix-minor-linting-updates branch from 843b332 to 421ca59 Compare August 6, 2025 16:51

fix: minor linting updates

c046b31

castastrophe force-pushed the castastrophe/fix-minor-linting-updates branch from 421ca59 to c046b31 Compare August 6, 2025 16:55

cdransf approved these changes Aug 6, 2025

View reviewed changes

castastrophe merged commit cf4fc1a into spectrum-two Aug 6, 2025
15 checks passed

castastrophe deleted the castastrophe/fix-minor-linting-updates branch August 6, 2025 23:32

github-actions bot mentioned this pull request Aug 6, 2025

chore: release (next) #4116

Merged

		.spectrum-SideNav {
		--spectrum-sidenav-background-hover: var(--spectrum-gray-100);

fix: minor linting updates #4113

fix: minor linting updates #4113

Uh oh!

Conversation

castastrophe commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation and context

Author's checklist

Reviewer's checklist

Manual review test cases

Uh oh!

changeset-bot bot commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

alertbanner

assetcard

card

coachmark

combobox

dial

page

sidenav

stepper

treeview

Uh oh!

github-actions bot commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch preview

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cdransf left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

castastrophe commented Aug 6, 2025 •

edited

Loading

changeset-bot bot commented Aug 6, 2025 •

edited

Loading

github-actions bot commented Aug 6, 2025 •

edited

Loading

github-actions bot commented Aug 6, 2025 •

edited

Loading