fix(combobox): add combobox pattern

.circleci/config.yml

@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 0ee048a172d6cdf6f7b82def40e024f69c8abb6b
+        default: 3f18b907cc7ccfebda57963ffe10e1c132c17761
     wireit_cache_name:
         type: string
         default: wireit

package.json

@@ -249,7 +249,9 @@
                 "tools/**/*.ts",
                 "!tools/**/*.d.ts",
                 "tasks/esbuild-packages.js",
-                "tasks/ts-tools.js"
+                "tasks/ts-tools.js",
+                "packages/**/exports.json",
+                "tools/**/exports.json"
             ],
             "output": [
                 "packages/**/*.js",

packages/combobox/README.md

@@ -0,0 +1,162 @@
+## Description
+
+An `<sp-combobox>` allows users to filter lists to only the options matching a query. It's composed of a textfield, a picker button, and child menu items.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/combobox?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/combobox)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/combobox?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/combobox)
+
+```
+yarn add @spectrum-web-components/combobox
+```
+
+Import the side effectful registration of `<sp-combobox>` via:
+
+```
+import '@spectrum-web-components/combobox/sp-combobox.js';
+```
+
+When looking to leverage the `Combobox` base class as a type and/or for extension purposes, do so via:
+
+```
+import { Combobox } from '@spectrum-web-components/combobox';
+```
+
+## Sizes
+
+<sp-tabs selected="m" auto label="Size Attribute Options">
+<sp-tab value="s">Small</sp-tab>
+<sp-tab-panel value="s">
+
+```html
+<sp-combobox size="s" label="Color">
+    <sp-menu-item value="red">Red</sp-menu-item>
+    <sp-menu-item value="green">Green</sp-menu-item>
+    <sp-menu-item value="blue">Blue</sp-menu-item>
+</sp-combobox>
+```
+
+</sp-tab-panel>
+<sp-tab value="m">Medium</sp-tab>
+<sp-tab-panel value="m">
+
+```html
+<sp-combobox size="m" label="Color">
+    <sp-menu-item value="red">Red</sp-menu-item>
+    <sp-menu-item value="green">Green</sp-menu-item>
+    <sp-menu-item value="blue">Blue</sp-menu-item>
+</sp-combobox>
+```
+
+</sp-tab-panel>
+<sp-tab value="l">Large</sp-tab>
+<sp-tab-panel value="l">
+
+```html
+<sp-combobox size="l" label="Color">
+    <sp-menu-item value="red">Red</sp-menu-item>
+    <sp-menu-item value="green">Green</sp-menu-item>
+    <sp-menu-item value="blue">Blue</sp-menu-item>
+</sp-combobox>
+```
+
+</sp-tab-panel>
+<sp-tab value="xl">Extra Large</sp-tab>
+<sp-tab-panel value="xl">
+
+```html
+<sp-combobox size="xl" label="Color">
+    <sp-menu-item value="red">Red</sp-menu-item>
+    <sp-menu-item value="green">Green</sp-menu-item>
+    <sp-menu-item value="blue">Blue</sp-menu-item>
+</sp-combobox>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+## Labeling
+
+A combobox must be labeled.
+Typically, you should render a visible label via `<sp-field-label>`.
+For exceptional cases, provide an accessible label via the `label` attribute.
+
+```html
+<sp-field-label for="color">Color</sp-field-label>
+<sp-combobox id="color">
+    <sp-menu-item value="red">Red</sp-menu-item>
+    <sp-menu-item value="green">Green</sp-menu-item>
+    <sp-menu-item value="blue">Blue</sp-menu-item>
+</sp-combobox>
+```
+
+## Providing options
+
+Combobox options are presented as a popup menu.
+Menu items can be provided via markup as `<sp-menu-item>` children, or by assigning an array to the `options` property of an `<sp-combobox>`.
+
+### Options property
+
+Instead of providing `<sp-menu-item>` children, you can assign an array of `ComboboxOptions` to the `options` property, and `<sp-combobox>` will create matching menu items:
+
+```html-no-demo
+<sp-combobox id="color" label="Color"></sp-combobox>
+
+<script>
+    document.getElementById('color').options = [
+        { value: "red", itemText: "Red" },
+        { value: "green", itemText: "Green" },
+        { value: "blue", itemText: "Blue" }
+    ];
+</script>
+```
+
+### Dynamic options
+
+When you replace the `options` Array, or add/remove `<sp-menu-item>` children, the `<sp-combobox>` will detect that change and update its popup menu contents.
+For example, using [Lit](https://lit.dev/):
+
+```ts
+render() {
+    return html`<sp-combobox label="Color" .options=${this.colorOptions}></sp-combobox>`;
+}
+
+mutate() {
+    this.colorOptions = [
+        ...this.colorOptions,
+        { value: 'purple', itemText: 'Purple' }
+    ];
+}
+```
+
+## Autocomplete
+
+The text in an `<sp-combobox>` is editable, and the string the user has typed in will become the `value` of the combobox unless the user selects a different value in the popup menu.
+
+### None
+
+`autocomplete="none"`
+
+The suggested popup menu items will remain the same regardless of the currently-input value.
+Whenever the currently-typed input exactly matches the `value` of a popup menu item, that item is automatically selected.
+
+### List
+
+`autocomplete="list"`
+
+The popup menu items are filtered to only those completing the currently-input value.
+
+## Focus and Accessibility
+
+The combobox supports both mouse and keyboard navigation.
+Mobile behavior is currently unspecified.
+
+When an `<sp-combobox>` is focused, pressing the down arrow moves focus to the first menu item in the popup menu.
+The up and down arrows then move between available menu items.
+
+The escape key dismisses the popup menu if open.
+Otherwise, it clears the combobox's textfield.
+
+The enter key sets the `value` of the focused `<sp-combobox>`.
+If the popup menu is open, the value is set to the `value` of the selected menu item, returning focus back to the combobox's textfield.

packages/combobox/exports.json

@@ -0,0 +1,4 @@
+{
+    "./src/*": "./src/*",
+    "./sp-combobox.js": "./sp-combobox.js"
+}

packages/combobox/package.json

@@ -0,0 +1,77 @@
+{
+    "name": "@spectrum-web-components/combobox",
+    "version": "0.0.1",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/combobox"
+    },
+    "author": "",
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/combobox",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./package.json": "./package.json",
+        "./src/Combobox.js": {
+            "development": "./src/Combobox.dev.js",
+            "default": "./src/Combobox.js"
+        },
+        "./src/combobox.css.js": "./src/combobox.css.js",
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./sp-combobox.js": {
+            "development": "./sp-combobox.dev.js",
+            "default": "./sp-combobox.js"
+        }
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "*.d.ts",
+        "*.js",
+        "*.js.map",
+        "/src/",
+        "custom-elements.json"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@spectrum-web-components/action-button": "^0.40.1",
+        "@spectrum-web-components/base": "^0.40.1",
+        "@spectrum-web-components/icon": "^0.40.1",
+        "@spectrum-web-components/icons-ui": "^0.40.1",
+        "@spectrum-web-components/menu": "^0.40.1",
+        "@spectrum-web-components/overlay": "^0.40.1",
+        "@spectrum-web-components/picker-button": "^0.40.1",
+        "@spectrum-web-components/popover": "^0.40.1",
+        "@spectrum-web-components/textfield": "^0.40.1"
+    },
+    "devDependencies": {
+        "@spectrum-css/combobox": "^2.0.46"
+    },
+    "types": "./src/index.d.ts",
+    "sideEffects": [
+        "./sp-*.js",
+        "./sp-*.ts"
+    ]
+}

packages/combobox/sp-combobox.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 { Combobox } from './src/Combobox.js';
+
+customElements.define('sp-combobox', Combobox);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-combobox': Combobox;
+    }
+}