chore(button): S2 fast follows fixes

.changeset/olive-maps-accept.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/button': patch
+---
+
+updated button to latest css version

packages/button/README.md

@@ -140,7 +140,7 @@ fulfill the accessibility contract of the button.
 #### Variants
 
 There are many button variants to choose from in Spectrum. The `variant`
-attribute defaults to `accent`, but also accepts the following value: `accent`, `primary`, `secondary`, `negative`, `white`, and `black`. They display as follows:
+attribute defaults to `accent`, but also accepts the following value: `accent`, `primary`, `secondary`, `negative`. They display as follows:
 
 <sp-tabs selected="accent" auto label="Variant Attribute Options">
 <sp-tab value="accent">Accent</sp-tab>
@@ -210,40 +210,6 @@ attribute defaults to `accent`, but also accepts the following value: `accent`,
 </sp-button-group>
 ```
 
-</sp-tab-panel>
-<sp-tab value="black">Black</sp-tab>
-<sp-tab-panel value="black">
-
-```html demo
-<sp-button-group style="min-width: max-content">
-    <sp-button static-color="black">Label only</sp-button>
-    <sp-button static-color="black">
-        <sp-icon-help slot="icon"></sp-icon-help>
-        Icon + Label
-    </sp-button>
-    <sp-button static-color="black" label="Icon only" icon-only>
-        <sp-icon-help slot="icon"></sp-icon-help>
-    </sp-button>
-</sp-button-group>
-```
-
-</sp-tab-panel>
-<sp-tab value="white">White</sp-tab>
-<sp-tab-panel value="white">
-
-```html demo
-<sp-button-group style="min-width: max-content">
-    <sp-button static-color="white">Label only</sp-button>
-    <sp-button static-color="white">
-        <sp-icon-help slot="icon"></sp-icon-help>
-        Icon + Label
-    </sp-button>
-    <sp-button static-color="white" label="Icon only" icon-only>
-        <sp-icon-help slot="icon"></sp-icon-help>
-    </sp-button>
-</sp-button-group>
-```
-
 </sp-tab-panel>
 </sp-tabs>
 
@@ -423,9 +389,11 @@ To ensure maximum contrast with the background, use static black for light backg
 <sp-tab-panel value="black">
 
 ```html demo
-<div style="background-color: #ccffee; padding: 20px">
-    <sp-button static="black">Click me</sp-button>
-    <sp-button static="black" treatment="outline">Click me</sp-button>
+<div
+    style="background-color: var(--spectrum-docs-static-black-background-color); padding: 20px"
+>
+    <sp-button static-color="black">Click me</sp-button>
+    <sp-button static-color="black" treatment="outline">Click me</sp-button>
 </div>
 ```
 
@@ -434,9 +402,11 @@ To ensure maximum contrast with the background, use static black for light backg
 <sp-tab-panel value="white">
 
 ```html demo
-<div style="background-color: #220033; padding: 20px">
-    <sp-button static="white">Click me</sp-button>
-    <sp-button static="white" treatment="outline">Click me</sp-button>
+<div
+    style="background-color: var(--spectrum-docs-static-white-background-color); padding: 20px"
+>
+    <sp-button static-color="white">Click me</sp-button>
+    <sp-button static-color="white" treatment="outline">Click me</sp-button>
 </div>
 ```
 

packages/button/package.json

@@ -93,7 +93,7 @@
         "@spectrum-web-components/shared": "1.4.0"
     },
     "devDependencies": {
-        "@spectrum-css/button": "14.1.1"
+        "@spectrum-css/button": "14.1.4"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/button/src/Button.ts

@@ -115,24 +115,22 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
                 }
                 return;
             case 'white':
-                this.staticColor = variant;
-                this.removeAttribute('variant');
+                this.staticColor = 'white';
                 if (window.__swc.DEBUG) {
                     window.__swc.warn(
                         this,
-                        `The "black" and "white" values of the "variant" attribute on <${this.localName}> have been deprecated and will be removed in a future release. Use "static-color='black'" or "static-color='white'" instead.`,
+                        `The "white" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "static-color='white'" instead.`,
                         'https://opensource.adobe.com/spectrum-web-components/components/button/api',
                         { level: 'deprecation' }
                     );
                 }
                 return;
             case 'black':
-                this.staticColor = variant;
-                this.removeAttribute('variant');
+                this.staticColor = 'black';
                 if (window.__swc.DEBUG) {
                     window.__swc.warn(
                         this,
-                        `The "black" and "white" values of the "variant" attribute on <${this.localName}> have been deprecated and will be removed in a future release. Use "static-color='black'" or "static-color='white'" instead.`,
+                        `The "black" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "static-color='black'" instead.`,
                         'https://opensource.adobe.com/spectrum-web-components/components/button/api',
                         { level: 'deprecation' }
                     );

packages/button/src/button-overrides.css

@@ -133,6 +133,9 @@ governing permissions and limitations under the License.
     --mod-button-border-color-default: var(
         --system-button-secondary-outline-border-color-default
     );
+    --mod-button-border-color-down: var(
+        --system-button-secondary-outline-border-color-down
+    );
 }
 
 :host([static-color='white']) {
@@ -205,6 +208,9 @@ governing permissions and limitations under the License.
 }
 
 :host([static-color='white'][treatment='outline']:not([variant='secondary'])) {
+    --mod-button-background-color-default: var(
+        --system-button-static-white-outline-not-secondary-background-color-default
+    );
     --mod-button-background-color-hover: var(
         --system-button-static-white-outline-not-secondary-background-color-hover
     );
@@ -307,15 +313,6 @@ governing permissions and limitations under the License.
 }
 
 :host([static-color='black'][variant='secondary'][treatment='outline']) {
-    --mod-button-background-color-hover: var(
-        --system-button-static-black-secondary-outline-background-color-hover
-    );
-    --mod-button-background-color-down: var(
-        --system-button-static-black-secondary-outline-background-color-down
-    );
-    --mod-button-background-color-focus: var(
-        --system-button-static-black-secondary-outline-background-color-focus
-    );
     --mod-button-border-color-default: var(
         --system-button-static-black-secondary-outline-border-color-default
     );
@@ -331,6 +328,9 @@ governing permissions and limitations under the License.
 }
 
 :host([static-color='black'][treatment='outline']:not([variant='secondary'])) {
+    --mod-button-background-color-default: var(
+        --system-button-static-black-outline-not-secondary-background-color-default
+    );
     --mod-button-background-color-hover: var(
         --system-button-static-black-outline-not-secondary-background-color-hover
     );

packages/button/src/spectrum-button.css

@@ -61,6 +61,7 @@ governing permissions and limitations under the License.
 }
 
 #label {
+    text-align: center;
     place-self: center;
 }
 
@@ -249,7 +250,6 @@ governing permissions and limitations under the License.
     --mod-button-background-color-down: var(--spectrum-gray-400);
     --mod-button-border-color-default: var(--spectrum-gray-300);
     --mod-button-border-color-hover: var(--spectrum-gray-400);
-    --mod-button-border-color-down: var(--spectrum-gray-500);
     --mod-button-border-color-focus: var(--spectrum-gray-400);
     --mod-button-border-color-disabled: var(--spectrum-disabled-border-color);
     --mod-button-content-color-default: var(--spectrum-neutral-content-color-default);
@@ -360,7 +360,6 @@ governing permissions and limitations under the License.
     font-size: var(--spectrum-button-font-size);
     font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight));
     gap: var(--spectrum-button-padding-label-to-icon);
-    max-inline-size: none;
     max-inline-size: var(--mod-button-max-inline-size, none);
     min-inline-size: var(--spectrum-button-min-width);
     min-block-size: var(--spectrum-button-height);
@@ -370,12 +369,7 @@ governing permissions and limitations under the License.
     background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default)));
     border-style: solid;
     border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default)));
-    color: inherit;
     color: var(--spectrum-button-content-color-default, inherit);
-    transition:
-        border 0.13s linear,
-        color 0.13s linear,
-        background-color 0.13s linear;
     transition:
         border var(--spectrum-button-animation-duration, 0.13s) linear,
         color var(--spectrum-button-animation-duration, 0.13s) linear,
@@ -451,16 +445,12 @@ governing permissions and limitations under the License.
 ::slotted([slot='icon']) {
     visibility: visible;
     opacity: 1;
-    transition: opacity 0.13s ease-in-out;
     transition: opacity var(--spectrum-button-animation-duration, 0.13s) ease-in-out;
 }
 
 .spectrum-ProgressCircle {
     visibility: hidden;
     opacity: 0;
-    transition:
-        opacity 0.13s ease-in-out,
-        visibility 0s linear 0.13s;
     transition:
         opacity var(--spectrum-button-animation-duration, 0.13s) ease-in-out,
         visibility 0s linear var(--spectrum-button-animation-duration, 0.13s);
@@ -475,7 +465,6 @@ governing permissions and limitations under the License.
 :host([pending]) .spectrum-ProgressCircle {
     visibility: visible;
     opacity: 1;
-    transition: opacity 0.13s ease-in-out;
     transition: opacity var(--spectrum-button-animation-duration, 0.13s) ease-in-out;
 }
 
@@ -505,13 +494,11 @@ governing permissions and limitations under the License.
 }
 
 [name='icon'] + #label {
-    text-align: start;
     text-align: var(--mod-button-text-align-with-icon, start);
 }
 
 #label {
     line-height: var(--spectrum-button-line-height);
-    text-align: center;
     text-align: var(--mod-button-text-align, center);
     align-self: start;
     padding-block-start: calc(var(--spectrum-button-top-to-text) - var(--spectrum-button-border-width));

packages/button/stories/button-black-fill.stories.ts

@@ -23,16 +23,16 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
 import type { Properties } from './index.js';
 import { args, argTypes } from './index.js';
 
-const variant = 'black';
+const staticColor = 'black';
 const treatment = 'fill';
 
 export default {
     component: 'sp-button',
     title: 'Button/Black/Fill',
-    decorators: [makeOverBackground(variant)],
+    decorators: [makeOverBackground(staticColor)],
     args: {
         ...args,
-        variant,
+        staticColor,
         treatment,
     },
     argTypes,
@@ -41,6 +41,20 @@ export default {
 export const Default = (props: Properties): TemplateResult =>
     renderButtonSet(props);
 
+export const Primary = (props: Properties): TemplateResult =>
+    renderButtonSet(props);
+
+Primary.args = {
+    variant: 'primary',
+};
+
+export const Secondary = (props: Properties): TemplateResult =>
+    renderButtonSet(props);
+
+Secondary.args = {
+    variant: 'secondary',
+};
+
 export const withIcon = (props: Properties): TemplateResult =>
     renderWithIcon(props);
 

packages/button/stories/button-black-outline.stories.ts

@@ -23,16 +23,16 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
 import type { Properties } from './index.js';
 import { args, argTypes } from './index.js';
 
-const variant = 'black';
+const staticColor = 'black';
 const treatment = 'outline';
 
 export default {
     component: 'sp-button',
     title: 'Button/Black/Outline',
-    decorators: [makeOverBackground(variant)],
+    decorators: [makeOverBackground(staticColor)],
     args: {
         ...args,
-        variant,
+        staticColor,
         treatment,
     },
     argTypes,
@@ -41,6 +41,20 @@ export default {
 export const Default = (props: Properties): TemplateResult =>
     renderButtonSet(props);
 
+export const Primary = (props: Properties): TemplateResult =>
+    renderButtonSet(props);
+
+Primary.args = {
+    variant: 'primary',
+};
+
+export const Secondary = (props: Properties): TemplateResult =>
+    renderButtonSet(props);
+
+Secondary.args = {
+    variant: 'secondary',
+};
+
 export const withIcon = (props: Properties): TemplateResult =>
     renderWithIcon(props);
 

packages/button/stories/button-white-fill.stories.ts

@@ -23,16 +23,16 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
 import type { Properties } from './index.js';
 import { args, argTypes } from './index.js';
 
-const variant = 'white';
+const staticColor = 'white';
 const treatment = 'fill';
 
 export default {
     component: 'sp-button',
     title: 'Button/White/Fill',
-    decorators: [makeOverBackground()],
+    decorators: [makeOverBackground(staticColor)],
     args: {
         ...args,
-        variant,
+        staticColor,
         treatment,
     },
     argTypes,
@@ -41,6 +41,20 @@ export default {
 export const Default = (props: Properties): TemplateResult =>
     renderButtonSet(props);
 
+export const Primary = (props: Properties): TemplateResult =>
+    renderButtonSet(props);
+
+Primary.args = {
+    variant: 'primary',
+};
+
+export const Secondary = (props: Properties): TemplateResult =>
+    renderButtonSet(props);
+
+Secondary.args = {
+    variant: 'secondary',
+};
+
 export const withIcon = (props: Properties): TemplateResult =>
     renderWithIcon(props);