feat(button-group): add ButtonGroup pattern

adobe · Jun 1, 2020 · c4d85b5 · c4d85b5
1 parent bbbe391
commit c4d85b5
Show file tree

Hide file tree

Showing 19 changed files with 694 additions and 1 deletion.
diff --git a/karma.conf.js b/karma.conf.js
@@ -28,7 +28,11 @@ module.exports = (config) => {
                 babelConfig: {
                     plugins: ['transform-node-env-inline'],
                 },
-                coverageExclude: ['packages/icons-ui/*'],
+                coverageExclude: [
+                    'packages/*/stories/*',
+                    'packages/icons-ui/*',
+                    'packages/icons-workflow/*',
+                ],
             },
             browsers: ['FirefoxHeadlessCustom'],
             customLaunchers: {

diff --git a/packages/bundle/package.json b/packages/bundle/package.json
@@ -47,6 +47,7 @@
         "@spectrum-web-components/avatar": "^0.2.5",
         "@spectrum-web-components/banner": "^0.2.5",
         "@spectrum-web-components/button": "^0.6.0",
+        "@spectrum-web-components/button-group": "^0.0.1",
         "@spectrum-web-components/card": "^0.3.4",
         "@spectrum-web-components/checkbox": "^0.3.1",
         "@spectrum-web-components/circleloader": "^0.1.5",

diff --git a/packages/bundle/src/index.ts b/packages/bundle/src/index.ts
@@ -14,6 +14,7 @@ export * from '@spectrum-web-components/actionbar';
 export * from '@spectrum-web-components/avatar';
 export * from '@spectrum-web-components/banner';
 export * from '@spectrum-web-components/button';
+export * from '@spectrum-web-components/button-group';
 export * from '@spectrum-web-components/card';
 export * from '@spectrum-web-components/checkbox';
 export * from '@spectrum-web-components/circleloader';

diff --git a/packages/bundle/tsconfig.json b/packages/bundle/tsconfig.json
@@ -12,6 +12,7 @@
         { "path": "../avatar" },
         { "path": "../banner" },
         { "path": "../button" },
+        { "path": "../button-group" },
         { "path": "../card" },
         { "path": "../checkbox" },
         { "path": "../circleloader" },

diff --git a/packages/button-group/README.md b/packages/button-group/README.md
@@ -0,0 +1,108 @@
+## Description
+
+`sp-button-group` delivers a set of buttons in horizontal or vertical orientation while ensuring the appropriate spacing between those buttons.
+
+### Installation
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/button-group?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/button-group)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/button-group?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/button-group)
+
+```
+npm install @spectrum-web-components/button-group
+
+# or
+
+yarn add @spectrum-web-components/button-group
+```
+
+## Horizontal
+
+<sp-icons-medium></sp-icons-medium>
+
+```html
+<sp-button-group>
+    <sp-button>Button 1</sp-button>
+    <sp-button>Longer Button 2</sp-button>
+    <sp-button>Short 3</sp-button>
+</sp-button-group>
+<br />
+<sp-button-group>
+    <sp-action-button>Button 1</sp-action-button>
+    <sp-action-button>Longer Button 2</sp-action-button>
+    <sp-action-button>Short 3</sp-action-button>
+</sp-button-group>
+<br />
+<sp-button-group>
+    <sp-action-button>
+        <sp-icon slot="icon" size="xs" name="ui:Magnifier"></sp-icon>
+        Button 1
+    </sp-action-button>
+    <sp-action-button>
+        <sp-icon slot="icon" size="xs" name="ui:Magnifier"></sp-icon>
+        Longer Button 2
+    </sp-action-button>
+    <sp-action-button>
+        <sp-icon slot="icon" size="xs" name="ui:Magnifier"></sp-icon>
+        Short 3
+    </sp-action-button>
+</sp-button-group>
+<br />
+<sp-button-group>
+    <sp-action-button quiet>
+        <sp-icon slot="icon" size="xs" name="ui:Magnifier"></sp-icon>
+    </sp-action-button>
+    <sp-action-button quiet>
+        <sp-icon slot="icon" size="xs" name="ui:Magnifier"></sp-icon>
+    </sp-action-button>
+    <sp-action-button quiet>
+        <sp-icon slot="icon" size="xs" name="ui:Magnifier"></sp-icon>
+    </sp-action-button>
+</sp-button-group>
+```
+
+## Vertical
+
+```html
+<div
+    style="display: flex; justify-content: space-between; width: 100%; max-width: 500px;"
+>
+    <sp-button-group vertical>
+        <sp-button>Button 1</sp-button>
+        <sp-button>Longer Button 2</sp-button>
+        <sp-button>Short 3</sp-button>
+    </sp-button-group>
+
+    <sp-button-group vertical>
+        <sp-action-button>Button 1</sp-action-button>
+        <sp-action-button>Longer Button 2</sp-action-button>
+        <sp-action-button>Short 3</sp-action-button>
+    </sp-button-group>
+
+    <sp-button-group vertical>
+        <sp-action-button>
+            <sp-icon slot="icon" size="xs" name="ui:Magnifier"></sp-icon>
+            Button 1
+        </sp-action-button>
+        <sp-action-button>
+            <sp-icon slot="icon" size="xs" name="ui:Magnifier"></sp-icon>
+            Longer Button 2
+        </sp-action-button>
+        <sp-action-button>
+            <sp-icon slot="icon" size="xs" name="ui:Magnifier"></sp-icon>
+            Short 3
+        </sp-action-button>
+    </sp-button-group>
+
+    <sp-button-group vertical>
+        <sp-action-button quiet>
+            <sp-icon slot="icon" size="xs" name="ui:Magnifier"></sp-icon>
+        </sp-action-button>
+        <sp-action-button quiet>
+            <sp-icon slot="icon" size="xs" name="ui:Magnifier"></sp-icon>
+        </sp-action-button>
+        <sp-action-button quiet>
+            <sp-icon slot="icon" size="xs" name="ui:Magnifier"></sp-icon>
+        </sp-action-button>
+    </sp-button-group>
+</div>
+```
diff --git a/packages/button-group/package.json b/packages/button-group/package.json
@@ -0,0 +1,47 @@
+{
+    "name": "@spectrum-web-components/button-group",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/button-group"
+    },
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/button-group",
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "version": "0.0.1",
+    "description": "",
+    "main": "lib/index.js",
+    "module": "lib/index.js",
+    "type": "module",
+    "files": [
+        "custom-elements.json",
+        "/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/buttongroup": "^2.0.0",
+        "@spectrum-web-components/button": "^0.6.0"
+    },
+    "dependencies": {
+        "tslib": "^2.0.0"
+    }
+}
diff --git a/packages/button-group/src/button-group.css b/packages/button-group/src/button-group.css
@@ -0,0 +1,18 @@
+/*
+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-button-group.css';
+
+:host([vertical]) ::slotted(sp-action-button) {
+    --spectrum-actionbutton-label-flex-grow: 1;
+    --spectrum-actionbutton-label-text-align: left;
+}
diff --git a/packages/button-group/src/button-group.ts b/packages/button-group/src/button-group.ts
@@ -0,0 +1,39 @@
+/*
+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,
+    LitElement,
+    CSSResultArray,
+    TemplateResult,
+    property,
+} from 'lit-element';
+
+import styles from './button-group.css.js';
+
+/**
+ * @element sp-button-group
+ */
+export class ButtonGroup extends LitElement {
+    public static get styles(): CSSResultArray {
+        return [styles];
+    }
+
+    @property({ type: Boolean, reflect: true })
+    public vertical = false;
+
+    protected render(): TemplateResult {
+        return html`
+            <slot></slot>
+        `;
+    }
+}
diff --git a/packages/button-group/src/index.ts b/packages/button-group/src/index.ts
@@ -0,0 +1,26 @@
+/*
+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 './button-group.js';
+
+import { ButtonGroup } from './button-group.js';
+
+/* istanbul ignore else */
+if (!customElements.get('sp-button-group')) {
+    customElements.define('sp-button-group', ButtonGroup);
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-button-group': ButtonGroup;
+    }
+}
diff --git a/packages/button-group/src/spectrum-button-group.css b/packages/button-group/src/spectrum-button-group.css
@@ -0,0 +1,79 @@
+/* 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-ButtonGroup */
+    display: flex;
+}
+::slotted(sp-action-button),
+::slotted(sp-button),
+::slotted(sp-tool) {
+    /* .spectrum-ButtonGroup .spectrum-ActionButton,
+   * .spectrum-ButtonGroup .spectrum-Button,
+   * .spectrum-ButtonGroup .spectrum-Tool */
+    flex-shrink: 0;
+}
+:host > ::slotted(sp-rule[vertical]) {
+    /* .spectrum-ButtonGroup>.spectrum-Rule--vertical */
+    height: auto;
+    align-self: stretch;
+}
+::slotted(sp-button:not(:first-of-type)) {
+    /* .spectrum-ButtonGroup .spectrum-Button+.spectrum-Button */
+    margin-left: var(
+        --spectrum-buttongroup-button-gap-x,
+        var(--spectrum-global-dimension-static-size-200)
+    );
+}
+::slotted(sp-action-button:not(:first-of-type)) {
+    /* .spectrum-ButtonGroup .spectrum-ActionButton+.spectrum-ActionButton */
+    margin-left: var(
+        --spectrum-actionbuttongroup-text-button-gap-x,
+        var(--spectrum-global-dimension-size-100)
+    );
+}
+::slotted(sp-tool:not(:first-of-type)) {
+    /* .spectrum-ButtonGroup .spectrum-Tool+.spectrum-Tool */
+    margin-left: var(
+        --spectrum-toolgroup-text-button-gap-x,
+        var(--spectrum-global-dimension-size-100)
+    );
+}
+:host([vertical]) {
+    /* .spectrum-ButtonGroup--vertical */
+    display: inline-flex;
+    flex-direction: column;
+}
+:host([vertical]) ::slotted(sp-button:not(:first-of-type)) {
+    /* .spectrum-ButtonGroup--vertical .spectrum-Button+.spectrum-Button */
+    margin-top: var(
+        --spectrum-buttongroup-button-gap-y,
+        var(--spectrum-global-dimension-static-size-200)
+    );
+    margin-left: 0;
+}
+:host([vertical]) ::slotted(sp-action-button:not(:first-of-type)) {
+    /* .spectrum-ButtonGroup--vertical .spectrum-ActionButton+.spectrum-ActionButton */
+    margin-top: var(
+        --spectrum-actionbuttongroup-text-button-gap-y,
+        var(--spectrum-global-dimension-size-100)
+    );
+    margin-left: 0;
+}
+:host([vertical]) ::slotted(sp-tool:not(:first-of-type)) {
+    /* .spectrum-ButtonGroup--vertical .spectrum-Tool+.spectrum-Tool */
+    margin-top: var(
+        --spectrum-toolgroup-text-button-gap-y,
+        var(--spectrum-global-dimension-size-100)
+    );
+    margin-left: 0;
+}