fix(clear-button,styles): style updates from latest release

Author: castastrophe

.changeset/hot-cups-report.md

@@ -0,0 +1,6 @@
+---
+'@spectrum-web-components/clear-button': patch
+'@spectrum-web-components/styles': patch
+---
+
+More details forthcoming

packages/button/src/ClearButton.ts

@@ -66,9 +66,16 @@ export class ClearButton extends SizedMixin(StyledButton, {
 
     /**
      * The visual variant to apply to this button.
+     * @deprecated Use `static-color='white'` instead.
      */
     @property({ reflect: true })
-    public variant: 'overBackground' | '' = '';
+    public variant: 'overBackground' | undefined;
+
+    /**
+     * The visual variant to apply to this button.
+     */
+    @property({ reflect: true })
+    public staticColor: 'white' | undefined;
 
     protected override get buttonContent(): TemplateResult[] {
         return [crossIcon[this.size]()];

packages/clear-button/src/clear-button-overrides.css

@@ -26,7 +26,7 @@ governing permissions and limitations under the License.
     );
 }
 
-:host .spectrum-ClearButton--staticWhite {
+:host([static-color='white']) {
     --spectrum-clear-button-background-color-hover: var(
         --system-clear-button-static-white-background-color-hover
     );

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

@@ -44,14 +44,14 @@ governing permissions and limitations under the License.
     --spectrum-clear-button-width: var(--spectrum-component-height-300);
 }
 
-:host .spectrum-ClearButton--quiet {
+:host([quiet]) {
     --mod-clear-button-background-color: transparent;
     --mod-clear-button-background-color-hover: transparent;
     --mod-clear-button-background-color-down: transparent;
     --mod-clear-button-background-color-key-focus: transparent;
 }
 
-:host .spectrum-ClearButton--staticWhite {
+:host([static-color='white']) {
     --mod-clear-button-icon-color: var(--spectrum-white);
     --mod-clear-button-icon-color-hover: var(--spectrum-white);
     --mod-clear-button-icon-color-down: var(--spectrum-white);
@@ -60,7 +60,6 @@ governing permissions and limitations under the License.
     --mod-clear-button-background-color: transparent;
 }
 
-:host([disabled]),
 :host([disabled]) {
     --mod-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color));
     --mod-clear-button-icon-color-hover: var(--spectrum-disabled-content-color);
@@ -78,11 +77,11 @@ governing permissions and limitations under the License.
 }
 
 @media (hover: hover) {
-    :host:not(:disabled):hover {
+    :host(:hover):not(:disabled) {
         color: var(--highcontrast-clear-button-icon-color-hover, var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover)));
     }
 
-    :host:not(:disabled):hover .fill {
+    :host(:hover):not(:disabled) .fill {
         background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover));
     }
 }
@@ -105,7 +104,7 @@ governing permissions and limitations under the License.
     background-color: var(--mod-clear-button-background-color-key-focus, var(--spectrum-clear-button-background-color-key-focus));
 }
 
-.spectrum-ClearButton-icon {
+.icon {
     color: inherit;
 }
 
@@ -120,7 +119,7 @@ governing permissions and limitations under the License.
 }
 
 :host([variant='overBackground']:focus-visible),
-.spectrum-ClearButton--staticWhite:focus-visible {
+:host([static-color='white']:focus-visible) {
     outline: none;
 }
 

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

@@ -11,10 +11,20 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { converterFor } from '../../../tasks/process-spectrum-utils.js';
+import {
+    builder,
+    converterFor,
+} from '../../../tasks/process-spectrum-utils.js';
 
 const converter = converterFor('spectrum-ClearButton');
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+const notDisabled = (type = 'pseudoClass') => ({
+    type: 'pseudo-class',
+    kind: 'not',
+    selectors: builder[type]?.('disabled'),
+});
+
 /**
  * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter }
  */
@@ -24,13 +34,15 @@ const config = {
             inPackage: '@spectrum-css/clearbutton',
             outPackage: 'clear-button',
             fileName: 'clear-button',
+            excludeByComponents: [
+                // is-disabled is a duplicate of the :disabled pseudo-class
+                builder.class('is-disabled'),
+            ],
             components: [
                 converter.classToHost(),
+                converter.classToAttribute('spectrum-ClearButton--quiet'),
                 {
-                    find: {
-                        type: 'pseudo-class',
-                        kind: 'active',
-                    },
+                    find: builder.pseudoClass('active'),
                     replace: {
                         type: 'pseudo-class',
                         kind: 'is',
@@ -52,14 +64,12 @@ const config = {
                     hoist: true,
                 },
                 converter.pseudoToAttribute('disabled', 'disabled'),
-                converter.classToAttribute('is-disabled', 'disabled'),
                 ...converter.enumerateAttributes(
                     [
-                        ['spectrum-ClearButton--cta'],
-                        ['spectrum-ClearButton--primary'],
-                        ['spectrum-ClearButton--secondary'],
-                        ['spectrum-ClearButton--overBackground'],
-                        ['spectrum-ClearButton--warning', 'negative'],
+                        [
+                            'spectrum-ClearButton--overBackground',
+                            'overBackground',
+                        ],
                     ],
                     'variant'
                 ),
@@ -75,12 +85,41 @@ const config = {
                 ),
                 converter.classToClass('spectrum-Icon', 'icon'),
                 converter.classToClass('spectrum-ClearButton-fill'),
-            ],
-            excludeByComponents: [
+                converter.classToClass('spectrum-ClearButton-icon'),
+                ...converter.enumerateAttributes(
+                    [['spectrum-ClearButton--staticWhite', 'white']],
+                    'static-color'
+                ),
+                {
+                    find: builder.pseudoClass('hover'),
+                    replace: builder.pseudoClass('hover'),
+                    hoist: true,
+                },
                 {
-                    type: 'pseudo-element',
-                    kind: 'custom',
-                    name: '-moz-focus-inner',
+                    find: notDisabled(),
+                    replace: notDisabled('attribute'),
+                    hoist: true,
+                },
+                {
+                    find: [notDisabled(), builder.pseudoClass('focus-visible')],
+                    replace: [
+                        builder.pseudoClass('focus-visible'),
+                        notDisabled('attribute'),
+                    ],
+                    hoist: true,
+                },
+                {
+                    find: [notDisabled(), builder.pseudoClass('focus-within')],
+                    replace: [
+                        builder.attribute('focus-within'),
+                        notDisabled('attribute'),
+                    ],
+                    hoist: true,
+                },
+                {
+                    find: notDisabled(),
+                    replace: notDisabled('attribute'),
+                    hoist: true,
                 },
             ],
         },