@spectrum-css/combobox - npm Package Compare versions

Comparing version 2.0.12 to 2.0.13

CHANGELOG.md

@@ -6,14 +6,21 @@ # Change Log
 
-<a name="2.0.12"></a>
-## 2.0.12
-🗓 2023-05-30 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.11...@spectrum-css/combobox@2.0.12)
+<a name="2.0.13"></a>
+##2.0.13
+🗓
[phone] • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.12...@spectrum-css/combobox@2.0.13)
 
 **Note:** Version bump only for package @spectrum-css/combobox
 
+<a name="2.0.12"></a>
 
+## 2.0.12
 
+🗓 2023-05-30 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.11...@spectrum-css/combobox@2.0.12)
 
+**Note:** Version bump only for package @spectrum-css/combobox
 
 <a name="2.0.11"></a>
+
 ## 2.0.11
+
 🗓 2023-05-23 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.10...@spectrum-css/combobox@2.0.11)
@@ -23,8 +30,6 @@
 
+<a name="2.0.10"></a>
 
+## 2.0.10
 
-
-
-<a name="2.0.10"></a>
-## 2.0.10
 🗓 2023-05-23 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.9...@spectrum-css/combobox@2.0.10)
@@ -34,8 +39,6 @@
 
+<a name="2.0.9"></a>
 
+## 2.0.9
 
-
-
-<a name="2.0.9"></a>
-## 2.0.9
 🗓 2023-05-22 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.8...@spectrum-css/combobox@2.0.9)
@@ -45,8 +48,6 @@
 
+<a name="2.0.8"></a>
 
+## 2.0.8
 
-
-
-<a name="2.0.8"></a>
-## 2.0.8
 🗓 2023-05-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.7...@spectrum-css/combobox@2.0.8)
@@ -56,10 +57,8 @@
 
-* **textfield, stepper:** button padding and focus indicator ([#1863](https://github.com/adobe/spectrum-css/issues/1863)) ([7963b85](https://github.com/adobe/spectrum-css/commit/7963b85))
+- **textfield, stepper:** button padding and focus indicator ([#1863](https://github.com/adobe/spectrum-css/issues/1863)) ([7963b85](https://github.com/adobe/spectrum-css/commit/7963b85))
 
+<a name="2.0.7"></a>
 
+## 2.0.7
 
-
-
-<a name="2.0.7"></a>
-## 2.0.7
 🗓 2023-05-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.6...@spectrum-css/combobox@2.0.7)
@@ -69,8 +68,6 @@
 
+<a name="2.0.6"></a>
 
+## 2.0.6
 
-
-
-<a name="2.0.6"></a>
-## 2.0.6
 🗓 2023-05-17 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.5...@spectrum-css/combobox@2.0.6)
@@ -80,8 +77,6 @@
 
+<a name="2.0.5"></a>
 
+## 2.0.5
 
-
-
-<a name="2.0.5"></a>
-## 2.0.5
 🗓 2023-05-11 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.4...@spectrum-css/combobox@2.0.5)
@@ -91,8 +86,6 @@
 
+<a name="2.0.4"></a>
 
+## 2.0.4
 
-
-
-<a name="2.0.4"></a>
-## 2.0.4
 🗓 2023-05-10 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.3...@spectrum-css/combobox@2.0.4)
@@ -102,8 +95,6 @@
 
+<a name="2.0.3"></a>
 
+## 2.0.3
 
-
-
-<a name="2.0.3"></a>
-## 2.0.3
 🗓 2023-05-10 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.2...@spectrum-css/combobox@2.0.3)
@@ -113,8 +104,6 @@
 
+<a name="2.0.2"></a>
 
+## 2.0.2
 
-
-
-<a name="2.0.2"></a>
-## 2.0.2
 🗓 2023-05-08 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.1...@spectrum-css/combobox@2.0.2)
@@ -124,8 +113,6 @@
 
+<a name="2.0.1"></a>
 
+## 2.0.1
 
-
-
-<a name="2.0.1"></a>
-## 2.0.1
 🗓 2023-05-04 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.0...@spectrum-css/combobox@2.0.1)
@@ -135,33 +122,31 @@
 
+<a name="2.0.0"></a>
 
+# 2.0.0
 
-
-
-<a name="2.0.0"></a>
-# 2.0.0
 🗓 2023-05-02 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@1.0.16...@spectrum-css/combobox@2.0.0)
 
-* fix(textfield, combobox)!: adjust padding calculations (#1803) ([09c1bdc](https://github.com/adobe/spectrum-css/commit/09c1bdc)), closes [#1803](https://github.com/adobe/spectrum-css/issues/1803)
+- fix(textfield, combobox)!: adjust padding calculations (#1803) ([09c1bdc](https://github.com/adobe/spectrum-css/commit/09c1bdc)), closes [#1803](https://github.com/adobe/spectrum-css/issues/1803)
 
-
 ### 🛑 BREAKING CHANGES
 
-* removes `--mod-combobox-icon-size`, `--mod-combobox-spacing-block-start-to-border`, `--mod-combobox-spacing-inline-start-to-textfield`, `--mod-combobox-spacing-block-start-edge-to-textfield`, `--mod-combobox-spacing-block-end-edge-to-textfield`, and `--mod-combobox-spacing-inline-start-edge-to-textfield`.
+- removes `--mod-combobox-icon-size`, `--mod-combobox-spacing-block-start-to-border`, `--mod-combobox-spacing-inline-start-to-textfield`, `--mod-combobox-spacing-block-start-edge-to-textfield`, `--mod-combobox-spacing-block-end-edge-to-textfield`, and `--mod-combobox-spacing-inline-start-edge-to-textfield`.
 
 Additionally:
-* fix: exclude border width from padding with text inputs + more fixes
 
-- Textfield and Combobox: exclude border width from padding calculations
+- fix: exclude border width from padding with text inputs + more fixes
+
+* Textfield and Combobox: exclude border width from padding calculations
   because most of the to-edge tokens include the border, and the values
   were 1px larger than they should have been.
-- Textfield and Combobox: fix corner radius of focus indicator when
+* Textfield and Combobox: fix corner radius of focus indicator when
   using a larger border radius (e.g. try setting a --mod border width
   of 5px; the calculation adding the border width was incorrect)
-- Combobox: adjust styles so custom property for border width is
+* Combobox: adjust styles so custom property for border width is
   correctly overriding everything from its sub-components. Previously
   using --mod-combobox-border-width had no effect.
-- Combobox: simplify/remove some custom properties related to those
+* Combobox: simplify/remove some custom properties related to those
   fixes and quiet variant.
 
-* fix(combobox): border-radius should not increase for t-shirt sizes
+- fix(combobox): border-radius should not increase for t-shirt sizes
 
@@ -171,3 +156,3 @@ Per design feedback, the border-radius value should not be increasing
 
-* fix(combobox): calculate the button x-offset on quiet
+- fix(combobox): calculate the button x-offset on quiet
 
@@ -179,3 +164,3 @@ Use a corrected calculation of the x-offset for the picker button on the
 
-* fix(combobox): mods update after changes
+- fix(combobox): mods update after changes
 
@@ -185,3 +170,3 @@ Regenerate mods after fixes that have removed and renamed some
 
-* feat(textfield): add 'size' control to storybook
+- feat(textfield): add 'size' control to storybook
 
@@ -191,8 +176,6 @@ Add "t-shirt" size control to Textfield stories. The arg was already
 
+<a name="1.0.16"></a>
 
+## 1.0.16
 
-
-
-<a name="1.0.16"></a>
-## 1.0.16
 🗓 2023-04-26 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@1.0.15...@spectrum-css/combobox@1.0.16)
@@ -202,8 +185,6 @@
 
+<a name="1.0.15"></a>
 
+## 1.0.15
 
-
-
-<a name="1.0.15"></a>
-## 1.0.15
 🗓 2023-04-25 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@1.0.13...@spectrum-css/combobox@1.0.15)
@@ -213,8 +194,6 @@
 
+<a name="1.0.14"></a>
 
+## 1.0.14
 
-
-
-<a name="1.0.14"></a>
-## 1.0.14
 🗓 2023-04-25 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@1.0.13...@spectrum-css/combobox@1.0.14)
@@ -224,8 +203,6 @@
 
+<a name="1.0.13"></a>
 
+## 1.0.13
 
-
-
-<a name="1.0.13"></a>
-## 1.0.13
 🗓 2023-04-25 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@1.0.12...@spectrum-css/combobox@1.0.13)
@@ -235,8 +212,6 @@
 
+<a name="1.0.12"></a>
 
+## 1.0.12
 
-
-
-<a name="1.0.12"></a>
-## 1.0.12
 🗓 2023-04-25 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@1.0.11...@spectrum-css/combobox@1.0.12)
@@ -246,8 +221,6 @@
 
+<a name="1.0.11"></a>
 
+## 1.0.11
 
-
-
-<a name="1.0.11"></a>
-## 1.0.11
 🗓 2023-04-21 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@1.0.10...@spectrum-css/combobox@1.0.11)
@@ -257,8 +230,6 @@
 
+<a name="1.0.10"></a>
 
+## 1.0.10
 
-
-
-<a name="1.0.10"></a>
-## 1.0.10
 🗓 2023-04-20 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@1.0.9...@spectrum-css/combobox@1.0.10)
@@ -268,8 +239,6 @@
 
+<a name="1.0.9"></a>
 
+## 1.0.9
 
-
-
-<a name="1.0.9"></a>
-## 1.0.9
 🗓 2023-04-17 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@1.0.8...@spectrum-css/combobox@1.0.9)
@@ -279,8 +248,6 @@
 
+<a name="1.0.8"></a>
 
+## 1.0.8
 
-
-
-<a name="1.0.8"></a>
-## 1.0.8
 🗓 2023-04-17 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@1.0.6...@spectrum-css/combobox@1.0.8)
@@ -290,8 +257,6 @@
 
+<a name="1.0.7"></a>
 
+## 1.0.7
 
-
-
-<a name="1.0.7"></a>
-## 1.0.7
 🗓 2023-04-14 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@1.0.6...@spectrum-css/combobox@1.0.7)
@@ -301,8 +266,6 @@
 
+<a name="1.0.6"></a>
 
+## 1.0.6
 
-
-
-<a name="1.0.6"></a>
-## 1.0.6
 🗓 2023-04-06 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@1.0.4...@spectrum-css/combobox@1.0.6)
@@ -312,8 +275,6 @@
 
+<a name="1.0.5"></a>
 
+## 1.0.5
 
-
-
-<a name="1.0.5"></a>
-## 1.0.5
 🗓 2023-04-04 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@1.0.4...@spectrum-css/combobox@1.0.5)
@@ -323,8 +284,6 @@
 
+<a name="1.0.4"></a>
 
+## 1.0.4
 
-
-
-<a name="1.0.4"></a>
-## 1.0.4
 🗓 2023-04-03 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@1.0.3...@spectrum-css/combobox@1.0.4)
@@ -334,8 +293,6 @@
 
+<a name="1.0.3"></a>
 
+## 1.0.3
 
-
-
-<a name="1.0.3"></a>
-## 1.0.3
 🗓 2023-03-31 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@1.0.2...@spectrum-css/combobox@1.0.3)
@@ -345,8 +302,6 @@
 
+<a name="1.0.2"></a>
 
+## 1.0.2
 
-
-
-<a name="1.0.2"></a>
-## 1.0.2
 🗓 2023-03-30 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@1.0.1...@spectrum-css/combobox@1.0.2)
@@ -356,10 +311,8 @@
 
+<a name="1.0.1"></a>
 
+## 1.0.1
 
-
-
-<a name="1.0.1"></a>
-## 1.0.1
 🗓 2023-03-28
 
 **Note:** Version bump only for package @spectrum-css/combobox

gulpfile.js

@@ -1,1 +0,1 @@
-module.exports = require('@spectrum-css/component-builder-simple');
+module.exports = require("@spectrum-css/component-builder-simple");

metadata/mods.md

@@ -1,52 +0,55 @@
-| Modifiable Custom Properties |
-| --- |
-| `--mod-combobox-alert-icon-color` |
-| `--mod-combobox-background-color-default` |
-| `--mod-combobox-background-color-disabled` |
-| `--mod-combobox-background-color-focus` |
-| `--mod-combobox-background-color-focus-hover` |
-| `--mod-combobox-background-color-hover` |
-| `--mod-combobox-background-color-key-focus` |
-| `--mod-combobox-block-size` |
-| `--mod-combobox-block-spacing-edge-to-alert` |
+| Modifiable Custom Properties                           |
+| ------------------------------------------------------ |
+| `--mod-combobox-alert-icon-color`                      |
+| `--mod-combobox-background-color-default`              |
+| `--mod-combobox-background-color-disabled`             |
+| `--mod-combobox-background-color-focus`                |
+| `--mod-combobox-background-color-focus-hover`          |
+| `--mod-combobox-background-color-hover`                |
+| `--mod-combobox-background-color-key-focus`            |
+| `--mod-combobox-block-size`                            |
+| `--mod-combobox-block-spacing-edge-to-alert`           |
 | `--mod-combobox-block-spacing-edge-to-progress-circle` |
-| `--mod-combobox-border-color-default` |
-| `--mod-combobox-border-color-disabled` |
-| `--mod-combobox-border-color-focus` |
-| `--mod-combobox-border-color-focus-hover` |
-| `--mod-combobox-border-color-hover` |
-| `--mod-combobox-border-color-invalid-default` |
-| `--mod-combobox-border-color-invalid-focus` |
-| `--mod-combobox-border-color-invalid-focus-hover` |
-| `--mod-combobox-border-color-invalid-hover` |
-| `--mod-combobox-border-color-invalid-key-focus` |
-| `--mod-combobox-border-color-key-focus` |
-| `--mod-combobox-border-radius` |
-| `--mod-combobox-border-width` |
-| `--mod-combobox-button-inline-offset` |
-| `--mod-combobox-button-width` |
-| `--mod-combobox-focus-indicator-color` |
-| `--mod-combobox-focus-indicator-gap` |
-| `--mod-combobox-focus-indicator-thickness` |
-| `--mod-combobox-font-color-default` |
-| `--mod-combobox-font-color-disabled` |
-| `--mod-combobox-font-color-focus` |
-| `--mod-combobox-font-color-focus-hover` |
-| `--mod-combobox-font-color-hover` |
-| `--mod-combobox-font-color-key-focus` |
-| `--mod-combobox-font-color-placeholder` |
-| `--mod-combobox-font-family` |
-| `--mod-combobox-font-size` |
-| `--mod-combobox-font-style` |
-| `--mod-combobox-font-weight` |
-| `--mod-combobox-icon-size` |
-| `--mod-combobox-inline-size` |
-| `--mod-combobox-line-height` |
-| `--mod-combobox-min-inline-size` |
-| `--mod-combobox-spacing-block-end-edge-to-text` |
-| `--mod-combobox-spacing-block-start-edge-to-text` |
-| `--mod-combobox-spacing-edge-to-menu` |
-| `--mod-combobox-spacing-inline-end-edge-to-text` |
-| `--mod-combobox-spacing-inline-icon-to-button` |
-| `--mod-combobox-spacing-inline-start-edge-to-text` |
-| `--mod-combobox-spacing-label-to-combobox` |
+| `--mod-combobox-border-color-default`                  |
+| `--mod-combobox-border-color-disabled`                 |
+| `--mod-combobox-border-color-focus`                    |
+| `--mod-combobox-border-color-focus-hover`              |
+| `--mod-combobox-border-color-hover`                    |
+| `--mod-combobox-border-color-invalid-default`          |
+| `--mod-combobox-border-color-invalid-focus`            |
+| `--mod-combobox-border-color-invalid-focus-hover`      |
+| `--mod-combobox-border-color-invalid-hover`            |
+| `--mod-combobox-border-color-invalid-key-focus`        |
+| `--mod-combobox-border-color-key-focus`                |
+| `--mod-combobox-border-radius`                         |
+| `--mod-combobox-border-width`                          |
+| `--mod-combobox-button-inline-offset`                  |
+| `--mod-combobox-button-width`                          |
+| `--mod-combobox-focus-indicator-color`                 |
+| `--mod-combobox-focus-indicator-gap`                   |
+| `--mod-combobox-focus-indicator-thickness`             |
+| `--mod-combobox-font-color-default`                    |
+| `--mod-combobox-font-color-disabled`                   |
+| `--mod-combobox-font-color-focus`                      |
+| `--mod-combobox-font-color-focus-hover`                |
+| `--mod-combobox-font-color-hover`                      |
+| `--mod-combobox-font-color-key-focus`                  |
+| `--mod-combobox-font-color-placeholder`                |
+| `--mod-combobox-font-family`                           |
+| `--mod-combobox-font-size`                             |
+| `--mod-combobox-font-style`                            |
+| `--mod-combobox-font-weight`                           |
+| `--mod-combobox-icon-size`                             |
+| `--mod-combobox-inline-size`                           |
+| `--mod-combobox-line-height`                           |
+| `--mod-combobox-min-inline-size`                       |
+| `--mod-combobox-spacing-block-end-edge-to-text`        |
+| `--mod-combobox-spacing-block-start-edge-to-text`      |
+| `--mod-combobox-spacing-edge-to-menu`                  |
+| `--mod-combobox-spacing-inline-end-edge-to-text`       |
+| `--mod-combobox-spacing-inline-icon-to-button`         |
+| `--mod-combobox-spacing-inline-start-edge-to-text`     |
+| `--mod-combobox-spacing-label-to-combobox`             |
+| `--mod-textfield-focus-indicator-color`                |
+| `--mod-textfield-focus-indicator-gap`                  |
+| `--mod-textfield-focus-indicator-width`                |

package.json

 {
   "name": "@spectrum-css/combobox",
-  "version": "2.0.12",
+  "version": "2.0.13",
   "description": "The Spectrum CSS combobox component",
@@ -26,9 +26,9 @@ "license": "Apache-2.0",
   "devDependencies": {
-    "@spectrum-css/component-builder-simple": "^2.0.13",
-    "@spectrum-css/menu": "^4.0.38",
-    "@spectrum-css/pickerbutton": "^3.0.23",
-    "@spectrum-css/popover": "^6.0.50",
-    "@spectrum-css/progresscircle": "^2.0.44",
-    "@spectrum-css/textfield": "^5.1.10",
-    "@spectrum-css/tokens": "^10.1.1",
+    "@spectrum-css/component-builder-simple": "^2.0.14",
+    "@spectrum-css/menu": "^4.0.39",
+    "@spectrum-css/pickerbutton": "^3.0.24",
+    "@spectrum-css/popover": "^6.0.51",
+    "@spectrum-css/progresscircle": "^2.0.45",
+    "@spectrum-css/textfield": "^5.1.11",
+    "@spectrum-css/tokens": "^10.1.2",
     "gulp": "^4.0.0"
@@ -39,3 +39,3 @@ },
   },
-  "gitHead": "6a5ad61b36c3ef6e5c90c4db14ce67af7d57b60d"
+  "gitHead": "95ab46589a793fa311efb16a47e07e721d2d8574"
 }

README.md

 # @spectrum-css/combobox
+
 > The Spectrum CSS combobox component
@@ -3,0 +4,0 @@

stories/combobox.stories.js

 // Import the component markup template
 import { Template } from "./template";
 
-import { Template as Menu } from '@spectrum-css/menu/stories/template.js';
+import { Template as Menu } from "@spectrum-css/menu/stories/template.js";
 
 export default {
-  title: "Combobox",
-  description: "Comboboxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.",
-  component: "Combobox",
-  argTypes: {
-    size: {
-      name: "Size",
-      type: { name: "string", required: true },
-      table: {
-        type: { summary: "string" },
-        category: "Component",
-      },
-      options: ["s", "m", "l", "xl"],
-      control: "select"
-    },
-    isOpen: {
-      name: "Open",
-      type: { name: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        category: "State",
-      },
-      control: "boolean",
-    },
-    isQuiet: {
-      name: "Quiet styling",
-      type: { name: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        category: "Component",
-      },
-      control: "boolean",
-    },
-    isValid: {
-      name: "Valid",
-      type: { name: "boolean" },
-      table: {
-        disable: true,
-        type: { summary: "boolean" },
-        category: "State",
-      },
-      control: "boolean",
-      if: { arg: 'isInvalid', truthy: false },
-    },
-    isInvalid: {
-      name: "Invalid",
-      type: { name: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        category: "State",
-      },
-      control: "boolean",
-      if: { arg: 'isValid', truthy: false },
-    },
-    isFocused: {
-      name: "Focused",
-      type: { name: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        category: "State",
-      },
-      control: "boolean",
-    },
-    isKeyboardFocused: {
-      name: "Keyboard Focused",
-      type: { name: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        category: "State",
-      },
-      control: "boolean",
-    },
-    isLoading: {
-      name: "Loading",
-      type: { name: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        category: "State",
-      },
-      control: "boolean",
-    },
-    isDisabled: {
-      name: "Disabled",
-      type: { name: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        category: "State",
-      },
-      control: "boolean",
-    },
-    content: { table: { disable: true } },
-  },
-  args: {
-    rootClass: "spectrum-Combobox",
-    size: "m",
-    isOpen: true,
-    isQuiet: false,
-    isInvalid: false,
-    isValid: false,
-    isFocused: false,
-    isKeyboardFocused: false,
-    isLoading: false,
-    isDisabled: false,
-  },
-  parameters: {
-    actions: {
-      handles: []
-    },
-    status: {
-      type: process.env.MIGRATED_PACKAGES.includes('combobox') ? 'migrated' : undefined
-    }
-  }
+	title: "Combobox",
+	description:
+		"Comboboxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.",
+	component: "Combobox",
+	argTypes: {
+		size: {
+			name: "Size",
+			type: { name: "string", required: true },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			options: ["s", "m", "l", "xl"],
+			control: "select",
+		},
+		isOpen: {
+			name: "Open",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+		},
+		isQuiet: {
+			name: "Quiet styling",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+			},
+			control: "boolean",
+		},
+		isValid: {
+			name: "Valid",
+			type: { name: "boolean" },
+			table: {
+				disable: true,
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+			if: { arg: "isInvalid", truthy: false },
+		},
+		isInvalid: {
+			name: "Invalid",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+			if: { arg: "isValid", truthy: false },
+		},
+		isFocused: {
+			name: "Focused",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+		},
+		isKeyboardFocused: {
+			name: "Keyboard Focused",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+		},
+		isLoading: {
+			name: "Loading",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+		},
+		isDisabled: {
+			name: "Disabled",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+		},
+		content: { table: { disable: true } },
+	},
+	args: {
+		rootClass: "spectrum-Combobox",
+		size: "m",
+		isOpen: true,
+		isQuiet: false,
+		isInvalid: false,
+		isValid: false,
+		isFocused: false,
+		isKeyboardFocused: false,
+		isLoading: false,
+		isDisabled: false,
+	},
+	parameters: {
+		actions: {
+			handles: [],
+		},
+		status: {
+			type: process.env.MIGRATED_PACKAGES.includes("combobox")
+				? "migrated"
+				: undefined,
+		},
+	},
 };
@@ -122,29 +125,29 @@
 Default.args = {
-  content: [
-    Menu({
-      role: "listbox",
-      subrole: "option",
-      isSelectable: true,
-      items: [
-        {
-          label: "Ballard",
-          isSelected: true,
-          isChecked: true,
-        },
-        {
-          label: "Fremont",
-        },
-        {
-          label: "Greenwood",
-        },
-        {
-          type: "divider",
-        },
-        {
-          label: "United States of America",
-          isDisabled: true,
-        },
-      ],
-    }),
-  ],
+	content: [
+		Menu({
+			role: "listbox",
+			subrole: "option",
+			isSelectable: true,
+			items: [
+				{
+					label: "Ballard",
+					isSelected: true,
+					isChecked: true,
+				},
+				{
+					label: "Fremont",
+				},
+				{
+					label: "Greenwood",
+				},
+				{
+					type: "divider",
+				},
+				{
+					label: "United States of America",
+					isDisabled: true,
+				},
+			],
+		}),
+	],
 };

stories/template.js

@@ -1,9 +0,9 @@
-import { html } from 'lit-html';
-import { classMap } from 'lit-html/directives/class-map.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { html } from "lit-html";
+import { classMap } from "lit-html/directives/class-map.js";
+import { ifDefined } from "lit-html/directives/if-defined.js";
 
-import { Template as Menu } from '@spectrum-css/menu/stories/template.js';
-import { Template as TextField } from '@spectrum-css/textfield/stories/template.js';
-import { Template as Popover } from '@spectrum-css/popover/stories/template.js';
-import { Template as PickerButton } from '@spectrum-css/pickerbutton/stories/template.js';
+import { Template as Menu } from "@spectrum-css/menu/stories/template.js";
+import { Template as TextField } from "@spectrum-css/textfield/stories/template.js";
+import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
+import { Template as PickerButton } from "@spectrum-css/pickerbutton/stories/template.js";
 
@@ -15,121 +15,131 @@ import { useArgs, useGlobals } from "@storybook/client-api";
 export const Template = ({
-  rootClass = "spectrum-Combobox",
-  id,
-  content,
-  customClasses = [],
-  size = "m",
-  isOpen = true,
-  isInvalid = false,
-  isValid = false,
-  isQuiet = false,
-  isDisabled = false,
-  isFocused = false,
-  isKeyboardFocused = false,
-  isLoading = false,
-  isRequired = false,
-  readOnly = false,
-  ...globals
+	rootClass = "spectrum-Combobox",
+	id,
+	content,
+	customClasses = [],
+	size = "m",
+	isOpen = true,
+	isInvalid = false,
+	isValid = false,
+	isQuiet = false,
+	isDisabled = false,
+	isFocused = false,
+	isKeyboardFocused = false,
+	isLoading = false,
+	isRequired = false,
+	readOnly = false,
+	...globals
 }) => {
-  const [_, updateArgs] = useArgs();
-  const [{lang}] = useGlobals();
+	const [_, updateArgs] = useArgs();
+	const [{ lang }] = useGlobals();
 
-  const { express } = globals;
+	const { express } = globals;
 
-  try {
-    if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
-    else import(/* webpackPrefetch: true */ "../themes/express.css");
-  } catch (e) {
-    console.warn(e);
-  }
+	try {
+		if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
+		else import(/* webpackPrefetch: true */ "../themes/express.css");
+	} catch (e) {
+		console.warn(e);
+	}
 
-  return html`
-    <div
-      class=${classMap({
-        [rootClass]: true,
-        [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined",
-        'is-open': !isDisabled && isOpen,
-        [`${rootClass}--quiet`]: isQuiet,
-        'is-invalid': !isDisabled && isInvalid,
-        'is-valid': !isDisabled && isValid,
-        'is-focused': !isDisabled && isFocused,
-        'is-keyboardFocused': !isDisabled && isKeyboardFocused,
-        'is-loading': isLoading,
-        'is-disabled': isDisabled,
-        ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-      })}
-      id=${ifDefined(id)}
-    >
-      ${[
-        TextField({
-          ...globals,
-          size,
-          isQuiet,
-          isDisabled,
-          isValid,
-          isInvalid,
-          isFocused,
-          isKeyboardFocused,
-          customClasses: [
-            `${rootClass}-textfield`,
-            ...(isLoading ? ['is-loading'] : []),
-          ],
-          customInputClasses: [`${rootClass}-input`],
-          isLoading,
-          customProgressCircleClasses: ['spectrum-Combobox-progress-circle'],
-          placeholder: 'Type here',
-          name: 'field',
-          value: globals.selectedDay ? new Date(globals.selectedDay).toLocaleDateString(lang) : undefined,
-          onclick: function () {
-            if (!isOpen) updateArgs({ isOpen: true });
-          }
-        }),
-        PickerButton({
-          ...globals,
-          customClasses: [`${rootClass}-button`],
-          size,
-          iconType: 'workflow',
-          iconName: 'ChevronDown200',
-          isQuiet,
-          isOpen,
-          isInvalid,
-          isValid,
-          isFocused,
-          isKeyboardFocused,
-          isDisabled,
-          position: 'right',
-          onclick: function () {
-            updateArgs({ isOpen: !isOpen });
-          }
-        }),
-        Popover({
-          ...globals,
-          isOpen: isOpen && !isDisabled,
-          withTip: false,
-          position: 'bottom',
-          isQuiet,
-          customStyles: isOpen ? {
-            position: 'absolute',
-            top: '100%',
-            left: '0',
-            width: '100%',
-          } : {},
-          content: [
-            Menu({
-              ...globals,
-              items: [{
-                label: 'Ballard'
-              },{
-                label: 'Fremont'
-              }, {
-                label: 'Greenwood'
-              }, {
-                label: 'United States of America',
-                isDisabled: true,
-              }]
-            })
-          ]
-        }),
-      ]}
-    </div>
-  `;
-}
+	return html`
+		<div
+			class=${classMap({
+				[rootClass]: true,
+				[`${rootClass}--size${size?.toUpperCase()}`]:
+					typeof size !== "undefined",
+				"is-open": !isDisabled && isOpen,
+				[`${rootClass}--quiet`]: isQuiet,
+				"is-invalid": !isDisabled && isInvalid,
+				"is-valid": !isDisabled && isValid,
+				"is-focused": !isDisabled && isFocused,
+				"is-keyboardFocused": !isDisabled && isKeyboardFocused,
+				"is-loading": isLoading,
+				"is-disabled": isDisabled,
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+			id=${ifDefined(id)}
+		>
+			${[
+				TextField({
+					...globals,
+					size,
+					isQuiet,
+					isDisabled,
+					isValid,
+					isInvalid,
+					isFocused,
+					isKeyboardFocused,
+					customClasses: [
+						`${rootClass}-textfield`,
+						...(isLoading ? ["is-loading"] : []),
+					],
+					customInputClasses: [`${rootClass}-input`],
+					isLoading,
+					customProgressCircleClasses: ["spectrum-Combobox-progress-circle"],
+					placeholder: "Type here",
+					name: "field",
+					value: globals.selectedDay
+						? new Date(globals.selectedDay).toLocaleDateString(lang)
+						: undefined,
+					onclick: function () {
+						if (!isOpen) updateArgs({ isOpen: true });
+					},
+				}),
+				PickerButton({
+					...globals,
+					customClasses: [`${rootClass}-button`],
+					size,
+					iconType: "workflow",
+					iconName: "ChevronDown200",
+					isQuiet,
+					isOpen,
+					isInvalid,
+					isValid,
+					isFocused,
+					isKeyboardFocused,
+					isDisabled,
+					position: "right",
+					onclick: function () {
+						updateArgs({ isOpen: !isOpen });
+					},
+				}),
+				Popover({
+					...globals,
+					isOpen: isOpen && !isDisabled,
+					withTip: false,
+					position: "bottom",
+					isQuiet,
+					customStyles: isOpen
+						? {
+								position: "absolute",
+								top: "100%",
+								left: "0",
+								width: "100%",
+						  }
+						: {},
+					content: [
+						Menu({
+							...globals,
+							items: [
+								{
+									label: "Ballard",
+								},
+								{
+									label: "Fremont",
+								},
+								{
+									label: "Greenwood",
+								},
+								{
+									label: "United States of America",
+									isDisabled: true,
+								},
+							],
+						}),
+					],
+				}),
+			]}
+		</div>
+	`;
+};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

192990

increased by3.44%

Lines of code

4149

increased by107.24%

Number of lines in readme file

8

increased by14.29%

No dependency changes