diff --git a/.changeset/old-goats-chew.md b/.changeset/old-goats-chew.md new file mode 100644 index 00000000000..92074ba5f71 --- /dev/null +++ b/.changeset/old-goats-chew.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/tokens": patch +--- + +Adds `--spectrum-corner-radius-1000: 9999px;` to global-vars.css to override value of 0.5. This should ensure our components that use this custom property are properly rounded (i.e. the fully rounded swatch or search field) diff --git a/.changeset/shaggy-schools-sing.md b/.changeset/shaggy-schools-sing.md new file mode 100644 index 00000000000..d5b7c76b0d9 --- /dev/null +++ b/.changeset/shaggy-schools-sing.md @@ -0,0 +1,13 @@ +--- +"@spectrum-css/search": major +--- + +#### Search S2 migration + +Search now uses Spectrum 2 tokens and specifications. The following items have been adjusted: + +- Quiet variant has been deprecated and code removed (including removal of the custom property `--mod-search-quiet-button-offset`). +- Updates to colors, corner rounding, and spacing. +- Custom property mod adjustments: + - Added `--mod-search-top-to-icon`. + - Removed `--mod-workflow-icon-size-100`. diff --git a/components/clearbutton/stories/clearbutton.stories.js b/components/clearbutton/stories/clearbutton.stories.js index a8dd5359278..77d1907bc5e 100644 --- a/components/clearbutton/stories/clearbutton.stories.js +++ b/components/clearbutton/stories/clearbutton.stories.js @@ -51,6 +51,10 @@ export default { ...staticColor, options: ["white"], }, + isFocusable: { + table: { disable: true }, + type: { name: "boolean" }, + }, }, args: { rootClass: "spectrum-ClearButton", diff --git a/components/clearbutton/stories/template.js b/components/clearbutton/stories/template.js index a4ce921c7aa..4e09cb2b394 100644 --- a/components/clearbutton/stories/template.js +++ b/components/clearbutton/stories/template.js @@ -12,6 +12,7 @@ export const Template = ({ isDisabled = false, size = "m", isQuiet = false, + isFocusable = true, staticColor, id = getRandomId("clearbutton"), customClasses = [], @@ -35,6 +36,8 @@ export const Template = ({ id=${ifDefined(id)} style=${styleMap(customStyles)} ?disabled=${isDisabled} + tabindex=${isFocusable ? 0 : -1} + aria-hidden=${isFocusable} >
${Icon({ diff --git a/components/search/dist/metadata.json b/components/search/dist/metadata.json index bda4088c629..f57d2c77c0f 100644 --- a/components/search/dist/metadata.json +++ b/components/search/dist/metadata.json @@ -6,8 +6,6 @@ ".spectrum-Search .spectrum-Search-clearButton .spectrum-ClearButton-fill", ".spectrum-Search .spectrum-Search-textfield", ".spectrum-Search .spectrum-Search-textfield .spectrum-Search-input", - ".spectrum-Search--quiet", - ".spectrum-Search--quiet .spectrum-Search-input", ".spectrum-Search--sizeL", ".spectrum-Search--sizeS", ".spectrum-Search--sizeXL", @@ -25,8 +23,9 @@ ".spectrum-Search-textfield.is-keyboardFocused .spectrum-Search-icon", ".spectrum-Search-textfield:hover .spectrum-Search-icon", ".spectrum-Search.is-disabled .spectrum-Search-clearButton", - ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-icon", - ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input" + ".spectrum-Search:lang(ja)", + ".spectrum-Search:lang(ko)", + ".spectrum-Search:lang(zh)" ], "modifiers": [ "--mod-search-background-color", @@ -61,6 +60,7 @@ "--mod-search-min-inline-size", "--mod-search-text-to-icon", "--mod-search-to-help-text", + "--mod-search-top-to-icon", "--mod-search-top-to-text" ], "component": [ @@ -98,32 +98,47 @@ "--spectrum-search-min-inline-size", "--spectrum-search-text-to-icon", "--spectrum-search-to-help-text", + "--spectrum-search-top-to-icon", "--spectrum-search-top-to-text" ], "global": [ - "--spectrum-border-width-100", + "--spectrum-border-width-200", + "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", - "--spectrum-component-edge-to-visual-100", - "--spectrum-component-edge-to-visual-200", - "--spectrum-component-edge-to-visual-300", - "--spectrum-component-edge-to-visual-75", + "--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", "--spectrum-component-height-75", + "--spectrum-component-pill-edge-to-visual-100", + "--spectrum-component-pill-edge-to-visual-200", + "--spectrum-component-pill-edge-to-visual-300", + "--spectrum-component-pill-edge-to-visual-75", "--spectrum-component-top-to-text-100", - "--spectrum-corner-radius-100", + "--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-full", "--spectrum-default-font-style", "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", - "--spectrum-field-edge-to-visual-quiet", "--spectrum-field-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-75", "--spectrum-gray-25", - "--spectrum-gray-500", - "--spectrum-gray-600", + "--spectrum-gray-300", + "--spectrum-gray-400", "--spectrum-gray-800", "--spectrum-gray-900", "--spectrum-help-text-to-component", @@ -160,6 +175,7 @@ "--mod-textfield-focus-indicator-width", "--mod-textfield-font-family", "--mod-textfield-font-weight", + "--mod-textfield-placeholder-font-size", "--mod-textfield-text-color-default", "--mod-textfield-text-color-disabled", "--mod-textfield-text-color-focus", diff --git a/components/search/index.css b/components/search/index.css index 4565d749d29..5ca303824a4 100644 --- a/components/search/index.css +++ b/components/search/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -12,7 +12,17 @@ */ .spectrum-Search { + /* Background / Border */ + /* stylelint-disable spectrum-tools/no-unused-custom-properties -- used to assign Textfield mods */ --spectrum-search-background-color: var(--spectrum-gray-25); + --spectrum-search-border-color-default: var(--spectrum-gray-300); + --spectrum-search-border-color-hover: var(--spectrum-gray-400); + --spectrum-search-border-color-focus: var(--spectrum-gray-800); + --spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-search-border-color-key-focus: var(--spectrum-gray-800); + --spectrum-search-border-width: var(--spectrum-border-width-200); + --spectrum-search-border-radius: var(--spectrum-corner-radius-full); + /* stylelint-enable spectrum-tools/no-unused-custom-properties */ /* Size / Spacing */ --spectrum-search-inline-size: var(--spectrum-field-width); @@ -25,41 +35,47 @@ --spectrum-search-to-help-text: var(--spectrum-help-text-to-component); --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-100); --spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); + --spectrum-search-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); /* Focus Indicator */ + /* stylelint-disable spectrum-tools/no-unused-custom-properties -- used to assign Textfield mods */ --spectrum-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --spectrum-search-focus-indicator-color: var(--spectrum-focus-indicator-color); + /* stylelint-enable spectrum-tools/no-unused-custom-properties */ /* Font / Color */ + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Textfield mods */ --spectrum-search-font-family: var(--spectrum-sans-font-family-stack); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Textfield mods */ --spectrum-search-font-weight: var(--spectrum-regular-font-weight); --spectrum-search-font-style: var(--spectrum-default-font-style); --spectrum-search-line-height: var(--spectrum-line-height-100); - --spectrum-search-color-default: var(--spectrum-neutral-content-color-default); --spectrum-search-color-hover: var(--spectrum-neutral-content-color-hover); --spectrum-search-color-focus: var(--spectrum-neutral-content-color-focus); --spectrum-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); --spectrum-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --spectrum-search-border-color-default: var(--spectrum-gray-500); - --spectrum-search-border-color-hover: var(--spectrum-gray-600); - --spectrum-search-border-color-focus: var(--spectrum-gray-800); - --spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-search-border-color-key-focus: var(--spectrum-gray-900); - - /* Background and Border */ - --spectrum-search-border-width: var(--spectrum-border-width-100); - /* Disabled */ --spectrum-search-color-disabled: var(--spectrum-disabled-content-color); - /* @passthrough start -- settings for nested Textfield component */ + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Textfield mods */ + --spectrum-search-background-color-disabled: var(--spectrum-gray-25); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Textfield mods */ + --spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color); + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-search-line-height: var(--spectrum-cjk-line-height-100); + } + + /* /* @passthrough start: nested Textfield component. */ --mod-textfield-font-family: var(--mod-search-font-family, var(--spectrum-search-font-family)); --mod-textfield-font-weight: var(--mod-search-font-weight, var(--spectrum-search-font-weight)); + --mod-textfield-placeholder-font-size: var(--spectrum-font-size-100); --mod-textfield-corner-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius)); --mod-textfield-border-width: var(--mod-search-border-width, var(--spectrum-search-border-width)); @@ -85,53 +101,53 @@ --mod-textfield-background-color: var(--mod-search-background-color, var(--spectrum-search-background-color)); --mod-textfield-background-color-disabled: var(--mod-search-background-color-disabled, var(--spectrum-search-background-color-disabled)); /* @passthrough end */ - - display: inline-block; - position: relative; - inline-size: var(--mod-search-inline-size, var(--spectrum-search-inline-size)); - min-inline-size: var(--mod-search-min-inline-size, var(--spectrum-search-min-inline-size)); - - .spectrum-HelpText { - margin-block-start: var(--mod-search-to-help-text, var(--spectrum-search-to-help-text)); - } } .spectrum-Search--sizeS { --spectrum-search-block-size: var(--spectrum-component-height-75); --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-75); --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-75); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-75); + --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75); + --spectrum-search-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + + --mod-textfield-placeholder-font-size: var(--spectrum-font-size-75); } .spectrum-Search--sizeL { --spectrum-search-block-size: var(--spectrum-component-height-200); --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-200); --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-200); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-200); + --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200); + --spectrum-search-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + + --mod-textfield-placeholder-font-size: var(--spectrum-font-size-200); } .spectrum-Search--sizeXL { --spectrum-search-block-size: var(--spectrum-component-height-300); --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300); --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300); + --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300); + --spectrum-search-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); + --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + + --mod-textfield-placeholder-font-size: var(--spectrum-font-size-300); } -@media (forced-colors: active) { - .spectrum-Search .spectrum-Search-textfield, - .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input { - --highcontrast-search-color-default: CanvasText; - --highcontrast-search-color-hover: CanvasText; - --highcontrast-search-color-focus: CanvasText; - --highcontrast-search-color-disabled: GrayText; - } +/* Standard / Default */ +.spectrum-Search { + display: inline-block; + position: relative; + inline-size: var(--mod-search-inline-size, var(--spectrum-search-inline-size)); + min-inline-size: var(--mod-search-min-inline-size, var(--spectrum-search-min-inline-size)); - .spectrum-Search .spectrum-Search-clearButton { - .spectrum-ClearButton-fill { - /* Avoid button background color overlapping on border. */ - forced-color-adjust: none; - background-color: transparent; - } + .spectrum-HelpText { + margin-block-start: var(--mod-search-to-help-text, var(--spectrum-search-to-help-text)); } } @@ -160,7 +176,8 @@ display: block; position: absolute; inset-block: 0; - margin-block: auto; + inset-inline-start: var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)); + margin-block-start: var(--mod-search-top-to-icon, var(--spectrum-search-top-to-icon)); color: var(--spectrum-search-color); .spectrum-Search-textfield:hover & { @@ -193,6 +210,8 @@ block-size: var(--mod-search-block-size, var(--spectrum-search-block-size)); padding-block-start: calc(var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width))); padding-block-end: calc(var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width))); + padding-inline-start: calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - var(--mod-search-border-width, var(--spectrum-search-border-width)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon))); + padding-inline-end: calc(var(--mod-search-button-inline-size, var(--spectrum-search-button-inline-size)) - var(--mod-search-border-width, var(--spectrum-search-border-width))); font-style: var(--mod-search-font-style, var(--spectrum-search-font-style)); line-height: var(--mod-search-line-height, var(--spectrum-search-line-height)); @@ -204,32 +223,20 @@ } } -/* Standard / Default Only */ -.spectrum-Search:not(.spectrum-Search--quiet) { - .spectrum-Search-icon { - inset-inline-start: var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)); - } - - .spectrum-Search-input { - padding-inline-start: calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - var(--mod-search-border-width, var(--spectrum-search-border-width)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon))); - padding-inline-end: var(--mod-search-button-inline-size, var(--spectrum-search-button-inline-size)); +@media (forced-colors: active) { + .spectrum-Search .spectrum-Search-textfield, + .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input { + --highcontrast-search-color-default: CanvasText; + --highcontrast-search-color-hover: CanvasText; + --highcontrast-search-color-focus: CanvasText; + --highcontrast-search-color-disabled: GrayText; } -} - -/* Quiet Variant */ -.spectrum-Search--quiet { - --spectrum-search-background-color: transparent; - --spectrum-search-background-color-disabled: transparent; - --spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color); - /* Added specificity, otherwise they are overridden by system specific themes. */ - --mod-search-border-radius: 0; - --mod-search-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet); - - .spectrum-Search-input { - border-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius)); - padding-inline-start: calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon))); - padding-inline-end: var(--mod-search-button-inline-size, var(--spectrum-search-button-inline-size)); - padding-block-start: var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)); + .spectrum-Search .spectrum-Search-clearButton { + .spectrum-ClearButton-fill { + /* Avoid button background color overlapping on border. */ + forced-color-adjust: none; + background-color: transparent; + } } } diff --git a/components/search/stories/search.stories.js b/components/search/stories/search.stories.js index fd3e3807c8e..34c34eda9f0 100644 --- a/components/search/stories/search.stories.js +++ b/components/search/stories/search.stories.js @@ -1,6 +1,6 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, isQuiet, size } from "@spectrum-css/preview/types"; +import { isDisabled, isFocused, isHovered, isKeyboardFocused, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { SearchGroup } from "./search.test.js"; @@ -13,40 +13,55 @@ import { SearchOptions, Template } from "./template.js"; * This component contains a single input field with both a magnifying glass icon and a clear (“reset”) button displayed within it. When making use of this component, the clear button should only be displayed when the input has a value. */ export default { - title: "Search", - component: "Search", + title: "Search field", + component: "SearchField", argTypes: { size: size(["s", "m", "l", "xl"]), - isQuiet, isDisabled, - hasDescription: { - name: "Help Text", + isHovered, + showHelpText: { + name: "Show help text", description: "A search field can have help text below the field to give extra context or instruction about what a user should input. The description communicates a hint or helpful information, such as a search’s scope.", type: { name: "boolean" }, table: { type: { summary: "boolean" }, - category: "Advanced", + category: "Content", }, control: "boolean", }, - description: { + helpTextLabel: { name: "Help text (description)", type: { name: "string" }, + table: { + type: { summary: "boolean" }, + category: "Content", + }, + control: { type: "text" }, + if: { arg: "showHelpText", eq: true }, + }, + isFocused, + isKeyboardFocused, + inputValue: { + name: "Value", + description: "When defined, this will set the value of the input, and the clear button will appear within the search field.", + type: { name: "string" }, control: { type: "text" }, table: { type: { summary: "string" }, - category: "Advanced", + category: "Content", }, - if: { arg: "hasDescription", eq: true }, }, }, args: { rootClass: "spectrum-Search", size: "m", - isQuiet: false, isDisabled: false, - hasDescription: false, - description: "Example help text. Lorem ipsum dolor sit amet.", + isFocused: false, + isHovered: false, + isKeyboardFocused: false, + showHelpText: false, + helpTextLabel: "Help text with a suggestion of what to search for", + inputValue: "", }, parameters: { actions: { @@ -56,6 +71,9 @@ export default { "click .spectrum-Search-icon", ], }, + status: { + type: "migrated", + }, design: { type: "figma", url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13670-229", @@ -67,10 +85,25 @@ export default { export const Default = SearchGroup.bind({}); Default.args = {}; +Default.tags = ["!autodocs"]; // ********* DOCS ONLY ********* // +/** + * A search field should include a label and a search icon. In the default state before a search term is input, + * the label is in regular body text style to meet contrast ratios and to show that this is a field label, not placeholder text. + * Search fields should also include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”). + * The width of a search field can be customized appropriately for its context. + */ +export const Standard = SearchOptions.bind({}); +Standard.args = {}; +Standard.storyName = "Default"; +Standard.tags = ["!dev"]; -export const Disabled = SearchOptions.bind({}); +/** + * A search field in a disabled state shows that a search option exists, but is not available in that circumstance. + * This can be used to maintain layout continuity and communicate that it may become available later. + */ +export const Disabled = Template.bind({}); Disabled.args = { isDisabled: true, }; @@ -80,31 +113,32 @@ Disabled.parameters = { }; /** - * A search field can have [help text](?path=/docs/components-help-text--docs) below the field to give extra context or instruction about what a user should input. The description communicates a hint or helpful information, such as a search’s scope. + * A search field can have [help text](/docs/components-help-text--docs) below the field to give extra context or instruction about what a user should input. The description communicates a hint or helpful information, such as a search’s scope. * * When the help text is too long for the available horizontal space, it wraps to form another line. */ -export const HelpText = SearchGroup.bind({}); -HelpText.args = { - hasDescription: true, +export const WithHelpText = SearchGroup.bind({}); +WithHelpText.args = { + showHelpText: true, }; -HelpText.tags = ["!dev"]; -HelpText.parameters = { +WithHelpText.tags = ["!dev"]; +WithHelpText.parameters = { chromatic: { disableSnapshot: true }, }; +WithHelpText.storyName = "With help text"; /** - * A quiet search field can be used when searching isn’t a high priority action on the page. These search fields have no visible background, and this style works best when a clear layout makes the field easy to recognize. Too many quiet components in a small space can be hard to read. -*/ -export const Quiet = SearchGroup.bind({}); -Quiet.args = { - isQuiet: true, + * The value shows a user’s entered text. When the search field has an input value, [the clear button](/docs/components-clear-button--docs) appears with it. When the entered text is too long for the available horizontal space in the field, the text truncates. + */ +export const WithValue = SearchGroup.bind({}); +WithValue.args = { + inputValue: "What should I search for?", }; -Quiet.tags = ["!dev"]; -Quiet.parameters = { +WithValue.tags = ["!dev"]; +WithValue.parameters = { chromatic: { disableSnapshot: true }, }; - +WithValue.storyName = "With value and clear button"; /** * The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page. @@ -116,7 +150,7 @@ export const Sizing = (args, context) => Sizes({ ...args, }, context); Sizing.args = { - hasDescription: true + showHelpText: true }; Sizing.tags = ["!dev"]; Sizing.parameters = { diff --git a/components/search/stories/search.test.js b/components/search/stories/search.test.js index 880c56a3a4d..889dc7a6ee1 100644 --- a/components/search/stories/search.test.js +++ b/components/search/stories/search.test.js @@ -8,8 +8,14 @@ export const SearchGroup = Variants({ testHeading: "Default", }, { - testHeading: "Quiet", - isQuiet: true, + testHeading: "With help text", + showHelpText: true, + helpTextLabel: "Help text description goes here and just in case, let's also make it wrap." + }, + { + testHeading: "With input value and clear button", + inputValue: "What should we search for?", + withStates: false, }, ], stateData: [ @@ -17,5 +23,22 @@ export const SearchGroup = Variants({ testHeading: "Disabled", isDisabled: true, }, + { + testHeading: "Hovered", + isHovered: true, + }, + { + testHeading: "Focused", + isFocused: true, + }, + { + testHeading: "Focused + hovered", + isFocused: true, + isHovered: true, + }, + { + testHeading: "Keyboard focused", + isKeyboardFocused: true, + }, ] }); diff --git a/components/search/stories/template.js b/components/search/stories/template.js index d017e28981f..1caff4d7253 100644 --- a/components/search/stories/template.js +++ b/components/search/stories/template.js @@ -12,66 +12,94 @@ export const Template = ({ rootClass = "spectrum-Search", customClasses = [], isDisabled = false, - isQuiet = false, - size, - hasDescription = false, - description, + isFocused = false, + isHovered = false, + isKeyboardFocused = false, + inputValue = "", + size = "m", + showHelpText = false, + helpTextLabel = "", } = {}, context = {}) => { return html` -
({ ...a, [c]: true }), {}), - })} - > - ${TextField({ + ({ ...a, [c]: true }), {}), + })} + aria-label="Search" + > + ${TextField({ + isDisabled, + size, + customClasses: [ + `${rootClass}-textfield`, + isFocused && "is-focused", + isKeyboardFocused && "is-keyboardFocused", + isHovered && "is-hover" + ], + iconName: "Search", + setName: "workflow", + type: "search", + placeholder: "Search", + displayLabel: false, + name: "search", + customInputClasses: [`${rootClass}-input`], + customIconClasses: [`${rootClass}-icon`], + autocomplete: false, + value: inputValue, + }, context)} + ${when(inputValue, () => + ClearButton({ isDisabled, - isQuiet, size, - customClasses: [`${rootClass}-textfield`], - iconName: "Magnify", - setName: "workflow", - type: "search", - placeholder: "Search", - name: "search", - customInputClasses: [`${rootClass}-input`], - customIconClasses: [`${rootClass}-icon`], - autocomplete: false, - }, context)} - ${ClearButton({ - isDisabled, - size, - customClasses: [`${rootClass}-clearButton`], - }, context)} - ${when(hasDescription, () => - HelpText({ - text: description, - size, - isDisabled - }, context ))} -
- `; + customClasses: [`${rootClass}-clearButton`], + isFocusable: false, + }, context) + )} + ${when(showHelpText, () => + HelpText({ + text: helpTextLabel, + size, + isDisabled, + }, context))} + +`; }; -export const SearchOptions = ({ - ...args -}, context = {}) => Container({ +export const SearchOptions = (args, context) => Container({ withBorder: false, direction: "row", wrapperStyles: { columnGap: "12px", }, content: html` - ${Template({ - ...args, - }, context)} - ${Template({ - ...args, - isQuiet: true - }, context)} + ${Container({ + heading: "Default", + withBorder: false, + containerStyles: { + rowGap: "8px", + }, + content: Template(args, context) + })} + ${Container({ + heading: "Focused", + withBorder: false, + containerStyles: { + rowGap: "8px", + }, + content: Template({...args, isFocused: true,}, context) + })} + ${Container({ + heading: "Keyboard focused", + withBorder: false, + containerStyles: { + rowGap: "8px", + }, + content: Template({...args, isKeyboardFocused: true,}, context) + })} ` }, context); diff --git a/tokens/custom/global-vars.css b/tokens/custom/global-vars.css index 0a188980cb1..663e24ad887 100644 --- a/tokens/custom/global-vars.css +++ b/tokens/custom/global-vars.css @@ -61,8 +61,11 @@ --spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500)); /* Gradients that do not change with the color theme, for use in static color backgrounds. */ - --spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255, 241, 246), rgb(238, 245, 255)); - --spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64, 0, 22), rgb(14, 24, 67)); + --spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255)); + --spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67)); --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); + + /* override for Spectrum Tokens value until a Style Dictionary transform gets written for our usage */ + --spectrum-corner-radius-1000: 9999px; }