feat(button): add support for "sp-clear-button"

packages/button/package.json

@@ -41,6 +41,7 @@
         "@spectrum-css/button": "^2.0.2"
     },
     "dependencies": {
+        "@spectrum-web-components/icon": "^0.4.2",
         "@spectrum-web-components/shared": "^0.3.2",
         "tslib": "^1.10.0"
     }

packages/button/src/clear-button.css

@@ -0,0 +1,14 @@
+/*
+Copyright 2019 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
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+@import './spectrum-clear-button.css';
+@import './button-base.css';

packages/button/src/clear-button.ts

@@ -0,0 +1,42 @@
+/*
+Copyright 2019 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
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { CSSResultArray, TemplateResult, html, property } from 'lit-element';
+import { ButtonBase } from './button-base.js';
+import buttonStyles from './clear-button.css.js';
+import crossMediumStyles from '@spectrum-web-components/icon/lib/spectrum-icon-cross-medium.css.js';
+
+export class ClearButton extends ButtonBase {
+    public static get styles(): CSSResultArray {
+        return [buttonStyles, crossMediumStyles];
+    }
+
+    /**
+     * The visual variant to apply to this button.
+     */
+    @property({ reflect: true })
+    public variant: 'overBackground' | '' = '';
+
+    protected get buttonContent(): TemplateResult[] {
+        return [
+            html`
+                <sp-icons-medium></sp-icons-medium>
+                <sp-icon
+                    slot="icon"
+                    class="icon cross-medium"
+                    size="s"
+                    name="ui:CrossLarge"
+                ></sp-icon>
+            `,
+        ];
+    }
+}

packages/button/src/index.ts

@@ -11,15 +11,22 @@ governing permissions and limitations under the License.
 */
 export * from './button.js';
 export * from './action-button.js';
+export * from './clear-button.js';
 
 import { Button } from './button.js';
 import { ActionButton } from './action-button.js';
+import { ClearButton } from './clear-button.js';
 
 /* istanbul ignore else */
 if (!customElements.get('sp-action-button')) {
     customElements.define('sp-action-button', ActionButton);
 }
 
+/* istanbul ignore else */
+if (!customElements.get('sp-clear-button')) {
+    customElements.define('sp-clear-button', ClearButton);
+}
+
 /* istanbul ignore else */
 if (!customElements.get('sp-button')) {
     customElements.define('sp-button', Button);
@@ -29,5 +36,6 @@ declare global {
     interface HTMLElementTagNameMap {
         'sp-button': Button;
         'sp-action-button': ActionButton;
+        'sp-clear-button': ClearButton;
     }
 }

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

@@ -159,7 +159,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-alias-icon-color-disabled)
     );
 }
-.spectrum-ClearButton--overBackground {
+:host([variant='overBackground']) #button {
     /* .spectrum-Button--overBackground.spectrum-Button--quiet,
    * .spectrum-ClearButton--overBackground */
     background-color: var(
@@ -175,7 +175,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-global-color-static-white)
     );
 }
-.spectrum-ClearButton--overBackground:hover {
+:host([variant='overBackground']) #button:hover {
     /* .spectrum-Button--overBackground.spectrum-Button--quiet:hover,
    * .spectrum-ClearButton--overBackground:hover */
     background-color: var(
@@ -191,7 +191,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-global-color-static-white)
     );
 }
-.spectrum-ClearButton--overBackground:focus-visible {
+:host([variant='overBackground']) #button:focus-visible {
     /* .spectrum-Button--overBackground.spectrum-Button--quiet.focus-ring,
    * .spectrum-ClearButton--overBackground.focus-ring */
     background-color: var(
@@ -209,7 +209,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
             var(--spectrum-global-color-static-white)
         );
 }
-.spectrum-ClearButton--overBackground:active {
+:host([variant='overBackground']) #button:active {
     /* .spectrum-Button--overBackground.spectrum-Button--quiet:active,
    * .spectrum-ClearButton--overBackground:active */
     background-color: var(
@@ -226,8 +226,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     );
     box-shadow: none;
 }
-.spectrum-ClearButton--overBackground.is-disabled,
-.spectrum-ClearButton--overBackground:disabled {
+:host([variant='overBackground']) #button.is-disabled,
+:host([variant='overBackground']) #button:disabled {
     /* .spectrum-Button--overBackground.spectrum-Button--quiet.is-disabled,
    * .spectrum-Button--overBackground.spectrum-Button--quiet:disabled,
    * .spectrum-ClearButton--overBackground.is-disabled,

packages/button/src/spectrum-config.js

@@ -118,6 +118,23 @@ module.exports = {
                 shadowSelector: '#button',
             },
             focus: '#button',
+            attributes: [
+                {
+                    type: 'enum',
+                    name: 'variant',
+                    values: [
+                        '.spectrum-ClearButton--cta',
+                        '.spectrum-ClearButton--primary',
+                        '.spectrum-ClearButton--secondary',
+                        {
+                            name: 'negative',
+                            selector: '.spectrum-ClearButton--warning',
+                        },
+                        '.spectrum-ClearButton--overBackground',
+                        '.spectrum-ClearButton--secondary',
+                    ],
+                },
+            ],
         },
     ],
 };

packages/button/tsconfig.json

@@ -6,5 +6,5 @@
         "rootDir": "./src"
     },
     "include": ["src/*.ts"],
-    "references": [{ "path": "../shared" }]
+    "references": [{ "path": "../icon" }, { "path": "../shared" }]
 }