-
Notifications
You must be signed in to change notification settings - Fork 200
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(quick-actions): add quick-actions pattern
- Loading branch information
Showing
16 changed files
with
495 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| ## Description | ||
|
|
||
| `<sp-quick-actions>` 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 `<sp-quick-action>` element feature only text buttons OR only icon buttons, and never both. | ||
|
|
||
| ### Installation | ||
|
|
||
| [](https://www.npmjs.com/package/@spectrum-web-components/quick-actions) | ||
| [](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 | ||
|
|
||
| <sp-icons-medium></sp-icons-medium> | ||
|
|
||
| ```html | ||
| <div | ||
| style="padding: 2em; background-color: var(--spectrum-quickactions-overlay-color, var(--spectrum-alias-background-color-quickactions-overlay));" | ||
| > | ||
| <sp-quick-actions opened> | ||
| <sp-action-button quiet label="Info"> | ||
| <sp-icon slot="icon" size="s" name="ui:InfoMedium"></sp-icon> | ||
| </sp-action-button> | ||
| <sp-action-button quiet label="Magnify"> | ||
| <sp-icon slot="icon" size="s" name="ui:Magnifier"></sp-icon> | ||
| </sp-action-button> | ||
| <sp-action-button quiet label="Star"> | ||
| <sp-icon slot="icon" size="s" name="ui:Star"></sp-icon> | ||
| </sp-action-button> | ||
| </sp-quick-actions> | ||
| </div> | ||
| ``` | ||
|
|
||
| ### Text Only | ||
|
|
||
| When the buttons have text only, be sure to include the `text-only` attribute to ensure correct layout of your actions. | ||
|
|
||
| ```html | ||
| <div | ||
| style="padding: 2em; background-color: var(--spectrum-quickactions-overlay-color, var(--spectrum-alias-background-color-quickactions-overlay));" | ||
| > | ||
| <sp-quick-actions opened text-only> | ||
| <sp-action-button quiet>Edit</sp-action-button> | ||
| <sp-action-button quiet>Copy</sp-action-button> | ||
| <sp-action-button quiet>Delete</sp-action-button> | ||
| </sp-quick-actions> | ||
| </div> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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` | ||
| <slot></slot> | ||
| `; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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', | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }; |
Oops, something went wrong.