feat: leverage latest Spectrum button API

adobe · Feb 28, 2022 · 9caf2f6 · 9caf2f6
1 parent 5352660
commit 9caf2f6
Show file tree

Hide file tree

Showing 42 changed files with 5,966 additions and 2,417 deletions.
diff --git a/packages/action-button/package.json b/packages/action-button/package.json
@@ -51,7 +51,7 @@
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/actionbutton": "^1.0.10"
+        "@spectrum-css/actionbutton": "^1.1.2"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/action-button/src/ActionButton.ts b/packages/action-button/src/ActionButton.ts
@@ -80,6 +80,9 @@ export class ActionButton extends SizedMixin(ButtonBase) {
     @property({ type: Boolean, reflect: true })
     public toggles = false;
 
+    @property({ reflect: true })
+    public variant?: 'white' | 'black';
+
     @property({ type: String })
     public get value(): string {
         return this._value || this.itemText;
@@ -191,8 +194,7 @@ export class ActionButton extends SizedMixin(ButtonBase) {
         if (this.holdAffordance) {
             buttonContent.unshift(html`
                 <sp-icon-corner-triangle300
-                    id="hold-affordance"
-                    class="${holdAffordanceClass[
+                    class="hold-affordance ${holdAffordanceClass[
                         this.size as DefaultElementSize
                     ]}"
                 ></sp-icon-corner-triangle300>

diff --git a/packages/action-button/src/action-button.css b/packages/action-button/src/action-button.css
@@ -17,6 +17,16 @@ governing permissions and limitations under the License.
     flex-direction: row;
 }
 
+:host:after {
+    border-radius: var(
+        --spectrum-actionbutton-after-border-radius,
+        calc(
+            var(--spectrum-actionbutton-quiet-textonly-border-radius) +
+                var(--spectrum-actionbutton-focus-ring-gap)
+        )
+    );
+}
+
 :host([disabled]) {
     pointer-events: none;
     cursor: auto;
@@ -44,6 +54,14 @@ governing permissions and limitations under the License.
     text-align: var(--spectrum-actionbutton-label-text-align);
 }
 
+:host([emphasized][selected]:not([disabled])) .hold-affordance,
+:host([emphasized][quiet][selected]:not([disabled])) .hold-affordance {
+    color: var(
+        --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected,
+        var(--spectrum-alias-component-icon-color-emphasized-selected-default)
+    );
+}
+
 :host([size='s']) {
     --spectrum-icon-tshirt-size-height: var(
         --spectrum-alias-workflow-icon-size-s

diff --git a/packages/action-button/src/spectrum-action-button.css b/packages/action-button/src/spectrum-action-button.css
diff --git a/packages/action-button/src/spectrum-config.js b/packages/action-button/src/spectrum-config.js
@@ -28,6 +28,11 @@ const config = {
                     selector: '.is-disabled',
                     name: 'disabled',
                 },
+                {
+                    type: 'boolean',
+                    selector: ':disabled',
+                    name: 'disabled',
+                },
                 {
                     type: 'boolean',
                     name: 'selected',
@@ -48,6 +53,20 @@ const config = {
                     name: 'emphasized',
                     selector: '.spectrum-ActionButton--emphasized',
                 },
+                {
+                    type: 'enum',
+                    name: 'variant',
+                    values: [
+                        {
+                            name: 'white',
+                            selector: '.spectrum-ActionButton--staticWhite',
+                        },
+                        {
+                            name: 'black',
+                            selector: '.spectrum-ActionButton--staticBlack',
+                        },
+                    ],
+                },
                 {
                     type: 'enum',
                     name: 'size',
@@ -71,13 +90,17 @@ const config = {
                     ],
                 },
             ],
-            ids: [
-                '.spectrum-ActionButton-label',
+            classes: [
                 {
                     name: 'hold-affordance',
                     selector: '.spectrum-ActionButton-hold',
                 },
+                {
+                    name: 'hold-affordance',
+                    selector: '.spectrum-ActionButton-holdIcon',
+                },
             ],
+            ids: ['.spectrum-ActionButton-label'],
             slots: [
                 {
                     name: 'icon',
@@ -101,6 +124,12 @@ const config = {
                         ":host([dir=rtl]) slot:not([icon-only])::slotted([slot='icon']), :host([dir=rtl]) slot:not([icon-only]) sp-icon",
                     selector: /\:host\(\[dir=rtl\]\) \.spectrum-Icon$/,
                 },
+                {
+                    replacement:
+                        ':host([size][variant="black"][disabled][selected])',
+                    selector:
+                        '.spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled.is-selected',
+                },
             ],
         },
     ],

diff --git a/packages/action-group/src/action-group.css b/packages/action-group/src/action-group.css
@@ -68,40 +68,93 @@ governing permissions and limitations under the License.
 
 :host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child) {
     /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
-    --overriden-border-radius: var(--spectrum-alias-border-radius-regular)
-        var(--spectrum-alias-border-radius-regular) 0 0;
+    --overriden-border-radius: var(--spectrum-alias-component-border-radius)
+        var(--spectrum-alias-component-border-radius) 0 0;
 }
 
 :host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child) {
     /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
-    --overriden-border-radius: 0 0 var(--spectrum-alias-border-radius-regular)
-        var(--spectrum-alias-border-radius-regular);
+    --overriden-border-radius: 0 0 var(--spectrum-alias-component-border-radius)
+        var(--spectrum-alias-component-border-radius);
 }
 
 :host([dir='ltr'][compact]:not([quiet]):not([vertical]))
     ::slotted(:not([role]):first-child) {
     /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
-    --overriden-border-radius: var(--spectrum-alias-border-radius-regular) 0 0
-        var(--spectrum-alias-border-radius-regular);
+    --overriden-border-radius: var(--spectrum-alias-component-border-radius) 0 0
+        var(--spectrum-alias-component-border-radius);
 }
 
 :host([dir='rtl'][compact]:not([quiet]):not([vertical]))
     ::slotted(:not([role]):first-child) {
     /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
-    --overriden-border-radius: 0 var(--spectrum-alias-border-radius-regular)
-        var(--spectrum-alias-border-radius-regular) 0;
+    --overriden-border-radius: 0 var(--spectrum-alias-component-border-radius)
+        var(--spectrum-alias-component-border-radius) 0;
 }
 
 :host([dir='ltr'][compact]:not([quiet]):not([vertical]))
     ::slotted(:not([role]):last-child) {
     /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
-    --overriden-border-radius: 0 var(--spectrum-alias-border-radius-regular)
-        var(--spectrum-alias-border-radius-regular) 0;
+    --overriden-border-radius: 0 var(--spectrum-alias-component-border-radius)
+        var(--spectrum-alias-component-border-radius) 0;
 }
 
 :host([dir='rtl'][compact]:not([quiet]):not([vertical]))
     ::slotted(:not([role]):last-child) {
     /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
-    --overriden-border-radius: var(--spectrum-alias-border-radius-regular) 0 0
-        var(--spectrum-alias-border-radius-regular);
+    --overriden-border-radius: var(--spectrum-alias-component-border-radius) 0 0
+        var(--spectrum-alias-component-border-radius);
+}
+
+:host([compact]:not([quiet])) ::slotted(*) {
+    --spectrum-actionbutton-after-border-radius: 0;
+}
+
+:host([compact][vertical]:not([quiet])) ::slotted(:first-child) {
+    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
+    --spectrum-actionbutton-after-border-radius: var(
+            --spectrum-alias-component-border-radius
+        )
+        var(--spectrum-alias-component-border-radius) 0 0;
+}
+
+:host([compact][vertical]:not([quiet])) ::slotted(:last-child) {
+    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
+    --spectrum-actionbutton-after-border-radius: 0 0
+        var(--spectrum-alias-component-border-radius)
+        var(--spectrum-alias-component-border-radius);
+}
+
+:host([dir='ltr'][compact]:not([quiet]):not([vertical]))
+    ::slotted(:first-child) {
+    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
+    --spectrum-actionbutton-after-border-radius: var(
+            --spectrum-alias-component-border-radius
+        )
+        0 0 var(--spectrum-alias-component-border-radius);
+}
+
+:host([dir='rtl'][compact]:not([quiet]):not([vertical]))
+    ::slotted(:first-child) {
+    /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
+    --spectrum-actionbutton-after-border-radius: 0
+        var(--spectrum-alias-component-border-radius)
+        var(--spectrum-alias-component-border-radius) 0;
+}
+
+:host([dir='ltr'][compact]:not([quiet]):not([vertical]))
+    ::slotted(:last-child) {
+    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
+    --spectrum-actionbutton-after-border-radius: 0
+        var(--spectrum-alias-component-border-radius)
+        var(--spectrum-alias-component-border-radius) 0;
+}
+
+:host([dir='rtl'][compact]:not([quiet]):not([vertical]))
+    ::slotted(:last-child) {
+    /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
+    --spectrum-actionbutton-after-border-radius: var(
+            --spectrum-alias-component-border-radius
+        )
+        0 0 var(--spectrum-alias-component-border-radius);
 }
diff --git a/packages/button/package.json b/packages/button/package.json
@@ -47,13 +47,14 @@
     ],
     "dependencies": {
         "@spectrum-web-components/base": "^0.5.2",
+        "@spectrum-web-components/clear-button": "^0.0.1",
         "@spectrum-web-components/icon": "^0.11.3",
         "@spectrum-web-components/icons-ui": "^0.8.3",
         "@spectrum-web-components/shared": "^0.13.4",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/button": "^4.1.4"
+        "@spectrum-css/button": "^6.0.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/button/src/Button.ts b/packages/button/src/Button.ts
@@ -10,17 +10,34 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { CSSResultArray, SizedMixin } from '@spectrum-web-components/base';
+import {
+    CSSResultArray,
+    PropertyValues,
+    SizedMixin,
+} from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import { StyledButton } from './StyledButton.js';
 import buttonStyles from './button.css.js';
 
+export type DeprecatedButtonVariants = 'cta' | 'overBackground';
+export type ButtonStatics = 'white' | 'black';
 export type ButtonVariants =
-    | 'cta'
-    | 'overBackground'
+    | 'accent'
     | 'primary'
     | 'secondary'
-    | 'negative';
+    | 'negative'
+    | ButtonStatics
+    | DeprecatedButtonVariants;
+export const VALID_VARIANTS = [
+    'accent',
+    'primary',
+    'secondary',
+    'negative',
+    'white',
+    'black',
+];
+
+export type ButtonTreatments = 'fill' | 'outline';
 
 /**
  * @element sp-button
@@ -37,17 +54,51 @@ export class Button extends SizedMixin(StyledButton) {
      * The visual variant to apply to this button.
      */
     @property({ reflect: true })
-    public variant: ButtonVariants = 'cta';
+    public get variant(): ButtonVariants {
+        return this._variant;
+    }
+    public set variant(variant: ButtonVariants) {
+        if (variant === this.variant) return;
+
+        this.requestUpdate('variant', this.variant);
+        switch (variant) {
+            case 'cta':
+                this._variant = 'accent';
+                break;
+            case 'overBackground':
+                this._variant = 'white';
+                this.treatment = 'outline';
+                break;
+            default:
+                if (!VALID_VARIANTS.includes(variant)) {
+                    this._variant = 'accent';
+                } else {
+                    this._variant = variant;
+                }
+                break;
+        }
+        this.setAttribute('variant', this.variant);
+    }
+    private _variant: ButtonVariants = 'accent';
 
     /**
-     * There is a warning in place for this control
+     * The visual variant to apply to this button.
      */
-    @property({ type: Boolean, reflect: true })
-    public warning = false;
+    @property({ reflect: true })
+    public treatment: ButtonTreatments = 'fill';
 
     /**
      * Style this button to be less obvious
      */
-    @property({ type: Boolean, reflect: true })
-    public quiet = false;
+    @property({ type: Boolean })
+    public set quiet(quiet: boolean) {
+        this.treatment = quiet ? 'outline' : 'fill';
+    }
+
+    protected firstUpdated(changes: PropertyValues<this>): void {
+        super.firstUpdated(changes);
+        if (!this.hasAttribute('variant')) {
+            this.setAttribute('variant', this.variant);
+        }
+    }
 }
diff --git a/packages/button/src/ClearButton.ts b/packages/button/src/ClearButton.ts
@@ -18,7 +18,7 @@ import {
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import { StyledButton } from './StyledButton.js';
-import buttonStyles from './clear-button.css.js';
+import buttonStyles from '@spectrum-web-components/clear-button/src/clear-button.css.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-cross75.js';
 import crossMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.css.js';