Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@spectrum-css/combobox
Advanced tools
@spectrum-css/combobox - npm Package Compare versions
Comparing version 4.0.0-s2-foundations.6 to 4.0.0-s2-foundations.7
| # Change Log | ||
| ## 4.0.0-s2-foundations.7 | ||
| ### Major Changes | ||
| - [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets | ||
| ### Patch Changes | ||
| - Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]: | ||
| - @spectrum-css/progresscircle@4.0.0-s2-foundations.7 | ||
| - @spectrum-css/pickerbutton@6.0.0-s2-foundations.7 | ||
| - @spectrum-css/textfield@8.0.0-s2-foundations.7 | ||
| - @spectrum-css/popover@8.0.0-s2-foundations.7 | ||
| - @spectrum-css/menu@8.0.0-s2-foundations.7 | ||
| - @spectrum-css/tokens@15.0.0-s2-foundations.7 | ||
| ## 4.0.0-s2-foundations.6 | ||
@@ -4,0 +20,0 @@ |
| { | ||
| "name": "@spectrum-css/combobox", | ||
| "version": "4.0.0-s2-foundations.6", | ||
| "version": "4.0.0-s2-foundations.7", | ||
| "description": "The Spectrum CSS combobox component", | ||
@@ -5,0 +5,0 @@ "license": "Apache-2.0", |
@@ -10,2 +10,3 @@ import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; | ||
| import { ifDefined } from "lit/directives/if-defined.js"; | ||
| import { styleMap } from "lit/directives/style-map.js"; | ||
| import { when } from "lit/directives/when.js"; | ||
@@ -15,3 +16,3 @@ | ||
| import "../themes/express.css"; | ||
| import "../themes/legacy.css"; | ||
| import "../themes/spectrum.css"; | ||
@@ -34,3 +35,3 @@ export const Template = ({ | ||
| selectedDay, | ||
| } = {}, context) => { | ||
| } = {}, context = {}) => { | ||
| const [, updateArgs] = useArgs(); | ||
@@ -47,103 +48,165 @@ | ||
| return html` | ||
| ${when(showFieldLabel, () => | ||
| FieldLabel({ | ||
| size, | ||
| label: fieldLabelText, | ||
| customStyles: { "max-inline-size": "100px"}, | ||
| alignment: fieldLabelPosition === "left" && "left", | ||
| }, context) | ||
| )} | ||
| <div | ||
| class=${classMap({ | ||
| [rootClass]: true, | ||
| [`${rootClass}--size${size?.toUpperCase()}`]: | ||
| typeof size !== "undefined", | ||
| "is-open": !isDisabled && isOpen, | ||
| [`${rootClass}--quiet`]: isQuiet, | ||
| "is-invalid": !isDisabled && isInvalid, | ||
| "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({ | ||
| <div> | ||
| ${when(showFieldLabel, () => | ||
| FieldLabel({ | ||
| size, | ||
| isQuiet, | ||
| isDisabled, | ||
| isInvalid, | ||
| isFocused, | ||
| isKeyboardFocused, | ||
| customClasses: [ | ||
| `${rootClass}-textfield`, | ||
| ...(isLoading ? ["is-loading"] : []), | ||
| ], | ||
| customInputClasses: [`${rootClass}-input`], | ||
| isLoading, | ||
| customProgressCircleClasses: ["spectrum-Combobox-progress-circle"], | ||
| placeholder: "Type here this text should truncate", | ||
| name: "field", | ||
| value: selectedDay, | ||
| onclick: function () { | ||
| if (!isOpen) updateArgs({ isOpen: true }); | ||
| }, | ||
| }, context), | ||
| PickerButton({ | ||
| customClasses: [ | ||
| `${rootClass}-button`, | ||
| ... isInvalid ? ["is-invalid"] : [], | ||
| ], | ||
| size, | ||
| iconType: "ui", | ||
| iconName: "ChevronDown", | ||
| isQuiet, | ||
| isOpen, | ||
| isFocused, | ||
| isKeyboardFocused, | ||
| isDisabled, | ||
| position: "right", | ||
| onclick: function () { | ||
| updateArgs({ isOpen: !isOpen }); | ||
| }, | ||
| }, context), | ||
| Popover({ | ||
| isOpen: isOpen && !isDisabled, | ||
| withTip: false, | ||
| position: "bottom", | ||
| isQuiet, | ||
| customStyles: isOpen | ||
| ? { | ||
| position: "absolute", | ||
| top: "100%", | ||
| left: "0", | ||
| width: "100%", | ||
| } | ||
| : {}, | ||
| content: [ | ||
| Menu({ | ||
| size, | ||
| items: [ | ||
| { | ||
| label: "Ballard", | ||
| }, | ||
| { | ||
| label: "Fremont", | ||
| }, | ||
| { | ||
| label: "Greenwood", | ||
| }, | ||
| { | ||
| label: "United States of America", | ||
| isDisabled: true, | ||
| }, | ||
| ], | ||
| }, context), | ||
| ], | ||
| }, context), | ||
| ]} | ||
| label: fieldLabelText, | ||
| customStyles: { "max-inline-size": "100px"}, | ||
| alignment: fieldLabelPosition === "left" && "left", | ||
| }, context) | ||
| )} | ||
| <div | ||
| class=${classMap({ | ||
| [rootClass]: true, | ||
| [`${rootClass}--size${size?.toUpperCase()}`]: | ||
| typeof size !== "undefined", | ||
| "is-open": !isDisabled && isOpen, | ||
| [`${rootClass}--quiet`]: isQuiet, | ||
| "is-invalid": !isDisabled && isInvalid, | ||
| "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({ | ||
| size, | ||
| isQuiet, | ||
| isDisabled, | ||
| isInvalid, | ||
| isFocused, | ||
| isKeyboardFocused, | ||
| customClasses: [ | ||
| `${rootClass}-textfield`, | ||
| ...(isLoading ? ["is-loading"] : []), | ||
| ], | ||
| customInputClasses: [`${rootClass}-input`], | ||
| isLoading, | ||
| customProgressCircleClasses: ["spectrum-Combobox-progress-circle"], | ||
| placeholder: "Type here this text should truncate", | ||
| name: "field", | ||
| value: selectedDay, | ||
| onclick: function () { | ||
| if (!isOpen) updateArgs({ isOpen: true }); | ||
| }, | ||
| }, context), | ||
| PickerButton({ | ||
| customClasses: [ | ||
| `${rootClass}-button`, | ||
| ... isInvalid ? ["is-invalid"] : [], | ||
| ], | ||
| size, | ||
| iconType: "ui", | ||
| iconName: "ChevronDown", | ||
| isQuiet, | ||
| isOpen, | ||
| isFocused, | ||
| isKeyboardFocused, | ||
| isDisabled, | ||
| position: "right", | ||
| onclick: function () { | ||
| updateArgs({ isOpen: !isOpen }); | ||
| }, | ||
| }, context), | ||
| Popover({ | ||
| isOpen: isOpen && !isDisabled, | ||
| withTip: false, | ||
| position: "bottom", | ||
| isQuiet, | ||
| customStyles: isOpen | ||
| ? { | ||
| position: "absolute", | ||
| top: "100%", | ||
| left: "0", | ||
| width: "100%", | ||
| } | ||
| : {}, | ||
| content: [ | ||
| Menu({ | ||
| size, | ||
| items: [ | ||
| { | ||
| label: "Ballard", | ||
| }, | ||
| { | ||
| label: "Fremont", | ||
| }, | ||
| { | ||
| label: "Greenwood", | ||
| }, | ||
| { | ||
| label: "United States of America", | ||
| isDisabled: true, | ||
| }, | ||
| ], | ||
| }, context), | ||
| ], | ||
| }, context), | ||
| ]} | ||
| </div> | ||
| </div> | ||
| `; | ||
| }; | ||
| const DefaultVariants = (args, context) => html` | ||
| ${Template(args, context)} | ||
| ${Template({ | ||
| ...args, | ||
| isFocused: true, | ||
| }, context)} | ||
| ${Template({ | ||
| ...args, | ||
| isKeyboardFocused: true, | ||
| }, context)} | ||
| ${Template({ | ||
| ...args, | ||
| isDisabled: true, | ||
| }, context)} | ||
| ${Template({ | ||
| ...args, | ||
| isLoading: true, | ||
| }, context)} | ||
| ${Template({ | ||
| ...args, | ||
| isInvalid: true, | ||
| }, context)} | ||
| ${Template({ | ||
| ...args, | ||
| showFieldLabel: true, | ||
| fieldLabelText: "Select location, this label should wrap", | ||
| }, context)} | ||
| ${Template({ | ||
| ...args, | ||
| showFieldLabel: true, | ||
| fieldLabelText: "Select location, this label should wrap", | ||
| fieldLabelPosition: "left", | ||
| }, context)} | ||
| `; | ||
| export const ComboboxGroup = (args, context) => { | ||
| return html` | ||
| <div style=${styleMap({ | ||
| "display": window.isChromatic() ? "none" : "contents" | ||
| })}> | ||
| ${Template(args, context)} | ||
| </div> | ||
| <div style=${styleMap({ | ||
| "display": window.isChromatic() ? "flex" : "none", | ||
| "gap": "16px", | ||
| "flex-direction": "column", | ||
| })}> | ||
| ${DefaultVariants({...args, isOpen: false}, context)} | ||
| </div> | ||
| <div style=${styleMap({ | ||
| "display": window.isChromatic() ? "flex" : "none", | ||
| "gap": "176px", | ||
| "flex-direction": "column", | ||
| "margin-block-start": "32px", | ||
| })}> | ||
| ${DefaultVariants(args, context)} | ||
| </div> | ||
| `; | ||
| }; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by15.29%
195513
- Lines of code
- increased by16.92%
2073
No dependency changes