diff --git a/packages/bundle/elements.ts b/packages/bundle/elements.ts index 4fc1b362a9..d66a80d31f 100644 --- a/packages/bundle/elements.ts +++ b/packages/bundle/elements.ts @@ -42,6 +42,7 @@ import '@spectrum-web-components/menu/sp-menu-item.js'; import '@spectrum-web-components/overlay/active-overlay.js'; import '@spectrum-web-components/overlay/overlay-trigger.js'; import '@spectrum-web-components/popover/sp-popover.js'; +import '@spectrum-web-components/quick-actions/sp-quick-actions.js'; import '@spectrum-web-components/radio/sp-radio.js'; import '@spectrum-web-components/radio/sp-radio-group.js'; import '@spectrum-web-components/rule/sp-rule.js'; diff --git a/packages/bundle/package.json b/packages/bundle/package.json index bb4d03f373..669aaf1b80 100644 --- a/packages/bundle/package.json +++ b/packages/bundle/package.json @@ -73,6 +73,7 @@ "@spectrum-web-components/menu": "^0.3.2", "@spectrum-web-components/overlay": "^0.5.2", "@spectrum-web-components/popover": "^0.4.6", + "@spectrum-web-components/quick-actions": "^0.0.1", "@spectrum-web-components/radio": "^0.3.3", "@spectrum-web-components/rule": "^0.2.1", "@spectrum-web-components/search": "^0.4.4", diff --git a/packages/bundle/src/index.ts b/packages/bundle/src/index.ts index 41b0fc2652..dc1010ed46 100644 --- a/packages/bundle/src/index.ts +++ b/packages/bundle/src/index.ts @@ -37,6 +37,7 @@ export * from '@spectrum-web-components/link'; export * from '@spectrum-web-components/menu'; export * from '@spectrum-web-components/overlay'; export * from '@spectrum-web-components/popover'; +export * from '@spectrum-web-components/quick-actions'; export * from '@spectrum-web-components/radio'; export * from '@spectrum-web-components/rule'; export * from '@spectrum-web-components/search'; diff --git a/packages/bundle/tsconfig.json b/packages/bundle/tsconfig.json index 5e0f0af239..f1526be07f 100644 --- a/packages/bundle/tsconfig.json +++ b/packages/bundle/tsconfig.json @@ -34,6 +34,7 @@ { "path": "../menu" }, { "path": "../popover" }, { "path": "../overlay" }, + { "path": "../quick-actions" }, { "path": "../radio" }, { "path": "../rule" }, { "path": "../search" }, diff --git a/packages/quick-actions/README.md b/packages/quick-actions/README.md new file mode 100644 index 0000000000..0fc8bc56c5 --- /dev/null +++ b/packages/quick-actions/README.md @@ -0,0 +1,54 @@ +## Description + +`` allow users to perform contextual actions when hovering or focusing on a specific component. They're shortcuts meant to make workflows more efficient. Spectrum guidelines suggest a `` element feature only text buttons OR only icon buttons, and never both. + +### Installation + +[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/quick-actions?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/quick-actions) +[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/quick-actions?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/quick-actions) + +``` +npm install @spectrum-web-components/quick-actions + +# or + +yarn add @spectrum-web-components/quick-actions +``` + +## Example + + + +```html +
+ + + + + + + + + + + +
+``` + +### Text Only + +When the buttons have text only, be sure to include the `text-only` attribute to ensure correct layout of your actions. + +```html +
+ + Edit + Copy + Delete + +
+``` diff --git a/packages/quick-actions/package.json b/packages/quick-actions/package.json new file mode 100644 index 0000000000..dd5fb6bfdd --- /dev/null +++ b/packages/quick-actions/package.json @@ -0,0 +1,56 @@ +{ + "name": "@spectrum-web-components/quick-actions", + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-web-components.git", + "directory": "packages/quick-actions" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-web-components/issues" + }, + "homepage": "https://adobe.github.io/spectrum-web-components/components/quick-actions", + "keywords": [ + "spectrum css", + "web components", + "lit-element", + "lit-html" + ], + "version": "0.0.1", + "description": "", + "main": "src/index.js", + "module": "src/index.js", + "type": "module", + "exports": { + "./src/": "./src/", + "./custom-elements.json": "./custom-elements.json", + "./package.json": "./package.json", + "./sp-quick-actions": "./sp-quick-actions.js", + "./sp-quick-actions.js": "./sp-quick-actions.js" + }, + "files": [ + "custom-elements.json", + "*.d.ts", + "*.js", + "*.js.map", + "/src/" + ], + "sideEffects": [ + "./sp-quick-actions.js", + "./sp-quick-actions.ts" + ], + "scripts": { + "test": "karma start --coverage" + }, + "author": "", + "license": "Apache-2.0", + "devDependencies": { + "@spectrum-css/quickaction": "^3.0.0-beta.3" + }, + "dependencies": { + "@spectrum-web-components/base": "^0.0.1", + "tslib": "^2.0.0" + } +} diff --git a/packages/quick-actions/sp-quick-actions.ts b/packages/quick-actions/sp-quick-actions.ts new file mode 100644 index 0000000000..4976499343 --- /dev/null +++ b/packages/quick-actions/sp-quick-actions.ts @@ -0,0 +1,21 @@ +/* +Copyright 2020 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 { QuickActions } from './src/QuickActions.js'; + +customElements.define('sp-quick-actions', QuickActions); + +declare global { + interface HTMLElementTagNameMap { + 'sp-quick-actions': QuickActions; + } +} diff --git a/packages/quick-actions/src/QuickActions.ts b/packages/quick-actions/src/QuickActions.ts new file mode 100644 index 0000000000..9d444ef4a4 --- /dev/null +++ b/packages/quick-actions/src/QuickActions.ts @@ -0,0 +1,48 @@ +/* +Copyright 2020 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, + SpectrumElement, + CSSResultArray, + TemplateResult, + property, +} from '@spectrum-web-components/base'; + +import styles from './quick-actions.css.js'; + +/** + * @element sp-quick-actions + */ +export class QuickActions extends SpectrumElement { + public static get styles(): CSSResultArray { + return [styles]; + } + + @property({ type: Boolean, reflect: true }) + public opened = false; + + @property({ + type: Boolean, + attribute: 'text-only', + hasChanged() { + return false; + }, + }) + public textOnly = false; + + protected render(): TemplateResult { + return html` + + `; + } +} diff --git a/packages/quick-actions/src/index.ts b/packages/quick-actions/src/index.ts new file mode 100644 index 0000000000..6afd39fcf7 --- /dev/null +++ b/packages/quick-actions/src/index.ts @@ -0,0 +1,13 @@ +/* +Copyright 2020 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 './QuickActions.js'; diff --git a/packages/quick-actions/src/quick-actions.css b/packages/quick-actions/src/quick-actions.css new file mode 100644 index 0000000000..31e5f4b800 --- /dev/null +++ b/packages/quick-actions/src/quick-actions.css @@ -0,0 +1,13 @@ +/* +Copyright 2020 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-quick-actions.css'; diff --git a/packages/quick-actions/src/spectrum-config.js b/packages/quick-actions/src/spectrum-config.js new file mode 100644 index 0000000000..a5a6f2108c --- /dev/null +++ b/packages/quick-actions/src/spectrum-config.js @@ -0,0 +1,55 @@ +/* +Copyright 2020 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: 'quickaction', + components: [ + { + name: 'quick-actions', + host: { + selector: '.spectrum-QuickActions', + }, + attributes: [ + { + type: 'boolean', + selector: '.spectrum-QuickActions--textOnly', + name: 'text-only', + }, + { + type: 'boolean', + selector: '.is-open', + name: 'opened', + }, + { + type: 'enum', + name: 'enter-from', + values: [ + '.spectrum-QuickActions--left', + '.spectrum-QuickActions--right', + ], + }, + ], + ids: [ + { + selector: '.spectrum-QuickActions-overlay', + name: 'overlay', + }, + ], + slots: [ + { + selector: '.spectrum-ActionButton', + name: 'action', + }, + ], + }, + ], +}; diff --git a/packages/quick-actions/src/spectrum-quick-actions.css b/packages/quick-actions/src/spectrum-quick-actions.css new file mode 100644 index 0000000000..0d6ea60ec3 --- /dev/null +++ b/packages/quick-actions/src/spectrum-quick-actions.css @@ -0,0 +1,106 @@ +/* stylelint-disable */ /* +Copyright 2020 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-QuickActions */ + visibility: hidden; + opacity: 0; + transition: transform var(--spectrum-global-animation-duration-100, 0.13s) + ease-in-out, + opacity var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out, + visibility 0ms linear + var(--spectrum-global-animation-duration-100, 0.13s); + pointer-events: none; /* .spectrum-QuickActions */ + box-sizing: border-box; + display: inline-flex; + align-items: center; + justify-content: center; + padding: var( + --spectrum-quickactions-padding-y, + var(--spectrum-global-dimension-size-50) + ) + var( + --spectrum-quickactions-padding-x, + var(--spectrum-global-dimension-size-50) + ); + height: var( + --spectrum-quickactions-height, + var(--spectrum-global-dimension-size-500) + ); + border-radius: var( + --spectrum-quickactions-border-radius, + var(--spectrum-alias-border-radius-regular) + ); /* .spectrum-QuickActions */ + background-color: var( + --spectrum-quickactions-background-color, + var(--spectrum-alias-background-color-quickactions) + ); +} +:host([opened]) { + /* .spectrum-QuickActions.is-open */ + visibility: visible; + opacity: 1; + transition-delay: 0ms; + pointer-events: auto; +} +:host([enter-from='left'][opened]) { + /* .spectrum-QuickActions--left.is-open */ + transform: translateX( + var( + --spectrum-dropdown-flyout-menu-offset-y, + var(--spectrum-global-dimension-size-75) + ) + ); +} +:host([enter-from='right'][opened]) { + /* .spectrum-QuickActions--right.is-open */ + transform: translateX( + calc( + -1 * var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75)) + ) + ); +} +:host([dir='ltr']) slot[name='action'] + ::slotted([slot='action']) { + /* [dir=ltr] .spectrum-QuickActions .spectrum-ActionButton+.spectrum-ActionButton */ + margin-left: var( + --spectrum-quickactions-icon-button-gap-x, + var(--spectrum-global-dimension-size-100) + ); +} +:host([dir='rtl']) slot[name='action'] + ::slotted([slot='action']) { + /* [dir=rtl] .spectrum-QuickActions .spectrum-ActionButton+.spectrum-ActionButton */ + margin-right: var( + --spectrum-quickactions-icon-button-gap-x, + var(--spectrum-global-dimension-size-100) + ); +} +:host([dir='ltr'][text-only]) slot[name='action'] + ::slotted([slot='action']) { + /* [dir=ltr] .spectrum-QuickActions--textOnly .spectrum-ActionButton+.spectrum-ActionButton */ + margin-left: var( + --spectrum-quickactions-text-button-gap-x, + var(--spectrum-global-dimension-size-50) + ); +} +:host([dir='rtl'][text-only]) slot[name='action'] + ::slotted([slot='action']) { + /* [dir=rtl] .spectrum-QuickActions--textOnly .spectrum-ActionButton+.spectrum-ActionButton */ + margin-right: var( + --spectrum-quickactions-text-button-gap-x, + var(--spectrum-global-dimension-size-50) + ); +} +#overlay { + /* .spectrum-QuickActions-overlay */ + background-color: var( + --spectrum-quickactions-overlay-color, + var(--spectrum-alias-background-color-quickactions-overlay) + ); +} diff --git a/packages/quick-actions/stories/quick-actions.stories.ts b/packages/quick-actions/stories/quick-actions.stories.ts new file mode 100644 index 0000000000..6e53d4d904 --- /dev/null +++ b/packages/quick-actions/stories/quick-actions.stories.ts @@ -0,0 +1,66 @@ +/* +Copyright 2020 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, TemplateResult } from 'lit-html'; + +import '../sp-quick-actions.js'; +import { + EditIcon, + CopyIcon, + DeleteIcon, +} from '@spectrum-web-components/icons-workflow'; +import '@spectrum-web-components/underlay/sp-underlay.js'; + +export default { + title: 'Quick Actions', + component: 'sp-quick-actions', +}; + +export const iconButtons = (): TemplateResult => { + return html` +
+ + + + ${EditIcon({ hidden: true })} + + + + + ${CopyIcon({ hidden: true })} + + + + + ${DeleteIcon({ hidden: true })} + + + +
+ `; +}; + +export const textOnly = (): TemplateResult => { + return html` +
+ + Edit + Copy + Delete + +
+ `; +}; diff --git a/packages/quick-actions/test/benchmark/basic-test.ts b/packages/quick-actions/test/benchmark/basic-test.ts new file mode 100644 index 0000000000..9e4477659d --- /dev/null +++ b/packages/quick-actions/test/benchmark/basic-test.ts @@ -0,0 +1,19 @@ +/* +Copyright 2020 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-web-components/quick-actions/sp-quick-actions.js'; +import { html } from 'lit-html'; +import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; + +measureFixtureCreation(html` + +`); diff --git a/packages/quick-actions/test/quick-actions.test.ts b/packages/quick-actions/test/quick-actions.test.ts new file mode 100644 index 0000000000..3c83334805 --- /dev/null +++ b/packages/quick-actions/test/quick-actions.test.ts @@ -0,0 +1,31 @@ +/* +Copyright 2020 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 } from 'lit-element'; +import { fixture, elementUpdated, expect } from '@open-wc/testing'; + +import '../sp-quick-actions.js'; +import { QuickActions } from '..'; + +describe('QuickActions', () => { + it('loads default quick-actions accessibly', async () => { + const el = await fixture( + html` + + ` + ); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + }); +}); diff --git a/packages/quick-actions/tsconfig.json b/packages/quick-actions/tsconfig.json new file mode 100644 index 0000000000..b10d59338e --- /dev/null +++ b/packages/quick-actions/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "composite": true, + "rootDir": "./" + }, + "include": ["*.ts", "src/*.ts"], + "exclude": ["test/*.ts", "stories/*.ts"] +}