feat: add static-color to replace static (#4808)

packages/action-bar/src/ActionBar.ts

@@ -100,7 +100,7 @@ export class ActionBar extends FocusVisiblePolyfillMixin(SpectrumElement) {
             <sp-popover ?open=${this.open} id="popover">
                 <slot name="override">
                     <sp-close-button
-                        static=${ifDefined(
+                        static-color=${ifDefined(
                             this.emphasized ? 'white' : undefined
                         )}
                         class="close-button"
@@ -113,7 +113,7 @@ export class ActionBar extends FocusVisiblePolyfillMixin(SpectrumElement) {
                     <sp-action-group
                         class="action-group"
                         quiet
-                        static=${ifDefined(
+                        static-color=${ifDefined(
                             this.emphasized ? 'white' : undefined
                         )}
                     >

packages/action-button/src/ActionButton.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 Adobe. All rights reserved.
+Copyright 2024 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
 of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -46,7 +46,7 @@ export type LongpressEvent = {
  * @slot icon - The icon to use for Action Button
  * @fires change - Announces a change in the `selected` property of an action button
  * @fires longpress - Synthesizes a "longpress" interaction that signifies a
- * `pointerdown` event that is >=300ms or a keyboard event wher code is `Space` or code is `ArrowDown`
+ * `pointerdown` event that is >=300ms or a keyboard event where code is `Space` or code is `ArrowDown`
  * while `altKey===true`.
  */
 export class ActionButton extends SizedMixin(ButtonBase, {
@@ -84,9 +84,21 @@ export class ActionButton extends SizedMixin(ButtonBase, {
     @property({ type: Boolean, reflect: true })
     public toggles = false;
 
+    /**
+     * The static color variant to use for the action button.
+     */
+    @property({ reflect: true, attribute: 'static-color' })
+    public staticColor?: 'white' | 'black';
+
+    /**
+     * @deprecated Use `staticColor` instead.
+     */
     @property({ reflect: true })
     public static?: 'white' | 'black';
 
+    /**
+     * @deprecated Use `staticColor` instead.
+     */
     @property({ reflect: true })
     public variant?: 'white' | 'black';
 
@@ -258,14 +270,29 @@ export class ActionButton extends SizedMixin(ButtonBase, {
         }
         if (
             changes.has('variant') &&
-            (this.variant || typeof changes.get('variant'))
+            (this.variant !== undefined || changes.get('variant') !== undefined)
+        ) {
+            this.staticColor = this.variant;
+            if (window.__swc.DEBUG) {
+                window.__swc.warn(
+                    this,
+                    `The "variant" attribute/property of <${this.localName}> has been deprecated. Use "static-color" with the same values instead. "variant" will be removed in a future release.`,
+                    'https://opensource.adobe.com/spectrum-web-components/components/action-button/api/',
+                    { level: 'deprecation' }
+                );
+            }
+        }
+        if (
+            changes.has('static') &&
+            (this.static !== undefined || changes.get('static') !== undefined)
         ) {
-            this.static = this.variant;
+            this.staticColor = this.static;
             if (window.__swc.DEBUG) {
                 window.__swc.warn(
                     this,
-                    `The "variant" attribute/property of <${this.localName}> have been deprecated. Use "static" with any of the same values instead. "variant" will be removed in a future release.`,
-                    'https://opensource.adobe.com/spectrum-web-components/components/badge/#fixed'
+                    `The "static" attribute/property of <${this.localName}> has been deprecated. Use "static-color" with the same values instead. "static" will be removed in a future release.`,
+                    'https://opensource.adobe.com/spectrum-web-components/components/action-button/api/',
+                    { level: 'deprecation' }
                 );
             }
         }

packages/action-button/src/spectrum-action-button.css

@@ -764,7 +764,7 @@ governing permissions and limitations under the License.
     );
 }
 
-:host([static='black'][quiet]) {
+:host([static-color='black'][quiet]) {
     --spectrum-actionbutton-border-color-default: var(
         --system-spectrum-actionbutton-staticblack-quiet-border-color-default
     );
@@ -782,7 +782,7 @@ governing permissions and limitations under the License.
     );
 }
 
-:host([static='white'][quiet]) {
+:host([static-color='white'][quiet]) {
     --spectrum-actionbutton-border-color-default: var(
         --system-spectrum-actionbutton-staticwhite-quiet-border-color-default
     );
@@ -800,7 +800,7 @@ governing permissions and limitations under the License.
     );
 }
 
-:host([static='black']) {
+:host([static-color='black']) {
     --spectrum-actionbutton-background-color-default: var(
         --system-spectrum-actionbutton-staticblack-background-color-default
     );
@@ -851,7 +851,7 @@ governing permissions and limitations under the License.
     );
 }
 
-:host([static='black'][selected]) {
+:host([static-color='black'][selected]) {
     --mod-actionbutton-background-color-default: var(
         --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-default
     );
@@ -896,7 +896,7 @@ governing permissions and limitations under the License.
     );
 }
 
-:host([static='white']) {
+:host([static-color='white']) {
     --spectrum-actionbutton-background-color-default: var(
         --system-spectrum-actionbutton-staticwhite-background-color-default
     );
@@ -947,7 +947,7 @@ governing permissions and limitations under the License.
     );
 }
 
-:host([static='white'][selected]) {
+:host([static-color='white'][selected]) {
     --mod-actionbutton-background-color-default: var(
         --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-default
     );

packages/action-button/src/spectrum-config.js

@@ -76,7 +76,7 @@ const config = {
                         ['spectrum-ActionButton--staticWhite', 'white'],
                         ['spectrum-ActionButton--staticBlack', 'black'],
                     ],
-                    'static'
+                    'static-color'
                 ),
                 // Default to `size='m'` without needing the attribute
                 converter.classToHost('spectrum-ActionButton--sizeM'),

packages/action-button/stories/index.ts

@@ -38,7 +38,7 @@ export function renderButton(properties: Properties): TemplateResult {
         <sp-action-button
             ?quiet="${!!properties.quiet}"
             ?emphasized="${!!properties.emphasized}"
-            static="${ifDefined(properties.variant)}"
+            static-color="${ifDefined(properties.variant)}"
             ?disabled=${!!properties.disabled}
             ?selected=${!!properties.selected}
             ?toggles=${!!properties.toggles}