feat(color-handle): add color-handle pattern

adobe · Mar 5, 2021 · e3856d8 · e3856d8
1 parent e2f0d15
commit e3856d8
Show file tree

Hide file tree

Showing 12 changed files with 636 additions and 0 deletions.
diff --git a/packages/color-handle/README.md b/packages/color-handle/README.md
@@ -0,0 +1,45 @@
+## Description
+
+The `<sp-color-handle>` is used to select a colour on an `<sp-color-area>`, `<sp-color-slider>`, or `<sp-color-wheel>`. It functions similarly to the handle on an `<sp-slider>`.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/color-handle?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/color-handle)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/color-handle?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/color-handle)
+
+```
+yarn add @spectrum-web-components/color-handle
+```
+
+Import the side effectful registration of `<sp-color-handle>` via:
+
+```
+import '@spectrum-web-components/color-handle/sp-color-handle.js';
+```
+
+When looking to leverage the `ColorHandle` base class as a type and/or for extension purposes, do so via:
+
+```
+import { ColorHandle } from '@spectrum-web-components/color-handle';
+```
+
+## Standard
+
+```html
+<sp-color-handle></sp-color-handle>
+```
+
+## Disabled
+
+```html
+<sp-color-handle disabled></sp-color-handle>
+```
+
+## Open
+
+When the `<sp-color-handle>` uses the `open` property, the `<sp-color-loupe>` component can be used above the handle to show the selected color that would otherwise be covered by a mouse, stylus, or finger on the down/touch state. This can be customized to appear only on finger-input, or always appear regardless of input type.
+
+```html
+<div style="height: var(--spectrum-global-dimension-size-900)"></div>
+<sp-color-handle open></sp-color-handle>
+```
diff --git a/packages/color-handle/package.json b/packages/color-handle/package.json
@@ -0,0 +1,57 @@
+{
+    "name": "@spectrum-web-components/color-handle",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/color-handle"
+    },
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/color-handle",
+    "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-color-handle": "./sp-color-handle.js",
+        "./sp-color-handle.js": "./sp-color-handle.js"
+    },
+    "files": [
+        "custom-elements.json",
+        "*.d.ts",
+        "*.js",
+        "*.js.map",
+        "/src/"
+    ],
+    "sideEffects": [
+        "./sp-*.js",
+        "./sp-*.ts"
+    ],
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "author": "",
+    "license": "Apache-2.0",
+    "devDependencies": {
+        "@spectrum-css/colorhandle": "^1.0.0-beta.3"
+    },
+    "dependencies": {
+        "@spectrum-web-components/base": "^0.3.0",
+        "@spectrum-web-components/color-loupe": "^0.0.1",
+        "tslib": "^2.0.0"
+    }
+}
diff --git a/packages/color-handle/sp-color-handle.ts b/packages/color-handle/sp-color-handle.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 { ColorHandle } from './src/ColorHandle.js';
+
+customElements.define('sp-color-handle', ColorHandle);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-color-handle': ColorHandle;
+    }
+}
diff --git a/packages/color-handle/src/ColorHandle.ts b/packages/color-handle/src/ColorHandle.ts
@@ -0,0 +1,83 @@
+/*
+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,
+    PropertyValues,
+} from '@spectrum-web-components/base';
+
+import '@spectrum-web-components/color-loupe/sp-color-loupe.js';
+import { HSL, HSLA, HSV, HSVA, RGB, RGBA, TinyColor } from '@ctrl/tinycolor';
+import styles from './color-handle.css.js';
+
+export type ColorValue =
+    | string
+    | number
+    | TinyColor
+    | HSVA
+    | HSV
+    | RGB
+    | RGBA
+    | HSL
+    | HSLA;
+
+/**
+ * @element sp-color-handle
+ */
+export class ColorHandle extends SpectrumElement {
+    public static get styles(): CSSResultArray {
+        return [styles];
+    }
+
+    @property({ type: Boolean, reflect: true })
+    public disabled = false;
+
+    @property({ type: Boolean, reflect: true })
+    public open = false;
+
+    @property({ type: String })
+    public color = 'rgba(255, 0, 0, 0.5)';
+
+    private handlePointerdown(event: PointerEvent): void {
+        // Commenting this out for now until I have a proper way to test it
+        if (event.pointerType === 'touch') {
+            this.open = true;
+        }
+        this.setPointerCapture(event.pointerId);
+    }
+
+    private handlePointerup(event: PointerEvent): void {
+        this.open = false;
+        this.releasePointerCapture(event.pointerId);
+    }
+
+    protected render(): TemplateResult {
+        return html`
+            <div class="color" style="background-color: ${this.color}"></div>
+            <sp-color-loupe
+                color=${this.color}
+                ?open=${this.open && !this.disabled}
+            ></sp-color-loupe>
+        `;
+    }
+
+    protected firstUpdated(changed: PropertyValues): void {
+        super.firstUpdated(changed);
+        this.addEventListener('pointerdown', this.handlePointerdown);
+        this.addEventListener('pointerup', this.handlePointerup);
+        this.addEventListener('pointercancel', this.handlePointerup);
+    }
+}
diff --git a/packages/color-handle/src/color-handle.css b/packages/color-handle/src/color-handle.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-color-handle.css';
diff --git a/packages/color-handle/src/index.ts b/packages/color-handle/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 './ColorHandle.js';