From ff023954d15be004c4d5ff0f5583f01d41d15198 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Wed, 23 Apr 2025 12:24:19 -0400 Subject: [PATCH 01/22] feat(combobox): adding new s2 migration --- components/checkbox/dist/metadata.json | 126 +++++++------ components/combobox/index.css | 169 ++++++++---------- .../combobox/stories/combobox.stories.js | 82 ++++++--- components/combobox/stories/combobox.test.js | 19 -- components/combobox/stories/template.js | 70 +++++--- components/helptext/index.css | 6 +- components/infieldbutton/dist/metadata.json | 109 ++++++----- tokens/custom/large-vars.css | 2 + tokens/custom/medium-vars.css | 2 + 9 files changed, 331 insertions(+), 254 deletions(-) diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index daf35c48fa3..5f2d712964c 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -2,64 +2,86 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Checkbox", - ".spectrum-Checkbox .spectrum-Checkbox-box", - ".spectrum-Checkbox .spectrum-Checkbox-box:after", - ".spectrum-Checkbox .spectrum-Checkbox-box:before", ".spectrum-Checkbox .spectrum-Checkbox-checkmark", - ".spectrum-Checkbox .spectrum-Checkbox-input", - ".spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark", - ".spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before", ".spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label", - ".spectrum-Checkbox .spectrum-Checkbox-input:checked:hover:disabled + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox .spectrum-Checkbox-input:disabled", ".spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before", ".spectrum-Checkbox .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label", - ".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after", - ".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label", - ".spectrum-Checkbox .spectrum-Checkbox-input:hover:disabled + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox .spectrum-Checkbox-label", ".spectrum-Checkbox .spectrum-Checkbox-partialCheckmark", + ".spectrum-Checkbox--emphasized .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-indeterminate:not(.is-invalid) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized:not(.is-invalid) .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized.is-invalid .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--sizeL", + ".spectrum-Checkbox--sizeS", + ".spectrum-Checkbox--sizeXL", + ".spectrum-Checkbox-box", + ".spectrum-Checkbox-box:after", + ".spectrum-Checkbox-box:before", + ".spectrum-Checkbox-input", + ".spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark", + ".spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox-input:disabled", ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box", + ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after", + ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label", + ".spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox-label", + ".spectrum-Checkbox-label:lang(ja)", + ".spectrum-Checkbox-label:lang(ko)", + ".spectrum-Checkbox-label:lang(zh)", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-checkmark", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid", + ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-invalid .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.spectrum-Checkbox--emphasized", - ".spectrum-Checkbox.spectrum-Checkbox--sizeL", - ".spectrum-Checkbox.spectrum-Checkbox--sizeS", - ".spectrum-Checkbox.spectrum-Checkbox--sizeXL", + ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-label", + ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input", + ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label", + ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label", ".spectrum-Checkbox:active .spectrum-Checkbox-box:before", ".spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox:active .spectrum-Checkbox-label", ".spectrum-Checkbox:hover .spectrum-Checkbox-box:before", ".spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox:hover .spectrum-Checkbox-label", - ".spectrum-Checkbox:lang(ja)", - ".spectrum-Checkbox:lang(ko)", - ".spectrum-Checkbox:lang(zh)", - ".spectrum-Checkbox:not(.is-readOnly) .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box", ".spectrum-Checkbox:not(.is-readOnly):active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box" ], "modifiers": [ "--mod-checkbox-animation-duration", "--mod-checkbox-border-width", - "--mod-checkbox-bottom-to-text", "--mod-checkbox-checkmark-color", "--mod-checkbox-content-color-default", "--mod-checkbox-content-color-disabled", @@ -72,30 +94,38 @@ "--mod-checkbox-control-color-focus", "--mod-checkbox-control-color-hover", "--mod-checkbox-control-corner-radius", + "--mod-checkbox-control-invalid-color-down", "--mod-checkbox-control-selected-color-default", "--mod-checkbox-control-selected-color-down", + "--mod-checkbox-control-selected-color-focus", "--mod-checkbox-control-selected-color-hover", "--mod-checkbox-control-size", + "--mod-checkbox-emphasized-color-default", + "--mod-checkbox-emphasized-color-down", + "--mod-checkbox-emphasized-color-focus", + "--mod-checkbox-emphasized-color-hover", "--mod-checkbox-focus-indicator-color", "--mod-checkbox-focus-indicator-gap", - "--mod-checkbox-focus-indicator-thickness", + "--mod-checkbox-focus-indicator-thinkness", "--mod-checkbox-font-size", "--mod-checkbox-height", + "--mod-checkbox-invalid-color-default", + "--mod-checkbox-invalid-color-focus", + "--mod-checkbox-invalid-color-hover", "--mod-checkbox-line-height", "--mod-checkbox-line-height-cjk", - "--mod-checkbox-margin-block", "--mod-checkbox-selected-border-width", + "--mod-checkbox-spacing", "--mod-checkbox-text-to-control", "--mod-checkbox-top-to-text", "--mod-focus-indicator-thickness" ], "component": [ "--spectrum-checkbox-animation-duration", - "--spectrum-checkbox-background-color", "--spectrum-checkbox-border-width", - "--spectrum-checkbox-bottom-to-text", "--spectrum-checkbox-checkmark-color", "--spectrum-checkbox-content-color-default", + "--spectrum-checkbox-content-color-disabled", "--spectrum-checkbox-content-color-down", "--spectrum-checkbox-content-color-focus", "--spectrum-checkbox-content-color-hover", @@ -107,6 +137,7 @@ "--spectrum-checkbox-control-corner-radius", "--spectrum-checkbox-control-selected-color-default", "--spectrum-checkbox-control-selected-color-down", + "--spectrum-checkbox-control-selected-color-focus", "--spectrum-checkbox-control-selected-color-hover", "--spectrum-checkbox-control-size", "--spectrum-checkbox-control-size-extra-large", @@ -129,28 +160,17 @@ "--spectrum-checkbox-line-height", "--spectrum-checkbox-line-height-cjk", "--spectrum-checkbox-selected-border-width", - "--spectrum-checkbox-text-font-style", - "--spectrum-checkbox-text-font-weight", + "--spectrum-checkbox-spacing", "--spectrum-checkbox-text-to-control", - "--spectrum-checkbox-top-to-control", - "--spectrum-checkbox-top-to-control-extra-large", - "--spectrum-checkbox-top-to-control-large", - "--spectrum-checkbox-top-to-control-medium", - "--spectrum-checkbox-top-to-control-small", "--spectrum-checkbox-top-to-text" ], "global": [ - "--spectrum-accent-content-color-default", - "--spectrum-accent-content-color-down", - "--spectrum-accent-content-color-hover", - "--spectrum-accent-content-color-key-focus", + "--spectrum-accent-color-1000", + "--spectrum-accent-color-1100", + "--spectrum-accent-color-900", "--spectrum-animation-duration-100", "--spectrum-border-width-200", "--spectrum-cjk-line-height-100", - "--spectrum-component-bottom-to-text-100", - "--spectrum-component-bottom-to-text-200", - "--spectrum-component-bottom-to-text-300", - "--spectrum-component-bottom-to-text-75", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", @@ -163,9 +183,7 @@ "--spectrum-component-top-to-text-75", "--spectrum-corner-radius-small-size-extra-large", "--spectrum-corner-radius-small-size-large", - "--spectrum-corner-radius-small-size-medium", "--spectrum-corner-radius-small-size-small", - "--spectrum-default-font-style", "--spectrum-disabled-content-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", @@ -174,15 +192,21 @@ "--spectrum-font-size-200", "--spectrum-font-size-300", "--spectrum-font-size-75", - "--spectrum-gray-25", + "--spectrum-gray-50", + "--spectrum-gray-700", + "--spectrum-gray-800", "--spectrum-line-height-100", "--spectrum-negative-color-1000", + "--spectrum-negative-color-1100", "--spectrum-negative-color-900", + "--spectrum-neutral-background-color-selected-default", + "--spectrum-neutral-background-color-selected-down", + "--spectrum-neutral-background-color-selected-hover", + "--spectrum-neutral-background-color-selected-key-focus", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", - "--spectrum-regular-font-weight", "--spectrum-text-to-control-100", "--spectrum-text-to-control-200", "--spectrum-text-to-control-300", @@ -193,6 +217,7 @@ "--highcontrast-checkbox-background-color-default", "--highcontrast-checkbox-color-default", "--highcontrast-checkbox-color-focus", + "--highcontrast-checkbox-color-hover", "--highcontrast-checkbox-content-color-default", "--highcontrast-checkbox-content-color-down", "--highcontrast-checkbox-content-color-focus", @@ -201,6 +226,7 @@ "--highcontrast-checkbox-focus-indicator-color", "--highcontrast-checkbox-highlight-color-default", "--highcontrast-checkbox-highlight-color-down", + "--highcontrast-checkbox-highlight-color-focus", "--highcontrast-checkbox-highlight-color-hover" ] } diff --git a/components/combobox/index.css b/components/combobox/index.css index a1e1797971b..30f6dc86e17 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -16,16 +16,19 @@ --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); --spectrum-combobox-font-size: var(--spectrum-font-size-100); - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); + --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button); --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); + --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-component-top-to-workflow-icon-100); --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-combobox-spacing-alert-icon-to-text: var(--spectrum-text-to-visual-100); - --spectrum-combobox-inline-size: var(--spectrum-field-width); + /* TODO - need to add this token to library */ + --spectrum-combobox-spacing-to-help-text: var(--spectrum-help-text-to-component); + + --spectrum-combobox-inline-size: var(--spectrum-field-width-medium); --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--spectrum-combobox-block-size)); --spectrum-combobox-button-width: var(--spectrum-combobox-block-size); @@ -33,18 +36,21 @@ --spectrum-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --spectrum-combobox-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-combobox-border-radius: var(--spectrum-corner-radius-100); - --spectrum-combobox-border-width: var(--spectrum-border-width-100); + --spectrum-combobox-border-radius: var(--spectrum-corner-radius-medium-size-medium); + --spectrum-combobox-border-width: var(--spectrum-border-width-200); --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component); --spectrum-combobox-font-style: var(--spectrum-default-font-style); + --spectrum-combobox-font-weight: var(--spectrum-regular-font-weight); --spectrum-combobox-line-height: var(--spectrum-line-height-100); + --spectrum-combobox-line-height-cjk: var(--spectrum-cjk-line-height-100); --spectrum-combobox-background-color-disabled: var(--spectrum-gray-25); - --spectrum-combobox-border-color-default: var(--spectrum-gray-500); - --spectrum-combobox-border-color-hover: var(--spectrum-gray-600); + --spectrum-combobox-background-color-default: var(--spectrum-gray-25); + --spectrum-combobox-border-color-default: var(--spectrum-gray-300); + --spectrum-combobox-border-color-hover: var(--spectrum-gray-400); --spectrum-combobox-border-color-focus: var(--spectrum-gray-800); --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900); --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800); @@ -101,11 +107,12 @@ /* @passthroughs end -- settings for nested Picker Button component */ /*** Read-only Colors ***/ - --spectrum-combobox-readonly-input-background-color: var(--spectrum-gray-50); + --spectrum-combobox-readonly-input-background-color: var(--spectrum-combobox-background-color-default); --spectrum-combobox-readonly-border-color-invalid-default: var(--spectrum-negative-border-color-default); --spectrum-combobox-readonly-background-color-disabled: var(--spectrum-disabled-background-color); --spectrum-combobox-readonly-text-color-disabled: var(--spectrum-disabled-content-color); --spectrum-combobox-readonly-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-combobox-readonly-input-border-color: var(--spectrum-combobox-border-color-default); } .spectrum-Combobox--sizeS { @@ -113,14 +120,19 @@ --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-75); --spectrum-combobox-font-size: var(--spectrum-font-size-75); - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-small); --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-small); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-small); + --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-component-top-to-workflow-icon-75); --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75); --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75); --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75); + --spectrum-combobox-spacing-alert-icon-to-text: var(--spectrum-text-to-visual-75); + --spectrum-combobox-inline-size: var(--spectrum-field-width-small); + --spectrum-combobox-border-radius: var(--spectrum-corner-radius-medium-size-small); + + ~ .spectrum-Combobox-popover { + --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-small); + } } .spectrum-Combobox--sizeL { @@ -128,14 +140,19 @@ --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-200); --spectrum-combobox-font-size: var(--spectrum-font-size-200); - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-large); --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-large); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-large); + --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-component-top-to-workflow-icon-200); --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200); --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-200); + --spectrum-combobox-spacing-alert-icon-to-text: var(--spectrum-text-to-visual-200); + --spectrum-combobox-inline-size: var(--spectrum-field-width-large); + --spectrum-combobox-border-radius: var(--spectrum-corner-radius-medium-size-large); + + ~ .spectrum-Combobox-popover { + --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-large); + } } .spectrum-Combobox--sizeXL { @@ -143,43 +160,18 @@ --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-300); --spectrum-combobox-font-size: var(--spectrum-font-size-300); - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-extra-large); --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-extra-large); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-extra-large); + --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-component-top-to-workflow-icon-300); --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300); --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-300); -} - -.spectrum-Combobox--quiet { - --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-quiet-minimum-width-multiplier) * var(--spectrum-combobox-block-size)); - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet); - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium); - --spectrum-combobox-button-inline-offset: calc((var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2) - (var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / 2)); - - --mod-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled, initial); - - /* Settings for nested Picker Button component. */ - --mod-picker-button-background-color-quiet: transparent; - --mod-picker-button-border-color-quiet: transparent; - - &.spectrum-Combobox--sizeS { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-small); - } + --spectrum-combobox-spacing-alert-icon-to-text: var(--spectrum-text-to-visual-300); + --spectrum-combobox-inline-size: var(--spectrum-field-width-extra-large); + --spectrum-combobox-border-radius: var(--spectrum-corner-radius-medium-size-extra-large); - &.spectrum-Combobox--sizeM { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium); - } - - &.spectrum-Combobox--sizeL { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-large); - } - - &.spectrum-Combobox--sizeXL { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-extra-large); + ~ .spectrum-Combobox-popover { + --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-extra-large); } } @@ -187,6 +179,8 @@ .spectrum-Combobox { --highcontrast-combobox-border-color-highlight: Highlight; --highcontrast-combobox-border-color-invalid: Highlight; + --highcontrast-combobox-background-color-default: Canvas; + --highcontrast-combobox-readonly-border-color: CanvasText; .spectrum-Combobox-button.spectrum-PickerButton--quiet { .spectrum-PickerButton-fill { @@ -213,11 +207,11 @@ border-radius: var(--mod-combobox-border-radius, var(--spectrum-combobox-border-radius)); - .spectrum-Popover.is-open { - transform: translateY(var(--mod-combobox-spacing-edge-to-menu, var(--spectrum-combobox-spacing-edge-to-menu))); + ~ .spectrum-Popover.is-open { + --mod-popover-animation-distance: var(--mod-combobox-popover-animation-distance, var(--spectrum-component-to-menu-medium)); } - &.is-readOnly:not(.spectrum-Combobox--quiet) { + &.is-readOnly { .spectrum-Combobox-textfield { &.is-keyboardFocused .spectrum-Combobox-input { outline-offset: var(--mod-textfield-focus-indicator-gap); @@ -227,8 +221,8 @@ } .spectrum-Combobox-input:read-only { - background-color: var(--spectrum-combobox-readonly-input-background-color); - border-color: var(--spectrum-combobox-readonly-input-border-color); + background-color: var(--highcontrast-combobox-background-color-default, var(--spectrum-combobox-readonly-input-background-color)); + border-color: var(--highcontrast-combobox-readonly-border-color, var(--spectrum-combobox-readonly-input-border-color)); &:hover { background-color: revert; @@ -257,6 +251,7 @@ inset-inline-end: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width))); inset-block-start: var(--mod-combobox-block-spacing-edge-to-progress-circle, var(--spectrum-combobox-block-spacing-edge-to-progress-circle)); inset-block-end: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert)); + padding-inline-start: var(--mod-combobox-spacing-alert-icon-to-text, var(--spectrum-combobox-spacing-alert-icon-to-text)); &:dir(rtl) { inset-inline-end: inherit; @@ -267,7 +262,7 @@ /* PICKER BUTTON */ .spectrum-Combobox-button { position: absolute; - inset-inline-end: calc(-1 * var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px))); + inset-inline-end: 0; /* Default */ &:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet) { @@ -337,15 +332,18 @@ /* TEXTFIELD (wrapper) */ .spectrum-Combobox-textfield { inline-size: 100%; + display: inline-flex; } /* TEXT INPUT */ .spectrum-Combobox-input { + background-color: var(--highcontrast-combobox-background-color-default, var(--mod-combobox-textfield-background-color, var(--spectrum-combobox-background-color-default))); padding-block-start: calc(var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); padding-block-end: calc(var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); padding-inline-start: calc(var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - (var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) * 2)); backface-visibility: hidden; + font-weight: var(--mod-combobox-font-weight, var(--spectrum-combobox-font-weight)); line-height: var(--mod-combobox-line-height, var(--spectrum-combobox-line-height)); font-size: var(--mod-combobox-font-size, var(--spectrum-combobox-font-size)); font-style: var(--mod-combobox-font-style, var(--spectrum-combobox-font-style)); @@ -384,10 +382,31 @@ .spectrum-Combobox-textfield.is-invalid &, .spectrum-Combobox-textfield.is-loading & { padding-inline-end: calc( - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px)) - - (var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) * 2) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, 0px) - (var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) * 2) ); } + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --mod-combobox-line-height: var(--mod-combobox-line-height-cjk, var(--spectrum-combobox-line-height-cjk)); + } +} + +.spectrum-Combobox-helptext { + inset-block-start: var(--mod-combobox-spacing-to-help-text, var(--spectrum-combobox-spacing-to-help-text)); + + .spectrum-HelpText-text { + inline-size: 100%; + word-wrap: break-word; + text-wrap: wrap; + } +} + +&:not(&--left).spectrum-Combobox-label { + display: flex; + align-items: center; + justify-content: space-between; } /* VALIDATION ICON */ @@ -399,6 +418,7 @@ inset-block-start: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert)); inset-block-end: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert)); inset-inline-end: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width))); + padding-inline-start: var(--mod-combobox-spacing-alert-icon-to-text, var(--spectrum-combobox-spacing-alert-icon-to-text)); } .spectrum-Textfield.is-disabled &, @@ -407,44 +427,3 @@ display: none; } } - -/* QUIET VARIATION (no visible background) */ -.spectrum-Combobox--quiet { - border-radius: 0; - - .spectrum-Combobox-textfield { - &.is-invalid .spectrum-Textfield-validationIcon { - inset-inline-end: var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)); - } - - &.is-readOnly { - .spectrum-Combobox-input:read-only { - border-block-end: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) solid var(--mod-combobox-readonly-input-border-color, var(--spectrum-combobox-readonly-input-border-color)); - } - - &.is-invalid > .spectrum-Combobox-input:read-only { - border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default))); - } - - &.is-disabled .spectrum-Combobox-input:read-only { - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled))); - border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-combobox-readonly-border-color-disabled)); - } - } - } - - .spectrum-Combobox-input { - border-block-end-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)); - - padding-block-start: var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text)); - padding-block-end: calc(var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); - - padding-inline-start: var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)); - padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px))); - } - - .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, - .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input { - padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px))); - } -} diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index df57778d72d..e22a5c2fb79 100644 --- a/components/combobox/stories/combobox.stories.js +++ b/components/combobox/stories/combobox.stories.js @@ -1,6 +1,7 @@ import { Template as Menu } from "@spectrum-css/menu/stories/template.js"; +import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, isReadOnly, size } from "@spectrum-css/preview/types"; +import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isLoading, isOpen, isReadOnly, size } from "@spectrum-css/preview/types"; import { within } from "@storybook/test"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; @@ -45,13 +46,22 @@ export default { ...isOpen, if: { arg: "isReadOnly", truthy: false }, }, - isQuiet, isInvalid, isFocused, isKeyboardFocused, isLoading, isDisabled, isReadOnly, + isLabelRequired: { + name: "Label required", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + if: { arg: "showFieldLabel", truthy: true }, + }, showFieldLabel: { name: "Show field label", type: { name: "boolean" }, @@ -82,6 +92,25 @@ export default { control: "select", if: { arg: "showFieldLabel", truthy: true }, }, + showHelpText: { + name: "Show help text", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + }, + helpText: { + name: "Help text", + type: { name: "text" }, + table: { + type: { summary: "text" }, + category: "Component", + }, + control: "text", + if: { arg: "showHelpText", truthy: true }, + }, value: { name: "Value", description: "The value shows the option that a user has selected.", @@ -98,15 +127,19 @@ export default { rootClass: "spectrum-Combobox", size: "m", isOpen: false, - isQuiet: false, isInvalid: false, isFocused: false, isKeyboardFocused: false, isLoading: false, isDisabled: false, isReadOnly: false, + isLabelRequired: false, showFieldLabel: false, + showHelpText: false, testId: "combobox", + fieldLabelText: "Select location", + helpText: "This is a help text. Select an option", + value: "Ballard", content: [ (passthroughs, context) => Menu({ role: "listbox", @@ -142,9 +175,15 @@ export default { type: "figma", url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=727-2550", }, + downState: { + selectors: [".spectrum-InfieldButton:not(:disabled)"], + }, packageJson, metadata, }, + decorators: [ + withDownStateDimensionCapture, + ], play: async ({ canvasElement }) => { const canvas = within(canvasElement); @@ -155,11 +194,7 @@ export default { export const Default = ComboBoxGroup.bind({}); Default.tags = ["!autodocs"]; -Default.args = { - isOpen: true, - fieldLabelText: "Select location", - value: "Ballard", -}; +Default.args = {}; Default.parameters = { chromatic: { delay: 1000 } }; @@ -167,7 +202,9 @@ Default.parameters = { // ********* DOCS ONLY ********* // export const DefaultGroup = VariantGroup.bind({}); DefaultGroup.storyName = "Default"; -DefaultGroup.args = Default.args; +DefaultGroup.args = { + isOpen: true, +}; DefaultGroup.tags = ["!dev"]; DefaultGroup.parameters = { chromatic: { disableSnapshot: true }, @@ -178,22 +215,6 @@ DefaultGroup.parameters = { }, }; -export const QuietGroup = VariantGroup.bind({}); -QuietGroup.storyName = "Quiet"; -QuietGroup.args = { - ...Default.args, - isQuiet: true, -}; -QuietGroup.tags = ["!dev"]; -QuietGroup.parameters = { - chromatic: { disableSnapshot: true }, - docs: { - story: { - height: "360px", - }, - }, -}; - /** * Comboboxes have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A combobox does not have a read-only option if no selection has been made. To enable this feature, add the `.isReadOnly` class to the combobox. To enable this feature, add the .isReadOnly class to the combobox. Then within the nested textfield component, add the .isReadOnly class and readonly attribute to the `` element. */ @@ -209,6 +230,17 @@ ReadOnly.parameters = { ReadOnly.storyName = "Read-only"; +export const Sizing = (args, context) => Sizes({ + Template, + withBorder: false, + withHeading: false, + ...args, +}, context); +Sizing.tags = ["!dev"]; +Sizing.parameters = { + chromatic: { disableSnapshot: true }, +}; + // ********* VRT ONLY ********* // export const WithForcedColors = ComboBoxGroup.bind({}); WithForcedColors.tags = ["!autodocs", "!dev"]; diff --git a/components/combobox/stories/combobox.test.js b/components/combobox/stories/combobox.test.js index b74a71a388b..a7e8ba57379 100644 --- a/components/combobox/stories/combobox.test.js +++ b/components/combobox/stories/combobox.test.js @@ -9,11 +9,6 @@ export const ComboBoxGroup = Variants({ testHeading: "Default", isOpen: false, }, - { - testHeading: "Quiet", - isQuiet: true, - isOpen: false, - }, { testHeading: "Open", isOpen: true, @@ -21,14 +16,6 @@ export const ComboBoxGroup = Variants({ "min-block-size": "250px", }, }, - { - testHeading: "Quiet + open", - isQuiet: true, - isOpen: true, - wrapperStyles: { - "min-block-size": "250px", - }, - }, { testHeading: "With field label top", showFieldLabel: true, @@ -46,12 +33,6 @@ export const ComboBoxGroup = Variants({ isOpen: false, value: "United States of America and to the republic", }, - { - testHeading: "Quiet + truncation", - isOpen: false, - isQuiet: true, - value: "United States of America and to the republic", - }, ], stateData: [ { diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js index f8cc0dbc1b1..fc4df184e6b 100644 --- a/components/combobox/stories/template.js +++ b/components/combobox/stories/template.js @@ -1,5 +1,6 @@ import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; -import { Template as PickerButton } from "@spectrum-css/pickerbutton/stories/template.js"; +import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js"; +import { Template as InfieldButton } from "@spectrum-css/infieldbutton/stories/template.js"; import { Template as Popover } from "@spectrum-css/popover/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; import { Template as TextField } from "@spectrum-css/textfield/stories/template.js"; @@ -20,7 +21,6 @@ const Combobox = ({ size = "m", isOpen = true, isInvalid = false, - isQuiet = false, isDisabled = false, isFocused = false, isKeyboardFocused = false, @@ -29,6 +29,24 @@ const Combobox = ({ value = "", } = {}, context = {}) => { const { updateArgs } = context; + const comboboxId = id || getRandomId("combobox"); + + // Handle click outside of the combobox to close it + if (typeof window !== "undefined" && isOpen) { + // Use setTimeout to allow DOM to render first + setTimeout(() => { + const comboboxEl = document.getElementById(comboboxId); + + const handleClickOutside = (event) => { + if (comboboxEl && !comboboxEl.contains(event.target)) { + updateArgs({ isOpen: false }); + document.removeEventListener("mousedown", handleClickOutside); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + }, 0); + } return html`
${TextField({ size, - isQuiet, isDisabled, isInvalid, isFocused, @@ -71,25 +87,20 @@ const Combobox = ({ if (!isOpen) updateArgs({ isOpen: true }); }, }, context)} - ${PickerButton({ + ${InfieldButton({ customClasses: [ `${rootClass}-button`, - ... isInvalid ? ["is-invalid"] : [], + ...(!isDisabled && isOpen ? ["is-open"] : []), ], size, - iconSet: "ui", - iconName: "ChevronDown", - isQuiet, - id: getRandomId("picker"), - isOpen, - isFocused, - isKeyboardFocused, + id: getRandomId("infieldbutton"), isDisabled, - position: "right", + tabindex: "-1", onclick: function () { - updateArgs({ isOpen: !isOpen }); + updateArgs({ + isOpen: !isOpen, + }); }, - tabindex: "-1", }, context)}
`; @@ -98,10 +109,12 @@ const Combobox = ({ export const Template = ({ size = "m", isOpen = true, - isQuiet = false, isDisabled = false, + isLabelRequired = false, showFieldLabel = false, isReadOnly = false, + showHelpText = false, + helpText = "This is a help text", fieldLabelText = "Select location", fieldLabelPosition = "top", content = [], @@ -109,6 +122,7 @@ export const Template = ({ ...args } = {}, context = {}) => { const popoverHeight = size === "s" ? 106 : size === "l" ? 170 : size === "xl" ? 229 : 142; // default value is "m" + const fieldWidth = size === "s" ? 192 : size === "l" ? 224 : size === "xl" ? 240 : 208; // default value is "m" return html`
Combobox({ size, isOpen, - isQuiet, isDisabled, isReadOnly, value, @@ -145,6 +162,19 @@ export const Template = ({ popoverHeight, }, context), ]} + ${when(showHelpText, () => + HelpText({ + customClasses: [`${args.rootClass}-helptext`], + ...(fieldLabelPosition !== "left" && { + customStyles: { "inline-size": `${fieldWidth}px` }, + }), + size, + isDisabled, + hideIcon: true, + text: helpText, + variant: args.isInvalid ? "negative" : "neutral", + }, context) + )}
`; }; diff --git a/components/helptext/index.css b/components/helptext/index.css index ab3051efa3f..3ef91377442 100644 --- a/components/helptext/index.css +++ b/components/helptext/index.css @@ -127,11 +127,11 @@ &.is-disabled { .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + color: var(--highcontrast-helptext-content-color-disabled, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); } .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + color: var(--highcontrast-helptext-icon-color-disabled, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); } } } @@ -140,5 +140,7 @@ .spectrum-HelpText { --highcontrast-helptext-content-color-default: CanvasText; --highcontrast-helptext-icon-color-default: CanvasText; + --highcontrast-helptext-icon-color-disabled: GrayText; + --highcontrast-helptext-content-color-disabled: GrayText; } } diff --git a/components/infieldbutton/dist/metadata.json b/components/infieldbutton/dist/metadata.json index cf5dfa5f4cc..9b4476f0a4a 100644 --- a/components/infieldbutton/dist/metadata.json +++ b/components/infieldbutton/dist/metadata.json @@ -2,21 +2,25 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-InfieldButton", - ".spectrum-InfieldButton--quiet", - ".spectrum-InfieldButton--quiet:disabled", - ".spectrum-InfieldButton--quiet:not(:disabled):active", - ".spectrum-InfieldButton--quiet:not(:disabled):focus-visible", - ".spectrum-InfieldButton--quiet:not(:disabled):hover", + ".spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill", + ".spectrum-InfieldButton--left .spectrum-InfieldButton-fill", + ".spectrum-InfieldButton--right .spectrum-InfieldButton-fill", + ".spectrum-InfieldButton--top .spectrum-InfieldButton-fill", ".spectrum-InfieldButton-fill", ".spectrum-InfieldButton-icon", - ".spectrum-InfieldButton-inline", - ".spectrum-InfieldButton-inline .spectrum-InfieldButton", - ".spectrum-InfieldButton-inline > .spectrum-InfieldButton.spectrum-InfieldButton--sizeS", + ".spectrum-InfieldButton.spectrum-InfieldButton--bottom", + ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeL", + ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeS", + ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeXL", ".spectrum-InfieldButton.spectrum-InfieldButton--quiet", ".spectrum-InfieldButton.spectrum-InfieldButton--quiet:disabled", ".spectrum-InfieldButton.spectrum-InfieldButton--sizeL", ".spectrum-InfieldButton.spectrum-InfieldButton--sizeS", ".spectrum-InfieldButton.spectrum-InfieldButton--sizeXL", + ".spectrum-InfieldButton.spectrum-InfieldButton--top", + ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeL", + ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeS", + ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeXL", ".spectrum-InfieldButton:active", ".spectrum-InfieldButton:disabled", ".spectrum-InfieldButton:focus-visible", @@ -26,6 +30,8 @@ ".spectrum-InfieldButton:not(:disabled):hover" ], "modifiers": [ + "--mod-infield-border-color", + "--mod-infield-border-color-quiet", "--mod-infield-button-background-color", "--mod-infield-button-background-color-disabled", "--mod-infield-button-background-color-down", @@ -42,8 +48,10 @@ "--mod-infield-button-border-color-disabled", "--mod-infield-button-border-color-quiet-disabled", "--mod-infield-button-border-radius", + "--mod-infield-button-border-radius-reset", + "--mod-infield-button-border-width", + "--mod-infield-button-border-width-quiet", "--mod-infield-button-edge-to-fill", - "--mod-infield-button-field-edge-to-icon", "--mod-infield-button-fill-justify-content", "--mod-infield-button-fill-padding", "--mod-infield-button-height", @@ -55,69 +63,84 @@ "--mod-infield-button-icon-color-hover-disabled", "--mod-infield-button-icon-color-key-focus", "--mod-infield-button-icon-color-key-focus-disabled", - "--mod-infield-button-side-edge-to-fill", - "--mod-infield-button-width" + "--mod-infield-button-inner-edge-to-fill", + "--mod-infield-button-stacked-border-radius-reset", + "--mod-infield-button-stacked-bottom-border-block-end-width", + "--mod-infield-button-stacked-bottom-border-radius-end-end", + "--mod-infield-button-stacked-bottom-border-radius-end-start", + "--mod-infield-button-stacked-fill-padding-inline", + "--mod-infield-button-stacked-fill-padding-inner", + "--mod-infield-button-stacked-fill-padding-outer", + "--mod-infield-button-stacked-top-border-radius-start-start", + "--mod-infield-button-width", + "--mod-infield-button-width-stacked" ], "component": [ - "--spectrum-in-field-button-edge-to-fill-extra-large", - "--spectrum-in-field-button-edge-to-fill-large", - "--spectrum-in-field-button-edge-to-fill-medium", - "--spectrum-in-field-button-edge-to-fill-small", - "--spectrum-in-field-button-side-edge-to-fill-extra-large", - "--spectrum-in-field-button-side-edge-to-fill-large", - "--spectrum-in-field-button-side-edge-to-fill-medium", - "--spectrum-in-field-button-side-edge-to-fill-small", + "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large", + "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large", + "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium", + "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small", + "--spectrum-in-field-button-edge-to-fill", + "--spectrum-in-field-button-fill-stacked-inner-border-rounding", + "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large", + "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large", + "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium", + "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small", + "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large", + "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large", + "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium", + "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small", + "--spectrum-in-field-button-stacked-inner-edge-to-fill", + "--spectrum-in-field-button-width-stacked-extra-large", + "--spectrum-in-field-button-width-stacked-large", + "--spectrum-in-field-button-width-stacked-medium", + "--spectrum-in-field-button-width-stacked-small", "--spectrum-infield-button-background-color", "--spectrum-infield-button-background-color-down", "--spectrum-infield-button-background-color-hover", + "--spectrum-infield-button-background-color-key-focus", + "--spectrum-infield-button-border-color", "--spectrum-infield-button-border-radius", - "--spectrum-infield-button-downstate-perspective", + "--spectrum-infield-button-border-radius-reset", + "--spectrum-infield-button-border-width", "--spectrum-infield-button-edge-to-fill", - "--spectrum-infield-button-field-edge-to-disclosure-icon", "--spectrum-infield-button-fill-justify-content", "--spectrum-infield-button-fill-padding", "--spectrum-infield-button-height", "--spectrum-infield-button-icon-color", "--spectrum-infield-button-icon-color-down", "--spectrum-infield-button-icon-color-hover", - "--spectrum-infield-button-inline-edge-to-fill", - "--spectrum-infield-button-inline-field-edge-to-icon", + "--spectrum-infield-button-icon-color-key-focus", + "--spectrum-infield-button-inner-edge-to-fill", + "--spectrum-infield-button-stacked-border-radius-reset", + "--spectrum-infield-button-stacked-bottom-border-radius-end-start", + "--spectrum-infield-button-stacked-fill-padding-inline", + "--spectrum-infield-button-stacked-fill-padding-inner", + "--spectrum-infield-button-stacked-fill-padding-outer", + "--spectrum-infield-button-stacked-top-border-radius-start-start", "--spectrum-infield-button-width" ], "global": [ "--spectrum-animation-duration-100", + "--spectrum-border-width-100", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", - "--spectrum-component-size-difference-down", - "--spectrum-component-size-minimum-perspective-down", - "--spectrum-component-size-width-ratio-down", - "--spectrum-corner-radius-small-size-extra-large", - "--spectrum-corner-radius-small-size-large", - "--spectrum-corner-radius-small-size-medium", - "--spectrum-corner-radius-small-size-small", + "--spectrum-corner-radius-100", "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", - "--spectrum-downstate-height", - "--spectrum-downstate-width", - "--spectrum-field-edge-to-disclosure-icon-100", - "--spectrum-field-edge-to-disclosure-icon-200", - "--spectrum-field-edge-to-disclosure-icon-300", - "--spectrum-field-edge-to-disclosure-icon-75", - "--spectrum-field-edge-to-icon-100", - "--spectrum-field-edge-to-icon-200", - "--spectrum-field-edge-to-icon-300", - "--spectrum-field-edge-to-icon-75", "--spectrum-gray-100", "--spectrum-gray-200", + "--spectrum-gray-50", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover" + "--spectrum-neutral-content-color-hover", + "--spectrum-neutral-content-color-key-focus" ], "passthroughs": [], "high-contrast": [ - "--highcontrast-infield-button-background-color", - "--highcontrast-infield-button-icon-color" + "--highcontrast-infield-button-border-color", + "--highcontrast-infield-button-border-color-active" ] } diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css index 7e076444f77..56b5dc7b2c1 100644 --- a/tokens/custom/large-vars.css +++ b/tokens/custom/large-vars.css @@ -139,4 +139,6 @@ --spectrum-field-edge-to-icon-100: 9px; --spectrum-field-edge-to-icon-200: 11px; --spectrum-field-edge-to-icon-300: 14px; + + --spectrum-help-text-to-component: 0px; } diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css index 63c1191f713..a120ba3831b 100644 --- a/tokens/custom/medium-vars.css +++ b/tokens/custom/medium-vars.css @@ -137,4 +137,6 @@ --spectrum-field-edge-to-icon-100: 5px; --spectrum-field-edge-to-icon-200: 6px; --spectrum-field-edge-to-icon-300: 10px; + + --spectrum-help-text-to-component: 0px; } From 75ce5026b60ccfaa1dc31cbe32604b1a0f1f9742 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Wed, 30 Apr 2025 10:17:51 -0400 Subject: [PATCH 02/22] feat(combobox): refactoring field label and helptext --- components/checkbox/dist/metadata.json | 126 ++++++++----------- components/combobox/index.css | 72 ++++++----- components/combobox/stories/template.js | 133 ++++++++++---------- components/infieldbutton/dist/metadata.json | 109 +++++++--------- 4 files changed, 201 insertions(+), 239 deletions(-) diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index 5f2d712964c..daf35c48fa3 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -2,86 +2,64 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Checkbox", + ".spectrum-Checkbox .spectrum-Checkbox-box", + ".spectrum-Checkbox .spectrum-Checkbox-box:after", + ".spectrum-Checkbox .spectrum-Checkbox-box:before", ".spectrum-Checkbox .spectrum-Checkbox-checkmark", + ".spectrum-Checkbox .spectrum-Checkbox-input", + ".spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark", + ".spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before", ".spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label", + ".spectrum-Checkbox .spectrum-Checkbox-input:checked:hover:disabled + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox .spectrum-Checkbox-input:disabled", ".spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before", ".spectrum-Checkbox .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label", + ".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after", + ".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label", + ".spectrum-Checkbox .spectrum-Checkbox-input:hover:disabled + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox .spectrum-Checkbox-label", ".spectrum-Checkbox .spectrum-Checkbox-partialCheckmark", - ".spectrum-Checkbox--emphasized .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-invalid .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--sizeL", - ".spectrum-Checkbox--sizeS", - ".spectrum-Checkbox--sizeXL", - ".spectrum-Checkbox-box", - ".spectrum-Checkbox-box:after", - ".spectrum-Checkbox-box:before", - ".spectrum-Checkbox-input", - ".spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark", - ".spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox-input:disabled", + ".spectrum-Checkbox--emphasized.is-indeterminate:not(.is-invalid) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized:not(.is-invalid) .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box", - ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after", - ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label", - ".spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox-label", - ".spectrum-Checkbox-label:lang(ja)", - ".spectrum-Checkbox-label:lang(ko)", - ".spectrum-Checkbox-label:lang(zh)", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-checkmark", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-invalid", ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-label", - ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input", - ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label", - ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label", + ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.spectrum-Checkbox--emphasized", + ".spectrum-Checkbox.spectrum-Checkbox--sizeL", + ".spectrum-Checkbox.spectrum-Checkbox--sizeS", + ".spectrum-Checkbox.spectrum-Checkbox--sizeXL", ".spectrum-Checkbox:active .spectrum-Checkbox-box:before", ".spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox:active .spectrum-Checkbox-label", ".spectrum-Checkbox:hover .spectrum-Checkbox-box:before", ".spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox:hover .spectrum-Checkbox-label", + ".spectrum-Checkbox:lang(ja)", + ".spectrum-Checkbox:lang(ko)", + ".spectrum-Checkbox:lang(zh)", + ".spectrum-Checkbox:not(.is-readOnly) .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box", ".spectrum-Checkbox:not(.is-readOnly):active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box" ], "modifiers": [ "--mod-checkbox-animation-duration", "--mod-checkbox-border-width", + "--mod-checkbox-bottom-to-text", "--mod-checkbox-checkmark-color", "--mod-checkbox-content-color-default", "--mod-checkbox-content-color-disabled", @@ -94,38 +72,30 @@ "--mod-checkbox-control-color-focus", "--mod-checkbox-control-color-hover", "--mod-checkbox-control-corner-radius", - "--mod-checkbox-control-invalid-color-down", "--mod-checkbox-control-selected-color-default", "--mod-checkbox-control-selected-color-down", - "--mod-checkbox-control-selected-color-focus", "--mod-checkbox-control-selected-color-hover", "--mod-checkbox-control-size", - "--mod-checkbox-emphasized-color-default", - "--mod-checkbox-emphasized-color-down", - "--mod-checkbox-emphasized-color-focus", - "--mod-checkbox-emphasized-color-hover", "--mod-checkbox-focus-indicator-color", "--mod-checkbox-focus-indicator-gap", - "--mod-checkbox-focus-indicator-thinkness", + "--mod-checkbox-focus-indicator-thickness", "--mod-checkbox-font-size", "--mod-checkbox-height", - "--mod-checkbox-invalid-color-default", - "--mod-checkbox-invalid-color-focus", - "--mod-checkbox-invalid-color-hover", "--mod-checkbox-line-height", "--mod-checkbox-line-height-cjk", + "--mod-checkbox-margin-block", "--mod-checkbox-selected-border-width", - "--mod-checkbox-spacing", "--mod-checkbox-text-to-control", "--mod-checkbox-top-to-text", "--mod-focus-indicator-thickness" ], "component": [ "--spectrum-checkbox-animation-duration", + "--spectrum-checkbox-background-color", "--spectrum-checkbox-border-width", + "--spectrum-checkbox-bottom-to-text", "--spectrum-checkbox-checkmark-color", "--spectrum-checkbox-content-color-default", - "--spectrum-checkbox-content-color-disabled", "--spectrum-checkbox-content-color-down", "--spectrum-checkbox-content-color-focus", "--spectrum-checkbox-content-color-hover", @@ -137,7 +107,6 @@ "--spectrum-checkbox-control-corner-radius", "--spectrum-checkbox-control-selected-color-default", "--spectrum-checkbox-control-selected-color-down", - "--spectrum-checkbox-control-selected-color-focus", "--spectrum-checkbox-control-selected-color-hover", "--spectrum-checkbox-control-size", "--spectrum-checkbox-control-size-extra-large", @@ -160,17 +129,28 @@ "--spectrum-checkbox-line-height", "--spectrum-checkbox-line-height-cjk", "--spectrum-checkbox-selected-border-width", - "--spectrum-checkbox-spacing", + "--spectrum-checkbox-text-font-style", + "--spectrum-checkbox-text-font-weight", "--spectrum-checkbox-text-to-control", + "--spectrum-checkbox-top-to-control", + "--spectrum-checkbox-top-to-control-extra-large", + "--spectrum-checkbox-top-to-control-large", + "--spectrum-checkbox-top-to-control-medium", + "--spectrum-checkbox-top-to-control-small", "--spectrum-checkbox-top-to-text" ], "global": [ - "--spectrum-accent-color-1000", - "--spectrum-accent-color-1100", - "--spectrum-accent-color-900", + "--spectrum-accent-content-color-default", + "--spectrum-accent-content-color-down", + "--spectrum-accent-content-color-hover", + "--spectrum-accent-content-color-key-focus", "--spectrum-animation-duration-100", "--spectrum-border-width-200", "--spectrum-cjk-line-height-100", + "--spectrum-component-bottom-to-text-100", + "--spectrum-component-bottom-to-text-200", + "--spectrum-component-bottom-to-text-300", + "--spectrum-component-bottom-to-text-75", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", @@ -183,7 +163,9 @@ "--spectrum-component-top-to-text-75", "--spectrum-corner-radius-small-size-extra-large", "--spectrum-corner-radius-small-size-large", + "--spectrum-corner-radius-small-size-medium", "--spectrum-corner-radius-small-size-small", + "--spectrum-default-font-style", "--spectrum-disabled-content-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", @@ -192,21 +174,15 @@ "--spectrum-font-size-200", "--spectrum-font-size-300", "--spectrum-font-size-75", - "--spectrum-gray-50", - "--spectrum-gray-700", - "--spectrum-gray-800", + "--spectrum-gray-25", "--spectrum-line-height-100", "--spectrum-negative-color-1000", - "--spectrum-negative-color-1100", "--spectrum-negative-color-900", - "--spectrum-neutral-background-color-selected-default", - "--spectrum-neutral-background-color-selected-down", - "--spectrum-neutral-background-color-selected-hover", - "--spectrum-neutral-background-color-selected-key-focus", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", + "--spectrum-regular-font-weight", "--spectrum-text-to-control-100", "--spectrum-text-to-control-200", "--spectrum-text-to-control-300", @@ -217,7 +193,6 @@ "--highcontrast-checkbox-background-color-default", "--highcontrast-checkbox-color-default", "--highcontrast-checkbox-color-focus", - "--highcontrast-checkbox-color-hover", "--highcontrast-checkbox-content-color-default", "--highcontrast-checkbox-content-color-down", "--highcontrast-checkbox-content-color-focus", @@ -226,7 +201,6 @@ "--highcontrast-checkbox-focus-indicator-color", "--highcontrast-checkbox-highlight-color-default", "--highcontrast-checkbox-highlight-color-down", - "--highcontrast-checkbox-highlight-color-focus", "--highcontrast-checkbox-highlight-color-hover" ] } diff --git a/components/combobox/index.css b/components/combobox/index.css index 30f6dc86e17..c8e5bd80a6a 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -175,34 +175,13 @@ } } -@media (forced-colors: active) { - .spectrum-Combobox { - --highcontrast-combobox-border-color-highlight: Highlight; - --highcontrast-combobox-border-color-invalid: Highlight; - --highcontrast-combobox-background-color-default: Canvas; - --highcontrast-combobox-readonly-border-color: CanvasText; - - .spectrum-Combobox-button.spectrum-PickerButton--quiet { - .spectrum-PickerButton-fill { - forced-color-adjust: none; - } - - .spectrum-PickerButton-icon { - /* Should match foreground color of the Textfield. */ - color: CanvasText; - } - } - } -} - .spectrum-Combobox { position: relative; - display: inline-flex; + display: inline-grid; flex-flow: row nowrap; inline-size: var(--mod-combobox-inline-size, var(--spectrum-combobox-inline-size)); min-inline-size: var(--mod-combobox-min-inline-size, var(--spectrum-combobox-min-inline-size)); - block-size: var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)); margin-block-start: var(--mod-combobox-spacing-label-to-combobox, var(--spectrum-combobox-spacing-label-to-combobox)); border-radius: var(--mod-combobox-border-radius, var(--spectrum-combobox-border-radius)); @@ -329,10 +308,9 @@ } } -/* TEXTFIELD (wrapper) */ -.spectrum-Combobox-textfield { - inline-size: 100%; - display: inline-flex; +.spectrum-Combobox-content { + display: flex; + block-size: var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)); } /* TEXT INPUT */ @@ -403,10 +381,24 @@ } } -&:not(&--left).spectrum-Combobox-label { - display: flex; - align-items: center; - justify-content: space-between; +.spectrum-Combobox--sideLabel { + .spectrum-Combobox-textfield { + inline-size: auto; + } + .spectrum-Combobox-label { + grid-row: 1 / span 2; + grid-column: 1 / span 1; + } + + .spectrum-Combobox-content { + grid-row: 1 / span 1; + grid-column: 2 / span 1; + } + + .spectrum-Combobox-helptext { + grid-row: 2 / span 1; + grid-column: 2 / span 1; + } } /* VALIDATION ICON */ @@ -427,3 +419,23 @@ display: none; } } + +@media (forced-colors: active) { + .spectrum-Combobox { + --highcontrast-combobox-border-color-highlight: Highlight; + --highcontrast-combobox-border-color-invalid: Highlight; + --highcontrast-combobox-background-color-default: Canvas; + --highcontrast-combobox-readonly-border-color: CanvasText; + + .spectrum-Combobox-button.spectrum-PickerButton--quiet { + .spectrum-PickerButton-fill { + forced-color-adjust: none; + } + + .spectrum-PickerButton-icon { + /* Should match foreground color of the Textfield. */ + color: CanvasText; + } + } + } +} diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js index fc4df184e6b..514a3976b32 100644 --- a/components/combobox/stories/template.js +++ b/components/combobox/stories/template.js @@ -26,10 +26,17 @@ const Combobox = ({ isKeyboardFocused = false, isLoading = false, isReadOnly = false, + showHelpText = false, + helpText = "This is a help text", + fieldLabelText = "Select location", + fieldLabelPosition = "top", + isLabelRequired = false, + showFieldLabel = false, value = "", } = {}, context = {}) => { const { updateArgs } = context; const comboboxId = id || getRandomId("combobox"); + const fieldWidth = size === "s" ? 192 : size === "l" ? 224 : size === "xl" ? 240 : 208; // default value is "m" // Handle click outside of the combobox to close it if (typeof window !== "undefined" && isOpen) { @@ -61,47 +68,70 @@ const Combobox = ({ "is-loading": isLoading, "is-disabled": isDisabled, "is-readOnly": isReadOnly, + [`${rootClass}--sideLabel`]: fieldLabelPosition === "left", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} id=${ifDefined(id)} data-testid=${ifDefined(testId ?? id)} style=${styleMap(customStyles)} > + ${when(showFieldLabel, () => + FieldLabel({ + size, + label: fieldLabelText, + isDisabled, + customClasses: [`${rootClass}-label`], + alignment: fieldLabelPosition === "left" && "left", + isRequired: isLabelRequired, + }, context) + )} +
${TextField({ - size, - isDisabled, - isInvalid, - isFocused, - isKeyboardFocused, - customClasses: [ - `${rootClass}-textfield`, - ...(isLoading ? ["is-loading"] : []), - ], - customInputClasses: [`${rootClass}-input`], - isLoading, - customInfieldProgressCircleClasses: ["spectrum-Combobox-progress-circle"], - name: "field", - isReadOnly, - value, - onclick: function () { - if (!isOpen) updateArgs({ isOpen: true }); - }, - }, context)} - ${InfieldButton({ - customClasses: [ - `${rootClass}-button`, - ...(!isDisabled && isOpen ? ["is-open"] : []), - ], - size, - id: getRandomId("infieldbutton"), - isDisabled, - tabindex: "-1", - onclick: function () { - updateArgs({ - isOpen: !isOpen, - }); - }, - }, context)} + size, + isDisabled, + isInvalid, + isFocused, + isKeyboardFocused, + customClasses: [ + `${rootClass}-textfield`, + ...(isLoading ? ["is-loading"] : []), + ], + customInputClasses: [`${rootClass}-input`], + isLoading, + customInfieldProgressCircleClasses: ["spectrum-Combobox-progress-circle"], + name: "field", + isReadOnly, + value, + onclick: function () { + if (!isOpen) updateArgs({ isOpen: true }); + }, + }, context)} + ${InfieldButton({ + customClasses: [ + `${rootClass}-button`, + ...(!isDisabled && isOpen ? ["is-open"] : []), + ], + size, + id: getRandomId("infieldbutton"), + isDisabled, + tabindex: "-1", + onclick: function () { + updateArgs({ + isOpen: !isOpen, + }); + }, + }, context)} +
+ ${when(showHelpText, () => + HelpText({ + customClasses: [`${rootClass}-helptext`], + size, + isDisabled, + hideIcon: true, + text: helpText, + variant: isInvalid ? "negative" : "neutral", + }, context) + )} `; }; @@ -110,38 +140,20 @@ export const Template = ({ size = "m", isOpen = true, isDisabled = false, - isLabelRequired = false, - showFieldLabel = false, isReadOnly = false, - showHelpText = false, - helpText = "This is a help text", - fieldLabelText = "Select location", - fieldLabelPosition = "top", content = [], value = "", ...args } = {}, context = {}) => { const popoverHeight = size === "s" ? 106 : size === "l" ? 170 : size === "xl" ? 229 : 142; // default value is "m" - const fieldWidth = size === "s" ? 192 : size === "l" ? 224 : size === "xl" ? 240 : 208; // default value is "m" + return html`
- ${when(showFieldLabel, () => - FieldLabel({ - size, - label: fieldLabelText, - isDisabled, - ...(fieldLabelPosition !== "left" && { - customStyles: { "inline-size": `${fieldWidth}px` }, - }), - customClasses: [`${args.rootClass}-label`], - alignment: fieldLabelPosition === "left" && "left", - isRequired: isLabelRequired, - }, context) - )} + ${[ Popover({ isOpen: isOpen && !isDisabled && !isReadOnly, @@ -162,19 +174,6 @@ export const Template = ({ popoverHeight, }, context), ]} - ${when(showHelpText, () => - HelpText({ - customClasses: [`${args.rootClass}-helptext`], - ...(fieldLabelPosition !== "left" && { - customStyles: { "inline-size": `${fieldWidth}px` }, - }), - size, - isDisabled, - hideIcon: true, - text: helpText, - variant: args.isInvalid ? "negative" : "neutral", - }, context) - )}
`; }; diff --git a/components/infieldbutton/dist/metadata.json b/components/infieldbutton/dist/metadata.json index 9b4476f0a4a..cf5dfa5f4cc 100644 --- a/components/infieldbutton/dist/metadata.json +++ b/components/infieldbutton/dist/metadata.json @@ -2,25 +2,21 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-InfieldButton", - ".spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill", - ".spectrum-InfieldButton--left .spectrum-InfieldButton-fill", - ".spectrum-InfieldButton--right .spectrum-InfieldButton-fill", - ".spectrum-InfieldButton--top .spectrum-InfieldButton-fill", + ".spectrum-InfieldButton--quiet", + ".spectrum-InfieldButton--quiet:disabled", + ".spectrum-InfieldButton--quiet:not(:disabled):active", + ".spectrum-InfieldButton--quiet:not(:disabled):focus-visible", + ".spectrum-InfieldButton--quiet:not(:disabled):hover", ".spectrum-InfieldButton-fill", ".spectrum-InfieldButton-icon", - ".spectrum-InfieldButton.spectrum-InfieldButton--bottom", - ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeL", - ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeS", - ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeXL", + ".spectrum-InfieldButton-inline", + ".spectrum-InfieldButton-inline .spectrum-InfieldButton", + ".spectrum-InfieldButton-inline > .spectrum-InfieldButton.spectrum-InfieldButton--sizeS", ".spectrum-InfieldButton.spectrum-InfieldButton--quiet", ".spectrum-InfieldButton.spectrum-InfieldButton--quiet:disabled", ".spectrum-InfieldButton.spectrum-InfieldButton--sizeL", ".spectrum-InfieldButton.spectrum-InfieldButton--sizeS", ".spectrum-InfieldButton.spectrum-InfieldButton--sizeXL", - ".spectrum-InfieldButton.spectrum-InfieldButton--top", - ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeL", - ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeS", - ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeXL", ".spectrum-InfieldButton:active", ".spectrum-InfieldButton:disabled", ".spectrum-InfieldButton:focus-visible", @@ -30,8 +26,6 @@ ".spectrum-InfieldButton:not(:disabled):hover" ], "modifiers": [ - "--mod-infield-border-color", - "--mod-infield-border-color-quiet", "--mod-infield-button-background-color", "--mod-infield-button-background-color-disabled", "--mod-infield-button-background-color-down", @@ -48,10 +42,8 @@ "--mod-infield-button-border-color-disabled", "--mod-infield-button-border-color-quiet-disabled", "--mod-infield-button-border-radius", - "--mod-infield-button-border-radius-reset", - "--mod-infield-button-border-width", - "--mod-infield-button-border-width-quiet", "--mod-infield-button-edge-to-fill", + "--mod-infield-button-field-edge-to-icon", "--mod-infield-button-fill-justify-content", "--mod-infield-button-fill-padding", "--mod-infield-button-height", @@ -63,84 +55,69 @@ "--mod-infield-button-icon-color-hover-disabled", "--mod-infield-button-icon-color-key-focus", "--mod-infield-button-icon-color-key-focus-disabled", - "--mod-infield-button-inner-edge-to-fill", - "--mod-infield-button-stacked-border-radius-reset", - "--mod-infield-button-stacked-bottom-border-block-end-width", - "--mod-infield-button-stacked-bottom-border-radius-end-end", - "--mod-infield-button-stacked-bottom-border-radius-end-start", - "--mod-infield-button-stacked-fill-padding-inline", - "--mod-infield-button-stacked-fill-padding-inner", - "--mod-infield-button-stacked-fill-padding-outer", - "--mod-infield-button-stacked-top-border-radius-start-start", - "--mod-infield-button-width", - "--mod-infield-button-width-stacked" + "--mod-infield-button-side-edge-to-fill", + "--mod-infield-button-width" ], "component": [ - "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large", - "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large", - "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium", - "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small", - "--spectrum-in-field-button-edge-to-fill", - "--spectrum-in-field-button-fill-stacked-inner-border-rounding", - "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large", - "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large", - "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium", - "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small", - "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large", - "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large", - "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium", - "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small", - "--spectrum-in-field-button-stacked-inner-edge-to-fill", - "--spectrum-in-field-button-width-stacked-extra-large", - "--spectrum-in-field-button-width-stacked-large", - "--spectrum-in-field-button-width-stacked-medium", - "--spectrum-in-field-button-width-stacked-small", + "--spectrum-in-field-button-edge-to-fill-extra-large", + "--spectrum-in-field-button-edge-to-fill-large", + "--spectrum-in-field-button-edge-to-fill-medium", + "--spectrum-in-field-button-edge-to-fill-small", + "--spectrum-in-field-button-side-edge-to-fill-extra-large", + "--spectrum-in-field-button-side-edge-to-fill-large", + "--spectrum-in-field-button-side-edge-to-fill-medium", + "--spectrum-in-field-button-side-edge-to-fill-small", "--spectrum-infield-button-background-color", "--spectrum-infield-button-background-color-down", "--spectrum-infield-button-background-color-hover", - "--spectrum-infield-button-background-color-key-focus", - "--spectrum-infield-button-border-color", "--spectrum-infield-button-border-radius", - "--spectrum-infield-button-border-radius-reset", - "--spectrum-infield-button-border-width", + "--spectrum-infield-button-downstate-perspective", "--spectrum-infield-button-edge-to-fill", + "--spectrum-infield-button-field-edge-to-disclosure-icon", "--spectrum-infield-button-fill-justify-content", "--spectrum-infield-button-fill-padding", "--spectrum-infield-button-height", "--spectrum-infield-button-icon-color", "--spectrum-infield-button-icon-color-down", "--spectrum-infield-button-icon-color-hover", - "--spectrum-infield-button-icon-color-key-focus", - "--spectrum-infield-button-inner-edge-to-fill", - "--spectrum-infield-button-stacked-border-radius-reset", - "--spectrum-infield-button-stacked-bottom-border-radius-end-start", - "--spectrum-infield-button-stacked-fill-padding-inline", - "--spectrum-infield-button-stacked-fill-padding-inner", - "--spectrum-infield-button-stacked-fill-padding-outer", - "--spectrum-infield-button-stacked-top-border-radius-start-start", + "--spectrum-infield-button-inline-edge-to-fill", + "--spectrum-infield-button-inline-field-edge-to-icon", "--spectrum-infield-button-width" ], "global": [ "--spectrum-animation-duration-100", - "--spectrum-border-width-100", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", - "--spectrum-corner-radius-100", + "--spectrum-component-size-difference-down", + "--spectrum-component-size-minimum-perspective-down", + "--spectrum-component-size-width-ratio-down", + "--spectrum-corner-radius-small-size-extra-large", + "--spectrum-corner-radius-small-size-large", + "--spectrum-corner-radius-small-size-medium", + "--spectrum-corner-radius-small-size-small", "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", + "--spectrum-downstate-height", + "--spectrum-downstate-width", + "--spectrum-field-edge-to-disclosure-icon-100", + "--spectrum-field-edge-to-disclosure-icon-200", + "--spectrum-field-edge-to-disclosure-icon-300", + "--spectrum-field-edge-to-disclosure-icon-75", + "--spectrum-field-edge-to-icon-100", + "--spectrum-field-edge-to-icon-200", + "--spectrum-field-edge-to-icon-300", + "--spectrum-field-edge-to-icon-75", "--spectrum-gray-100", "--spectrum-gray-200", - "--spectrum-gray-50", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus" + "--spectrum-neutral-content-color-hover" ], "passthroughs": [], "high-contrast": [ - "--highcontrast-infield-button-border-color", - "--highcontrast-infield-button-border-color-active" + "--highcontrast-infield-button-background-color", + "--highcontrast-infield-button-icon-color" ] } From 428d391655f74e257ec6e54984b2127351e7311e Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Wed, 30 Apr 2025 10:59:13 -0400 Subject: [PATCH 03/22] feat(combobox): add metadata files --- components/combobox/dist/metadata.json | 107 +++++++++++++----------- components/combobox/index.css | 5 +- components/combobox/stories/template.js | 1 - components/helptext/dist/metadata.json | 4 +- 4 files changed, 64 insertions(+), 53 deletions(-) diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index c0626f6390e..678a5d2d20e 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -4,22 +4,17 @@ ".spectrum-Combobox", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon", - ".spectrum-Combobox .spectrum-Popover.is-open", - ".spectrum-Combobox--quiet", - ".spectrum-Combobox--quiet .spectrum-Combobox-input", - ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input", - ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon", - ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input", - ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly .spectrum-Combobox-input:read-only", - ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only", - ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only", - ".spectrum-Combobox--quiet.spectrum-Combobox--sizeL", - ".spectrum-Combobox--quiet.spectrum-Combobox--sizeM", - ".spectrum-Combobox--quiet.spectrum-Combobox--sizeS", - ".spectrum-Combobox--quiet.spectrum-Combobox--sizeXL", + ".spectrum-Combobox ~ .spectrum-Popover.is-open", + ".spectrum-Combobox--sideLabel .spectrum-Combobox-content", + ".spectrum-Combobox--sideLabel .spectrum-Combobox-helptext", + ".spectrum-Combobox--sideLabel .spectrum-Combobox-label", + ".spectrum-Combobox--sideLabel .spectrum-Combobox-textfield", ".spectrum-Combobox--sizeL", + ".spectrum-Combobox--sizeL ~ .spectrum-Combobox-popover", ".spectrum-Combobox--sizeS", + ".spectrum-Combobox--sizeS ~ .spectrum-Combobox-popover", ".spectrum-Combobox--sizeXL", + ".spectrum-Combobox--sizeXL ~ .spectrum-Combobox-popover", ".spectrum-Combobox-button", ".spectrum-Combobox-button.is-focused:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", ".spectrum-Combobox-button.is-focused:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover", @@ -39,15 +34,20 @@ ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus-visible", ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus:hover", ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover", + ".spectrum-Combobox-content", + ".spectrum-Combobox-helptext", + ".spectrum-Combobox-helptext .spectrum-HelpText-text", ".spectrum-Combobox-input", ".spectrum-Combobox-input::placeholder", ".spectrum-Combobox-input:active", ".spectrum-Combobox-input:focus", ".spectrum-Combobox-input:focus:hover", ".spectrum-Combobox-input:hover", + ".spectrum-Combobox-input:lang(ja)", + ".spectrum-Combobox-input:lang(ko)", + ".spectrum-Combobox-input:lang(zh)", ".spectrum-Combobox-progress-circle", ".spectrum-Combobox-progress-circle:dir(rtl)", - ".spectrum-Combobox-textfield", ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input", ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input:hover", ".spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input", @@ -61,12 +61,12 @@ ".spectrum-Combobox.is-focused:hover .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", - ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only", - ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover", - ".spectrum-Combobox.is-readOnly.is-invalid:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only", - ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only", - ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover", - ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input", + ".spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only", + ".spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only:hover", + ".spectrum-Combobox.is-readOnly .spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input", + ".spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only", + ".spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only:hover", + ".spectrum-Combobox.is-readOnly.is-invalid .spectrum-Combobox-input:read-only", ".spectrum-Combobox:has(:active) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", ".spectrum-Combobox:has(:active) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", @@ -123,25 +123,24 @@ "--mod-combobox-icon-size", "--mod-combobox-inline-size", "--mod-combobox-line-height", + "--mod-combobox-line-height-cjk", "--mod-combobox-min-inline-size", + "--mod-combobox-popover-animation-distance", "--mod-combobox-readonly-border-color-disabled", - "--mod-combobox-readonly-input-border-color", + "--mod-combobox-spacing-alert-icon-to-text", "--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-spacing-label-to-combobox", + "--mod-combobox-spacing-to-help-text", + "--mod-combobox-textfield-background-color" ], "component": [ "--spectrum-combo-box-minimum-width-multiplier", - "--spectrum-combo-box-quiet-minimum-width-multiplier", - "--spectrum-combo-box-visual-to-field-button-extra-large", - "--spectrum-combo-box-visual-to-field-button-large", - "--spectrum-combo-box-visual-to-field-button-medium", - "--spectrum-combo-box-visual-to-field-button-quiet", - "--spectrum-combo-box-visual-to-field-button-small", + "--spectrum-combo-box-visual-to-field-button", + "--spectrum-combobox-background-color-default", "--spectrum-combobox-background-color-disabled", "--spectrum-combobox-block-size", "--spectrum-combobox-block-spacing-edge-to-alert", @@ -159,16 +158,17 @@ "--spectrum-combobox-border-color-key-focus", "--spectrum-combobox-border-radius", "--spectrum-combobox-border-width", - "--spectrum-combobox-button-inline-offset", "--spectrum-combobox-button-width", "--spectrum-combobox-focus-indicator-color", "--spectrum-combobox-focus-indicator-gap", "--spectrum-combobox-focus-indicator-thickness", "--spectrum-combobox-font-size", "--spectrum-combobox-font-style", + "--spectrum-combobox-font-weight", "--spectrum-combobox-icon-size", "--spectrum-combobox-inline-size", "--spectrum-combobox-line-height", + "--spectrum-combobox-line-height-cjk", "--spectrum-combobox-min-inline-size", "--spectrum-combobox-readonly-background-color-disabled", "--spectrum-combobox-readonly-border-color-disabled", @@ -176,16 +176,18 @@ "--spectrum-combobox-readonly-input-background-color", "--spectrum-combobox-readonly-input-border-color", "--spectrum-combobox-readonly-text-color-disabled", + "--spectrum-combobox-spacing-alert-icon-to-text", "--spectrum-combobox-spacing-block-end-edge-to-text", "--spectrum-combobox-spacing-block-start-edge-to-text", - "--spectrum-combobox-spacing-edge-to-menu", "--spectrum-combobox-spacing-inline-end-edge-to-text", "--spectrum-combobox-spacing-inline-icon-to-button", "--spectrum-combobox-spacing-inline-start-edge-to-text", - "--spectrum-combobox-spacing-label-to-combobox" + "--spectrum-combobox-spacing-label-to-combobox", + "--spectrum-combobox-spacing-to-help-text" ], "global": [ - "--spectrum-border-width-100", + "--spectrum-border-width-200", + "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", "--spectrum-component-bottom-to-text-300", @@ -206,26 +208,27 @@ "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", - "--spectrum-corner-radius-100", + "--spectrum-component-top-to-workflow-icon-100", + "--spectrum-component-top-to-workflow-icon-200", + "--spectrum-component-top-to-workflow-icon-300", + "--spectrum-component-top-to-workflow-icon-75", + "--spectrum-corner-radius-medium-size-extra-large", + "--spectrum-corner-radius-medium-size-large", + "--spectrum-corner-radius-medium-size-medium", + "--spectrum-corner-radius-medium-size-small", "--spectrum-default-font-style", "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", - "--spectrum-field-edge-to-text-quiet", "--spectrum-field-label-to-component", - "--spectrum-field-label-to-component-quiet-extra-large", - "--spectrum-field-label-to-component-quiet-large", - "--spectrum-field-label-to-component-quiet-medium", - "--spectrum-field-label-to-component-quiet-small", - "--spectrum-field-top-to-alert-icon-extra-large", - "--spectrum-field-top-to-alert-icon-large", - "--spectrum-field-top-to-alert-icon-medium", - "--spectrum-field-top-to-alert-icon-small", "--spectrum-field-top-to-progress-circle-extra-large", "--spectrum-field-top-to-progress-circle-large", "--spectrum-field-top-to-progress-circle-medium", "--spectrum-field-top-to-progress-circle-small", - "--spectrum-field-width", + "--spectrum-field-width-extra-large", + "--spectrum-field-width-large", + "--spectrum-field-width-medium", + "--spectrum-field-width-small", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", @@ -234,17 +237,22 @@ "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-25", - "--spectrum-gray-50", - "--spectrum-gray-500", - "--spectrum-gray-600", + "--spectrum-gray-300", + "--spectrum-gray-400", "--spectrum-gray-800", "--spectrum-gray-900", + "--spectrum-help-text-to-component", "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-focus", "--spectrum-negative-border-color-focus-hover", "--spectrum-negative-border-color-hover", "--spectrum-negative-border-color-key-focus", + "--spectrum-regular-font-weight", + "--spectrum-text-to-visual-100", + "--spectrum-text-to-visual-200", + "--spectrum-text-to-visual-300", + "--spectrum-text-to-visual-75", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-300", @@ -253,12 +261,11 @@ "passthroughs": [ "--mod-picker-button-background-color", "--mod-picker-button-background-color-disabled", - "--mod-picker-button-background-color-quiet", "--mod-picker-button-border-color", "--mod-picker-button-border-color-disabled", - "--mod-picker-button-border-color-quiet", "--mod-picker-button-border-width", "--mod-picker-button-font-color-disabled", + "--mod-popover-animation-distance", "--mod-textfield-background-color", "--mod-textfield-background-color-disabled", "--mod-textfield-border-color", @@ -287,8 +294,10 @@ "--mod-textfield-text-color-keyboard-focus" ], "high-contrast": [ + "--highcontrast-combobox-background-color-default", "--highcontrast-combobox-border-color-highlight", "--highcontrast-combobox-border-color-invalid", + "--highcontrast-combobox-readonly-border-color", "--highcontrast-textfield-border-color-invalid-default", "--highcontrast-textfield-text-color-disabled" ] diff --git a/components/combobox/index.css b/components/combobox/index.css index c8e5bd80a6a..588ae2f46a2 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -385,14 +385,15 @@ .spectrum-Combobox-textfield { inline-size: auto; } + .spectrum-Combobox-label { grid-row: 1 / span 2; - grid-column: 1 / span 1; + grid-column: 1 / span 1; } .spectrum-Combobox-content { grid-row: 1 / span 1; - grid-column: 2 / span 1; + grid-column: 2 / span 1; } .spectrum-Combobox-helptext { diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js index 514a3976b32..ba497e8c8a6 100644 --- a/components/combobox/stories/template.js +++ b/components/combobox/stories/template.js @@ -36,7 +36,6 @@ const Combobox = ({ } = {}, context = {}) => { const { updateArgs } = context; const comboboxId = id || getRandomId("combobox"); - const fieldWidth = size === "s" ? 192 : size === "l" ? 224 : size === "xl" ? 240 : 208; // default value is "m" // Handle click outside of the combobox to close it if (typeof window !== "undefined" && isOpen) { diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index be511d08651..4ed0075bb8c 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -93,6 +93,8 @@ "passthroughs": [], "high-contrast": [ "--highcontrast-helptext-content-color-default", - "--highcontrast-helptext-icon-color-default" + "--highcontrast-helptext-content-color-disabled", + "--highcontrast-helptext-icon-color-default", + "--highcontrast-helptext-icon-color-disabled" ] } From acd4c201e355d838cdf038d3672cfaacb2466d98 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Tue, 6 May 2025 14:21:42 -0400 Subject: [PATCH 04/22] feat(combobox): add changeset, more test cases and metadata --- .changeset/four-lemons-warn.md | 22 ++++++++++++++++++++ components/combobox/stories/combobox.test.js | 14 +++++++++++++ components/helptext/dist/metadata.json | 4 +--- 3 files changed, 37 insertions(+), 3 deletions(-) create mode 100644 .changeset/four-lemons-warn.md diff --git a/.changeset/four-lemons-warn.md b/.changeset/four-lemons-warn.md new file mode 100644 index 00000000000..0fb3f13f837 --- /dev/null +++ b/.changeset/four-lemons-warn.md @@ -0,0 +1,22 @@ +--- +"@spectrum-css/combobox": major +--- + +## Combobox S2 Migration + +The new combo box is coming in with more pronounced corner radius, thicker outline, and the use of the infield button nested inside. The quiet styling has also been deprecated. + +### New tokens + +`--spectrum-combobox-font-weight` +`--spectrum-combobox-line-height-cjk` +`--spectrum-combobox-spacing-alert-icon-to-text` +`--spectrum-combobox-spacing-to-help-text` + +### New mods + +`--mod-combobox-line-height-cjk` +`--mod-combobox-popover-animation-distance` +`--mod-combobox-spacing-alert-icon-to-text` +`--mod-combobox-spacing-to-help-text` +`--mod-combobox-textfield-background-color` diff --git a/components/combobox/stories/combobox.test.js b/components/combobox/stories/combobox.test.js index a7e8ba57379..901e2ca6dde 100644 --- a/components/combobox/stories/combobox.test.js +++ b/components/combobox/stories/combobox.test.js @@ -22,12 +22,26 @@ export const ComboBoxGroup = Variants({ isOpen: false, fieldLabelPosition: "top", }, + { + testHeading: "With field label top + help text", + showFieldLabel: true, + isOpen: false, + fieldLabelPosition: "top", + showHelpText: true, + }, { testHeading: "With field label left", showFieldLabel: true, isOpen: false, fieldLabelPosition: "left", }, + { + testHeading: "With field label left + help text ", + showFieldLabel: true, + isOpen: false, + fieldLabelPosition: "left", + showHelpText: true, + }, { testHeading: "Truncation", isOpen: false, diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index 4ed0075bb8c..be511d08651 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -93,8 +93,6 @@ "passthroughs": [], "high-contrast": [ "--highcontrast-helptext-content-color-default", - "--highcontrast-helptext-content-color-disabled", - "--highcontrast-helptext-icon-color-default", - "--highcontrast-helptext-icon-color-disabled" + "--highcontrast-helptext-icon-color-default" ] } From 055803f0ac03d8f765ac9984bf7743668c6ebdf0 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Tue, 6 May 2025 15:51:08 -0400 Subject: [PATCH 05/22] chore(combobox): adding helptext metadata --- components/helptext/dist/metadata.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index be511d08651..4ed0075bb8c 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -93,6 +93,8 @@ "passthroughs": [], "high-contrast": [ "--highcontrast-helptext-content-color-default", - "--highcontrast-helptext-icon-color-default" + "--highcontrast-helptext-content-color-disabled", + "--highcontrast-helptext-icon-color-default", + "--highcontrast-helptext-icon-color-disabled" ] } From 611b313736198ab4f0288b9f6786d7287a079f3f Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Fri, 9 May 2025 15:20:05 -0400 Subject: [PATCH 06/22] feat(combobox): add aria label, adjust story copy, and changeset --- .changeset/four-lemons-warn.md | 10 ++++++++-- components/combobox/index.css | 6 ++++++ components/combobox/stories/combobox.stories.js | 10 +++++++--- components/combobox/stories/template.js | 5 +++++ components/helptext/dist/metadata.json | 4 +--- 5 files changed, 27 insertions(+), 8 deletions(-) diff --git a/.changeset/four-lemons-warn.md b/.changeset/four-lemons-warn.md index 0fb3f13f837..fc03f8dbc89 100644 --- a/.changeset/four-lemons-warn.md +++ b/.changeset/four-lemons-warn.md @@ -2,9 +2,15 @@ "@spectrum-css/combobox": major --- -## Combobox S2 Migration +### Combobox S2 Migration -The new combo box is coming in with more pronounced corner radius, thicker outline, and the use of the infield button nested inside. The quiet styling has also been deprecated. +#### New Changes + +- Removed quiet styling variant +- Updated corner radius to match S2 specifications +- Changed outline thickness for better visibility +- Replaced picker button with in-field button component +- Added help text along with invalid state ### New tokens diff --git a/components/combobox/index.css b/components/combobox/index.css index 588ae2f46a2..7e683ceaeb7 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -238,6 +238,12 @@ } } +.spectrum-Combobox-label { + display: flex; + align-items: center; + justify-content: space-between; +} + /* PICKER BUTTON */ .spectrum-Combobox-button { position: absolute; diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index e22a5c2fb79..0243f8e4250 100644 --- a/components/combobox/stories/combobox.stories.js +++ b/components/combobox/stories/combobox.stories.js @@ -15,11 +15,11 @@ import { Template, VariantGroup } from "./template.js"; * * ### General notes * - * - Combobox uses `.spectrum-PickerButton` instead of a `.spectrum-Picker` + * - Combobox uses `.spectrum-InfieldButton` instead of a `.spectrum-PickerButton` * - The following classes must be added: * - `.spectrum-Combobox-textfield` is required on the Textfield outer element (`.spectrum-Textfield`) * - `.spectrum-Combobox-input` is required on the `` element inside of Textfields (`.spectrum-Textfield-input`) - * - `.spectrum-Combobox-button` is required on the FieldButton (`.spectrum-ActionButton spectrum-ActionButton--sizeM`) + * - `.spectrum-Combobox-button` is required on the InfieldButton (`.spectrum-InfieldButton`) * * ### Indicating validity and focus * @@ -28,7 +28,7 @@ import { Template, VariantGroup } from "./template.js"; * - `.is-focused` - when the input or button is focused with the mouse * - `.is-keyboardFocused` - when the input or button is focused with the keyboard * - `.is-valid` - when the input has an explicit valid state - * - `.is-invalid` - when the input has an explicit invalid state + * - `.is-invalid` - when the input has an explicit invalid state; should also show help text for error messaging * - `.is-disabled` - when the control is disabled; should also add to the `.spectrum-Combobox-textfield` and include a `[disabled]` attribute to the `.spectrum-Combobox-button` * - `.is-loading` - when the progress circle is being shown * @@ -178,6 +178,10 @@ export default { downState: { selectors: [".spectrum-InfieldButton:not(:disabled)"], }, + status: { + type: "migrated", + }, + tags: ["migrated"], packageJson, metadata, }, diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js index ba497e8c8a6..7ce853b662e 100644 --- a/components/combobox/stories/template.js +++ b/components/combobox/stories/template.js @@ -73,6 +73,11 @@ const Combobox = ({ id=${ifDefined(id)} data-testid=${ifDefined(testId ?? id)} style=${styleMap(customStyles)} + role="combobox" + aria-expanded=${isOpen} + aria-haspopup="listbox" + aria-controls=${`${comboboxId}-popover`} + aria-owns=${`${comboboxId}-popover`} > ${when(showFieldLabel, () => FieldLabel({ diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index 4ed0075bb8c..be511d08651 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -93,8 +93,6 @@ "passthroughs": [], "high-contrast": [ "--highcontrast-helptext-content-color-default", - "--highcontrast-helptext-content-color-disabled", - "--highcontrast-helptext-icon-color-default", - "--highcontrast-helptext-icon-color-disabled" + "--highcontrast-helptext-icon-color-default" ] } From e0098406954de06f4e188ac52952f5a8245cd658 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Mon, 12 May 2025 15:04:53 -0400 Subject: [PATCH 07/22] chore(combobox): updating metadata files --- components/combobox/dist/metadata.json | 1 + components/helptext/dist/metadata.json | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 678a5d2d20e..1c37d51221a 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -46,6 +46,7 @@ ".spectrum-Combobox-input:lang(ja)", ".spectrum-Combobox-input:lang(ko)", ".spectrum-Combobox-input:lang(zh)", + ".spectrum-Combobox-label", ".spectrum-Combobox-progress-circle", ".spectrum-Combobox-progress-circle:dir(rtl)", ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input", diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index be511d08651..4ed0075bb8c 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -93,6 +93,8 @@ "passthroughs": [], "high-contrast": [ "--highcontrast-helptext-content-color-default", - "--highcontrast-helptext-icon-color-default" + "--highcontrast-helptext-content-color-disabled", + "--highcontrast-helptext-icon-color-default", + "--highcontrast-helptext-icon-color-disabled" ] } From 00e73114df68652a08635979d5e307c9eca62d54 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Mon, 12 May 2025 15:46:33 -0400 Subject: [PATCH 08/22] feat(combobox): add help text docs --- components/combobox/dist/metadata.json | 1 - .../combobox/stories/combobox.stories.js | 17 ++++++++++++- components/combobox/stories/template.js | 25 +++++++++++++++++++ components/helptext/dist/metadata.json | 4 +-- 4 files changed, 42 insertions(+), 5 deletions(-) diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 1c37d51221a..678a5d2d20e 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -46,7 +46,6 @@ ".spectrum-Combobox-input:lang(ja)", ".spectrum-Combobox-input:lang(ko)", ".spectrum-Combobox-input:lang(zh)", - ".spectrum-Combobox-label", ".spectrum-Combobox-progress-circle", ".spectrum-Combobox-progress-circle:dir(rtl)", ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input", diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index 0243f8e4250..37a0d31b411 100644 --- a/components/combobox/stories/combobox.stories.js +++ b/components/combobox/stories/combobox.stories.js @@ -6,7 +6,7 @@ import { within } from "@storybook/test"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { ComboBoxGroup } from "./combobox.test.js"; -import { Template, VariantGroup } from "./template.js"; +import { HelpTextTemplate, Template, VariantGroup } from "./template.js"; /** * Comboboxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query. @@ -219,6 +219,21 @@ DefaultGroup.parameters = { }, }; +/** + * Comboboxes can show help text to provide feedback to users. The description in the help text is flexible and encompasses a range of guidance. Sometimes this guidance is about what to input, and sometime it’s about how to input. This includes information such as: + * + * - An overall description of the input field + * - Hints for what kind of information needs to be input + * - Specific formatting examples or requirements + */ +export const HelpText = HelpTextTemplate.bind({}); +HelpText.tags = ["!dev"]; +HelpText.args = { + showHelpText: true, + helpText: "This is a help text. Select an option", +}; + + /** * Comboboxes have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A combobox does not have a read-only option if no selection has been made. To enable this feature, add the `.isReadOnly` class to the combobox. To enable this feature, add the .isReadOnly class to the combobox. Then within the nested textfield component, add the .isReadOnly class and readonly attribute to the `` element. */ diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js index 7ce853b662e..6f2e7532998 100644 --- a/components/combobox/stories/template.js +++ b/components/combobox/stories/template.js @@ -182,6 +182,31 @@ export const Template = ({ `; }; +export const HelpTextTemplate = (args, context) => { + const variants = [ + { + heading: "Help text", + args: {...args, showHelpText: true, helpText: "Choose a topic. Add a new topic by typing it in the field, then selecting 'Enter.'"}, + }, + { + heading: "Help text with error", + args: {...args, showHelpText: true, helpText: "Choose or add at least one topic.", isInvalid: true}, + } + ]; + + return Container({ + direction: "row", + withHeading: false, + withBorder: false, + content: html`${variants.map(variant => Container({ + withBorder: false, + heading: variant.heading, + containerStyles: {"display": "inline"}, + content: Combobox(variant.args, context)}, + context))}`, + }, context); +}; + export const VariantGroup = (args, context) => { const variants = [ { diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index 4ed0075bb8c..be511d08651 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -93,8 +93,6 @@ "passthroughs": [], "high-contrast": [ "--highcontrast-helptext-content-color-default", - "--highcontrast-helptext-content-color-disabled", - "--highcontrast-helptext-icon-color-default", - "--highcontrast-helptext-icon-color-disabled" + "--highcontrast-helptext-icon-color-default" ] } From 844b4dd6121445c1817bd4f16203d965db135a78 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Tue, 13 May 2025 13:08:31 -0400 Subject: [PATCH 09/22] chore(combobox): restore some metadata files --- components/combobox/dist/metadata.json | 1 + components/helptext/dist/metadata.json | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 678a5d2d20e..1c37d51221a 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -46,6 +46,7 @@ ".spectrum-Combobox-input:lang(ja)", ".spectrum-Combobox-input:lang(ko)", ".spectrum-Combobox-input:lang(zh)", + ".spectrum-Combobox-label", ".spectrum-Combobox-progress-circle", ".spectrum-Combobox-progress-circle:dir(rtl)", ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input", diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index be511d08651..4ed0075bb8c 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -93,6 +93,8 @@ "passthroughs": [], "high-contrast": [ "--highcontrast-helptext-content-color-default", - "--highcontrast-helptext-icon-color-default" + "--highcontrast-helptext-content-color-disabled", + "--highcontrast-helptext-icon-color-default", + "--highcontrast-helptext-icon-color-disabled" ] } From fb00afcbe6eac473064dd6576801f6ef0aaffe5b Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Thu, 15 May 2025 17:26:50 -0400 Subject: [PATCH 10/22] feat(combobox): adding new tests, fixing css and template --- components/combobox/dist/metadata.json | 13 +++--- components/combobox/index.css | 40 ++++++++--------- .../combobox/stories/combobox.stories.js | 23 +++------- components/combobox/stories/combobox.test.js | 43 +++++++------------ components/combobox/stories/template.js | 23 ++++++---- components/helptext/dist/metadata.json | 4 +- 6 files changed, 66 insertions(+), 80 deletions(-) diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 1c37d51221a..43fc4d4eafb 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -4,7 +4,7 @@ ".spectrum-Combobox", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon", - ".spectrum-Combobox ~ .spectrum-Popover.is-open", + ".spectrum-Combobox ~ .spectrum-Combobox-popover", ".spectrum-Combobox--sideLabel .spectrum-Combobox-content", ".spectrum-Combobox--sideLabel .spectrum-Combobox-helptext", ".spectrum-Combobox--sideLabel .spectrum-Combobox-label", @@ -90,7 +90,7 @@ "--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-icon", "--mod-combobox-block-spacing-edge-to-progress-circle", "--mod-combobox-border-color-default", "--mod-combobox-border-color-disabled", @@ -105,7 +105,6 @@ "--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", @@ -133,8 +132,10 @@ "--mod-combobox-spacing-block-start-edge-to-text", "--mod-combobox-spacing-inline-end-edge-to-text", "--mod-combobox-spacing-inline-icon-to-button", + "--mod-combobox-spacing-inline-icon-to-text", "--mod-combobox-spacing-inline-start-edge-to-text", "--mod-combobox-spacing-label-to-combobox", + "--mod-combobox-spacing-side-label-to-field", "--mod-combobox-spacing-to-help-text", "--mod-combobox-textfield-background-color" ], @@ -144,7 +145,7 @@ "--spectrum-combobox-background-color-default", "--spectrum-combobox-background-color-disabled", "--spectrum-combobox-block-size", - "--spectrum-combobox-block-spacing-edge-to-alert", + "--spectrum-combobox-block-spacing-edge-to-icon", "--spectrum-combobox-block-spacing-edge-to-progress-circle", "--spectrum-combobox-border-color-default", "--spectrum-combobox-border-color-disabled", @@ -177,13 +178,14 @@ "--spectrum-combobox-readonly-input-background-color", "--spectrum-combobox-readonly-input-border-color", "--spectrum-combobox-readonly-text-color-disabled", - "--spectrum-combobox-spacing-alert-icon-to-text", "--spectrum-combobox-spacing-block-end-edge-to-text", "--spectrum-combobox-spacing-block-start-edge-to-text", "--spectrum-combobox-spacing-inline-end-edge-to-text", "--spectrum-combobox-spacing-inline-icon-to-button", + "--spectrum-combobox-spacing-inline-icon-to-text", "--spectrum-combobox-spacing-inline-start-edge-to-text", "--spectrum-combobox-spacing-label-to-combobox", + "--spectrum-combobox-spacing-side-label-to-field", "--spectrum-combobox-spacing-to-help-text" ], "global": [ @@ -250,6 +252,7 @@ "--spectrum-negative-border-color-hover", "--spectrum-negative-border-color-key-focus", "--spectrum-regular-font-weight", + "--spectrum-spacing-200", "--spectrum-text-to-visual-100", "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-300", diff --git a/components/combobox/index.css b/components/combobox/index.css index 7e683ceaeb7..a41c66df1ca 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -18,14 +18,13 @@ --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button); --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-combobox-block-spacing-edge-to-icon: var(--spectrum-component-top-to-workflow-icon-100); --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-combobox-spacing-alert-icon-to-text: var(--spectrum-text-to-visual-100); + --spectrum-combobox-spacing-inline-icon-to-text: var(--spectrum-text-to-visual-100); - /* TODO - need to add this token to library */ --spectrum-combobox-spacing-to-help-text: var(--spectrum-help-text-to-component); --spectrum-combobox-inline-size: var(--spectrum-field-width-medium); @@ -40,6 +39,7 @@ --spectrum-combobox-border-width: var(--spectrum-border-width-200); --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component); + --spectrum-combobox-spacing-side-label-to-field: var(--spectrum-spacing-200); --spectrum-combobox-font-style: var(--spectrum-default-font-style); --spectrum-combobox-font-weight: var(--spectrum-regular-font-weight); @@ -121,12 +121,12 @@ --spectrum-combobox-font-size: var(--spectrum-font-size-75); --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-combobox-block-spacing-edge-to-icon: var(--spectrum-component-top-to-workflow-icon-75); --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75); --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75); --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75); - --spectrum-combobox-spacing-alert-icon-to-text: var(--spectrum-text-to-visual-75); + --spectrum-combobox-spacing-inline-icon-to-text: var(--spectrum-text-to-visual-75); --spectrum-combobox-inline-size: var(--spectrum-field-width-small); --spectrum-combobox-border-radius: var(--spectrum-corner-radius-medium-size-small); @@ -141,12 +141,12 @@ --spectrum-combobox-font-size: var(--spectrum-font-size-200); --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-combobox-block-spacing-edge-to-icon: var(--spectrum-component-top-to-workflow-icon-200); --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200); --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-combobox-spacing-alert-icon-to-text: var(--spectrum-text-to-visual-200); + --spectrum-combobox-spacing-inline-icon-to-text: var(--spectrum-text-to-visual-200); --spectrum-combobox-inline-size: var(--spectrum-field-width-large); --spectrum-combobox-border-radius: var(--spectrum-corner-radius-medium-size-large); @@ -161,12 +161,12 @@ --spectrum-combobox-font-size: var(--spectrum-font-size-300); --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-component-top-to-workflow-icon-300); + --spectrum-combobox-block-spacing-edge-to-icon: var(--spectrum-component-top-to-workflow-icon-300); --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300); --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-combobox-spacing-alert-icon-to-text: var(--spectrum-text-to-visual-300); + --spectrum-combobox-spacing-inline-icon-to-text: var(--spectrum-text-to-visual-300); --spectrum-combobox-inline-size: var(--spectrum-field-width-extra-large); --spectrum-combobox-border-radius: var(--spectrum-corner-radius-medium-size-extra-large); @@ -178,7 +178,6 @@ .spectrum-Combobox { position: relative; display: inline-grid; - flex-flow: row nowrap; inline-size: var(--mod-combobox-inline-size, var(--spectrum-combobox-inline-size)); min-inline-size: var(--mod-combobox-min-inline-size, var(--spectrum-combobox-min-inline-size)); @@ -186,7 +185,7 @@ border-radius: var(--mod-combobox-border-radius, var(--spectrum-combobox-border-radius)); - ~ .spectrum-Popover.is-open { + ~ .spectrum-Combobox-popover { --mod-popover-animation-distance: var(--mod-combobox-popover-animation-distance, var(--spectrum-component-to-menu-medium)); } @@ -229,8 +228,8 @@ position: absolute; inset-inline-end: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width))); inset-block-start: var(--mod-combobox-block-spacing-edge-to-progress-circle, var(--spectrum-combobox-block-spacing-edge-to-progress-circle)); - inset-block-end: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert)); - padding-inline-start: var(--mod-combobox-spacing-alert-icon-to-text, var(--spectrum-combobox-spacing-alert-icon-to-text)); + inset-block-end: var(--mod-combobox-block-spacing-edge-to-icon, var(--spectrum-combobox-block-spacing-edge-to-icon)); + padding-inline-start: var(--mod-combobox-spacing-inline-icon-to-text, var(--spectrum-combobox-spacing-inline-icon-to-text)); &:dir(rtl) { inset-inline-end: inherit; @@ -315,7 +314,7 @@ } .spectrum-Combobox-content { - display: flex; + display: inline-grid; block-size: var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)); } @@ -365,9 +364,7 @@ /* ****** Invalid & Loading ****** */ .spectrum-Combobox-textfield.is-invalid &, .spectrum-Combobox-textfield.is-loading & { - padding-inline-end: calc( - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, 0px) - (var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) * 2) - ); + padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-alert-icon-to-text, var(--spectrum-combobox-spacing-inline-icon-to-text))); } &:lang(ja), @@ -393,8 +390,9 @@ } .spectrum-Combobox-label { - grid-row: 1 / span 2; + grid-row: 1; grid-column: 1 / span 1; + margin-inline-end: var(--mod-combobox-spacing-side-label-to-field, var(--spectrum-combobox-spacing-side-label-to-field)); } .spectrum-Combobox-content { @@ -414,10 +412,10 @@ inline-size: var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)); block-size: var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)); - inset-block-start: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert)); - inset-block-end: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert)); + inset-block-start: var(--mod-combobox-block-spacing-edge-to-icon, var(--spectrum-combobox-block-spacing-edge-to-icon)); + inset-block-end: var(--mod-combobox-block-spacing-edge-to-icon, var(--spectrum-combobox-block-spacing-edge-to-icon)); inset-inline-end: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width))); - padding-inline-start: var(--mod-combobox-spacing-alert-icon-to-text, var(--spectrum-combobox-spacing-alert-icon-to-text)); + padding-inline-start: var(--mod-combobox-spacing-inline-icon-to-text, var(--spectrum-combobox-spacing-inline-icon-to-text)); } .spectrum-Textfield.is-disabled &, diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index 37a0d31b411..6a9fa953cce 100644 --- a/components/combobox/stories/combobox.stories.js +++ b/components/combobox/stories/combobox.stories.js @@ -1,7 +1,7 @@ import { Template as Menu } from "@spectrum-css/menu/stories/template.js"; import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isLoading, isOpen, isReadOnly, size } from "@spectrum-css/preview/types"; +import { isDisabled, isFocused, isHovered, isInvalid, isKeyboardFocused, isLoading, isOpen, isReadOnly, size } from "@spectrum-css/preview/types"; import { within } from "@storybook/test"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; @@ -15,7 +15,7 @@ import { HelpTextTemplate, Template, VariantGroup } from "./template.js"; * * ### General notes * - * - Combobox uses `.spectrum-InfieldButton` instead of a `.spectrum-PickerButton` + * - Combobox uses `.spectrum-InfieldButton` as a menu trigger. * - The following classes must be added: * - `.spectrum-Combobox-textfield` is required on the Textfield outer element (`.spectrum-Textfield`) * - `.spectrum-Combobox-input` is required on the `` element inside of Textfields (`.spectrum-Textfield-input`) @@ -27,7 +27,6 @@ import { HelpTextTemplate, Template, VariantGroup } from "./template.js"; * * - `.is-focused` - when the input or button is focused with the mouse * - `.is-keyboardFocused` - when the input or button is focused with the keyboard - * - `.is-valid` - when the input has an explicit valid state * - `.is-invalid` - when the input has an explicit invalid state; should also show help text for error messaging * - `.is-disabled` - when the control is disabled; should also add to the `.spectrum-Combobox-textfield` and include a `[disabled]` attribute to the `.spectrum-Combobox-button` * - `.is-loading` - when the progress circle is being shown @@ -47,6 +46,7 @@ export default { if: { arg: "isReadOnly", truthy: false }, }, isInvalid, + isHovered, isFocused, isKeyboardFocused, isLoading, @@ -88,19 +88,10 @@ export default { type: { summary: "string" }, category: "Component", }, - options: ["top", "left"], + options: ["top", "side"], control: "select", if: { arg: "showFieldLabel", truthy: true }, }, - showHelpText: { - name: "Show help text", - type: { name: "boolean" }, - table: { - type: { summary: "boolean" }, - category: "Component", - }, - control: "boolean", - }, helpText: { name: "Help text", type: { name: "text" }, @@ -109,7 +100,6 @@ export default { category: "Component", }, control: "text", - if: { arg: "showHelpText", truthy: true }, }, value: { name: "Value", @@ -128,6 +118,7 @@ export default { size: "m", isOpen: false, isInvalid: false, + isHovered: false, isFocused: false, isKeyboardFocused: false, isLoading: false, @@ -138,7 +129,7 @@ export default { showHelpText: false, testId: "combobox", fieldLabelText: "Select location", - helpText: "This is a help text. Select an option", + helpText: "", value: "Ballard", content: [ (passthroughs, context) => Menu({ @@ -235,7 +226,7 @@ HelpText.args = { /** - * Comboboxes have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A combobox does not have a read-only option if no selection has been made. To enable this feature, add the `.isReadOnly` class to the combobox. To enable this feature, add the .isReadOnly class to the combobox. Then within the nested textfield component, add the .isReadOnly class and readonly attribute to the `` element. + * Comboboxes have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A combobox does not have a read-only option if no selection has been made. To enable this feature, add the `.is-readOnly` class to the combobox. To enable this feature, add the .isReadOnly class to the combobox. Then within the nested textfield component, add the .isReadOnly class and readonly attribute to the `` element. */ export const ReadOnly = Template.bind({}); ReadOnly.tags = ["!dev"]; diff --git a/components/combobox/stories/combobox.test.js b/components/combobox/stories/combobox.test.js index 901e2ca6dde..a7c380b2c87 100644 --- a/components/combobox/stories/combobox.test.js +++ b/components/combobox/stories/combobox.test.js @@ -9,6 +9,10 @@ export const ComboBoxGroup = Variants({ testHeading: "Default", isOpen: false, }, + { + testHeading: "Invalid", + isInvalid: true, + }, { testHeading: "Open", isOpen: true, @@ -17,30 +21,10 @@ export const ComboBoxGroup = Variants({ }, }, { - testHeading: "With field label top", - showFieldLabel: true, - isOpen: false, - fieldLabelPosition: "top", - }, - { - testHeading: "With field label top + help text", + testHeading: "With field label on the side", showFieldLabel: true, isOpen: false, - fieldLabelPosition: "top", - showHelpText: true, - }, - { - testHeading: "With field label left", - showFieldLabel: true, - isOpen: false, - fieldLabelPosition: "left", - }, - { - testHeading: "With field label left + help text ", - showFieldLabel: true, - isOpen: false, - fieldLabelPosition: "left", - showHelpText: true, + fieldLabelPosition: "side", }, { testHeading: "Truncation", @@ -50,16 +34,17 @@ export const ComboBoxGroup = Variants({ ], stateData: [ { - testHeading: "Disabled", - isDisabled: true, + testHeading: "Hovered", + isHovered: true, }, { - testHeading: "Invalid", - isInvalid: true, + testHeading: "Focused", + isFocused: true, }, { - testHeading: "Focused", + testHeading: "Focused + Hovered", isFocused: true, + isHovered: true, }, { testHeading: "Keyboard focused", @@ -73,5 +58,9 @@ export const ComboBoxGroup = Variants({ testHeading: "Read-only", isReadOnly: true }, + { + testHeading: "Disabled", + isDisabled: true, + }, ], }); diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js index 6f2e7532998..c48dd49a133 100644 --- a/components/combobox/stories/template.js +++ b/components/combobox/stories/template.js @@ -22,12 +22,12 @@ const Combobox = ({ isOpen = true, isInvalid = false, isDisabled = false, + isHovered = false, isFocused = false, isKeyboardFocused = false, isLoading = false, isReadOnly = false, - showHelpText = false, - helpText = "This is a help text", + helpText, fieldLabelText = "Select location", fieldLabelPosition = "top", isLabelRequired = false, @@ -62,12 +62,13 @@ const Combobox = ({ typeof size !== "undefined", "is-open": !isDisabled && isOpen, "is-invalid": !isDisabled && isInvalid, + "is-hovered": !isDisabled && isHovered, "is-focused": !isDisabled && isFocused, "is-keyboardFocused": !isDisabled && isKeyboardFocused, "is-loading": isLoading, "is-disabled": isDisabled, "is-readOnly": isReadOnly, - [`${rootClass}--sideLabel`]: fieldLabelPosition === "left", + [`${rootClass}--sideLabel`]: fieldLabelPosition === "side", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} id=${ifDefined(id)} @@ -85,7 +86,7 @@ const Combobox = ({ label: fieldLabelText, isDisabled, customClasses: [`${rootClass}-label`], - alignment: fieldLabelPosition === "left" && "left", + alignment: fieldLabelPosition === "side" && "side", isRequired: isLabelRequired, }, context) )} @@ -95,6 +96,7 @@ const Combobox = ({ isDisabled, isInvalid, isFocused, + isHovered, isKeyboardFocused, customClasses: [ `${rootClass}-textfield`, @@ -117,7 +119,7 @@ const Combobox = ({ ], size, id: getRandomId("infieldbutton"), - isDisabled, + isDisabled: isDisabled || isReadOnly, tabindex: "-1", onclick: function () { updateArgs({ @@ -126,7 +128,7 @@ const Combobox = ({ }, }, context)} - ${when(showHelpText, () => + ${when(helpText, () => HelpText({ customClasses: [`${rootClass}-helptext`], size, @@ -164,6 +166,9 @@ export const Template = ({ withTip: false, position: "bottom-start", customClasses: [`${args.rootClass}-popover`], + customStyles: { + "inline-size": size === "s" ? "192px" : size === "l" ? "224px" : size === "xl" ? "240px" : "208px", + }, trigger: (passthrough) => Combobox({ size, isOpen, @@ -174,7 +179,6 @@ export const Template = ({ ...passthrough, }, context), content, - popoverWidth: size === "s" ? 140 : size === "l" ? 191 : size === "xl" ? 192 : 166, // default value is "m" popoverHeight, }, context), ]} @@ -202,7 +206,10 @@ export const HelpTextTemplate = (args, context) => { withBorder: false, heading: variant.heading, containerStyles: {"display": "inline"}, - content: Combobox(variant.args, context)}, + content: Combobox({ + ...variant.args, + customStyles: {"margin-top": "8px"} + }, context)}, context))}`, }, context); }; diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index 4ed0075bb8c..be511d08651 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -93,8 +93,6 @@ "passthroughs": [], "high-contrast": [ "--highcontrast-helptext-content-color-default", - "--highcontrast-helptext-content-color-disabled", - "--highcontrast-helptext-icon-color-default", - "--highcontrast-helptext-icon-color-disabled" + "--highcontrast-helptext-icon-color-default" ] } From 001949178dc747902d280e018747dafe868417f7 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Fri, 16 May 2025 12:08:37 -0400 Subject: [PATCH 11/22] feat(combobox): updating css classes, adding role to ifb, autocomplete --- components/combobox/dist/metadata.json | 14 +- .../combobox/stories/combobox.stories.js | 9 +- components/combobox/stories/template.js | 8 +- components/helptext/dist/metadata.json | 4 +- components/infieldbutton/stories/template.js | 1 + components/menu/dist/metadata.json | 153 +++++++++++++----- components/swatch/dist/metadata.json | 64 +++++--- components/swatchgroup/dist/metadata.json | 14 +- 8 files changed, 183 insertions(+), 84 deletions(-) diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 43fc4d4eafb..678a5d2d20e 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -4,7 +4,7 @@ ".spectrum-Combobox", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon", - ".spectrum-Combobox ~ .spectrum-Combobox-popover", + ".spectrum-Combobox ~ .spectrum-Popover.is-open", ".spectrum-Combobox--sideLabel .spectrum-Combobox-content", ".spectrum-Combobox--sideLabel .spectrum-Combobox-helptext", ".spectrum-Combobox--sideLabel .spectrum-Combobox-label", @@ -46,7 +46,6 @@ ".spectrum-Combobox-input:lang(ja)", ".spectrum-Combobox-input:lang(ko)", ".spectrum-Combobox-input:lang(zh)", - ".spectrum-Combobox-label", ".spectrum-Combobox-progress-circle", ".spectrum-Combobox-progress-circle:dir(rtl)", ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input", @@ -90,7 +89,7 @@ "--mod-combobox-background-color-hover", "--mod-combobox-background-color-key-focus", "--mod-combobox-block-size", - "--mod-combobox-block-spacing-edge-to-icon", + "--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", @@ -105,6 +104,7 @@ "--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", @@ -132,10 +132,8 @@ "--mod-combobox-spacing-block-start-edge-to-text", "--mod-combobox-spacing-inline-end-edge-to-text", "--mod-combobox-spacing-inline-icon-to-button", - "--mod-combobox-spacing-inline-icon-to-text", "--mod-combobox-spacing-inline-start-edge-to-text", "--mod-combobox-spacing-label-to-combobox", - "--mod-combobox-spacing-side-label-to-field", "--mod-combobox-spacing-to-help-text", "--mod-combobox-textfield-background-color" ], @@ -145,7 +143,7 @@ "--spectrum-combobox-background-color-default", "--spectrum-combobox-background-color-disabled", "--spectrum-combobox-block-size", - "--spectrum-combobox-block-spacing-edge-to-icon", + "--spectrum-combobox-block-spacing-edge-to-alert", "--spectrum-combobox-block-spacing-edge-to-progress-circle", "--spectrum-combobox-border-color-default", "--spectrum-combobox-border-color-disabled", @@ -178,14 +176,13 @@ "--spectrum-combobox-readonly-input-background-color", "--spectrum-combobox-readonly-input-border-color", "--spectrum-combobox-readonly-text-color-disabled", + "--spectrum-combobox-spacing-alert-icon-to-text", "--spectrum-combobox-spacing-block-end-edge-to-text", "--spectrum-combobox-spacing-block-start-edge-to-text", "--spectrum-combobox-spacing-inline-end-edge-to-text", "--spectrum-combobox-spacing-inline-icon-to-button", - "--spectrum-combobox-spacing-inline-icon-to-text", "--spectrum-combobox-spacing-inline-start-edge-to-text", "--spectrum-combobox-spacing-label-to-combobox", - "--spectrum-combobox-spacing-side-label-to-field", "--spectrum-combobox-spacing-to-help-text" ], "global": [ @@ -252,7 +249,6 @@ "--spectrum-negative-border-color-hover", "--spectrum-negative-border-color-key-focus", "--spectrum-regular-font-weight", - "--spectrum-spacing-200", "--spectrum-text-to-visual-100", "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-300", diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index 6a9fa953cce..12d98ea17df 100644 --- a/components/combobox/stories/combobox.stories.js +++ b/components/combobox/stories/combobox.stories.js @@ -92,6 +92,11 @@ export default { control: "select", if: { arg: "showFieldLabel", truthy: true }, }, + autocomplete: { + table: { + disable: true, + }, + }, helpText: { name: "Help text", type: { name: "text" }, @@ -116,7 +121,7 @@ export default { args: { rootClass: "spectrum-Combobox", size: "m", - isOpen: false, + isOpen: true, isInvalid: false, isHovered: false, isFocused: false, @@ -126,7 +131,7 @@ export default { isReadOnly: false, isLabelRequired: false, showFieldLabel: false, - showHelpText: false, + autocomplete: false, testId: "combobox", fieldLabelText: "Select location", helpText: "", diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js index c48dd49a133..dda8221d0ba 100644 --- a/components/combobox/stories/template.js +++ b/components/combobox/stories/template.js @@ -33,6 +33,7 @@ const Combobox = ({ isLabelRequired = false, showFieldLabel = false, value = "", + autocomplete = true, } = {}, context = {}) => { const { updateArgs } = context; const comboboxId = id || getRandomId("combobox"); @@ -102,12 +103,13 @@ const Combobox = ({ `${rootClass}-textfield`, ...(isLoading ? ["is-loading"] : []), ], - customInputClasses: [`${rootClass}-input`], + customInputClasses: [`${rootClass}-input`, `${rootClass}-autocomplete`], isLoading, customInfieldProgressCircleClasses: ["spectrum-Combobox-progress-circle"], name: "field", isReadOnly, value, + autocomplete: autocomplete ? undefined : "off", onclick: function () { if (!isOpen) updateArgs({ isOpen: true }); }, @@ -190,11 +192,11 @@ export const HelpTextTemplate = (args, context) => { const variants = [ { heading: "Help text", - args: {...args, showHelpText: true, helpText: "Choose a topic. Add a new topic by typing it in the field, then selecting 'Enter.'"}, + args: {...args, helpText: "Choose a topic. Add a new topic by typing it in the field, then selecting 'Enter.'"}, }, { heading: "Help text with error", - args: {...args, showHelpText: true, helpText: "Choose or add at least one topic.", isInvalid: true}, + args: {...args, helpText: "Choose or add at least one topic.", isInvalid: true}, } ]; diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index be511d08651..4ed0075bb8c 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -93,6 +93,8 @@ "passthroughs": [], "high-contrast": [ "--highcontrast-helptext-content-color-default", - "--highcontrast-helptext-icon-color-default" + "--highcontrast-helptext-content-color-disabled", + "--highcontrast-helptext-icon-color-default", + "--highcontrast-helptext-icon-color-disabled" ] } diff --git a/components/infieldbutton/stories/template.js b/components/infieldbutton/stories/template.js index fe54a063aa6..02185b17d4e 100644 --- a/components/infieldbutton/stories/template.js +++ b/components/infieldbutton/stories/template.js @@ -111,6 +111,7 @@ export const Template = ( type="button" tabindex=${tabIndex} @click=${onclick} + role="presentation" >
${when(iconName, () => diff --git a/components/menu/dist/metadata.json b/components/menu/dist/metadata.json index 3b4f63996b8..819a2b1b560 100644 --- a/components/menu/dist/metadata.json +++ b/components/menu/dist/metadata.json @@ -12,16 +12,17 @@ ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open.is-focused", ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:active", ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus", - ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus-within", ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover", ".spectrum-Menu .spectrum-Menu-item--drillIn.is-open", ".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox", ".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch", + ".spectrum-Menu .spectrum-Menu-item:has(> .spectrum-Menu-itemIcon--workflowIcon) .spectrum-Menu-linkout", ".spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemCheckbox", ".spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch", ".spectrum-Menu .spectrum-Menu-itemIcon", ".spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon", - ".spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", + ".spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark, .spectrum-Menu-linkout)", + ".spectrum-Menu .spectrum-Menu-linkout", ".spectrum-Menu li:not(.spectrum-Menu-item, .spectrum-Menu-divider)", ".spectrum-Menu-back", ".spectrum-Menu-back .spectrum-Menu-sectionHeading", @@ -60,10 +61,10 @@ ".spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron", ".spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron", ".spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron", - ".spectrum-Menu-item.is-disabled", ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription", ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon", ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel", + ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemThumbnail", ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue", ".spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading", ".spectrum-Menu-item.is-disabled:hover", @@ -72,15 +73,17 @@ ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel", ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue", ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading", - ".spectrum-Menu-item.is-focused", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-checkmark", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-chevron", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemDescription", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemLabel", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemValue", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-sectionHeading", + ".spectrum-Menu-item.is-focus-visible", + ".spectrum-Menu-item.is-focus-visible .spectrum-Menu-linkout", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-checkmark", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-chevron", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemDescription", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemLabel", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemValue", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-sectionHeading", ".spectrum-Menu-item:active", + ".spectrum-Menu-item:active .spectrum-Menu-linkout", ".spectrum-Menu-item:active > .spectrum-Menu-checkmark", ".spectrum-Menu-item:active > .spectrum-Menu-chevron", ".spectrum-Menu-item:active > .spectrum-Menu-itemDescription", @@ -88,16 +91,26 @@ ".spectrum-Menu-item:active > .spectrum-Menu-itemLabel", ".spectrum-Menu-item:active > .spectrum-Menu-itemValue", ".spectrum-Menu-item:active > .spectrum-Menu-sectionHeading", - ".spectrum-Menu-item:focus", - ".spectrum-Menu-item:focus > .spectrum-Menu-checkmark", - ".spectrum-Menu-item:focus > .spectrum-Menu-chevron", - ".spectrum-Menu-item:focus > .spectrum-Menu-itemDescription", - ".spectrum-Menu-item:focus > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", - ".spectrum-Menu-item:focus > .spectrum-Menu-itemLabel", - ".spectrum-Menu-item:focus > .spectrum-Menu-itemValue", - ".spectrum-Menu-item:focus > .spectrum-Menu-sectionHeading", ".spectrum-Menu-item:focus-visible", + ".spectrum-Menu-item:focus-visible .spectrum-Menu-linkout", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-checkmark", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-chevron", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-itemDescription", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-itemLabel", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-itemValue", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-sectionHeading", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-checkmark", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemActions", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemCheckbox", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemLabel", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemValue", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) .spectrum-Menu-itemThumbnail", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) > .spectrum-Menu-checkmark", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) > .spectrum-Menu-itemCheckbox", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) > .spectrum-Menu-itemDescription", ".spectrum-Menu-item:hover", + ".spectrum-Menu-item:hover .spectrum-Menu-linkout", ".spectrum-Menu-item:hover > .spectrum-Menu-checkmark", ".spectrum-Menu-item:hover > .spectrum-Menu-chevron", ".spectrum-Menu-item:hover > .spectrum-Menu-itemDescription", @@ -110,11 +123,12 @@ ".spectrum-Menu-itemLabel", ".spectrum-Menu-itemLabel--truncate", ".spectrum-Menu-itemSelection", + ".spectrum-Menu-itemThumbnail", ".spectrum-Menu-itemValue", - ".spectrum-Menu-item[aria-disabled=\"true\"]", ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemDescription", ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemIcon", ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemLabel", + ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemThumbnail", ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemValue", ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-sectionHeading", ".spectrum-Menu-item[aria-disabled=\"true\"]:hover", @@ -123,6 +137,7 @@ ".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemLabel", ".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemValue", ".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-sectionHeading", + ".spectrum-Menu-sectionDescription", ".spectrum-Menu-sectionHeading", ".spectrum-Menu.is-selectable .spectrum-Menu-item", ".spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected", @@ -131,11 +146,9 @@ ".spectrum-Menu.spectrum-Menu--sizeL", ".spectrum-Menu.spectrum-Menu--sizeS", ".spectrum-Menu.spectrum-Menu--sizeXL", - ".spectrum-Menu:dir(rtl)", ".spectrum-Menu:lang(ja)", ".spectrum-Menu:lang(ko)", ".spectrum-Menu:lang(zh)", - "[dir=\"rtl\"] .spectrum-Menu", "[dir=\"rtl\"] .spectrum-Menu .spectrum-Menu-chevron" ], "modifiers": [ @@ -166,6 +179,7 @@ "--mod-menu-item-checkmark-height", "--mod-menu-item-checkmark-width", "--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start", + "--mod-menu-item-corner-radius", "--mod-menu-item-description-color-default", "--mod-menu-item-description-color-disabled", "--mod-menu-item-description-color-down", @@ -195,17 +209,30 @@ "--mod-menu-item-label-text-to-visual", "--mod-menu-item-label-to-description-spacing", "--mod-menu-item-label-to-value-area-min-spacing", + "--mod-menu-item-linkout-icon-height", + "--mod-menu-item-linkout-icon-width", "--mod-menu-item-min-height", "--mod-menu-item-selectable-edge-to-text-not-selected", "--mod-menu-item-text-to-control", + "--mod-menu-item-thumbnail-height", + "--mod-menu-item-thumbnail-opacity-disabled", + "--mod-menu-item-thumbnail-to-label", + "--mod-menu-item-thumbnail-width", "--mod-menu-item-top-edge-to-text", "--mod-menu-item-top-to-action", "--mod-menu-item-top-to-checkbox", "--mod-menu-item-top-to-checkmark", + "--mod-menu-item-top-to-thumbnail", + "--mod-menu-item-top-to-workflow-icon", "--mod-menu-item-value-color-default", "--mod-menu-item-value-color-down", "--mod-menu-item-value-color-focus", "--mod-menu-item-value-color-hover", + "--mod-menu-section-description-color", + "--mod-menu-section-description-font-size", + "--mod-menu-section-description-font-weight", + "--mod-menu-section-description-line-height", + "--mod-menu-section-description-line-height-cjk", "--mod-menu-section-divider-margin-block", "--mod-menu-section-header-bottom-edge-to-text", "--mod-menu-section-header-color", @@ -214,6 +241,7 @@ "--mod-menu-section-header-line-height", "--mod-menu-section-header-line-height-cjk", "--mod-menu-section-header-min-width", + "--mod-menu-section-header-to-description", "--mod-menu-section-header-top-edge-to-text" ], "component": [ @@ -234,18 +262,12 @@ "--spectrum-menu-item-background-color-default", "--spectrum-menu-item-background-color-down", "--spectrum-menu-item-background-color-hover", - "--spectrum-menu-item-background-color-key-focus", + "--spectrum-menu-item-background-color-keyboard-focus", "--spectrum-menu-item-bottom-edge-to-text", "--spectrum-menu-item-checkmark-height", - "--spectrum-menu-item-checkmark-height-extra-large", - "--spectrum-menu-item-checkmark-height-large", - "--spectrum-menu-item-checkmark-height-medium", - "--spectrum-menu-item-checkmark-height-small", "--spectrum-menu-item-checkmark-width", - "--spectrum-menu-item-checkmark-width-extra-large", - "--spectrum-menu-item-checkmark-width-large", - "--spectrum-menu-item-checkmark-width-medium", - "--spectrum-menu-item-checkmark-width-small", + "--spectrum-menu-item-chevron-height", + "--spectrum-menu-item-chevron-width", "--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start", "--spectrum-menu-item-corner-radius", "--spectrum-menu-item-description-color-default", @@ -256,14 +278,12 @@ "--spectrum-menu-item-description-font-size", "--spectrum-menu-item-description-line-height", "--spectrum-menu-item-description-line-height-cjk", - "--spectrum-menu-item-focus-indicator-border-width", "--spectrum-menu-item-focus-indicator-color", "--spectrum-menu-item-focus-indicator-color-default", - "--spectrum-menu-item-focus-indicator-direction-scalar", "--spectrum-menu-item-focus-indicator-offset", "--spectrum-menu-item-focus-indicator-outline-style", - "--spectrum-menu-item-focus-indicator-shadow", "--spectrum-menu-item-focus-indicator-width", + "--spectrum-menu-item-focus-margin", "--spectrum-menu-item-icon-height", "--spectrum-menu-item-icon-width", "--spectrum-menu-item-label-content-color-default", @@ -282,8 +302,13 @@ "--spectrum-menu-item-label-line-height-cjk", "--spectrum-menu-item-label-text-to-visual", "--spectrum-menu-item-label-to-description", - "--spectrum-menu-item-label-to-description-spacing", + "--spectrum-menu-item-label-to-description-extra-large", + "--spectrum-menu-item-label-to-description-large", + "--spectrum-menu-item-label-to-description-medium", + "--spectrum-menu-item-label-to-description-small", "--spectrum-menu-item-label-to-value-area-min-spacing", + "--spectrum-menu-item-linkout-icon-height", + "--spectrum-menu-item-linkout-icon-width", "--spectrum-menu-item-min-height", "--spectrum-menu-item-section-divider-height", "--spectrum-menu-item-selectable-edge-to-text-not-selected", @@ -291,8 +316,11 @@ "--spectrum-menu-item-selectable-edge-to-text-not-selected-large", "--spectrum-menu-item-selectable-edge-to-text-not-selected-medium", "--spectrum-menu-item-selectable-edge-to-text-not-selected-small", - "--spectrum-menu-item-spacing-multiplier", "--spectrum-menu-item-text-to-control", + "--spectrum-menu-item-thumbnail-height", + "--spectrum-menu-item-thumbnail-opacity-disabled", + "--spectrum-menu-item-thumbnail-to-label", + "--spectrum-menu-item-thumbnail-width", "--spectrum-menu-item-top-edge-to-text", "--spectrum-menu-item-top-to-action", "--spectrum-menu-item-top-to-checkbox", @@ -301,24 +329,46 @@ "--spectrum-menu-item-top-to-selected-icon-large", "--spectrum-menu-item-top-to-selected-icon-medium", "--spectrum-menu-item-top-to-selected-icon-small", + "--spectrum-menu-item-top-to-thumbnail", + "--spectrum-menu-item-top-to-thumbnail-extra-large", + "--spectrum-menu-item-top-to-thumbnail-large", + "--spectrum-menu-item-top-to-thumbnail-medium", + "--spectrum-menu-item-top-to-thumbnail-small", + "--spectrum-menu-item-top-to-workflow-icon", "--spectrum-menu-item-value-color-default", "--spectrum-menu-item-value-color-down", "--spectrum-menu-item-value-color-focus", "--spectrum-menu-item-value-color-hover", + "--spectrum-menu-section-description-color", + "--spectrum-menu-section-description-font-size", + "--spectrum-menu-section-description-font-weight", + "--spectrum-menu-section-description-line-height", + "--spectrum-menu-section-description-line-height-cjk", "--spectrum-menu-section-header-color", "--spectrum-menu-section-header-font-size", "--spectrum-menu-section-header-font-weight", "--spectrum-menu-section-header-line-height", "--spectrum-menu-section-header-line-height-cjk", - "--spectrum-menu-section-header-min-width" + "--spectrum-menu-section-header-min-width", + "--spectrum-menu-section-header-to-description", + "--spectrum-menu-section-header-to-description-extra-large", + "--spectrum-menu-section-header-to-description-large", + "--spectrum-menu-section-header-to-description-medium", + "--spectrum-menu-section-header-to-description-small" ], "global": [ "--spectrum-accent-color-1000", "--spectrum-accent-color-1100", "--spectrum-accent-color-900", - "--spectrum-blue-800", "--spectrum-bold-font-weight", - "--spectrum-border-width-200", + "--spectrum-checkmark-icon-size-100", + "--spectrum-checkmark-icon-size-200", + "--spectrum-checkmark-icon-size-300", + "--spectrum-checkmark-icon-size-75", + "--spectrum-chevron-icon-size-100", + "--spectrum-chevron-icon-size-200", + "--spectrum-chevron-icon-size-300", + "--spectrum-chevron-icon-size-75", "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", @@ -332,24 +382,38 @@ "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", + "--spectrum-component-size-difference-down", + "--spectrum-component-size-width-ratio-down", "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", - "--spectrum-corner-radius-100", + "--spectrum-component-top-to-workflow-icon-100", + "--spectrum-component-top-to-workflow-icon-200", + "--spectrum-component-top-to-workflow-icon-300", + "--spectrum-component-top-to-workflow-icon-75", + "--spectrum-corner-radius-400", + "--spectrum-corner-radius-500", + "--spectrum-corner-radius-600", + "--spectrum-corner-radius-700", "--spectrum-disabled-content-color", "--spectrum-divider-thickness-medium", "--spectrum-divider-thickness-small", + "--spectrum-downstate-height", + "--spectrum-downstate-width", "--spectrum-focus-indicator-color", + "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", "--spectrum-font-size-100", "--spectrum-font-size-200", "--spectrum-font-size-300", "--spectrum-font-size-50", "--spectrum-font-size-75", - "--spectrum-gray-1000-rgb", "--spectrum-gray-900", "--spectrum-line-height-100", + "--spectrum-link-out-icon-size-100", + "--spectrum-link-out-icon-size-200", + "--spectrum-link-out-icon-size-75", "--spectrum-navigational-indicator-top-to-back-icon-extra-large", "--spectrum-navigational-indicator-top-to-back-icon-large", "--spectrum-navigational-indicator-top-to-back-icon-medium", @@ -362,6 +426,7 @@ "--spectrum-neutral-subdued-content-color-down", "--spectrum-neutral-subdued-content-color-hover", "--spectrum-neutral-subdued-content-color-key-focus", + "--spectrum-regular-font-weight", "--spectrum-spacing-100", "--spectrum-spacing-50", "--spectrum-text-to-control-100", @@ -371,8 +436,12 @@ "--spectrum-text-to-visual-100", "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-300", + "--spectrum-text-to-visual-400", "--spectrum-text-to-visual-75", - "--spectrum-transparent-black-200-opacity", + "--spectrum-thumbnail-size-500", + "--spectrum-thumbnail-size-700", + "--spectrum-thumbnail-size-800", + "--spectrum-thumbnail-size-900", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-300", diff --git a/components/swatch/dist/metadata.json b/components/swatch/dist/metadata.json index e3affcc83cb..5b40e74c96e 100644 --- a/components/swatch/dist/metadata.json +++ b/components/swatch/dist/metadata.json @@ -4,8 +4,6 @@ ".spectrum-Swatch", ".spectrum-Swatch .spectrum-Swatch-disabledIcon", ".spectrum-Swatch .spectrum-Swatch-fill", - ".spectrum-Swatch--lightBorder .spectrum-Swatch-fill:before", - ".spectrum-Swatch--noBorder .spectrum-Swatch-fill:before", ".spectrum-Swatch--rectangle", ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill", ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before", @@ -22,69 +20,86 @@ ".spectrum-Swatch--roundingNone:after", ".spectrum-Swatch--roundingNone:before", ".spectrum-Swatch--sizeL", - ".spectrum-Swatch--sizeM", + ".spectrum-Swatch--sizeS", ".spectrum-Swatch--sizeXS", ".spectrum-Swatch-disabledIcon", ".spectrum-Swatch-disabledIcon path:first-child", ".spectrum-Swatch-disabledIcon path:last-child", ".spectrum-Swatch-fill", ".spectrum-Swatch-fill:before", + ".spectrum-Swatch-icon", ".spectrum-Swatch-image", - ".spectrum-Swatch-mixedValueIcon", + ".spectrum-Swatch.is-addSwatch", + ".spectrum-Swatch.is-addSwatch .spectrum-Swatch-fill", + ".spectrum-Swatch.is-addSwatch .spectrum-Swatch-icon", + ".spectrum-Swatch.is-addSwatch.is-keyboardFocused", + ".spectrum-Swatch.is-addSwatch:active", + ".spectrum-Swatch.is-addSwatch:focus-visible", + ".spectrum-Swatch.is-addSwatch:hover", ".spectrum-Swatch.is-disabled", ".spectrum-Swatch.is-disabled .spectrum-Swatch-disabledIcon", ".spectrum-Swatch.is-image .spectrum-Swatch-fill:before", + ".spectrum-Swatch.is-keyboardFocused", + ".spectrum-Swatch.is-mixedValue", ".spectrum-Swatch.is-mixedValue .spectrum-Swatch-fill", - ".spectrum-Swatch.is-mixedValue .spectrum-Swatch-mixedValueIcon", - ".spectrum-Swatch.is-nothing .spectrum-Swatch-fill", - ".spectrum-Swatch.is-nothing .spectrum-Swatch-fill:after", - ".spectrum-Swatch.is-nothing.spectrum-Swatch--rectangle .spectrum-Swatch-fill:after", + ".spectrum-Swatch.is-mixedValue .spectrum-Swatch-icon", + ".spectrum-Swatch.is-nothing.spectrum-Swatch--rectangle:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after", + ".spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill", + ".spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after", ".spectrum-Swatch.is-selected", ".spectrum-Swatch.is-selected .spectrum-Swatch-fill", ".spectrum-Swatch.is-selected .spectrum-Swatch-fill:before", ".spectrum-Swatch.is-selected:before", - ".spectrum-Swatch:after", ".spectrum-Swatch:before", - ".spectrum-Swatch:focus-visible:after", + ".spectrum-Swatch:focus-visible", ".spectrum-Swatch[disabled]", ".spectrum-Swatch[disabled] .spectrum-Swatch-disabledIcon" ], "modifiers": [ + "--mod-add-button-background", + "--mod-add-button-background-down", + "--mod-add-button-background-hover", + "--mod-add-button-background-keyboard-focus", "--mod-animation-duration-100", + "--mod-corner-radius-full", + "--mod-mixed-button-background", + "--mod-swatch-border", "--mod-swatch-border-color", - "--mod-swatch-border-color-light", "--mod-swatch-border-color-selected", + "--mod-swatch-border-opacity", "--mod-swatch-border-radius", "--mod-swatch-border-thickness", "--mod-swatch-border-thickness-selected", "--mod-swatch-disabled-icon-color", "--mod-swatch-disabled-icon-size", - "--mod-swatch-focus-indicator-border-radius", "--mod-swatch-focus-indicator-color", "--mod-swatch-focus-indicator-gap", "--mod-swatch-focus-indicator-thickness", "--mod-swatch-icon-border-color", + "--mod-swatch-icon-color", "--mod-swatch-inner-border-color-selected", "--mod-swatch-size", "--mod-swatch-slash-icon-color", "--mod-swatch-slash-thickness" ], "component": [ + "--spectrum-swatch-border", "--spectrum-swatch-border-color", - "--spectrum-swatch-border-color-light", "--spectrum-swatch-border-color-selected", + "--spectrum-swatch-border-opacity", "--spectrum-swatch-border-radius", "--spectrum-swatch-border-thickness", "--spectrum-swatch-border-thickness-selected", - "--spectrum-swatch-dash-icon-color", + "--spectrum-swatch-disabled-icon-border-opacity", "--spectrum-swatch-disabled-icon-color", "--spectrum-swatch-disabled-icon-size", - "--spectrum-swatch-focus-indicator-border-radius", "--spectrum-swatch-focus-indicator-color", "--spectrum-swatch-focus-indicator-gap", "--spectrum-swatch-focus-indicator-thickness", "--spectrum-swatch-icon-border-color", + "--spectrum-swatch-icon-color", "--spectrum-swatch-inner-border-color-selected", + "--spectrum-swatch-rectangle-width-multiplier", "--spectrum-swatch-size", "--spectrum-swatch-size-extra-small", "--spectrum-swatch-size-large", @@ -98,20 +113,28 @@ "--spectrum-swatch-slash-thickness-small" ], "global": [ + "--spectrum-add-button-background", + "--spectrum-add-button-background-down", + "--spectrum-add-button-background-hover", + "--spectrum-add-button-background-keyboard-focus", "--spectrum-animation-duration-100", "--spectrum-border-width-100", "--spectrum-border-width-200", "--spectrum-corner-radius-100", + "--spectrum-corner-radius-full", + "--spectrum-corner-radius-none", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", + "--spectrum-gray-100", + "--spectrum-gray-1000", + "--spectrum-gray-200", "--spectrum-gray-25", - "--spectrum-gray-800", - "--spectrum-gray-900", + "--spectrum-mixed-button-background", + "--spectrum-negative-visual-color", + "--spectrum-neutral-content-color-default", "--spectrum-picked-color", - "--spectrum-red-900", "--spectrum-white", - "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-50", "--spectrum-workflow-icon-size-75" @@ -123,6 +146,7 @@ "--highcontrast-swatch-border-color-selected", "--highcontrast-swatch-disabled-icon-color", "--highcontrast-swatch-fill-foreground-color", - "--highcontrast-swatch-focus-indicator-color" + "--highcontrast-swatch-focus-indicator-color", + "--highcontrast-swatch-icon-color" ] } diff --git a/components/swatchgroup/dist/metadata.json b/components/swatchgroup/dist/metadata.json index 24e3423ca5d..73ac1e248a6 100644 --- a/components/swatchgroup/dist/metadata.json +++ b/components/swatchgroup/dist/metadata.json @@ -3,19 +3,19 @@ "selectors": [ ".spectrum-SwatchGroup", ".spectrum-SwatchGroup--compact", - ".spectrum-SwatchGroup--spacious" + ".spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeM, .spectrum-Swatch--sizeL)", + ".spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeXS, .spectrum-Swatch--sizeS)" ], - "modifiers": [ - "--mod-swatchgroup-spacing-compact", - "--mod-swatchgroup-spacing-regular", - "--mod-swatchgroup-spacing-spacious" + "modifiers": ["--mod-swatchgroup-spacing"], + "component": [ + "--spectrum-swatch-group-spacing-spacious", + "--spectrum-swatchgroup-spacing" ], - "component": ["--spectrum-swatchgroup-spacing"], "global": [ "--spectrum-spacing-100", "--spectrum-spacing-50", "--spectrum-spacing-75" ], - "passthroughs": [], + "passthroughs": ["--mod-swatch-border-opacity"], "high-contrast": [] } From 85e0bf2b6b61a85735344bc8d3619187c780a23d Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Fri, 16 May 2025 12:15:40 -0400 Subject: [PATCH 12/22] chore(combobox): adding combobox metadata files --- components/combobox/dist/metadata.json | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 678a5d2d20e..43fc4d4eafb 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -4,7 +4,7 @@ ".spectrum-Combobox", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon", - ".spectrum-Combobox ~ .spectrum-Popover.is-open", + ".spectrum-Combobox ~ .spectrum-Combobox-popover", ".spectrum-Combobox--sideLabel .spectrum-Combobox-content", ".spectrum-Combobox--sideLabel .spectrum-Combobox-helptext", ".spectrum-Combobox--sideLabel .spectrum-Combobox-label", @@ -46,6 +46,7 @@ ".spectrum-Combobox-input:lang(ja)", ".spectrum-Combobox-input:lang(ko)", ".spectrum-Combobox-input:lang(zh)", + ".spectrum-Combobox-label", ".spectrum-Combobox-progress-circle", ".spectrum-Combobox-progress-circle:dir(rtl)", ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input", @@ -89,7 +90,7 @@ "--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-icon", "--mod-combobox-block-spacing-edge-to-progress-circle", "--mod-combobox-border-color-default", "--mod-combobox-border-color-disabled", @@ -104,7 +105,6 @@ "--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", @@ -132,8 +132,10 @@ "--mod-combobox-spacing-block-start-edge-to-text", "--mod-combobox-spacing-inline-end-edge-to-text", "--mod-combobox-spacing-inline-icon-to-button", + "--mod-combobox-spacing-inline-icon-to-text", "--mod-combobox-spacing-inline-start-edge-to-text", "--mod-combobox-spacing-label-to-combobox", + "--mod-combobox-spacing-side-label-to-field", "--mod-combobox-spacing-to-help-text", "--mod-combobox-textfield-background-color" ], @@ -143,7 +145,7 @@ "--spectrum-combobox-background-color-default", "--spectrum-combobox-background-color-disabled", "--spectrum-combobox-block-size", - "--spectrum-combobox-block-spacing-edge-to-alert", + "--spectrum-combobox-block-spacing-edge-to-icon", "--spectrum-combobox-block-spacing-edge-to-progress-circle", "--spectrum-combobox-border-color-default", "--spectrum-combobox-border-color-disabled", @@ -176,13 +178,14 @@ "--spectrum-combobox-readonly-input-background-color", "--spectrum-combobox-readonly-input-border-color", "--spectrum-combobox-readonly-text-color-disabled", - "--spectrum-combobox-spacing-alert-icon-to-text", "--spectrum-combobox-spacing-block-end-edge-to-text", "--spectrum-combobox-spacing-block-start-edge-to-text", "--spectrum-combobox-spacing-inline-end-edge-to-text", "--spectrum-combobox-spacing-inline-icon-to-button", + "--spectrum-combobox-spacing-inline-icon-to-text", "--spectrum-combobox-spacing-inline-start-edge-to-text", "--spectrum-combobox-spacing-label-to-combobox", + "--spectrum-combobox-spacing-side-label-to-field", "--spectrum-combobox-spacing-to-help-text" ], "global": [ @@ -249,6 +252,7 @@ "--spectrum-negative-border-color-hover", "--spectrum-negative-border-color-key-focus", "--spectrum-regular-font-weight", + "--spectrum-spacing-200", "--spectrum-text-to-visual-100", "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-300", From f93eedb512c07d38789b066fa200ebc02dce8602 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Mon, 19 May 2025 12:39:24 -0400 Subject: [PATCH 13/22] feat(combobox): removing empty args for default combobox --- components/combobox/stories/combobox.stories.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index 12d98ea17df..48a2d27994f 100644 --- a/components/combobox/stories/combobox.stories.js +++ b/components/combobox/stories/combobox.stories.js @@ -194,7 +194,6 @@ export default { export const Default = ComboBoxGroup.bind({}); Default.tags = ["!autodocs"]; -Default.args = {}; Default.parameters = { chromatic: { delay: 1000 } }; From f30be072233902180af4dba7cf12c0bc31549178 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Wed, 21 May 2025 12:09:10 -0400 Subject: [PATCH 14/22] feat(combobox): refactor template, passing mods, adding more tests --- .changeset/four-lemons-warn.md | 1 + components/combobox/dist/metadata.json | 14 ++-- components/combobox/index.css | 49 +++++------- .../combobox/stories/combobox.stories.js | 7 +- components/combobox/stories/combobox.test.js | 13 +++- components/combobox/stories/template.js | 76 ++++++------------- components/helptext/dist/metadata.json | 4 +- tokens/custom/large-vars.css | 2 - tokens/custom/medium-vars.css | 2 - 9 files changed, 66 insertions(+), 102 deletions(-) diff --git a/.changeset/four-lemons-warn.md b/.changeset/four-lemons-warn.md index fc03f8dbc89..8b21f988fa5 100644 --- a/.changeset/four-lemons-warn.md +++ b/.changeset/four-lemons-warn.md @@ -11,6 +11,7 @@ - Changed outline thickness for better visibility - Replaced picker button with in-field button component - Added help text along with invalid state +- Modified the WHCM invalid/error state in help text ### New tokens diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 43fc4d4eafb..e881695a682 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -4,17 +4,14 @@ ".spectrum-Combobox", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon", - ".spectrum-Combobox ~ .spectrum-Combobox-popover", + ".spectrum-Combobox .spectrum-Combobox-popover", ".spectrum-Combobox--sideLabel .spectrum-Combobox-content", ".spectrum-Combobox--sideLabel .spectrum-Combobox-helptext", ".spectrum-Combobox--sideLabel .spectrum-Combobox-label", ".spectrum-Combobox--sideLabel .spectrum-Combobox-textfield", ".spectrum-Combobox--sizeL", - ".spectrum-Combobox--sizeL ~ .spectrum-Combobox-popover", ".spectrum-Combobox--sizeS", - ".spectrum-Combobox--sizeS ~ .spectrum-Combobox-popover", ".spectrum-Combobox--sizeXL", - ".spectrum-Combobox--sizeXL ~ .spectrum-Combobox-popover", ".spectrum-Combobox-button", ".spectrum-Combobox-button.is-focused:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", ".spectrum-Combobox-button.is-focused:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover", @@ -117,9 +114,6 @@ "--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", @@ -130,7 +124,6 @@ "--mod-combobox-spacing-alert-icon-to-text", "--mod-combobox-spacing-block-end-edge-to-text", "--mod-combobox-spacing-block-start-edge-to-text", - "--mod-combobox-spacing-inline-end-edge-to-text", "--mod-combobox-spacing-inline-icon-to-button", "--mod-combobox-spacing-inline-icon-to-text", "--mod-combobox-spacing-inline-start-edge-to-text", @@ -180,7 +173,6 @@ "--spectrum-combobox-readonly-text-color-disabled", "--spectrum-combobox-spacing-block-end-edge-to-text", "--spectrum-combobox-spacing-block-start-edge-to-text", - "--spectrum-combobox-spacing-inline-end-edge-to-text", "--spectrum-combobox-spacing-inline-icon-to-button", "--spectrum-combobox-spacing-inline-icon-to-text", "--spectrum-combobox-spacing-inline-start-edge-to-text", @@ -288,8 +280,12 @@ "--mod-textfield-focus-indicator-gap", "--mod-textfield-focus-indicator-width", "--mod-textfield-font-family", + "--mod-textfield-font-size", + "--mod-textfield-font-style", "--mod-textfield-font-weight", "--mod-textfield-icon-color-invalid", + "--mod-textfield-spacing-block-end", + "--mod-textfield-spacing-block-start", "--mod-textfield-text-color-default", "--mod-textfield-text-color-disabled", "--mod-textfield-text-color-focus", diff --git a/components/combobox/index.css b/components/combobox/index.css index a41c66df1ca..b2e36c58526 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -22,7 +22,6 @@ --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); --spectrum-combobox-spacing-inline-icon-to-text: var(--spectrum-text-to-visual-100); --spectrum-combobox-spacing-to-help-text: var(--spectrum-help-text-to-component); @@ -62,6 +61,8 @@ --spectrum-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); --spectrum-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus); + --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-medium); + /* @passthroughs start -- settings for nested Textfield component */ --mod-textfield-focus-indicator-gap: var(--mod-combobox-focus-indicator-gap, var(--spectrum-combobox-focus-indicator-gap)); --mod-textfield-focus-indicator-width: var(--mod-combobox-focus-indicator-thickness, var(--spectrum-combobox-focus-indicator-thickness)); @@ -71,8 +72,11 @@ --mod-textfield-background-color-disabled: var(--mod-combobox-background-color-disabled, var(--spectrum-combobox-background-color-disabled)); --mod-textfield-font-family: var(--mod-combobox-font-family); - --mod-textfield-font-weight: var(--mod-combobox-font-weight); - + --mod-textfield-font-weight: var(--spectrum-combobox-font-weight); + --mod-textfield-font-size: var(--spectrum-combobox-font-size); + --mod-textfield-font-style: var(--spectrum-combobox-font-style); + --mod-textfield-spacing-block-start: calc(var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); + --mod-textfield-spacing-block-end: calc(var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); --mod-textfield-text-color-default: var(--mod-combobox-font-color-default); --mod-textfield-text-color-hover: var(--mod-combobox-font-color-hover); --mod-textfield-text-color-focus: var(--mod-combobox-font-color-focus); @@ -125,14 +129,10 @@ --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75); --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75); --spectrum-combobox-spacing-inline-icon-to-text: var(--spectrum-text-to-visual-75); --spectrum-combobox-inline-size: var(--spectrum-field-width-small); --spectrum-combobox-border-radius: var(--spectrum-corner-radius-medium-size-small); - - ~ .spectrum-Combobox-popover { - --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-small); - } + --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-small); } .spectrum-Combobox--sizeL { @@ -145,14 +145,10 @@ --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-200); --spectrum-combobox-spacing-inline-icon-to-text: var(--spectrum-text-to-visual-200); --spectrum-combobox-inline-size: var(--spectrum-field-width-large); --spectrum-combobox-border-radius: var(--spectrum-corner-radius-medium-size-large); - - ~ .spectrum-Combobox-popover { - --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-large); - } + --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-large); } .spectrum-Combobox--sizeXL { @@ -165,14 +161,10 @@ --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-300); --spectrum-combobox-spacing-inline-icon-to-text: var(--spectrum-text-to-visual-300); --spectrum-combobox-inline-size: var(--spectrum-field-width-extra-large); --spectrum-combobox-border-radius: var(--spectrum-corner-radius-medium-size-extra-large); - - ~ .spectrum-Combobox-popover { - --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-extra-large); - } + --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-extra-large); } .spectrum-Combobox { @@ -185,8 +177,8 @@ border-radius: var(--mod-combobox-border-radius, var(--spectrum-combobox-border-radius)); - ~ .spectrum-Combobox-popover { - --mod-popover-animation-distance: var(--mod-combobox-popover-animation-distance, var(--spectrum-component-to-menu-medium)); + .spectrum-Combobox-popover { + --mod-popover-animation-distance: var(--mod-combobox-popover-animation-distance); } &.is-readOnly { @@ -316,20 +308,16 @@ .spectrum-Combobox-content { display: inline-grid; block-size: var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)); + position: relative; } /* TEXT INPUT */ .spectrum-Combobox-input { background-color: var(--highcontrast-combobox-background-color-default, var(--mod-combobox-textfield-background-color, var(--spectrum-combobox-background-color-default))); - padding-block-start: calc(var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); - padding-block-end: calc(var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); padding-inline-start: calc(var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); - padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - (var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) * 2)); + padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-text, var(--spectrum-combobox-spacing-inline-icon-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); backface-visibility: hidden; - font-weight: var(--mod-combobox-font-weight, var(--spectrum-combobox-font-weight)); line-height: var(--mod-combobox-line-height, var(--spectrum-combobox-line-height)); - font-size: var(--mod-combobox-font-size, var(--spectrum-combobox-font-size)); - font-style: var(--mod-combobox-font-style, var(--spectrum-combobox-font-style)); &::placeholder { --mod-textfield-text-color-default: var(--mod-combobox-font-color-placeholder); @@ -364,7 +352,7 @@ /* ****** Invalid & Loading ****** */ .spectrum-Combobox-textfield.is-invalid &, .spectrum-Combobox-textfield.is-loading & { - padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-alert-icon-to-text, var(--spectrum-combobox-spacing-inline-icon-to-text))); + padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-alert-icon-to-text, var(--spectrum-combobox-spacing-inline-icon-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); } &:lang(ja), @@ -401,9 +389,14 @@ } .spectrum-Combobox-helptext { - grid-row: 2 / span 1; + grid-row: 2 / span 2; grid-column: 2 / span 1; } + + .spectrum-Combobox-label, + .spectrum-Combobox-content { + min-inline-size: 50%; + } } /* VALIDATION ICON */ diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index 48a2d27994f..b50b9e72396 100644 --- a/components/combobox/stories/combobox.stories.js +++ b/components/combobox/stories/combobox.stories.js @@ -121,7 +121,7 @@ export default { args: { rootClass: "spectrum-Combobox", size: "m", - isOpen: true, + isOpen: false, isInvalid: false, isHovered: false, isFocused: false, @@ -154,9 +154,6 @@ export default { { label: "Greenwood", }, - { - type: "divider", - }, { label: "United States of America", isDisabled: true, @@ -230,7 +227,7 @@ HelpText.args = { /** - * Comboboxes have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A combobox does not have a read-only option if no selection has been made. To enable this feature, add the `.is-readOnly` class to the combobox. To enable this feature, add the .isReadOnly class to the combobox. Then within the nested textfield component, add the .isReadOnly class and readonly attribute to the `` element. + * Comboboxes have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A combobox does not have a read-only option if no selection has been made. To enable this feature, add the `.is-readOnly` class to the combobox. To enable this feature, add the `.is-readOnly` class to the combobox. Then within the nested textfield component, add the `.is-readOnly class and readonly attribute to the `` element. */ export const ReadOnly = Template.bind({}); ReadOnly.tags = ["!dev"]; diff --git a/components/combobox/stories/combobox.test.js b/components/combobox/stories/combobox.test.js index a7c380b2c87..97b12395259 100644 --- a/components/combobox/stories/combobox.test.js +++ b/components/combobox/stories/combobox.test.js @@ -20,15 +20,24 @@ export const ComboBoxGroup = Variants({ "min-block-size": "250px", }, }, + { + testHeading: "Help text with label", + showFieldLabel: true, + helpText: "Choose a location. Add a new location by typing it in the field, then selecting 'Enter.'", + }, { testHeading: "With field label on the side", showFieldLabel: true, - isOpen: false, + fieldLabelPosition: "side", + }, + { + testHeading: "Help text with label on the side", + showFieldLabel: true, + helpText: "Choose a location. Add a new location by typing it in the field, then selecting 'Enter.'", fieldLabelPosition: "side", }, { testHeading: "Truncation", - isOpen: false, value: "United States of America and to the republic", }, ], diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js index dda8221d0ba..f2cc9ef1cc1 100644 --- a/components/combobox/stories/template.js +++ b/components/combobox/stories/template.js @@ -12,7 +12,7 @@ import { when } from "lit/directives/when.js"; import "../index.css"; -const Combobox = ({ +export const Template = ({ rootClass = "spectrum-Combobox", id = getRandomId("combobox"), testId, @@ -34,6 +34,7 @@ const Combobox = ({ showFieldLabel = false, value = "", autocomplete = true, + content = [], } = {}, context = {}) => { const { updateArgs } = context; const comboboxId = id || getRandomId("combobox"); @@ -55,6 +56,8 @@ const Combobox = ({ }, 0); } + const popoverHeight = size === "s" ? 106 : size === "l" ? 170 : size === "xl" ? 229 : 142; // default value is "m" + return html`
- ${when(showFieldLabel, () => + ${when(showFieldLabel, () => FieldLabel({ size, label: fieldLabelText, @@ -91,8 +97,8 @@ const Combobox = ({ isRequired: isLabelRequired, }, context) )} -
- ${TextField({ +
+ ${TextField({ size, isDisabled, isInvalid, @@ -129,8 +135,19 @@ const Combobox = ({ }); }, }, context)} -
- ${when(helpText, () => +
+ ${Popover({ + isOpen: isOpen && !isDisabled && !isReadOnly, + withTip: false, + position: "bottom-start", + customClasses: [`${rootClass}-popover`], + customStyles: { + "inline-size": size === "s" ? "192px" : size === "l" ? "224px" : size === "xl" ? "240px" : "208px", + }, + content, + popoverHeight, + }, context)} + ${when(helpText, () => HelpText({ customClasses: [`${rootClass}-helptext`], size, @@ -140,50 +157,7 @@ const Combobox = ({ variant: isInvalid ? "negative" : "neutral", }, context) )} -
- `; -}; - -export const Template = ({ - size = "m", - isOpen = true, - isDisabled = false, - isReadOnly = false, - content = [], - value = "", - ...args -} = {}, context = {}) => { - const popoverHeight = size === "s" ? 106 : size === "l" ? 170 : size === "xl" ? 229 : 142; // default value is "m" - return html` -
- - ${[ - Popover({ - isOpen: isOpen && !isDisabled && !isReadOnly, - withTip: false, - position: "bottom-start", - customClasses: [`${args.rootClass}-popover`], - customStyles: { - "inline-size": size === "s" ? "192px" : size === "l" ? "224px" : size === "xl" ? "240px" : "208px", - }, - trigger: (passthrough) => Combobox({ - size, - isOpen, - isDisabled, - isReadOnly, - value, - ...args, - ...passthrough, - }, context), - content, - popoverHeight, - }, context), - ]}
`; }; @@ -208,7 +182,7 @@ export const HelpTextTemplate = (args, context) => { withBorder: false, heading: variant.heading, containerStyles: {"display": "inline"}, - content: Combobox({ + content: Template({ ...variant.args, customStyles: {"margin-top": "8px"} }, context)}, diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index 4ed0075bb8c..be511d08651 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -93,8 +93,6 @@ "passthroughs": [], "high-contrast": [ "--highcontrast-helptext-content-color-default", - "--highcontrast-helptext-content-color-disabled", - "--highcontrast-helptext-icon-color-default", - "--highcontrast-helptext-icon-color-disabled" + "--highcontrast-helptext-icon-color-default" ] } diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css index 56b5dc7b2c1..7e076444f77 100644 --- a/tokens/custom/large-vars.css +++ b/tokens/custom/large-vars.css @@ -139,6 +139,4 @@ --spectrum-field-edge-to-icon-100: 9px; --spectrum-field-edge-to-icon-200: 11px; --spectrum-field-edge-to-icon-300: 14px; - - --spectrum-help-text-to-component: 0px; } diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css index a120ba3831b..63c1191f713 100644 --- a/tokens/custom/medium-vars.css +++ b/tokens/custom/medium-vars.css @@ -137,6 +137,4 @@ --spectrum-field-edge-to-icon-100: 5px; --spectrum-field-edge-to-icon-200: 6px; --spectrum-field-edge-to-icon-300: 10px; - - --spectrum-help-text-to-component: 0px; } From 3303ba3091bf2ac82d338d1f8f2debfe01fdac1a Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Wed, 21 May 2025 12:44:34 -0400 Subject: [PATCH 15/22] chore(combobox): restore helptext metadata --- components/helptext/dist/metadata.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index be511d08651..4ed0075bb8c 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -93,6 +93,8 @@ "passthroughs": [], "high-contrast": [ "--highcontrast-helptext-content-color-default", - "--highcontrast-helptext-icon-color-default" + "--highcontrast-helptext-content-color-disabled", + "--highcontrast-helptext-icon-color-default", + "--highcontrast-helptext-icon-color-disabled" ] } From 2e9ccb3ea38a2d754548a4c2b5103b1fe1a7d58e Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Wed, 21 May 2025 17:45:07 -0400 Subject: [PATCH 16/22] feat(combobox): update template --- components/combobox/dist/metadata.json | 122 ++++++++---------- .../combobox/stories/combobox.stories.js | 2 +- components/combobox/stories/template.js | 3 +- components/helptext/dist/metadata.json | 4 +- 4 files changed, 60 insertions(+), 71 deletions(-) diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index e881695a682..8dd3138302a 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -4,11 +4,18 @@ ".spectrum-Combobox", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon", - ".spectrum-Combobox .spectrum-Combobox-popover", - ".spectrum-Combobox--sideLabel .spectrum-Combobox-content", - ".spectrum-Combobox--sideLabel .spectrum-Combobox-helptext", - ".spectrum-Combobox--sideLabel .spectrum-Combobox-label", - ".spectrum-Combobox--sideLabel .spectrum-Combobox-textfield", + ".spectrum-Combobox .spectrum-Popover.is-open", + ".spectrum-Combobox--quiet", + ".spectrum-Combobox--quiet .spectrum-Combobox-input", + ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input", + ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon", + ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input", + ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly .spectrum-Combobox-input:read-only", + ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only", + ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only", + ".spectrum-Combobox--quiet.spectrum-Combobox--sizeL", + ".spectrum-Combobox--quiet.spectrum-Combobox--sizeS", + ".spectrum-Combobox--quiet.spectrum-Combobox--sizeXL", ".spectrum-Combobox--sizeL", ".spectrum-Combobox--sizeS", ".spectrum-Combobox--sizeXL", @@ -31,21 +38,15 @@ ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus-visible", ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus:hover", ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover", - ".spectrum-Combobox-content", - ".spectrum-Combobox-helptext", - ".spectrum-Combobox-helptext .spectrum-HelpText-text", ".spectrum-Combobox-input", ".spectrum-Combobox-input::placeholder", ".spectrum-Combobox-input:active", ".spectrum-Combobox-input:focus", ".spectrum-Combobox-input:focus:hover", ".spectrum-Combobox-input:hover", - ".spectrum-Combobox-input:lang(ja)", - ".spectrum-Combobox-input:lang(ko)", - ".spectrum-Combobox-input:lang(zh)", - ".spectrum-Combobox-label", ".spectrum-Combobox-progress-circle", ".spectrum-Combobox-progress-circle:dir(rtl)", + ".spectrum-Combobox-textfield", ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input", ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input:hover", ".spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input", @@ -59,12 +60,12 @@ ".spectrum-Combobox.is-focused:hover .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", - ".spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only", - ".spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only:hover", - ".spectrum-Combobox.is-readOnly .spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input", - ".spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only", - ".spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only:hover", - ".spectrum-Combobox.is-readOnly.is-invalid .spectrum-Combobox-input:read-only", + ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only", + ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover", + ".spectrum-Combobox.is-readOnly.is-invalid:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only", + ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only", + ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover", + ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input", ".spectrum-Combobox:has(:active) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", ".spectrum-Combobox:has(:active) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", @@ -87,7 +88,7 @@ "--mod-combobox-background-color-hover", "--mod-combobox-background-color-key-focus", "--mod-combobox-block-size", - "--mod-combobox-block-spacing-edge-to-icon", + "--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", @@ -102,6 +103,7 @@ "--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", @@ -114,31 +116,34 @@ "--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-line-height-cjk", "--mod-combobox-min-inline-size", - "--mod-combobox-popover-animation-distance", "--mod-combobox-readonly-border-color-disabled", - "--mod-combobox-spacing-alert-icon-to-text", + "--mod-combobox-readonly-input-border-color", "--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-icon-to-text", "--mod-combobox-spacing-inline-start-edge-to-text", - "--mod-combobox-spacing-label-to-combobox", - "--mod-combobox-spacing-side-label-to-field", - "--mod-combobox-spacing-to-help-text", - "--mod-combobox-textfield-background-color" + "--mod-combobox-spacing-label-to-combobox" ], "component": [ "--spectrum-combo-box-minimum-width-multiplier", - "--spectrum-combo-box-visual-to-field-button", - "--spectrum-combobox-background-color-default", + "--spectrum-combo-box-quiet-minimum-width-multiplier", + "--spectrum-combo-box-visual-to-field-button-extra-large", + "--spectrum-combo-box-visual-to-field-button-large", + "--spectrum-combo-box-visual-to-field-button-medium", + "--spectrum-combo-box-visual-to-field-button-quiet", + "--spectrum-combo-box-visual-to-field-button-small", "--spectrum-combobox-background-color-disabled", "--spectrum-combobox-block-size", - "--spectrum-combobox-block-spacing-edge-to-icon", + "--spectrum-combobox-block-spacing-edge-to-alert", "--spectrum-combobox-block-spacing-edge-to-progress-circle", "--spectrum-combobox-border-color-default", "--spectrum-combobox-border-color-disabled", @@ -153,17 +158,16 @@ "--spectrum-combobox-border-color-key-focus", "--spectrum-combobox-border-radius", "--spectrum-combobox-border-width", + "--spectrum-combobox-button-inline-offset", "--spectrum-combobox-button-width", "--spectrum-combobox-focus-indicator-color", "--spectrum-combobox-focus-indicator-gap", "--spectrum-combobox-focus-indicator-thickness", "--spectrum-combobox-font-size", "--spectrum-combobox-font-style", - "--spectrum-combobox-font-weight", "--spectrum-combobox-icon-size", "--spectrum-combobox-inline-size", "--spectrum-combobox-line-height", - "--spectrum-combobox-line-height-cjk", "--spectrum-combobox-min-inline-size", "--spectrum-combobox-readonly-background-color-disabled", "--spectrum-combobox-readonly-border-color-disabled", @@ -173,16 +177,14 @@ "--spectrum-combobox-readonly-text-color-disabled", "--spectrum-combobox-spacing-block-end-edge-to-text", "--spectrum-combobox-spacing-block-start-edge-to-text", + "--spectrum-combobox-spacing-edge-to-menu", + "--spectrum-combobox-spacing-inline-end-edge-to-text", "--spectrum-combobox-spacing-inline-icon-to-button", - "--spectrum-combobox-spacing-inline-icon-to-text", "--spectrum-combobox-spacing-inline-start-edge-to-text", - "--spectrum-combobox-spacing-label-to-combobox", - "--spectrum-combobox-spacing-side-label-to-field", - "--spectrum-combobox-spacing-to-help-text" + "--spectrum-combobox-spacing-label-to-combobox" ], "global": [ - "--spectrum-border-width-200", - "--spectrum-cjk-line-height-100", + "--spectrum-border-width-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", "--spectrum-component-bottom-to-text-300", @@ -203,27 +205,26 @@ "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", - "--spectrum-component-top-to-workflow-icon-100", - "--spectrum-component-top-to-workflow-icon-200", - "--spectrum-component-top-to-workflow-icon-300", - "--spectrum-component-top-to-workflow-icon-75", - "--spectrum-corner-radius-medium-size-extra-large", - "--spectrum-corner-radius-medium-size-large", - "--spectrum-corner-radius-medium-size-medium", - "--spectrum-corner-radius-medium-size-small", + "--spectrum-corner-radius-100", "--spectrum-default-font-style", "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", + "--spectrum-field-edge-to-text-quiet", "--spectrum-field-label-to-component", + "--spectrum-field-label-to-component-quiet-extra-large", + "--spectrum-field-label-to-component-quiet-large", + "--spectrum-field-label-to-component-quiet-medium", + "--spectrum-field-label-to-component-quiet-small", + "--spectrum-field-top-to-alert-icon-extra-large", + "--spectrum-field-top-to-alert-icon-large", + "--spectrum-field-top-to-alert-icon-medium", + "--spectrum-field-top-to-alert-icon-small", "--spectrum-field-top-to-progress-circle-extra-large", "--spectrum-field-top-to-progress-circle-large", "--spectrum-field-top-to-progress-circle-medium", "--spectrum-field-top-to-progress-circle-small", - "--spectrum-field-width-extra-large", - "--spectrum-field-width-large", - "--spectrum-field-width-medium", - "--spectrum-field-width-small", + "--spectrum-field-width", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", @@ -232,23 +233,17 @@ "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-25", - "--spectrum-gray-300", - "--spectrum-gray-400", + "--spectrum-gray-50", + "--spectrum-gray-500", + "--spectrum-gray-600", "--spectrum-gray-800", "--spectrum-gray-900", - "--spectrum-help-text-to-component", "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-focus", "--spectrum-negative-border-color-focus-hover", "--spectrum-negative-border-color-hover", "--spectrum-negative-border-color-key-focus", - "--spectrum-regular-font-weight", - "--spectrum-spacing-200", - "--spectrum-text-to-visual-100", - "--spectrum-text-to-visual-200", - "--spectrum-text-to-visual-300", - "--spectrum-text-to-visual-75", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-300", @@ -257,11 +252,12 @@ "passthroughs": [ "--mod-picker-button-background-color", "--mod-picker-button-background-color-disabled", + "--mod-picker-button-background-color-quiet", "--mod-picker-button-border-color", "--mod-picker-button-border-color-disabled", + "--mod-picker-button-border-color-quiet", "--mod-picker-button-border-width", "--mod-picker-button-font-color-disabled", - "--mod-popover-animation-distance", "--mod-textfield-background-color", "--mod-textfield-background-color-disabled", "--mod-textfield-border-color", @@ -280,12 +276,8 @@ "--mod-textfield-focus-indicator-gap", "--mod-textfield-focus-indicator-width", "--mod-textfield-font-family", - "--mod-textfield-font-size", - "--mod-textfield-font-style", "--mod-textfield-font-weight", "--mod-textfield-icon-color-invalid", - "--mod-textfield-spacing-block-end", - "--mod-textfield-spacing-block-start", "--mod-textfield-text-color-default", "--mod-textfield-text-color-disabled", "--mod-textfield-text-color-focus", @@ -294,10 +286,8 @@ "--mod-textfield-text-color-keyboard-focus" ], "high-contrast": [ - "--highcontrast-combobox-background-color-default", "--highcontrast-combobox-border-color-highlight", "--highcontrast-combobox-border-color-invalid", - "--highcontrast-combobox-readonly-border-color", "--highcontrast-textfield-border-color-invalid-default", "--highcontrast-textfield-text-color-disabled" ] diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index b50b9e72396..2ae7fd3623c 100644 --- a/components/combobox/stories/combobox.stories.js +++ b/components/combobox/stories/combobox.stories.js @@ -227,7 +227,7 @@ HelpText.args = { /** - * Comboboxes have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A combobox does not have a read-only option if no selection has been made. To enable this feature, add the `.is-readOnly` class to the combobox. To enable this feature, add the `.is-readOnly` class to the combobox. Then within the nested textfield component, add the `.is-readOnly class and readonly attribute to the `` element. + * Comboboxes have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A combobox does not have a read-only option if no selection has been made. To enable this feature, add the `.is-readOnly` class to the combobox. To enable this feature, add the `.is-readOnly` class to the combobox. Then within the nested textfield component, add the `.is-readOnly class and readonly attribute to the `input` element. */ export const ReadOnly = Template.bind({}); ReadOnly.tags = ["!dev"]; diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js index f2cc9ef1cc1..b00f43445f8 100644 --- a/components/combobox/stories/template.js +++ b/components/combobox/stories/template.js @@ -57,6 +57,7 @@ export const Template = ({ } const popoverHeight = size === "s" ? 106 : size === "l" ? 170 : size === "xl" ? 229 : 142; // default value is "m" + const adjustedPopoverHeight = showFieldLabel ? popoverHeight : popoverHeight + 32; // Subtract label height when no label return html`
Date: Thu, 22 May 2025 17:53:33 -0400 Subject: [PATCH 17/22] chore(combobox): adding metadata files --- components/combobox/dist/metadata.json | 122 +++++++++++++------------ components/helptext/dist/metadata.json | 4 +- 2 files changed, 69 insertions(+), 57 deletions(-) diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 8dd3138302a..e881695a682 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -4,18 +4,11 @@ ".spectrum-Combobox", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon", - ".spectrum-Combobox .spectrum-Popover.is-open", - ".spectrum-Combobox--quiet", - ".spectrum-Combobox--quiet .spectrum-Combobox-input", - ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input", - ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon", - ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input", - ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly .spectrum-Combobox-input:read-only", - ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only", - ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only", - ".spectrum-Combobox--quiet.spectrum-Combobox--sizeL", - ".spectrum-Combobox--quiet.spectrum-Combobox--sizeS", - ".spectrum-Combobox--quiet.spectrum-Combobox--sizeXL", + ".spectrum-Combobox .spectrum-Combobox-popover", + ".spectrum-Combobox--sideLabel .spectrum-Combobox-content", + ".spectrum-Combobox--sideLabel .spectrum-Combobox-helptext", + ".spectrum-Combobox--sideLabel .spectrum-Combobox-label", + ".spectrum-Combobox--sideLabel .spectrum-Combobox-textfield", ".spectrum-Combobox--sizeL", ".spectrum-Combobox--sizeS", ".spectrum-Combobox--sizeXL", @@ -38,15 +31,21 @@ ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus-visible", ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus:hover", ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover", + ".spectrum-Combobox-content", + ".spectrum-Combobox-helptext", + ".spectrum-Combobox-helptext .spectrum-HelpText-text", ".spectrum-Combobox-input", ".spectrum-Combobox-input::placeholder", ".spectrum-Combobox-input:active", ".spectrum-Combobox-input:focus", ".spectrum-Combobox-input:focus:hover", ".spectrum-Combobox-input:hover", + ".spectrum-Combobox-input:lang(ja)", + ".spectrum-Combobox-input:lang(ko)", + ".spectrum-Combobox-input:lang(zh)", + ".spectrum-Combobox-label", ".spectrum-Combobox-progress-circle", ".spectrum-Combobox-progress-circle:dir(rtl)", - ".spectrum-Combobox-textfield", ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input", ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input:hover", ".spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input", @@ -60,12 +59,12 @@ ".spectrum-Combobox.is-focused:hover .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", - ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only", - ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover", - ".spectrum-Combobox.is-readOnly.is-invalid:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only", - ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only", - ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover", - ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input", + ".spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only", + ".spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only:hover", + ".spectrum-Combobox.is-readOnly .spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input", + ".spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only", + ".spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only:hover", + ".spectrum-Combobox.is-readOnly.is-invalid .spectrum-Combobox-input:read-only", ".spectrum-Combobox:has(:active) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", ".spectrum-Combobox:has(:active) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", @@ -88,7 +87,7 @@ "--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-icon", "--mod-combobox-block-spacing-edge-to-progress-circle", "--mod-combobox-border-color-default", "--mod-combobox-border-color-disabled", @@ -103,7 +102,6 @@ "--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", @@ -116,34 +114,31 @@ "--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-line-height-cjk", "--mod-combobox-min-inline-size", + "--mod-combobox-popover-animation-distance", "--mod-combobox-readonly-border-color-disabled", - "--mod-combobox-readonly-input-border-color", + "--mod-combobox-spacing-alert-icon-to-text", "--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-icon-to-text", "--mod-combobox-spacing-inline-start-edge-to-text", - "--mod-combobox-spacing-label-to-combobox" + "--mod-combobox-spacing-label-to-combobox", + "--mod-combobox-spacing-side-label-to-field", + "--mod-combobox-spacing-to-help-text", + "--mod-combobox-textfield-background-color" ], "component": [ "--spectrum-combo-box-minimum-width-multiplier", - "--spectrum-combo-box-quiet-minimum-width-multiplier", - "--spectrum-combo-box-visual-to-field-button-extra-large", - "--spectrum-combo-box-visual-to-field-button-large", - "--spectrum-combo-box-visual-to-field-button-medium", - "--spectrum-combo-box-visual-to-field-button-quiet", - "--spectrum-combo-box-visual-to-field-button-small", + "--spectrum-combo-box-visual-to-field-button", + "--spectrum-combobox-background-color-default", "--spectrum-combobox-background-color-disabled", "--spectrum-combobox-block-size", - "--spectrum-combobox-block-spacing-edge-to-alert", + "--spectrum-combobox-block-spacing-edge-to-icon", "--spectrum-combobox-block-spacing-edge-to-progress-circle", "--spectrum-combobox-border-color-default", "--spectrum-combobox-border-color-disabled", @@ -158,16 +153,17 @@ "--spectrum-combobox-border-color-key-focus", "--spectrum-combobox-border-radius", "--spectrum-combobox-border-width", - "--spectrum-combobox-button-inline-offset", "--spectrum-combobox-button-width", "--spectrum-combobox-focus-indicator-color", "--spectrum-combobox-focus-indicator-gap", "--spectrum-combobox-focus-indicator-thickness", "--spectrum-combobox-font-size", "--spectrum-combobox-font-style", + "--spectrum-combobox-font-weight", "--spectrum-combobox-icon-size", "--spectrum-combobox-inline-size", "--spectrum-combobox-line-height", + "--spectrum-combobox-line-height-cjk", "--spectrum-combobox-min-inline-size", "--spectrum-combobox-readonly-background-color-disabled", "--spectrum-combobox-readonly-border-color-disabled", @@ -177,14 +173,16 @@ "--spectrum-combobox-readonly-text-color-disabled", "--spectrum-combobox-spacing-block-end-edge-to-text", "--spectrum-combobox-spacing-block-start-edge-to-text", - "--spectrum-combobox-spacing-edge-to-menu", - "--spectrum-combobox-spacing-inline-end-edge-to-text", "--spectrum-combobox-spacing-inline-icon-to-button", + "--spectrum-combobox-spacing-inline-icon-to-text", "--spectrum-combobox-spacing-inline-start-edge-to-text", - "--spectrum-combobox-spacing-label-to-combobox" + "--spectrum-combobox-spacing-label-to-combobox", + "--spectrum-combobox-spacing-side-label-to-field", + "--spectrum-combobox-spacing-to-help-text" ], "global": [ - "--spectrum-border-width-100", + "--spectrum-border-width-200", + "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", "--spectrum-component-bottom-to-text-300", @@ -205,26 +203,27 @@ "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", - "--spectrum-corner-radius-100", + "--spectrum-component-top-to-workflow-icon-100", + "--spectrum-component-top-to-workflow-icon-200", + "--spectrum-component-top-to-workflow-icon-300", + "--spectrum-component-top-to-workflow-icon-75", + "--spectrum-corner-radius-medium-size-extra-large", + "--spectrum-corner-radius-medium-size-large", + "--spectrum-corner-radius-medium-size-medium", + "--spectrum-corner-radius-medium-size-small", "--spectrum-default-font-style", "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", - "--spectrum-field-edge-to-text-quiet", "--spectrum-field-label-to-component", - "--spectrum-field-label-to-component-quiet-extra-large", - "--spectrum-field-label-to-component-quiet-large", - "--spectrum-field-label-to-component-quiet-medium", - "--spectrum-field-label-to-component-quiet-small", - "--spectrum-field-top-to-alert-icon-extra-large", - "--spectrum-field-top-to-alert-icon-large", - "--spectrum-field-top-to-alert-icon-medium", - "--spectrum-field-top-to-alert-icon-small", "--spectrum-field-top-to-progress-circle-extra-large", "--spectrum-field-top-to-progress-circle-large", "--spectrum-field-top-to-progress-circle-medium", "--spectrum-field-top-to-progress-circle-small", - "--spectrum-field-width", + "--spectrum-field-width-extra-large", + "--spectrum-field-width-large", + "--spectrum-field-width-medium", + "--spectrum-field-width-small", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", @@ -233,17 +232,23 @@ "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-25", - "--spectrum-gray-50", - "--spectrum-gray-500", - "--spectrum-gray-600", + "--spectrum-gray-300", + "--spectrum-gray-400", "--spectrum-gray-800", "--spectrum-gray-900", + "--spectrum-help-text-to-component", "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-focus", "--spectrum-negative-border-color-focus-hover", "--spectrum-negative-border-color-hover", "--spectrum-negative-border-color-key-focus", + "--spectrum-regular-font-weight", + "--spectrum-spacing-200", + "--spectrum-text-to-visual-100", + "--spectrum-text-to-visual-200", + "--spectrum-text-to-visual-300", + "--spectrum-text-to-visual-75", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-300", @@ -252,12 +257,11 @@ "passthroughs": [ "--mod-picker-button-background-color", "--mod-picker-button-background-color-disabled", - "--mod-picker-button-background-color-quiet", "--mod-picker-button-border-color", "--mod-picker-button-border-color-disabled", - "--mod-picker-button-border-color-quiet", "--mod-picker-button-border-width", "--mod-picker-button-font-color-disabled", + "--mod-popover-animation-distance", "--mod-textfield-background-color", "--mod-textfield-background-color-disabled", "--mod-textfield-border-color", @@ -276,8 +280,12 @@ "--mod-textfield-focus-indicator-gap", "--mod-textfield-focus-indicator-width", "--mod-textfield-font-family", + "--mod-textfield-font-size", + "--mod-textfield-font-style", "--mod-textfield-font-weight", "--mod-textfield-icon-color-invalid", + "--mod-textfield-spacing-block-end", + "--mod-textfield-spacing-block-start", "--mod-textfield-text-color-default", "--mod-textfield-text-color-disabled", "--mod-textfield-text-color-focus", @@ -286,8 +294,10 @@ "--mod-textfield-text-color-keyboard-focus" ], "high-contrast": [ + "--highcontrast-combobox-background-color-default", "--highcontrast-combobox-border-color-highlight", "--highcontrast-combobox-border-color-invalid", + "--highcontrast-combobox-readonly-border-color", "--highcontrast-textfield-border-color-invalid-default", "--highcontrast-textfield-text-color-disabled" ] diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index be511d08651..4ed0075bb8c 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -93,6 +93,8 @@ "passthroughs": [], "high-contrast": [ "--highcontrast-helptext-content-color-default", - "--highcontrast-helptext-icon-color-default" + "--highcontrast-helptext-content-color-disabled", + "--highcontrast-helptext-icon-color-default", + "--highcontrast-helptext-icon-color-disabled" ] } From 8befe005326db252712896a18ea82c73315717e0 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Wed, 28 May 2025 21:26:01 -0400 Subject: [PATCH 18/22] feat(combobox): fix spacing issues --- .changeset/four-lemons-warn.md | 1 + components/combobox/dist/metadata.json | 12 +++++++ components/combobox/index.css | 34 ++++++++++++++----- .../combobox/stories/combobox.stories.js | 9 ++++- components/combobox/stories/combobox.test.js | 4 +++ components/combobox/stories/template.js | 6 +++- 6 files changed, 55 insertions(+), 11 deletions(-) diff --git a/.changeset/four-lemons-warn.md b/.changeset/four-lemons-warn.md index 8b21f988fa5..5f55065100f 100644 --- a/.changeset/four-lemons-warn.md +++ b/.changeset/four-lemons-warn.md @@ -1,5 +1,6 @@ --- "@spectrum-css/combobox": major +"@spectrum-css/helptext": minor --- ### Combobox S2 Migration diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index e881695a682..319087d7abf 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -4,6 +4,8 @@ ".spectrum-Combobox", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon", + ".spectrum-Combobox .spectrum-Combobox-content", + ".spectrum-Combobox .spectrum-Combobox-label", ".spectrum-Combobox .spectrum-Combobox-popover", ".spectrum-Combobox--sideLabel .spectrum-Combobox-content", ".spectrum-Combobox--sideLabel .spectrum-Combobox-helptext", @@ -35,6 +37,12 @@ ".spectrum-Combobox-helptext", ".spectrum-Combobox-helptext .spectrum-HelpText-text", ".spectrum-Combobox-input", + ".spectrum-Combobox-input.spectrum-Combobox-autocomplete", + ".spectrum-Combobox-input:-internal-autofill-selected", + ".spectrum-Combobox-input:-webkit-autofill", + ".spectrum-Combobox-input:-webkit-autofill:active", + ".spectrum-Combobox-input:-webkit-autofill:focus", + ".spectrum-Combobox-input:-webkit-autofill:hover", ".spectrum-Combobox-input::placeholder", ".spectrum-Combobox-input:active", ".spectrum-Combobox-input:focus", @@ -135,6 +143,7 @@ "component": [ "--spectrum-combo-box-minimum-width-multiplier", "--spectrum-combo-box-visual-to-field-button", + "--spectrum-combobox-background-color-autofill", "--spectrum-combobox-background-color-default", "--spectrum-combobox-background-color-disabled", "--spectrum-combobox-block-size", @@ -181,6 +190,7 @@ "--spectrum-combobox-spacing-to-help-text" ], "global": [ + "--spectrum-blue-900-rgb", "--spectrum-border-width-200", "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", @@ -243,6 +253,7 @@ "--spectrum-negative-border-color-focus-hover", "--spectrum-negative-border-color-hover", "--spectrum-negative-border-color-key-focus", + "--spectrum-neutral-content-color-default", "--spectrum-regular-font-weight", "--spectrum-spacing-200", "--spectrum-text-to-visual-100", @@ -255,6 +266,7 @@ "--spectrum-workflow-icon-size-75" ], "passthroughs": [ + "--mod-divider-inline-minimum-size", "--mod-picker-button-background-color", "--mod-picker-button-background-color-disabled", "--mod-picker-button-border-color", diff --git a/components/combobox/index.css b/components/combobox/index.css index b2e36c58526..b2299bb6e33 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -61,6 +61,8 @@ --spectrum-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); --spectrum-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus); + --spectrum-combobox-background-color-autofill: rgb(var(--spectrum-blue-900-rgb), 0.3); + --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-medium); /* @passthroughs start -- settings for nested Textfield component */ @@ -117,6 +119,10 @@ --spectrum-combobox-readonly-text-color-disabled: var(--spectrum-disabled-content-color); --spectrum-combobox-readonly-border-color-disabled: var(--spectrum-disabled-border-color); --spectrum-combobox-readonly-input-border-color: var(--spectrum-combobox-border-color-default); + + /* @passthroughs start -- settings for nested divider component */ + --mod-divider-inline-minimum-size: auto; + /* @passthroughs end -- settings for nested divider component */ } .spectrum-Combobox--sizeS { @@ -170,13 +176,16 @@ .spectrum-Combobox { position: relative; display: inline-grid; - inline-size: var(--mod-combobox-inline-size, var(--spectrum-combobox-inline-size)); - min-inline-size: var(--mod-combobox-min-inline-size, var(--spectrum-combobox-min-inline-size)); margin-block-start: var(--mod-combobox-spacing-label-to-combobox, var(--spectrum-combobox-spacing-label-to-combobox)); border-radius: var(--mod-combobox-border-radius, var(--spectrum-combobox-border-radius)); + .spectrum-Combobox-label, + .spectrum-Combobox-content { + min-inline-size: var(--mod-combobox-min-inline-size, var(--spectrum-combobox-min-inline-size)); + } + .spectrum-Combobox-popover { --mod-popover-animation-distance: var(--mod-combobox-popover-animation-distance); } @@ -314,7 +323,7 @@ /* TEXT INPUT */ .spectrum-Combobox-input { background-color: var(--highcontrast-combobox-background-color-default, var(--mod-combobox-textfield-background-color, var(--spectrum-combobox-background-color-default))); - padding-inline-start: calc(var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); + padding-inline-start: var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)); padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-text, var(--spectrum-combobox-spacing-inline-icon-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); backface-visibility: hidden; line-height: var(--mod-combobox-line-height, var(--spectrum-combobox-line-height)); @@ -360,6 +369,17 @@ &:lang(ko) { --mod-combobox-line-height: var(--mod-combobox-line-height-cjk, var(--spectrum-combobox-line-height-cjk)); } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus, + &:-webkit-autofill:active, + &:-internal-autofill-selected, + &.spectrum-Combobox-autocomplete { + box-shadow: 0 0 0 30px var(--spectrum-combobox-background-color-autofill) inset !important; + transition: background-color 5000s ease-in-out 0s; + -webkit-text-fill-color: var(--spectrum-neutral-content-color-default) !important; + } } .spectrum-Combobox-helptext { @@ -380,7 +400,8 @@ .spectrum-Combobox-label { grid-row: 1; grid-column: 1 / span 1; - margin-inline-end: var(--mod-combobox-spacing-side-label-to-field, var(--spectrum-combobox-spacing-side-label-to-field)); + padding-inline-end: var(--mod-combobox-spacing-side-label-to-field, var(--spectrum-combobox-spacing-side-label-to-field)); + overflow-wrap: anywhere; } .spectrum-Combobox-content { @@ -392,11 +413,6 @@ grid-row: 2 / span 2; grid-column: 2 / span 1; } - - .spectrum-Combobox-label, - .spectrum-Combobox-content { - min-inline-size: 50%; - } } /* VALIDATION ICON */ diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index 2ae7fd3623c..b1552e7264e 100644 --- a/components/combobox/stories/combobox.stories.js +++ b/components/combobox/stories/combobox.stories.js @@ -93,9 +93,13 @@ export default { if: { arg: "showFieldLabel", truthy: true }, }, autocomplete: { + name: "Autocomplete", + type: { name: "boolean" }, table: { - disable: true, + type: { summary: "boolean" }, + category: "Component", }, + control: "boolean", }, helpText: { name: "Help text", @@ -154,6 +158,9 @@ export default { { label: "Greenwood", }, + { + type: "divider", + }, { label: "United States of America", isDisabled: true, diff --git a/components/combobox/stories/combobox.test.js b/components/combobox/stories/combobox.test.js index 97b12395259..86ca7621864 100644 --- a/components/combobox/stories/combobox.test.js +++ b/components/combobox/stories/combobox.test.js @@ -40,6 +40,10 @@ export const ComboBoxGroup = Variants({ testHeading: "Truncation", value: "United States of America and to the republic", }, + { + testHeading: "Autocomplete", + autocomplete: true, + } ], stateData: [ { diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js index b00f43445f8..89517acbe2e 100644 --- a/components/combobox/stories/template.js +++ b/components/combobox/stories/template.js @@ -87,6 +87,7 @@ export const Template = ({ aria-haspopup="listbox" aria-controls=${`${comboboxId}-popover`} aria-owns=${`${comboboxId}-popover`} + aria-autocomplete=${ifDefined(autocomplete ? "list" : undefined)} > ${when(showFieldLabel, () => FieldLabel({ @@ -110,7 +111,10 @@ export const Template = ({ `${rootClass}-textfield`, ...(isLoading ? ["is-loading"] : []), ], - customInputClasses: [`${rootClass}-input`, `${rootClass}-autocomplete`], + customInputClasses: [ + `${rootClass}-input`, + ...(autocomplete ? [`${rootClass}-autocomplete`] : []) + ], isLoading, customInfieldProgressCircleClasses: ["spectrum-Combobox-progress-circle"], name: "field", From 1e0aa2e6e4a1723cca2fb04bb06397963bb19fd5 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Thu, 29 May 2025 10:29:57 -0400 Subject: [PATCH 19/22] feat(combobox): adjusting diacritics line height --- components/combobox/dist/metadata.json | 2 -- components/combobox/index.css | 7 +++---- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 319087d7abf..e3d57c5e0ba 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -171,7 +171,6 @@ "--spectrum-combobox-font-weight", "--spectrum-combobox-icon-size", "--spectrum-combobox-inline-size", - "--spectrum-combobox-line-height", "--spectrum-combobox-line-height-cjk", "--spectrum-combobox-min-inline-size", "--spectrum-combobox-readonly-background-color-disabled", @@ -247,7 +246,6 @@ "--spectrum-gray-800", "--spectrum-gray-900", "--spectrum-help-text-to-component", - "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-focus", "--spectrum-negative-border-color-focus-hover", diff --git a/components/combobox/index.css b/components/combobox/index.css index b2299bb6e33..58b66e63c6b 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -42,7 +42,6 @@ --spectrum-combobox-font-style: var(--spectrum-default-font-style); --spectrum-combobox-font-weight: var(--spectrum-regular-font-weight); - --spectrum-combobox-line-height: var(--spectrum-line-height-100); --spectrum-combobox-line-height-cjk: var(--spectrum-cjk-line-height-100); --spectrum-combobox-background-color-disabled: var(--spectrum-gray-25); @@ -77,8 +76,8 @@ --mod-textfield-font-weight: var(--spectrum-combobox-font-weight); --mod-textfield-font-size: var(--spectrum-combobox-font-size); --mod-textfield-font-style: var(--spectrum-combobox-font-style); - --mod-textfield-spacing-block-start: calc(var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); - --mod-textfield-spacing-block-end: calc(var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); + --mod-textfield-spacing-block-start: var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text)); + --mod-textfield-spacing-block-end: var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)); --mod-textfield-text-color-default: var(--mod-combobox-font-color-default); --mod-textfield-text-color-hover: var(--mod-combobox-font-color-hover); --mod-textfield-text-color-focus: var(--mod-combobox-font-color-focus); @@ -326,7 +325,7 @@ padding-inline-start: var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)); padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-text, var(--spectrum-combobox-spacing-inline-icon-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); backface-visibility: hidden; - line-height: var(--mod-combobox-line-height, var(--spectrum-combobox-line-height)); + line-height: var(--mod-combobox-line-height, var(--spectrum-combobox-block-size)); &::placeholder { --mod-textfield-text-color-default: var(--mod-combobox-font-color-placeholder); From 53f352d5e3038cde89d78e19f3e3187ccbdfd675 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Thu, 29 May 2025 12:02:58 -0400 Subject: [PATCH 20/22] fix(combobox): restore border width subtraction --- components/combobox/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/combobox/index.css b/components/combobox/index.css index 58b66e63c6b..a59dff24ca5 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -322,7 +322,7 @@ /* TEXT INPUT */ .spectrum-Combobox-input { background-color: var(--highcontrast-combobox-background-color-default, var(--mod-combobox-textfield-background-color, var(--spectrum-combobox-background-color-default))); - padding-inline-start: var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)); + padding-inline-start: calc(var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-text, var(--spectrum-combobox-spacing-inline-icon-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); backface-visibility: hidden; line-height: var(--mod-combobox-line-height, var(--spectrum-combobox-block-size)); From f4431811ea0be5827cacf5421ab2a93dee25ab90 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Thu, 29 May 2025 15:35:45 -0400 Subject: [PATCH 21/22] feat(combobox): fixing autocomplete --- components/combobox/dist/metadata.json | 9 +++++++++ components/combobox/index.css | 14 ++++++++++---- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index e3d57c5e0ba..38fc1cd78f9 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -38,11 +38,17 @@ ".spectrum-Combobox-helptext .spectrum-HelpText-text", ".spectrum-Combobox-input", ".spectrum-Combobox-input.spectrum-Combobox-autocomplete", + ".spectrum-Combobox-input.spectrum-Combobox-autocomplete::selection", ".spectrum-Combobox-input:-internal-autofill-selected", + ".spectrum-Combobox-input:-internal-autofill-selected::selection", ".spectrum-Combobox-input:-webkit-autofill", + ".spectrum-Combobox-input:-webkit-autofill::selection", ".spectrum-Combobox-input:-webkit-autofill:active", + ".spectrum-Combobox-input:-webkit-autofill:active::selection", ".spectrum-Combobox-input:-webkit-autofill:focus", + ".spectrum-Combobox-input:-webkit-autofill:focus::selection", ".spectrum-Combobox-input:-webkit-autofill:hover", + ".spectrum-Combobox-input:-webkit-autofill:hover::selection", ".spectrum-Combobox-input::placeholder", ".spectrum-Combobox-input:active", ".spectrum-Combobox-input:focus", @@ -171,6 +177,7 @@ "--spectrum-combobox-font-weight", "--spectrum-combobox-icon-size", "--spectrum-combobox-inline-size", + "--spectrum-combobox-line-height", "--spectrum-combobox-line-height-cjk", "--spectrum-combobox-min-inline-size", "--spectrum-combobox-readonly-background-color-disabled", @@ -246,6 +253,7 @@ "--spectrum-gray-800", "--spectrum-gray-900", "--spectrum-help-text-to-component", + "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-focus", "--spectrum-negative-border-color-focus-hover", @@ -286,6 +294,7 @@ "--mod-textfield-border-color-invalid-keyboard-focus", "--mod-textfield-border-color-keyboard-focus", "--mod-textfield-border-width", + "--mod-textfield-corner-radius", "--mod-textfield-focus-indicator-color", "--mod-textfield-focus-indicator-gap", "--mod-textfield-focus-indicator-width", diff --git a/components/combobox/index.css b/components/combobox/index.css index a59dff24ca5..80c31837e9d 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -15,6 +15,7 @@ --spectrum-combobox-block-size: var(--spectrum-component-height-100); --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); --spectrum-combobox-font-size: var(--spectrum-font-size-100); + --spectrum-combobox-line-height: var(--spectrum-line-height-100); --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button); --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); @@ -92,6 +93,7 @@ --mod-textfield-border-color-focus-hover: var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover)); --mod-textfield-border-color-hover: var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover)); --mod-textfield-border-color-keyboard-focus: var(--mod-combobox-border-color-key-focus, var(--spectrum-combobox-border-color-key-focus)); + --mod-textfield-corner-radius: var(--mod-combobox-border-radius, var(--spectrum-combobox-border-radius)); --mod-textfield-border-color-invalid-default: var(--mod-combobox-border-color-invalid-default, var(--spectrum-combobox-border-color-invalid-default)); --mod-textfield-border-color-invalid-hover: var(--mod-combobox-border-color-invalid-hover, var(--spectrum-combobox-border-color-invalid-hover)); @@ -178,8 +180,6 @@ inline-size: var(--mod-combobox-inline-size, var(--spectrum-combobox-inline-size)); margin-block-start: var(--mod-combobox-spacing-label-to-combobox, var(--spectrum-combobox-spacing-label-to-combobox)); - border-radius: var(--mod-combobox-border-radius, var(--spectrum-combobox-border-radius)); - .spectrum-Combobox-label, .spectrum-Combobox-content { min-inline-size: var(--mod-combobox-min-inline-size, var(--spectrum-combobox-min-inline-size)); @@ -375,9 +375,15 @@ &:-webkit-autofill:active, &:-internal-autofill-selected, &.spectrum-Combobox-autocomplete { - box-shadow: 0 0 0 30px var(--spectrum-combobox-background-color-autofill) inset !important; - transition: background-color 5000s ease-in-out 0s; + border-color: var(--spectrum-gray-800); + box-shadow: 0 0 0 30px var(--spectrum-combobox-background-color-default) inset !important; + transition: background-color 5000s ease-in-out 0s; /* not sure about keeping this I'm just leaving it alone for now */ -webkit-text-fill-color: var(--spectrum-neutral-content-color-default) !important; + line-height: var(--spectrum-combobox-line-height); + + &::selection { + background-color: var(--spectrum-combobox-background-color-autofill); + } } } From bfad7aa343e33765f5c81041a1d29717a354e9b9 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Fri, 30 May 2025 11:47:34 -0400 Subject: [PATCH 22/22] feat(combobox): adjusting WHCM autocomplete mode --- components/combobox/dist/metadata.json | 1 + components/combobox/index.css | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 38fc1cd78f9..801fca17b38 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -318,6 +318,7 @@ "--highcontrast-combobox-border-color-invalid", "--highcontrast-combobox-readonly-border-color", "--highcontrast-textfield-border-color-invalid-default", + "--highcontrast-textfield-text-color-default", "--highcontrast-textfield-text-color-disabled" ] } diff --git a/components/combobox/index.css b/components/combobox/index.css index 80c31837e9d..be469b573fa 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -375,10 +375,10 @@ &:-webkit-autofill:active, &:-internal-autofill-selected, &.spectrum-Combobox-autocomplete { - border-color: var(--spectrum-gray-800); - box-shadow: 0 0 0 30px var(--spectrum-combobox-background-color-default) inset !important; - transition: background-color 5000s ease-in-out 0s; /* not sure about keeping this I'm just leaving it alone for now */ - -webkit-text-fill-color: var(--spectrum-neutral-content-color-default) !important; + border-color: var(--spectrum-combobox-border-color-default); + box-shadow: 0 0 0 30px var(--highcontrast-combobox-background-color-default, var(--spectrum-combobox-background-color-default)) inset !important; + transition: background-color 200ms ease-in-out 0s; + -webkit-text-fill-color: var(--highcontrast-textfield-text-color-default, var(--spectrum-neutral-content-color-default)) !important; line-height: var(--spectrum-combobox-line-height); &::selection {