From 2a5d33ac7856586693adc84c658f7b0e13e9363b Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Thu, 1 May 2025 13:23:26 -0400 Subject: [PATCH 01/13] fix(button): fix s2 regressions - redefines correct tokens, particularly for button border colors - reimplements button label overflow behavior (--noWrap class) - updates metadata - cleans up test case and disabled text wrap story to reduce repetitive args/code --- components/button/dist/metadata.json | 25 +-- components/button/index.css | 221 ++++++++------------ components/button/stories/button.stories.js | 2 + components/button/stories/button.test.js | 4 - components/button/stories/template.js | 6 - 5 files changed, 97 insertions(+), 161 deletions(-) diff --git a/components/button/dist/metadata.json b/components/button/dist/metadata.json index c19c2ba9f6c..660dfcc6d96 100644 --- a/components/button/dist/metadata.json +++ b/components/button/dist/metadata.json @@ -6,6 +6,7 @@ ".spectrum-Button .spectrum-Icon", ".spectrum-Button .spectrum-Icon + .spectrum-Button-label", ".spectrum-Button .spectrum-ProgressCircle", + ".spectrum-Button--noWrap .spectrum-Button-label", ".spectrum-Button--sizeL", ".spectrum-Button--sizeS", ".spectrum-Button--sizeS.spectrum-Button--iconOnly", @@ -23,7 +24,6 @@ ".spectrum-Button.spectrum-Button--accent .spectrum-Button-label", ".spectrum-Button.spectrum-Button--iconOnly", ".spectrum-Button.spectrum-Button--iconOnly .spectrum-Icon", - ".spectrum-Button.spectrum-Button--iconOnly:after", ".spectrum-Button.spectrum-Button--negative", ".spectrum-Button.spectrum-Button--outline", ".spectrum-Button.spectrum-Button--primary", @@ -35,7 +35,6 @@ ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary", ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline", ".spectrum-Button.spectrum-Button--staticWhite", - ".spectrum-Button.spectrum-Button--staticWhite.is-selected", ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline", ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary", ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline", @@ -91,6 +90,7 @@ "--mod-button-margin-block", "--mod-button-margin-left", "--mod-button-margin-right", + "--mod-button-max-inline-size", "--mod-button-min-width", "--mod-button-padding-label-to-icon", "--mod-button-text-align", @@ -131,7 +131,6 @@ "--spectrum-button-font-size", "--spectrum-button-font-weight", "--spectrum-button-height", - "--spectrum-button-icon-size-difference", "--spectrum-button-intended-icon-size", "--spectrum-button-line-height", "--spectrum-button-min-width", @@ -177,6 +176,7 @@ "--spectrum-component-top-to-workflow-icon-300", "--spectrum-component-top-to-workflow-icon-75", "--spectrum-corner-radius-full", + "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", "--spectrum-disabled-static-black-background-color", @@ -198,10 +198,8 @@ "--spectrum-gray-100", "--spectrum-gray-200", "--spectrum-gray-25", + "--spectrum-gray-300", "--spectrum-gray-400", - "--spectrum-gray-50", - "--spectrum-gray-500", - "--spectrum-gray-600", "--spectrum-gray-800", "--spectrum-gray-900", "--spectrum-icon-block-size", @@ -218,10 +216,6 @@ "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", - "--spectrum-neutral-subdued-background-color-default", - "--spectrum-neutral-subdued-background-color-down", - "--spectrum-neutral-subdued-background-color-hover", - "--spectrum-neutral-subdued-background-color-key-focus", "--spectrum-progress-circle-thickness-medium", "--spectrum-sans-font-family-stack", "--spectrum-static-black-focus-indicator-color", @@ -230,21 +224,18 @@ "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-75", - "--spectrum-transparent-black-1000", + "--spectrum-transparent-black-100", + "--spectrum-transparent-black-200", "--spectrum-transparent-black-25", "--spectrum-transparent-black-300", "--spectrum-transparent-black-400", - "--spectrum-transparent-black-500", - "--spectrum-transparent-black-600", - "--spectrum-transparent-black-700", "--spectrum-transparent-black-800", "--spectrum-transparent-black-900", - "--spectrum-transparent-white-1000", + "--spectrum-transparent-white-100", + "--spectrum-transparent-white-200", "--spectrum-transparent-white-25", "--spectrum-transparent-white-300", "--spectrum-transparent-white-400", - "--spectrum-transparent-white-500", - "--spectrum-transparent-white-600", "--spectrum-transparent-white-800", "--spectrum-transparent-white-900", "--spectrum-white", diff --git a/components/button/index.css b/components/button/index.css index 2e85dfa5f69..73708dafb85 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -103,23 +103,18 @@ /* Variants and colors */ .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-50); - --spectrum-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-button-background-color-down: var(--spectrum-gray-200); - --spectrum-button-background-color-focus: var(--spectrum-gray-100); - - --spectrum-button-border-color-default: var(--spectrum-gray-400); - --spectrum-button-border-color-hover: var(--spectrum-gray-500); - --spectrum-button-border-color-down: var(--spectrum-gray-600); - --spectrum-button-border-color-focus: var(--spectrum-gray-500); + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; --spectrum-button-content-color-default: var(--spectrum-white); --spectrum-button-content-color-hover: var(--spectrum-white); --spectrum-button-content-color-down: var(--spectrum-white); --spectrum-button-content-color-focus: var(--spectrum-white); - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-button-border-color-disabled: transparent; --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); &.spectrum-Button--outline { @@ -160,9 +155,9 @@ &.spectrum-Button--outline { --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-200); + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-100); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); --spectrum-button-border-color-default: var(--spectrum-gray-800); --spectrum-button-border-color-hover: var(--spectrum-gray-900); @@ -180,7 +175,7 @@ &.spectrum-Button--secondary { --spectrum-button-background-color-default: var(--spectrum-gray-100); --spectrum-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-button-background-color-down: var(--spectrum-gray-400); + --spectrum-button-background-color-down: var(--spectrum-gray-200); --spectrum-button-background-color-focus: var(--spectrum-gray-200); --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); @@ -190,28 +185,23 @@ &.spectrum-Button--outline { --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-200); + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-100); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); - --spectrum-button-border-color-default: var(--spectrum-gray-200); + --spectrum-button-border-color-default: var(--spectrum-gray-300); --spectrum-button-border-color-hover: var(--spectrum-gray-400); --spectrum-button-border-color-down: var(--spectrum-gray-400); --spectrum-button-border-color-focus: var(--spectrum-gray-400); - - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); } } /* ---- Static White ---- */ &.spectrum-Button--staticWhite { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-1000); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-1000); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-1000); + --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); --spectrum-button-content-color-default: var(--spectrum-black); --spectrum-button-content-color-hover: var(--spectrum-black); @@ -226,19 +216,19 @@ &.spectrum-Button--outline { --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-400); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); --spectrum-button-border-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-1000); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-1000); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-1000); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-900); - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); + --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); --spectrum-button-background-color-disabled: var(--spectrum-transparent-white-25); --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); @@ -246,43 +236,36 @@ } &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-300); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-400); + --spectrum-button-background-color-default: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-200); - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); + --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); &.spectrum-Button--outline { --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-400); - - --spectrum-button-border-color-default: var(--spectrum-transparent-white-400); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-500); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-600); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-500); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); + + --spectrum-button-border-color-default: var(--spectrum-transparent-white-300); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-400); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400); } } - - &.is-selected { - --spectrum-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - } } /* ---- Static Black ---- */ &.spectrum-Button--staticBlack { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-900); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-1000); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-1000); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-1000); + --spectrum-button-background-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-900); --spectrum-button-content-color-default: var(--spectrum-white); --spectrum-button-content-color-hover: var(--spectrum-white); @@ -297,46 +280,46 @@ &.spectrum-Button--outline { --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-500); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-400); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); --spectrum-button-border-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-600); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-700); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-600); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-900); - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); + --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); - --spectrum-button-background-color-disabled: transparent; + --spectrum-button-background-color-disabled: var(--spectrum-transparent-black-25); --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); } &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-300); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-500); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-400); + --spectrum-button-background-color-default: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-200); - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); + --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); &.spectrum-Button--outline { --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-500); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-400); - - --spectrum-button-border-color-default: var(--spectrum-transparent-black-400); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-500); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-600); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-500); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); + + --spectrum-button-border-color-default: var(--spectrum-transparent-black-300); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400); } } } @@ -351,6 +334,7 @@ font-size: var(--mod-button-font-size, var(--spectrum-button-font-size)); font-weight: var(--mod-button-font-weight, var(--spectrum-button-font-weight)); gap: var(--mod-button-padding-label-to-icon, var(--spectrum-button-padding-label-to-icon)); + max-inline-size: var(--mod-button-max-inline-size, none); min-inline-size: var(--mod-button-min-width, var(--spectrum-button-min-width)); min-block-size: var(--mod-button-height, var(--spectrum-button-height)); @@ -371,11 +355,10 @@ margin-inline-start: var(--mod-button-margin-left); .spectrum-Icon { - /* Any block-size difference between the intended workflow icon size and actual icon used. - Helps support any existing use of smaller UI icons instead of intended Workflow icons. */ - --spectrum-button-icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))); + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- Any block-size difference between the intended workflow icon size and actual icon used. Helps support any existing use of smaller UI icons instead of intended Workflow icons. */ + --_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))); - margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--spectrum-button-icon-size-difference, 0px) / 2))); + margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2))); margin-inline-start: calc(var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text))); color: inherit; @@ -430,11 +413,6 @@ transform: perspective(var(--spectrum-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); } - &:hover, - &:active { - box-shadow: none; - } - &:disabled, &.is-disabled, &[pending], @@ -444,38 +422,6 @@ color: var(--highcontrast-button-content-color-disabled, var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled))); } - .spectrum-Icon { - /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- Any block-size difference between the intended workflow icon size and actual icon used. Helps support any existing use of smaller UI icons instead of intended Workflow icons. */ - --_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))); - - margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2))); - - margin-inline-start: calc(var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text))); - color: inherit; - flex-shrink: 0; - align-self: flex-start; - } - - .spectrum-Icon + .spectrum-Button-label { - text-align: var(--mod-button-text-align-with-icon, start); - } - - &.spectrum-Button--iconOnly { - min-inline-size: unset; - padding: calc(var(--mod-button-edge-to-visual-only, var(--spectrum-button-edge-to-visual-only)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - border-radius: 50%; - - .spectrum-Icon { - align-self: center; - margin-inline-start: 0; - margin-block-start: 0; - } - - &::after { - border-radius: 50%; - } - } - .spectrum-Icon, .spectrum-Button-label { visibility: visible; @@ -525,6 +471,13 @@ a.spectrum-Button { text-align: var(--mod-button-text-align, center); } +/* Disable button label wrap */ +.spectrum-Button--noWrap .spectrum-Button-label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .spectrum-Button .spectrum-Icon + .spectrum-Button-label { text-align: var(--mod-button-text-align-with-icon, start); } diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index 6b0786c7cea..4f3b09d5928 100644 --- a/components/button/stories/button.stories.js +++ b/components/button/stories/button.stories.js @@ -320,6 +320,8 @@ DisableWrapping.tags = ["!dev"]; DisableWrapping.storyName = "Text overflow - disabled text wrap"; DisableWrapping.args = { variant: "primary", + label: "Be a premium member", + noWrap: true, }; DisableWrapping.parameters = { diff --git a/components/button/stories/button.test.js b/components/button/stories/button.test.js index ad83defdf1e..16af7a2fe3a 100644 --- a/components/button/stories/button.test.js +++ b/components/button/stories/button.test.js @@ -109,8 +109,6 @@ export const ButtonGroups = Variants({ customStyles: { "max-inline-size": "480px", }, - iconName: "Edit", - iconSet: "workflow", label: "An example of text overflow behavior within the button component. When the button text is too long for the horizontal space available, it wraps to form another line.", withStates: false, }, @@ -120,8 +118,6 @@ export const ButtonGroups = Variants({ customStyles: { "max-inline-size": "120px", }, - iconName: "Edit", - iconSet: "workflow", label: "Be a premium member", noWrap: true, withStates: false, diff --git a/components/button/stories/template.js b/components/button/stories/template.js index 1fa73697743..a910cc0ac37 100644 --- a/components/button/stories/template.js +++ b/components/button/stories/template.js @@ -181,16 +181,12 @@ export const TextWrapTemplate = (args, context = {}) => Container({ ${Template({ ...args, customStyles: {}, - label: "Be a premium member", - noWrap: true, }, context)} ${Template({ ...args, customStyles: { "max-inline-size": "100%", }, - label: "Be a premium member", - noWrap: true, }, context)} ${Template({ ...args, @@ -199,8 +195,6 @@ export const TextWrapTemplate = (args, context = {}) => Container({ }, iconName: "Star", iconSet: "workflow", - label: "Be a premium member", - noWrap: true, }, context)} `, }, context); From 770f68b3c03df8d750e83f964b07042677480b68 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Thu, 1 May 2025 13:47:18 -0400 Subject: [PATCH 02/13] chore(button): add changeset --- .changeset/smart-spoons-sneeze.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 .changeset/smart-spoons-sneeze.md diff --git a/.changeset/smart-spoons-sneeze.md b/.changeset/smart-spoons-sneeze.md new file mode 100644 index 00000000000..0f5c77fc207 --- /dev/null +++ b/.changeset/smart-spoons-sneeze.md @@ -0,0 +1,15 @@ +--- +"@spectrum-css/button": patch +--- + +### S2 button fixes + +This work addresses some regressions noticed in the migrated S2 button. Mainly, the borders were gray where they were not supposed to be. Most of the changes are to ensure that the correct S2 tokens are being used appropriately in the styles and button follows the S2 design specs. + +Additionally, there was some missing style support for the `.spectrum-Button--noWrap` option, so this work reimplements a "no wrapping" option for button components, and removes some of the repetitiveness in the no wrap test cases and story. + +PRs used as reference: + +- [S2 button migration](https://github.com/adobe/spectrum-css/pull/2600) +- [Add text wrapping option](https://github.com/adobe/spectrum-css/pull/3086) +- [PostCSS plugin updates/fixes](https://github.com/adobe/spectrum-css/pull/3502) From 142df1a8ba7fc05a23788a93294cbcf7f8dc756a Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Thu, 1 May 2025 14:24:46 -0400 Subject: [PATCH 03/13] fix(switch): fix regressions - redefines and uses correct tokens, particularly for switch animation duration - updates metadata --- components/switch/dist/metadata.json | 4 +++- components/switch/index.css | 33 +++++++++++++++------------- 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/components/switch/dist/metadata.json b/components/switch/dist/metadata.json index 57a281d35df..0a09d644cec 100644 --- a/components/switch/dist/metadata.json +++ b/components/switch/dist/metadata.json @@ -13,7 +13,6 @@ ".spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch", ".spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before", ".spectrum-Switch--disabled", - ".spectrum-Switch--emphasized", ".spectrum-Switch--sizeL", ".spectrum-Switch--sizeS", ".spectrum-Switch--sizeXL", @@ -35,6 +34,7 @@ ".spectrum-Switch-switch", ".spectrum-Switch-switch:after", ".spectrum-Switch-switch:before", + ".spectrum-Switch.spectrum-Switch--emphasized", ".spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch", ".spectrum-Switch:active .spectrum-Switch-input:not(:disabled) + .spectrum-Switch-switch:before", ".spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before", @@ -109,6 +109,8 @@ "--mod-switch-spacing-top-to-label" ], "component": [ + "--spectrum-switch-animation-duration-100", + "--spectrum-switch-animation-duration-200", "--spectrum-switch-background-color", "--spectrum-switch-background-color-disabled", "--spectrum-switch-background-color-selected-default", diff --git a/components/switch/index.css b/components/switch/index.css index 2e0a88fe4f1..920656a2be3 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -56,6 +56,9 @@ --spectrum-switch-handle-size: var(--spectrum-switch-handle-size-medium); --spectrum-switch-handle-selected-size: var(--spectrum-switch-handle-selected-size-medium); + --spectrum-switch-animation-duration-100: var(--spectrum-animation-duration-100); + --spectrum-switch-animation-duration-200: var(--spectrum-animation-duration-200); + /* Default size - medium */ --spectrum-switch-min-height: var(--spectrum-component-height-100); --spectrum-switch-control-width: var(--spectrum-switch-control-width-medium); @@ -76,7 +79,7 @@ --spectrum-switch-label-color-default: var(--spectrum-disabled-content-color); } -.spectrum-Switch--emphasized { +.spectrum-Switch.spectrum-Switch--emphasized { --spectrum-switch-background-color-selected-default: var(--spectrum-accent-background-color-default); --spectrum-switch-background-color-selected-hover: var(--spectrum-accent-background-color-hover); --spectrum-switch-background-color-selected-down: var(--spectrum-accent-background-color-down); @@ -164,13 +167,13 @@ } .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-default, var(--mod-switch-label-color, var(--spectrum-switch-label-color-default))); + color: var(--highcontrast-switch-label-color-default, var(--mod-switch-label-color-default, var(--spectrum-switch-label-color-default))); margin-inline: var(--mod-switch-control-label-spacing, var(--spectrum-switch-control-label-spacing)); margin-block-start: var(--mod-switch-spacing-top-to-label, var(--spectrum-switch-spacing-top-to-label)); margin-block-end: var(--mod-switch-spacing-bottom-to-label, var(--spectrum-switch-spacing-bottom-to-label)); font-size: var(--mod-switch-font-size, var(--spectrum-switch-font-size)); line-height: var(--mod-switch-line-height, var(--spectrum-switch-line-height)); - transition: color var(--spectrum-animation-duration-200) ease-in-out; + transition: color var(--spectrum-switch-animation-duration-200) ease-in-out; &:lang(ja), &:lang(zh), @@ -195,7 +198,6 @@ display: inline-block; box-sizing: border-box; - /* positions the pseudo elements relative to this one */ position: relative; inline-size: var(--mod-switch-control-width, var(--spectrum-switch-control-width)); @@ -203,15 +205,14 @@ /* Fix vertical alignment when not wrapping since we're flex-start */ margin-block: calc(var(--mod-switch-height, var(--spectrum-switch-min-height)) - var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-spacing-top-to-control, var(--spectrum-switch-spacing-top-to-control))); margin-inline: 0; - flex-grow: 0; flex-shrink: 0; vertical-align: middle; transition: - background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, - border var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; + background var(--mod-switch-animation-duration-100, var(--spectrum-switch-animation-duration-100)) ease-in-out, + border var(--mod-switch-animation-duration-100, var(--spectrum-switch-animation-duration-100)) ease-in-out; block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); @@ -263,10 +264,11 @@ content: ""; box-sizing: border-box; - transition: background var(--spectrum-animation-duration-100) ease-in-out, - border var(--spectrum-animation-duration-100) ease-in-out, - transform var(--spectrum-animation-duration-100) ease-in-out, - box-shadow var(--spectrum-animation-duration-100) ease-in-out; + transition: + background var(--spectrum-switch-animation-duration-100) ease-in-out, + border var(--spectrum-switch-animation-duration-100) ease-in-out, + transform var(--spectrum-switch-animation-duration-100) ease-in-out, + box-shadow var(--spectrum-switch-animation-duration-100) ease-in-out; inline-size: var(--mod-switch-handle-size, var(--spectrum-switch-handle-size)); block-size: var(--mod-switch-handle-size, var(--spectrum-switch-handle-size)); @@ -338,9 +340,9 @@ margin: 0; transition: - opacity var(--spectrum-animation-duration-100) ease-out, - outline-offset var(--spectrum-animation-duration-100) ease-out, - border var(--spectrum-animation-duration-100) ease-in-out; + opacity var(--spectrum-switch-animation-duration-100) ease-out, + outline-offset var(--spectrum-switch-animation-duration-100) ease-out, + border var(--spectrum-switch-animation-duration-100) ease-in-out; .spectrum-Switch-input:focus-visible + & { outline: var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) solid var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color))); @@ -420,5 +422,6 @@ --highcontrast-switch-background-color-selected-disabled: GrayText; --highcontrast-switch-focus-indicator-color: ButtonText; + forced-color-adjust: none; } } From 8d27661277efce99f093300df2b83155da13c233 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Thu, 1 May 2025 14:29:58 -0400 Subject: [PATCH 04/13] chore(switch): add changeset --- .changeset/smart-spoons-sneeze.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/.changeset/smart-spoons-sneeze.md b/.changeset/smart-spoons-sneeze.md index 0f5c77fc207..e27d2280a07 100644 --- a/.changeset/smart-spoons-sneeze.md +++ b/.changeset/smart-spoons-sneeze.md @@ -1,5 +1,6 @@ --- "@spectrum-css/button": patch +"@spectrum-css/switch": patch --- ### S2 button fixes @@ -13,3 +14,11 @@ PRs used as reference: - [S2 button migration](https://github.com/adobe/spectrum-css/pull/2600) - [Add text wrapping option](https://github.com/adobe/spectrum-css/pull/3086) - [PostCSS plugin updates/fixes](https://github.com/adobe/spectrum-css/pull/3502) + +### S2 switch fixes + +This work addresses some very minor regressions noticed in the migrated S2 switch. We have reimplemented the switch animation durations tokens, and updated their usage within the style definitions correctly. + +PRs used as reference: + +- [S2 switch migration](https://github.com/adobe/spectrum-css/pull/2651) From 44b3f3cca2f5485d754daf0d5b29961c1e8a0aaf Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Thu, 1 May 2025 15:29:33 -0400 Subject: [PATCH 05/13] fix(statuslight): correct font-family token --- components/statuslight/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/statuslight/index.css b/components/statuslight/index.css index db4a4f57e4d..db810c053b9 100644 --- a/components/statuslight/index.css +++ b/components/statuslight/index.css @@ -23,7 +23,7 @@ --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100); /* Font */ - --spectrum-statuslight-font-family: var(--spectrum-default-font-family); + --spectrum-statuslight-font-family: var(--spectrum-sans-font-family-stack); --spectrum-statuslight-font-weight: var(--spectrum-regular-font-weight); --spectrum-statuslight-font-style: var(--spectrum-default-font-style); --spectrum-statuslight-font-size: var(--spectrum-font-size-100); From 48a46ce2b0bfa7966387041f45c9a36249e7f645 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Thu, 1 May 2025 15:30:25 -0400 Subject: [PATCH 06/13] fix(statuslight): adds focus ring color token --- components/link/index.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/link/index.css b/components/link/index.css index 0cd89349e43..311fc057869 100644 --- a/components/link/index.css +++ b/components/link/index.css @@ -99,6 +99,8 @@ --mod-link-text-color-hover: var(--mod-link-text-color-white, var(--spectrum-white)); --mod-link-text-color-active: var(--mod-link-text-color-white, var(--spectrum-white)); --mod-link-text-color-focus: var(--mod-link-text-color-white, var(--spectrum-white)); + + --spectrum-link-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); } .spectrum-Link--staticBlack { @@ -106,6 +108,8 @@ --mod-link-text-color-hover: var(--mod-link-text-color-black, var(--spectrum-black)); --mod-link-text-color-active: var(--mod-link-text-color-black, var(--spectrum-black)); --mod-link-text-color-focus: var(--mod-link-text-color-black, var(--spectrum-black)); + + --spectrum-link-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); } /* Windows high contrast mode */ From ac304ba11370167d1b3232bc90c5b6b96df2f763 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Thu, 1 May 2025 16:24:37 -0400 Subject: [PATCH 07/13] fix(picker): fix regressions - fix token usage, particularly for border color and width - fixes picker template to support a leading icon and adds associated controls to story args - passes state data into picker template so hover, active, focus styles are applied correctly --- components/picker/index.css | 27 ++++++------ components/picker/stories/picker.stories.js | 10 +++++ components/picker/stories/template.js | 46 +++++++++++++++++---- 3 files changed, 60 insertions(+), 23 deletions(-) diff --git a/components/picker/index.css b/components/picker/index.css index 843c9b0fa2a..924bef384d1 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -14,6 +14,7 @@ @import "@spectrum-css/commons/basebutton.css"; .spectrum-Picker { + /* Color */ --spectrum-picker-background-color-default: var(--spectrum-gray-100); --spectrum-picker-background-color-default-open: var(--spectrum-gray-200); --spectrum-picker-background-color-hover: var(--spectrum-gray-200); @@ -21,14 +22,12 @@ --spectrum-picker-background-color-active: var(--spectrum-gray-200); --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); - --spectrum-picker-border-color-default: var(--spectrum-gray-500); - --spectrum-picker-border-color-default-open: var(--spectrum-gray-800); - --spectrum-picker-border-color-hover: var(--spectrum-gray-600); - --spectrum-picker-border-color-hover-open: var(--spectrum-gray-900); - --spectrum-picker-border-color-active: var(--spectrum-gray-700); - --spectrum-picker-border-color-key-focus: var(--spectrum-gray-900); - - --spectrum-picker-border-width: var(--spectrum-border-width-100); + --spectrum-picker-border-color-default: transparent; + --spectrum-picker-border-color-default-open: transparent; + --spectrum-picker-border-color-hover: transparent; + --spectrum-picker-border-color-hover-open: transparent; + --spectrum-picker-border-color-active: transparent; + --spectrum-picker-border-color-key-focus: transparent; /* Font */ --spectrum-picker-font-size: var(--spectrum-font-size-100); @@ -39,10 +38,12 @@ /* Dimensions */ --spectrum-picker-block-size: var(--spectrum-component-height-100); + --spectrum-picker-inline-size: var(--spectrum-field-default-width-medium); --spectrum-picker-min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--mod-picker-block-size, var(--spectrum-picker-block-size))); /* Border */ --spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-medium); + --spectrum-picker-border-width: var(--spectrum-border-width-200); /* Spacing */ --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100); @@ -93,7 +94,6 @@ --spectrum-picker-icon-color-error: var(--spectrum-negative-visual-color); - --spectrum-picker-border-color-disabled: var(--spectrum-gray-300); --spectrum-picker-background-color-disabled: var(--spectrum-disabled-background-color); --spectrum-picker-font-color-disabled: var(--spectrum-disabled-content-color); --spectrum-picker-icon-color-disabled: var(--spectrum-disabled-content-color); @@ -182,7 +182,6 @@ --spectrum-picker-background-color-active: transparent; --spectrum-picker-background-color-key-focus: transparent; --spectrum-picker-background-color-disabled: transparent; - --spectrum-picker-border-color-disabled: transparent; --spectrum-picker-min-inline-size: var(--mod-picker-min-inline-size-quiet, 0); --spectrum-picker-inline-size: var(--mod-picker-inline-size-quiet, auto); @@ -448,13 +447,13 @@ } /* Disabled and loading states: - Make sure this appears after any use of :hover while postcss-hover-media-feature is being used. The plugin moves - all hover styles within a media query that changes the order of the CSS, affecting styles with the same specificity. */ + Make sure this appears after any use of :hover while postcss-hover-media-feature is being used. The plugin moves + all hover styles within a media query that changes the order of the CSS, affecting styles with the same specificity. */ .spectrum-Picker:disabled, .spectrum-Picker.is-disabled { cursor: default; transform: none; - border-color: var(--highcontrast-picker-border-color-disabled, var(--spectrum-picker-border-color-disabled)); + border-color: var(--highcontrast-picker-border-color-disabled, transparent); color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); &:not(.spectrum-Picker--quiet) { diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js index 78c4b2a4f87..c6224c7c3dd 100644 --- a/components/picker/stories/picker.stories.js +++ b/components/picker/stories/picker.stories.js @@ -52,6 +52,15 @@ export default { control: "boolean", if: { arg: "labelPosition", eq: "side" }, }, + showWorkflowIcon: { + name: "Show workflow icon", + description: "Display optional workflow icon before the value or placeholder", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Advanced", + }, + }, placeholder: { name: "Value or placeholder", description: "The text within the Picker that represents its current value or placeholder.", @@ -62,6 +71,7 @@ export default { }, control: { type: "text" }, }, + currentValue: { table: { disable: true } }, contentIconName: { ...(IconStories?.argTypes?.iconName ?? {}), name: "Icon", diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js index 0d8bec6d42f..d2713463154 100644 --- a/components/picker/stories/template.js +++ b/components/picker/stories/template.js @@ -22,9 +22,11 @@ export const Picker = ({ size = "m", labelPosition = "top", placeholder, + currentValue, contentIconName, isQuiet = false, isKeyboardFocused = false, + showWorkflowIcon = false, isOpen = false, isInvalid = false, isLoading = false, @@ -37,12 +39,6 @@ export const Picker = ({ } = {}, context = {}) => { const { updateArgs } = context; - // Use the chevron from the UI icon set for each size, as defined in the design spec. - let disclosureIconName = "ChevronDown100"; - if (size == "s") { disclosureIconName = "ChevronDown75"; } - else if (size == "l") { disclosureIconName = "ChevronDown200"; } - else if (size == "xl") { disclosureIconName = "ChevronDown300"; } - return html` @@ -105,15 +121,21 @@ export const Picker = ({ * Picker template used along with other sibling components, such as Field label and Help text. */ export const Template = ({ + rootClass = "spectrum-Picker", size = "m", label, labelPosition = "top", placeholder, + currentValue, helpText, isQuiet = false, isOpen = false, isInvalid = false, isDisabled = false, + showWorkflowIcon = false, + isHovered = false, + isActive = false, + isKeyboardFocused = false, isLoading = false, withSwitch = false, fieldLabelStyle = {}, @@ -128,12 +150,18 @@ export const Template = ({ popoverContent = [], } = {}, context = {}) => { const pickerMarkup = Picker({ + rootClass, size, isQuiet, + currentValue, + showWorkflowIcon, isOpen, isInvalid, isDisabled, isLoading, + isHovered, + isActive, + isKeyboardFocused, placeholder, popoverContent, labelPosition, From 5457eaeab2a0c94ef403b0bba3a2d42108a7a7f4 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Thu, 1 May 2025 16:31:58 -0400 Subject: [PATCH 08/13] chore(link,picker,statuslight,switch): create changeset - also updates metadata --- .changeset/smart-spoons-sneeze.md | 20 ++++++++++++++++++++ components/link/dist/metadata.json | 2 ++ components/picker/dist/metadata.json | 10 ++-------- components/statuslight/dist/metadata.json | 2 +- components/switch/dist/metadata.json | 4 ++-- 5 files changed, 27 insertions(+), 11 deletions(-) diff --git a/.changeset/smart-spoons-sneeze.md b/.changeset/smart-spoons-sneeze.md index e27d2280a07..43c64f99093 100644 --- a/.changeset/smart-spoons-sneeze.md +++ b/.changeset/smart-spoons-sneeze.md @@ -1,6 +1,9 @@ --- "@spectrum-css/button": patch "@spectrum-css/switch": patch +"@spectrum-css/statuslight": patch +"@spectrum-css/link": patch +"@spectrum-css/picker": patch --- ### S2 button fixes @@ -22,3 +25,20 @@ This work addresses some very minor regressions noticed in the migrated S2 switc PRs used as reference: - [S2 switch migration](https://github.com/adobe/spectrum-css/pull/2651) + +### S2 status light fix + +This work removes the reference to `default-font-family` in favor for `sans-font-family-stack` to ensure the status light's font renders appropriately for web. + +### S2 link fix + +This work adds the static color focus ring tokens to links (so that static white and static black links do _not_ have the usual blue focus ring). + +### S2 picker fixes + +This work addresses some regressions noticed in the migrated S2 picker component. Mainly, S2 border colors were fixed (most of them are transparent, including disabled); + +PRs used as reference: + +- [Picker docs to storybook migration](https://github.com/adobe/spectrum-css/pull/3200) +- [S2 picker migration](https://github.com/adobe/spectrum-css/pull/2697) diff --git a/components/link/dist/metadata.json b/components/link/dist/metadata.json index 5bebb76f6d0..9c83915a752 100644 --- a/components/link/dist/metadata.json +++ b/components/link/dist/metadata.json @@ -67,6 +67,8 @@ "--spectrum-neutral-content-color-key-focus", "--spectrum-regular-font-weight", "--spectrum-sans-font-family-stack", + "--spectrum-static-black-focus-indicator-color", + "--spectrum-static-white-focus-indicator-color", "--spectrum-text-underline-gap", "--spectrum-text-underline-thickness", "--spectrum-white" diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index 9a7aa93bbac..9133755e956 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -152,7 +152,6 @@ "--spectrum-picker-border-color-active", "--spectrum-picker-border-color-default", "--spectrum-picker-border-color-default-open", - "--spectrum-picker-border-color-disabled", "--spectrum-picker-border-color-error-active", "--spectrum-picker-border-color-error-default", "--spectrum-picker-border-color-error-default-open", @@ -211,7 +210,7 @@ ], "global": [ "--spectrum-animation-duration-100", - "--spectrum-border-width-100", + "--spectrum-border-width-200", "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", @@ -250,6 +249,7 @@ "--spectrum-downstate-width", "--spectrum-field-default-width-extra-large", "--spectrum-field-default-width-large", + "--spectrum-field-default-width-medium", "--spectrum-field-default-width-small", "--spectrum-field-edge-to-text-quiet", "--spectrum-field-end-edge-to-disclosure-icon-100", @@ -278,12 +278,6 @@ "--spectrum-font-size-75", "--spectrum-gray-100", "--spectrum-gray-200", - "--spectrum-gray-300", - "--spectrum-gray-500", - "--spectrum-gray-600", - "--spectrum-gray-700", - "--spectrum-gray-800", - "--spectrum-gray-900", "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-down", diff --git a/components/statuslight/dist/metadata.json b/components/statuslight/dist/metadata.json index 13c313b8342..07f3510d851 100644 --- a/components/statuslight/dist/metadata.json +++ b/components/statuslight/dist/metadata.json @@ -154,7 +154,6 @@ "--spectrum-component-top-to-text-75", "--spectrum-corner-radius-full", "--spectrum-cyan-visual-color", - "--spectrum-default-font-family", "--spectrum-default-font-style", "--spectrum-font-size-100", "--spectrum-font-size-200", @@ -179,6 +178,7 @@ "--spectrum-purple-visual-color", "--spectrum-red-visual-color", "--spectrum-regular-font-weight", + "--spectrum-sans-font-family-stack", "--spectrum-seafoam-visual-color", "--spectrum-silver-visual-color", "--spectrum-turquoise-visual-color", diff --git a/components/switch/dist/metadata.json b/components/switch/dist/metadata.json index 0a09d644cec..09ea918ebd7 100644 --- a/components/switch/dist/metadata.json +++ b/components/switch/dist/metadata.json @@ -61,7 +61,7 @@ "[dir=\"rtl\"] .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before" ], "modifiers": [ - "--mod-animation-duration-100", + "--mod-switch-animation-duration-100", "--mod-switch-background-color", "--mod-switch-background-color-disabled", "--mod-switch-background-color-selected-default", @@ -98,7 +98,7 @@ "--mod-switch-handle-selected-size", "--mod-switch-handle-size", "--mod-switch-height", - "--mod-switch-label-color", + "--mod-switch-label-color-default", "--mod-switch-label-color-disabled", "--mod-switch-label-color-down", "--mod-switch-label-color-focus", From 97b483f79ba04095f032940988b4720ce02e97f6 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Thu, 1 May 2025 17:20:22 -0400 Subject: [PATCH 09/13] docs(colorarea): pass focus to color handle in template --- components/colorarea/stories/template.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/colorarea/stories/template.js b/components/colorarea/stories/template.js index 81022516703..85c0c614409 100644 --- a/components/colorarea/stories/template.js +++ b/components/colorarea/stories/template.js @@ -45,6 +45,7 @@ export const Template = ({ > ${ColorHandle({ isDisabled, + isFocused, customClasses: [`${rootClass}-handle`], customStyles: { "--spectrum-picked-color": selectedColor, From 9fd0ac9a35b1d8bbe42dac088396869893770ffb Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Fri, 2 May 2025 11:33:02 -0400 Subject: [PATCH 10/13] fix(floatingactionbutton): use color property instead of fill for icon - adds a note to the changeset --- .changeset/smart-spoons-sneeze.md | 5 +++++ components/floatingactionbutton/index.css | 8 ++++---- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/.changeset/smart-spoons-sneeze.md b/.changeset/smart-spoons-sneeze.md index 43c64f99093..76e1884006f 100644 --- a/.changeset/smart-spoons-sneeze.md +++ b/.changeset/smart-spoons-sneeze.md @@ -4,6 +4,7 @@ "@spectrum-css/statuslight": patch "@spectrum-css/link": patch "@spectrum-css/picker": patch +"@spectrum-css/floatingactionbutton": patch --- ### S2 button fixes @@ -42,3 +43,7 @@ PRs used as reference: - [Picker docs to storybook migration](https://github.com/adobe/spectrum-css/pull/3200) - [S2 picker migration](https://github.com/adobe/spectrum-css/pull/2697) + +### S2 floating action button fix + +Opts to use the color property as opposed to fill for the icon. This correctly passes the floating action button icon colors to the component, to override the fill property style that is set on the embedded `.spectrum-Icon`. diff --git a/components/floatingactionbutton/index.css b/components/floatingactionbutton/index.css index fc4d7786fd7..bc695d6c109 100644 --- a/components/floatingactionbutton/index.css +++ b/components/floatingactionbutton/index.css @@ -79,7 +79,7 @@ background-color: var(--highcontrast-floating-action-button-background-color-hover, var(--mod-floating-action-button-background-color-hover, var(--spectrum-floating-action-button-background-color-hover))); .spectrum-FloatingActionButton-icon { - fill: var(--highcontrast-floating-action-button-icon-color-hover, var(--mod-floating-action-button-icon-color-hover, var(--spectrum-floating-action-button-icon-color-hover))); + color: var(--highcontrast-floating-action-button-icon-color-hover, var(--mod-floating-action-button-icon-color-hover, var(--spectrum-floating-action-button-icon-color-hover))); } } @@ -87,7 +87,7 @@ background-color: var(--highcontrast-floating-action-button-background-color-down, var(--mod-floating-action-button-background-color-down, var(--spectrum-floating-action-button-background-color-down))); .spectrum-FloatingActionButton-icon { - fill: var(--highcontrast-floating-action-button-icon-color-down, var(--mod-floating-action-button-icon-color-down, var(--spectrum-floating-action-button-icon-color-down))); + color: var(--highcontrast-floating-action-button-icon-color-down, var(--mod-floating-action-button-icon-color-down, var(--spectrum-floating-action-button-icon-color-down))); } } @@ -96,7 +96,7 @@ outline: 0; .spectrum-FloatingActionButton-icon { - fill: var(--highcontrast-floating-action-button-icon-color-key-focus, var(--mod-floating-action-button-icon-color-key-focus, var(--spectrum-floating-action-button-icon-color-key-focus))); + color: var(--highcontrast-floating-action-button-icon-color-key-focus, var(--mod-floating-action-button-icon-color-key-focus, var(--spectrum-floating-action-button-icon-color-key-focus))); } &::after { @@ -114,5 +114,5 @@ .spectrum-Icon.spectrum-FloatingActionButton-icon { block-size: var(--mod-floating-action-button-icon-size, var(--spectrum-floating-action-button-icon-size)); inline-size: var(--mod-floating-action-button-icon-size, var(--spectrum-floating-action-button-icon-size)); - fill: var(--highcontrast-floating-action-button-icon-color, var(--mod-floating-action-button-icon-color, var(--spectrum-floating-action-button-icon-color))); + color: var(--highcontrast-floating-action-button-icon-color, var(--mod-floating-action-button-icon-color, var(--spectrum-floating-action-button-icon-color))); } From 795142c716907f26c0d482b5815ffe23a7783ebd Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Fri, 2 May 2025 11:47:10 -0400 Subject: [PATCH 11/13] fix(logicbutton): defines border style - border-style: solid removes the 3D effect on the button border - adds a note to the changeset --- .changeset/smart-spoons-sneeze.md | 5 +++++ components/logicbutton/index.css | 1 + 2 files changed, 6 insertions(+) diff --git a/.changeset/smart-spoons-sneeze.md b/.changeset/smart-spoons-sneeze.md index 76e1884006f..0dc2d03b6da 100644 --- a/.changeset/smart-spoons-sneeze.md +++ b/.changeset/smart-spoons-sneeze.md @@ -5,6 +5,7 @@ "@spectrum-css/link": patch "@spectrum-css/picker": patch "@spectrum-css/floatingactionbutton": patch +"@spectrum-css/logicbutton": patch --- ### S2 button fixes @@ -47,3 +48,7 @@ PRs used as reference: ### S2 floating action button fix Opts to use the color property as opposed to fill for the icon. This correctly passes the floating action button icon colors to the component, to override the fill property style that is set on the embedded `.spectrum-Icon`. + +### S2 logic button fix + +Adds `border-style: solid` to the styles to avoid a 3D effect on the border. diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css index 8e1c2658fbf..9c61d275d30 100644 --- a/components/logicbutton/index.css +++ b/components/logicbutton/index.css @@ -40,6 +40,7 @@ padding: var(--mod-logic-button-padding, var(--spectrum-component-edge-to-text-50)); border-width: var(--mod-logic-button-border-width, var(--spectrum-border-width-200)); + border-style: solid; border-radius: var(--mod-logic-button-border-radius, var(--spectrum-logic-button-border-radius)); font-size: var(--mod-logic-button-font-size, var(--spectrum-font-size-100)); From 73d95d06f3e7dd48a90c9d54bd2e0028c61cd4de Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Mon, 5 May 2025 13:11:53 -0400 Subject: [PATCH 12/13] chore: separate changesets for each component --- .changeset/breezy-impalas-push.md | 11 +++++++++ .changeset/cute-pillows-stand.md | 7 ++++++ .changeset/fair-coins-buy.md | 7 ++++++ .changeset/fresh-spoons-try.md | 7 ++++++ .changeset/late-worms-reply.md | 7 ++++++ .changeset/smart-spoons-sneeze.md | 39 ------------------------------- .changeset/warm-loops-guess.md | 12 ++++++++++ 7 files changed, 51 insertions(+), 39 deletions(-) create mode 100644 .changeset/breezy-impalas-push.md create mode 100644 .changeset/cute-pillows-stand.md create mode 100644 .changeset/fair-coins-buy.md create mode 100644 .changeset/fresh-spoons-try.md create mode 100644 .changeset/late-worms-reply.md create mode 100644 .changeset/warm-loops-guess.md diff --git a/.changeset/breezy-impalas-push.md b/.changeset/breezy-impalas-push.md new file mode 100644 index 00000000000..3053158d923 --- /dev/null +++ b/.changeset/breezy-impalas-push.md @@ -0,0 +1,11 @@ +--- +"@spectrum-css/switch": patch +--- + +### S2 switch fixes + +This work addresses some very minor regressions noticed in the migrated S2 switch. We have reimplemented the switch animation durations tokens, and updated their usage within the style definitions correctly. + +PRs used as reference: + +- [S2 switch migration](https://github.com/adobe/spectrum-css/pull/2651) diff --git a/.changeset/cute-pillows-stand.md b/.changeset/cute-pillows-stand.md new file mode 100644 index 00000000000..99bfac2be60 --- /dev/null +++ b/.changeset/cute-pillows-stand.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/statuslight": patch +--- + +### S2 status light fix + +This work removes the reference to `default-font-family` in favor for `sans-font-family-stack` to ensure the status light's font renders appropriately for web. diff --git a/.changeset/fair-coins-buy.md b/.changeset/fair-coins-buy.md new file mode 100644 index 00000000000..8971c89f310 --- /dev/null +++ b/.changeset/fair-coins-buy.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/link": patch +--- + +### S2 link fix + +This work adds the static color focus ring tokens to links (so that static white and static black links do _not_ have the usual blue focus ring). diff --git a/.changeset/fresh-spoons-try.md b/.changeset/fresh-spoons-try.md new file mode 100644 index 00000000000..39f9d2e0885 --- /dev/null +++ b/.changeset/fresh-spoons-try.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/logicbutton": patch +--- + +### S2 logic button fix + +Adds `border-style: solid` to the styles to avoid a 3D effect on the border. diff --git a/.changeset/late-worms-reply.md b/.changeset/late-worms-reply.md new file mode 100644 index 00000000000..145328d49ca --- /dev/null +++ b/.changeset/late-worms-reply.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/floatingactionbutton": patch +--- + +## S2 floating action button fix + +Opts to use the color property as opposed to fill for the icon. This correctly passes the floating action button icon colors to the component, to override the fill property style that is set on the embedded `.spectrum-Icon`. diff --git a/.changeset/smart-spoons-sneeze.md b/.changeset/smart-spoons-sneeze.md index 0dc2d03b6da..0f5c77fc207 100644 --- a/.changeset/smart-spoons-sneeze.md +++ b/.changeset/smart-spoons-sneeze.md @@ -1,11 +1,5 @@ --- "@spectrum-css/button": patch -"@spectrum-css/switch": patch -"@spectrum-css/statuslight": patch -"@spectrum-css/link": patch -"@spectrum-css/picker": patch -"@spectrum-css/floatingactionbutton": patch -"@spectrum-css/logicbutton": patch --- ### S2 button fixes @@ -19,36 +13,3 @@ PRs used as reference: - [S2 button migration](https://github.com/adobe/spectrum-css/pull/2600) - [Add text wrapping option](https://github.com/adobe/spectrum-css/pull/3086) - [PostCSS plugin updates/fixes](https://github.com/adobe/spectrum-css/pull/3502) - -### S2 switch fixes - -This work addresses some very minor regressions noticed in the migrated S2 switch. We have reimplemented the switch animation durations tokens, and updated their usage within the style definitions correctly. - -PRs used as reference: - -- [S2 switch migration](https://github.com/adobe/spectrum-css/pull/2651) - -### S2 status light fix - -This work removes the reference to `default-font-family` in favor for `sans-font-family-stack` to ensure the status light's font renders appropriately for web. - -### S2 link fix - -This work adds the static color focus ring tokens to links (so that static white and static black links do _not_ have the usual blue focus ring). - -### S2 picker fixes - -This work addresses some regressions noticed in the migrated S2 picker component. Mainly, S2 border colors were fixed (most of them are transparent, including disabled); - -PRs used as reference: - -- [Picker docs to storybook migration](https://github.com/adobe/spectrum-css/pull/3200) -- [S2 picker migration](https://github.com/adobe/spectrum-css/pull/2697) - -### S2 floating action button fix - -Opts to use the color property as opposed to fill for the icon. This correctly passes the floating action button icon colors to the component, to override the fill property style that is set on the embedded `.spectrum-Icon`. - -### S2 logic button fix - -Adds `border-style: solid` to the styles to avoid a 3D effect on the border. diff --git a/.changeset/warm-loops-guess.md b/.changeset/warm-loops-guess.md new file mode 100644 index 00000000000..80e75cc9e1f --- /dev/null +++ b/.changeset/warm-loops-guess.md @@ -0,0 +1,12 @@ +--- +"@spectrum-css/picker": patch +--- + +### S2 picker fixes + +This work addresses some regressions noticed in the migrated S2 picker component. Mainly, S2 border colors were fixed (most of them are transparent, including disabled). + +PRs used as reference: + +- [Picker docs to storybook migration](https://github.com/adobe/spectrum-css/pull/3200) +- [S2 picker migration](https://github.com/adobe/spectrum-css/pull/2697) From 1de55cf6a7468dbc0764f1d91ed9f60806a69b86 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Tue, 6 May 2025 11:42:48 -0400 Subject: [PATCH 13/13] refactor(switch): change animation token name - updates the animation custom property names to reflect their purpose - updates metadata - fixes up some changeset wording --- .changeset/breezy-impalas-push.md | 4 ++-- components/switch/dist/metadata.json | 6 +++--- components/switch/index.css | 24 ++++++++++++------------ 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/.changeset/breezy-impalas-push.md b/.changeset/breezy-impalas-push.md index 3053158d923..e39b5117aec 100644 --- a/.changeset/breezy-impalas-push.md +++ b/.changeset/breezy-impalas-push.md @@ -4,8 +4,8 @@ ### S2 switch fixes -This work addresses some very minor regressions noticed in the migrated S2 switch. We have reimplemented the switch animation durations tokens, and updated their usage within the style definitions correctly. +This work addresses minor regressions in the Switch component. Animation tokens are reimplemented and their usage updated within the style definitions. -PRs used as reference: +Reference: - [S2 switch migration](https://github.com/adobe/spectrum-css/pull/2651) diff --git a/components/switch/dist/metadata.json b/components/switch/dist/metadata.json index 09ea918ebd7..237b576aeff 100644 --- a/components/switch/dist/metadata.json +++ b/components/switch/dist/metadata.json @@ -61,7 +61,7 @@ "[dir=\"rtl\"] .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before" ], "modifiers": [ - "--mod-switch-animation-duration-100", + "--mod-switch-animation-duration-switch", "--mod-switch-background-color", "--mod-switch-background-color-disabled", "--mod-switch-background-color-selected-default", @@ -109,8 +109,8 @@ "--mod-switch-spacing-top-to-label" ], "component": [ - "--spectrum-switch-animation-duration-100", - "--spectrum-switch-animation-duration-200", + "--spectrum-switch-animation-duration-label", + "--spectrum-switch-animation-duration-switch", "--spectrum-switch-background-color", "--spectrum-switch-background-color-disabled", "--spectrum-switch-background-color-selected-default", diff --git a/components/switch/index.css b/components/switch/index.css index 920656a2be3..d82f9629315 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -56,8 +56,8 @@ --spectrum-switch-handle-size: var(--spectrum-switch-handle-size-medium); --spectrum-switch-handle-selected-size: var(--spectrum-switch-handle-selected-size-medium); - --spectrum-switch-animation-duration-100: var(--spectrum-animation-duration-100); - --spectrum-switch-animation-duration-200: var(--spectrum-animation-duration-200); + --spectrum-switch-animation-duration-switch: var(--spectrum-animation-duration-100); + --spectrum-switch-animation-duration-label: var(--spectrum-animation-duration-200); /* Default size - medium */ --spectrum-switch-min-height: var(--spectrum-component-height-100); @@ -173,7 +173,7 @@ margin-block-end: var(--mod-switch-spacing-bottom-to-label, var(--spectrum-switch-spacing-bottom-to-label)); font-size: var(--mod-switch-font-size, var(--spectrum-switch-font-size)); line-height: var(--mod-switch-line-height, var(--spectrum-switch-line-height)); - transition: color var(--spectrum-switch-animation-duration-200) ease-in-out; + transition: color var(--spectrum-switch-animation-duration-label) ease-in-out; &:lang(ja), &:lang(zh), @@ -211,8 +211,8 @@ vertical-align: middle; transition: - background var(--mod-switch-animation-duration-100, var(--spectrum-switch-animation-duration-100)) ease-in-out, - border var(--mod-switch-animation-duration-100, var(--spectrum-switch-animation-duration-100)) ease-in-out; + background var(--mod-switch-animation-duration-switch, var(--spectrum-switch-animation-duration-switch)) ease-in-out, + border var(--mod-switch-animation-duration-switch, var(--spectrum-switch-animation-duration-switch)) ease-in-out; block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); @@ -265,10 +265,10 @@ box-sizing: border-box; transition: - background var(--spectrum-switch-animation-duration-100) ease-in-out, - border var(--spectrum-switch-animation-duration-100) ease-in-out, - transform var(--spectrum-switch-animation-duration-100) ease-in-out, - box-shadow var(--spectrum-switch-animation-duration-100) ease-in-out; + background var(--spectrum-switch-animation-duration-switch) ease-in-out, + border var(--spectrum-switch-animation-duration-switch) ease-in-out, + transform var(--spectrum-switch-animation-duration-switch) ease-in-out, + box-shadow var(--spectrum-switch-animation-duration-switch) ease-in-out; inline-size: var(--mod-switch-handle-size, var(--spectrum-switch-handle-size)); block-size: var(--mod-switch-handle-size, var(--spectrum-switch-handle-size)); @@ -340,9 +340,9 @@ margin: 0; transition: - opacity var(--spectrum-switch-animation-duration-100) ease-out, - outline-offset var(--spectrum-switch-animation-duration-100) ease-out, - border var(--spectrum-switch-animation-duration-100) ease-in-out; + opacity var(--spectrum-switch-animation-duration-switch) ease-out, + outline-offset var(--spectrum-switch-animation-duration-switch) ease-out, + border var(--spectrum-switch-animation-duration-switch) ease-in-out; .spectrum-Switch-input:focus-visible + & { outline: var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) solid var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color)));