diff --git a/README.md b/README.md index 50804e7836..ae7216ec1e 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ It will not support older browsers and will only target modern ever-green browse # Requirements -- NodeJS >= 8.10.0 +- NodeJS >= 10.15 - Typescript - Browsers with Custom Elements V1 and Shadow DOM support, e.g. Chrome, Firefox, Safari. @@ -42,7 +42,7 @@ By default the resulting site will be available at [http://localhost:6006](http: ## Linting -The project will be linted on a pre-commit hook, but you can also run the lint suite with `npm run lint`. It uses ESLint to lint the JS / TS files, and StyleLint to lint the CSS files. +The project will be linted on a pre-commit hook, but you can also run the lint suite with `yarn lint`. It uses ESLint to lint the JS / TS files, and StyleLint to lint the CSS files. ## Testing @@ -52,7 +52,7 @@ Tests are implemented using the Karma test runner with Chai, Mocha and Sinon fra yarn test ``` -During development you may wish to use `npm run test:watch` to automatically build and re-run the test suites. +During development you may wish to use `yarn test:watch` to automatically build and re-run the test suites. ## Benchmarking @@ -63,7 +63,7 @@ yarn build:tests yarn test:bench ``` -This will run the defined [Tachometer](https://www.npmjs.com/package/tachometer) tests and report the current runtime cost of each individual element. When not making changes to the benchmarks thy have been built on your local machine, you can stip `npm run build:tests` for later passes. +This will run the defined [Tachometer](https://www.npmjs.com/package/tachometer) tests and report the current runtime cost of each individual element. When not making changes to the benchmarks thy have been built on your local machine, you can stip `yarn build:tests` for later passes. ## Anatomy of a Component diff --git a/__snapshots__/Actionbar.md b/__snapshots__/Actionbar.md new file mode 100644 index 0000000000..68705abe3b --- /dev/null +++ b/__snapshots__/Actionbar.md @@ -0,0 +1,19 @@ +# `Actionbar` + +#### `loads` + +```html + + 228 Selected + +
+ + +
+``` + +```html + + + +``` diff --git a/__snapshots__/Slider.md b/__snapshots__/Slider.md index 0996ac2f86..f8b0c57c8d 100644 --- a/__snapshots__/Slider.md +++ b/__snapshots__/Slider.md @@ -27,7 +27,6 @@ max="20" min="0" step="1" - tabindex="0" type="range" value="10" /> @@ -63,7 +62,6 @@ max="20" min="0" step="1" - tabindex="0" type="range" value="10" /> diff --git a/package.json b/package.json index 7c1591f2c2..1b2d7c5479 100644 --- a/package.json +++ b/package.json @@ -33,10 +33,12 @@ "process-spectrum": "node ./scripts/process-spectrum-css.js; npx pretty-quick --pattern 'packages/**/*.css'", "process-icons": "node ./scripts/process-icons.js; npx pretty-quick --pattern 'packages/**/*.svg.ts'", "build": "gulp css && tsc --build packages/**/tsconfig.json", + "build:watch": "tsc --build packages/**/tsconfig.json -w", "build:tests": "tsc --build test/tsconfig.json && tsc --build test/tsconfig-node.json", "build:clear-cache": "rm -rf packages/*/lib && rm -rf packages/*/tsconfig.tsbuildinfo", "watch": "gulp watch", - "storybook": "yarn watch & tsc --build packages/**/tsconfig.json -w & start-storybook -p 6006", + "storybook": "run-p watch build:watch storybook:start", + "storybook:start": "start-storybook -p 6006", "storybook:build": "build-storybook -c .storybook -o ./documentation/dist/storybook", "docs:build": "gulp docsCompile && yarn storybook:build", "docs:start": "gulp docsWatchCompile", @@ -48,7 +50,8 @@ "lerna-publish": "lerna publish --message 'chore: release new versions'", "test": "yarn test:build && karma start --coverage", "test:build": "yarn build && tsc --build test/tsconfig-test.json", - "test:watch": "yarn watch & yarn test:build -- -w & karma start --auto-watch=true --single-run=false", + "test:start": "karma start", + "test:watch": "run-p watch 'test:build -w' 'test:start --auto-watch=true --single-run=false'", "test:update-snapshots": "yarn test:build && karma start --update-snapshots", "test:prune-snapshots": "yarn test:build && karma start --prune-snapshots", "test:compatibility": "yarn test:build && karma start --compatibility all --auto-watch=true --single-run=false", @@ -141,6 +144,7 @@ "markdown-loader": "^5.1.0", "marked": "^0.7.0", "merge2": "^1.2.3", + "npm-run-all": "^4.1.5", "plugin-error": "^1.0.1", "polymer-webpack-loader": "^2.0.3", "postcss": "^7.0.6", diff --git a/packages/action-menu/src/action-menu.ts b/packages/action-menu/src/action-menu.ts index 97cbca8f57..341c85d89f 100644 --- a/packages/action-menu/src/action-menu.ts +++ b/packages/action-menu/src/action-menu.ts @@ -74,6 +74,7 @@ export class ActionMenu extends Dropdown { } protected firstUpdated(): void { + super.firstUpdated(); this.quiet = true; } } diff --git a/packages/actionbar/README.md b/packages/actionbar/README.md new file mode 100644 index 0000000000..39e4bafbaa --- /dev/null +++ b/packages/actionbar/README.md @@ -0,0 +1,72 @@ +## Overview + +A `` delivers a floating action bar that is a convenient way to deliver stateful actions in cases like selection mode. `` can be deployed in two variants beyond the default: `[varient="fixed"]`, to position the element in relation to the page, and `[variant=sticky]`, to position the content in relation to content that may scroll. + +## Example + +```html + + 228 Selected +
+ + + + + + + + + + + + +
+ +``` + +## Variants + +### Fixed + +When using `[variant="fixed"]`, the `` will display by default at the bottom left of the window and can be customized via CSS from the outside. + +```html +

Look down and to the left when toggling.

+ + 228 Selected + + + Toggle Fixed Actionbar + +``` + +### Sticky + +When using `[variant="sticky"]`, be sure you've spent some time touching up on [how `sticky` really works](https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46) to ensure the most successful delivery of your content. + +```html +
+

Scroll down for toggle button

+ + 228 Selected + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. +

+ + Toggle Sticky Actionbar + +
+``` diff --git a/packages/actionbar/package.json b/packages/actionbar/package.json new file mode 100644 index 0000000000..90463b5215 --- /dev/null +++ b/packages/actionbar/package.json @@ -0,0 +1,41 @@ +{ + "name": "@spectrum-web-components/actionbar", + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-web-components.git", + "directory": "packages/actionbar" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-web-components/issues" + }, + "homepage": "https://adobe.github.io/spectrum-web-components/components/actionbar", + "keywords": [ + "spectrum css", + "web components", + "lit-element", + "lit-html" + ], + "version": "0.0.1", + "description": "", + "main": "lib/index.js", + "module": "lib/index.js", + "files": [ + "/lib/", + "/src/" + ], + "scripts": { + "test": "karma start --coverage" + }, + "author": "", + "license": "Apache-2.0", + "peerDependencies": { + "lit-element": "^2.1.0", + "lit-html": "^1.0.0" + }, + "devDependencies": { + "@spectrum-css/actionbar": "^2.0.0-alpha.6" + } +} diff --git a/packages/actionbar/src/actionbar.css b/packages/actionbar/src/actionbar.css new file mode 100644 index 0000000000..d65ac35e3e --- /dev/null +++ b/packages/actionbar/src/actionbar.css @@ -0,0 +1,17 @@ +/* +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-actionbar.css'; + +:host([grows]) #popover { + width: auto; +} diff --git a/packages/actionbar/src/actionbar.ts b/packages/actionbar/src/actionbar.ts new file mode 100644 index 0000000000..f136b55862 --- /dev/null +++ b/packages/actionbar/src/actionbar.ts @@ -0,0 +1,69 @@ +/* +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 { + html, + LitElement, + CSSResultArray, + TemplateResult, + property, +} from 'lit-element'; + +import actionbarStyles from './actionbar.css.js'; + +export const actionbarVariants = ['sticky', 'fixed']; + +/** + * Actionbar component + */ +export class Actionbar extends LitElement { + public static get styles(): CSSResultArray { + return [actionbarStyles]; + } + + @property({ type: Boolean, reflect: true }) + public open = false; + + /** + * The variant applies specific styling when set to `sticky` or `fixed`. + * `variant` attribute is removed when not matching one of the above. + * + * @param {String} variant + */ + @property({ type: String, reflect: true }) + public set variant(variant: string) { + if (variant === this.variant) { + return; + } + if (actionbarVariants.includes(variant)) { + this.setAttribute('variant', variant); + this._variant = variant; + return; + } + this.removeAttribute('variant'); + this._variant = ''; + } + + public get variant(): string { + return this._variant; + } + + private _variant = ''; + + public render(): TemplateResult { + return html` + + + + `; + } +} diff --git a/packages/actionbar/src/index.ts b/packages/actionbar/src/index.ts new file mode 100755 index 0000000000..e2456b2190 --- /dev/null +++ b/packages/actionbar/src/index.ts @@ -0,0 +1,25 @@ +/* +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. +*/ +export * from './actionbar.js'; + +import { Actionbar } from './actionbar.js'; + +/* istanbul ignore else */ +if (!customElements.get('sp-actionbar')) { + customElements.define('sp-actionbar', Actionbar); +} + +declare global { + interface HTMLElementTagNameMap { + 'sp-actionbar': Actionbar; + } +} diff --git a/packages/actionbar/src/spectrum-actionbar.css b/packages/actionbar/src/spectrum-actionbar.css new file mode 100644 index 0000000000..2c7dbeefdd --- /dev/null +++ b/packages/actionbar/src/spectrum-actionbar.css @@ -0,0 +1,62 @@ +/* stylelint-disable */ /* +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. + +THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + /* .spectrum-ActionBar */ + display: flex; + justify-content: center; + bottom: 0; + z-index: 1; + box-sizing: border-box; + padding: 0 var(--spectrum-global-dimension-size-200); + height: 0; + opacity: 0; + overflow: hidden; + pointer-events: none; + transition: height var(--spectrum-global-animation-duration-100, 0.13s) + ease-in-out, + opacity var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out; +} +:host([open]) { + /* .spectrum-ActionBar.is-open */ + height: calc( + var(--spectrum-global-dimension-size-600) + + var(--spectrum-global-dimension-size-200) * 2 + ); + opacity: 1; +} +:host([variant='sticky']) { + /* .spectrum-ActionBar--sticky */ + left: 0; + right: 0; + position: -webkit-sticky; + position: sticky; +} +:host([variant='fixed']) { + /* .spectrum-ActionBar--fixed */ + position: fixed; +} +#popover { + /* .spectrum-ActionBar-popover */ + position: relative; + box-sizing: border-box; + width: 100%; + margin: auto; + height: var(--spectrum-global-dimension-size-600); + min-width: 280px; + max-width: 960px; + padding: 0 var(--spectrum-global-dimension-size-200); + flex-direction: row; + align-items: center; + justify-content: space-between; + pointer-events: auto; +} diff --git a/packages/actionbar/src/spectrum-config.js b/packages/actionbar/src/spectrum-config.js new file mode 100644 index 0000000000..0dfebe2afd --- /dev/null +++ b/packages/actionbar/src/spectrum-config.js @@ -0,0 +1,44 @@ +/* +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. +*/ + +module.exports = { + spectrum: 'actionbar', + components: [ + { + name: 'actionbar', + host: { + selector: '.spectrum-ActionBar', + }, + attributes: [ + { + type: 'boolean', + name: 'open', + selector: '.is-open', + }, + { + type: 'enum', + name: 'variant', + values: [ + '.spectrum-ActionBar--sticky', + '.spectrum-ActionBar--fixed', + ], + }, + ], + ids: [ + { + selector: '.spectrum-ActionBar-popover', + name: 'popover', + }, + ], + }, + ], +}; diff --git a/packages/actionbar/stories/actionbar.stories.ts b/packages/actionbar/stories/actionbar.stories.ts new file mode 100644 index 0000000000..fdc3467969 --- /dev/null +++ b/packages/actionbar/stories/actionbar.stories.ts @@ -0,0 +1,56 @@ +/* +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 { storiesOf } from '@storybook/polymer'; +import { html } from 'lit-html'; +import { ifDefined } from 'lit-html/directives/if-defined'; + +import '../'; +import { actionbarVariants } from '../'; +import { boolean, select } from '@storybook/addon-knobs'; + +storiesOf('Actionbar', module).add('Default', () => { + const variants = ['', ...actionbarVariants]; + return html` + + 228 Selected +
+ + + + + + + + + + + + +
+ + `; +}); diff --git a/packages/actionbar/test/actionbar.test.ts b/packages/actionbar/test/actionbar.test.ts new file mode 100644 index 0000000000..ef13cafeba --- /dev/null +++ b/packages/actionbar/test/actionbar.test.ts @@ -0,0 +1,116 @@ +/* +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 '../'; +import { Actionbar } from '../'; +import { fixture, elementUpdated, html, expect } from '@open-wc/testing'; + +describe('Actionbar', () => { + it('loads', async () => { + const el = await fixture( + html` + + 228 Selected +
+ + + + + + + + + + + + +
+ + ` + ); + + await elementUpdated(el); + expect(el).to.not.be.undefined; + expect(el).lightDom.to.equalSnapshot(); + expect(el).shadowDom.to.equalSnapshot(); + }); + + it('accepts variants', async () => { + const el = await fixture( + html` + Help text. + ` + ); + + await elementUpdated(el); + + expect(el.variant).to.equal('sticky'); + expect(el.getAttribute('variant')).to.equal('sticky'); + + el.variant = 'fixed'; + + await elementUpdated(el); + + expect(el.variant).to.equal('fixed'); + expect(el.getAttribute('variant')).to.equal('fixed'); + + el.setAttribute('variant', 'sticky'); + + await elementUpdated(el); + + expect(el.variant).to.equal('sticky'); + expect(el.getAttribute('variant')).to.equal('sticky'); + + el.removeAttribute('variant'); + + await elementUpdated(el); + + expect(el.variant).to.equal(''); + expect(el.hasAttribute('variant')).to.be.false; + }); + it('validates variants', async () => { + const el = await fixture( + html` + Help text. + ` + ); + + await elementUpdated(el); + + expect(el.variant).to.equal(''); + expect(el.hasAttribute('variant')).to.be.false; + + el.variant = 'fixed'; + + await elementUpdated(el); + + expect(el.variant).to.equal('fixed'); + expect(el.getAttribute('variant')).to.equal('fixed'); + + el.variant = 'fixed'; + + await elementUpdated(el); + + expect(el.variant).to.equal('fixed'); + expect(el.getAttribute('variant')).to.equal('fixed'); + }); +}); diff --git a/packages/actionbar/test/benchmark/test-basic.ts b/packages/actionbar/test/benchmark/test-basic.ts new file mode 100644 index 0000000000..3aa736d2c1 --- /dev/null +++ b/packages/actionbar/test/benchmark/test-basic.ts @@ -0,0 +1,18 @@ +/* +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 '../../'; +import { html } from 'lit-html'; +import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; + +measureFixtureCreation(html` + +`); diff --git a/packages/actionbar/tsconfig.json b/packages/actionbar/tsconfig.json new file mode 100644 index 0000000000..0ba9bb6124 --- /dev/null +++ b/packages/actionbar/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "composite": true, + "outDir": "./lib", + "rootDir": "./src" + }, + "include": ["src/*.ts"] +} diff --git a/packages/bundle/package.json b/packages/bundle/package.json index 91ae4e25a4..1282b1f3ed 100644 --- a/packages/bundle/package.json +++ b/packages/bundle/package.json @@ -37,6 +37,7 @@ }, "dependencies": { "@spectrum-web-components/action-menu": "^0.1.3", + "@spectrum-web-components/actionbar": "^0.0.1", "@spectrum-web-components/banner": "^0.1.3", "@spectrum-web-components/button": "^0.1.3", "@spectrum-web-components/card": "^0.1.3", diff --git a/packages/bundle/src/index.ts b/packages/bundle/src/index.ts index aa132695b2..d794116448 100644 --- a/packages/bundle/src/index.ts +++ b/packages/bundle/src/index.ts @@ -10,6 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ export * from '@spectrum-web-components/action-menu'; +export * from '@spectrum-web-components/actionbar'; export * from '@spectrum-web-components/banner'; export * from '@spectrum-web-components/button'; export * from '@spectrum-web-components/card'; diff --git a/packages/bundle/tsconfig.json b/packages/bundle/tsconfig.json index 13e288afd2..59fa115ab7 100644 --- a/packages/bundle/tsconfig.json +++ b/packages/bundle/tsconfig.json @@ -8,6 +8,7 @@ "include": ["src/*.ts"], "references": [ { "path": "../action-menu" }, + { "path": "../actionbar" }, { "path": "../banner" }, { "path": "../button" }, { "path": "../card" }, diff --git a/packages/button/src/action-button.css b/packages/button/src/action-button.css index ff47eaf15d..eabee0b191 100644 --- a/packages/button/src/action-button.css +++ b/packages/button/src/action-button.css @@ -16,3 +16,7 @@ governing permissions and limitations under the License. :host(.spectrum-Dropdown-trigger) #button { text-align: left; } + +::slotted([slot='icon']) { + flex-shrink: 0; +} diff --git a/packages/button/src/button-base.ts b/packages/button/src/button-base.ts index 96bb6a324e..6c85d023ba 100644 --- a/packages/button/src/button-base.ts +++ b/packages/button/src/button-base.ts @@ -22,6 +22,9 @@ export class ButtonBase extends Focusable { @property() public href?: string; + @property() + public label?: string; + @property() public target?: '_blank' | '_parent' | '_self' | '_top'; @@ -32,6 +35,8 @@ export class ButtonBase extends Focusable { return !!this.querySelector('[slot="icon"]'); } + private hasLabel = false; + public get focusElement(): HTMLElement { /* istanbul ignore if */ if (!this.shadowRoot) { @@ -40,13 +45,30 @@ export class ButtonBase extends Focusable { return this.shadowRoot.querySelector('#button') as HTMLElement; } + private manageLabelSlot(e: Event): void { + const slot = e.target as HTMLSlotElement; + let assignedElements = slot.assignedElements + ? slot.assignedNodes() + : [...this.childNodes].filter((node) => { + const el = node as HTMLElement; + return !el.hasAttribute('slot'); + }); + assignedElements = assignedElements.filter((node) => { + return node.textContent ? node.textContent.trim() : false; + }); + this.hasLabel = assignedElements.length > 0; + this.requestUpdate(); + } + protected get buttonContent(): TemplateResult[] { const icon = html` `; const content = [ html` -
+
+ +
`, ]; if (!this.hasIcon) { @@ -63,12 +85,13 @@ export class ButtonBase extends Focusable { href="${this.href}" id="button" target=${ifDefined(this.target)} + aria-label=${ifDefined(this.label)} > ${this.buttonContent} ` : html` - `; diff --git a/packages/button/src/spectrum-action-button.css b/packages/button/src/spectrum-action-button.css index f6d55de6b6..909973285e 100644 --- a/packages/button/src/spectrum-action-button.css +++ b/packages/button/src/spectrum-action-button.css @@ -172,7 +172,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-500) ); } -.icon { +::slotted([slot='icon']) { /* .spectrum-Button .spectrum-Icon, * .spectrum-ActionButton .spectrum-Icon, * .spectrum-LogicButton .spectrum-Icon, @@ -189,7 +189,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-700) ); } -.icon + #label { +slot[name='icon'] + #label { /* .spectrum-ActionButton .spectrum-Icon + .spectrum-ActionButton-label, * .spectrum-Tool .spectrum-Icon + .spectrum-ActionButton-label */ padding-left: var( @@ -323,7 +323,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-900) ); } -#button:hover .icon { +#button:hover ::slotted([slot='icon']) { /* .spectrum-ActionButton:hover .spectrum-Icon, * .spectrum-Tool:hover .spectrum-Icon */ color: var( @@ -339,7 +339,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-900) ); } -#button:focus .icon { +#button:focus ::slotted([slot='icon']) { /* .spectrum-ActionButton.focus-ring .spectrum-Icon, * .spectrum-Tool.focus-ring .spectrum-Icon */ color: var( @@ -380,7 +380,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-900) ); } -:host([disabled]) #button .icon { +:host([disabled]) #button ::slotted([slot='icon']) { /* .spectrum-ActionButton:disabled .spectrum-Icon, * .spectrum-ActionButton.is-disabled .spectrum-Icon, * .spectrum-Tool:disabled .spectrum-Icon */ @@ -413,7 +413,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-800) ); } -:host([selected]) #button .icon { +:host([selected]) #button ::slotted([slot='icon']) { /* .spectrum-ActionButton.is-selected .spectrum-Icon */ color: var( --spectrum-actionbutton-icon-color-selected, @@ -435,7 +435,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-900) ); } -:host([selected]) #button:focus .icon { +:host([selected]) #button:focus ::slotted([slot='icon']) { /* .spectrum-ActionButton.is-selected.focus-ring .spectrum-Icon */ color: var( --spectrum-actionbutton-icon-color-selected-key-focus, @@ -457,7 +457,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-900) ); } -:host([selected]) #button:hover .icon { +:host([selected]) #button:hover ::slotted([slot='icon']) { /* .spectrum-ActionButton.is-selected:hover .spectrum-Icon */ color: var( --spectrum-actionbutton-icon-color-selected-hover, @@ -479,7 +479,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-900) ); } -:host([selected]) #button:active .icon { +:host([selected]) #button:active ::slotted([slot='icon']) { /* .spectrum-ActionButton.is-selected:active .spectrum-Icon */ color: var( --spectrum-actionbutton-icon-color-selected-down, @@ -502,7 +502,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-500) ); } -:host([selected][disabled]) #button .icon { +:host([selected][disabled]) #button ::slotted([slot='icon']) { /* .spectrum-ActionButton.is-selected:disabled .spectrum-Icon, * .spectrum-ActionButton.is-selected.is-disabled .spectrum-Icon */ color: var( diff --git a/packages/button/src/spectrum-config.js b/packages/button/src/spectrum-config.js index 9b985bba64..b8ff1e193f 100644 --- a/packages/button/src/spectrum-config.js +++ b/packages/button/src/spectrum-config.js @@ -103,10 +103,10 @@ module.exports = { selector: '.spectrum-ActionButton-hold', }, ], - classes: [ + slots: [ { - selector: '.spectrum-Icon', name: 'icon', + selector: '.spectrum-Icon', }, ], exclude: [/\.is-disabled/], diff --git a/packages/button/stories/action-button.stories.ts b/packages/button/stories/action-button.stories.ts index 7fca369f95..1ba06601d6 100644 --- a/packages/button/stories/action-button.stories.ts +++ b/packages/button/stories/action-button.stories.ts @@ -45,10 +45,22 @@ function renderButtonsSelected(properties: Properties): TemplateResult { `; } -storiesOf('ActionButton', module).add('Default', () => { - return renderButtonsSelected({ - quiet: false, - disabled: false, - selected: false, +storiesOf('ActionButton', module) + .add('Default', () => { + return renderButtonsSelected({ + quiet: false, + disabled: false, + selected: false, + }); + }) + .add('Icon button', () => { + return html` + + + + + + `; }); -}); diff --git a/packages/button/test/button.test.ts b/packages/button/test/button.test.ts index 8aaf1f1713..59ff9fff9e 100644 --- a/packages/button/test/button.test.ts +++ b/packages/button/test/button.test.ts @@ -57,6 +57,21 @@ describe('Button', () => { `` ); }); + it('loads default only icon', async () => { + const el = await fixture` + ); + }); it('loads default w/ an icon on the right', async () => { const el = await fixture