feat(search): collapsed search

.changeset/long-carrots-sleep.md

@@ -0,0 +1,15 @@
+---
+"@spectrum-css/search": major
+---
+
+## S2 Minimized search field
+
+The search component allows for a minimized state where the search field is collapsed to a button.
+
+### Anatomy
+
+The collapsed state consists of a single action button that only has a hover and disabled state. This state is triggered by the `is-collapsed` class on the search component. When the search field is in this state, the textfield is hidden and the search button is displayed. The button can be hovered and focused, and will expand the search field when clicked.
+
+### Usage
+
+The collapsed state is used to reduce the amount of space taken up by the search field. It is most commonly used next a filter button to allow users to quickly search and filter content.

components/search/dist/metadata.json

@@ -22,7 +22,9 @@
     ".spectrum-Search-textfield.is-focused:hover .spectrum-Search-icon",
     ".spectrum-Search-textfield.is-keyboardFocused .spectrum-Search-icon",
     ".spectrum-Search-textfield:hover .spectrum-Search-icon",
+    ".spectrum-Search.is-collapsed",
     ".spectrum-Search.is-disabled .spectrum-Search-clearButton",
+    ".spectrum-Search.is-expanded",
     ".spectrum-Search:lang(ja)",
     ".spectrum-Search:lang(ko)",
     ".spectrum-Search:lang(zh)"

components/search/index.css

@@ -149,6 +149,20 @@
 	.spectrum-HelpText {
 		margin-block-start: var(--mod-search-to-help-text, var(--spectrum-search-to-help-text));
 	}
+
+	/* Animation for collapsible search expansion */
+	&.is-collapsed {
+		transition: inline-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+		inline-size: var(--mod-search-button-inline-size, var(--spectrum-search-block-size));
+		min-inline-size: var(--mod-search-button-inline-size, var(--spectrum-search-block-size));
+		transform-origin: left center;
+	}
+
+	&.is-expanded {
+		transition: inline-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+		inline-size: var(--mod-search-inline-size, var(--spectrum-search-inline-size));
+		transform-origin: left center;
+	}
 }
 
 .spectrum-Search-clearButton {

components/search/stories/search.stories.js

@@ -28,6 +28,7 @@ export default {
 				category: "Content",
 			},
 			control: "boolean",
+			if: { arg: "isCollapsed", eq: false },
 		},
 		helpTextLabel: {
 			name: "Help text (description)",
@@ -50,6 +51,16 @@ export default {
 				type: { summary: "string" },
 				category: "Content",
 			},
+			if: { arg: "isCollapsed", eq: false },
+		},
+		isCollapsed: {
+			name: "Collapsed",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+			},
+			control: "boolean",
 		},
 	},
 	args: {
@@ -62,13 +73,15 @@ export default {
 		showHelpText: false,
 		helpTextLabel: "Help text with a suggestion of what to search for",
 		inputValue: "",
+		isCollapsed: false,
 	},
 	parameters: {
 		actions: {
 			handles: [
 				"change .spectrum-Search-input",
 				"click .spectrum-Search-clearButton",
 				"click .spectrum-Search-icon",
+				"click .spectrum-Search-actionButton",
 			],
 		},
 		design: {

components/search/stories/search.test.js

@@ -17,6 +17,10 @@ export const SearchGroup = Variants({
 			inputValue: "What should we search for?",
 			withStates: false,
 		},
+		{
+			testHeading: "Collapsed",
+			isCollapsed: true,
+		}
 	],
 	stateData: [
 		{
@@ -30,15 +34,18 @@ export const SearchGroup = Variants({
 		{
 			testHeading: "Focused",
 			isFocused: true,
+			ignore: ["Collapsed"],
 		},
 		{
 			testHeading: "Focused + hovered",
 			isFocused: true,
 			isHovered: true,
+			ignore: ["Collapsed"],
 		},
 		{
 			testHeading: "Keyboard focused",
 			isKeyboardFocused: true,
+			ignore: ["Collapsed"],
 		},
 	]
 });

components/search/stories/template.js

@@ -1,3 +1,4 @@
+import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
 import { Template as ClearButton } from "@spectrum-css/clearbutton/stories/template.js";
 import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js";
 import { Container } from "@spectrum-css/preview/decorators";
@@ -19,7 +20,9 @@ export const Template = ({
 	size = "m",
 	showHelpText = false,
 	helpTextLabel = "",
+	isCollapsed = false,
 } = {}, context = {}) => {
+	const { updateArgs } = context;
 	return html`
 	<form
 		class=${classMap({
@@ -28,38 +31,56 @@ export const Template = ({
 				typeof size !== "undefined" && size !== "m",
 			"is-disabled": isDisabled,
 			"is-keyboardFocused": isKeyboardFocused,
+			"is-collapsed": isCollapsed,
+			"is-expanded": !isCollapsed,
 			...customClasses.reduce((a, c) => ({ ...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",
-			name: "search",
-			customInputClasses: [`${rootClass}-input`],
-			customIconClasses: [`${rootClass}-icon`],
-			autocomplete: false,
-			value: inputValue,
-		}, context)}
-		${when(inputValue, () =>
+		${when(isCollapsed, () =>
+			ActionButton({
+				iconName: "Search",
+				size,
+				customClasses: [
+					`${rootClass}-actionButton`,
+					isHovered && "is-hover",
+					isDisabled && "is-disabled",
+				],
+				onclick: () => {
+					updateArgs({ isCollapsed: !isCollapsed });
+				},
+			}, context)
+		)}
+		${when(!isCollapsed, () =>
+			TextField({
+				isDisabled,
+				size,
+				customClasses: [
+					`${rootClass}-textfield`,
+					isFocused && "is-focused",
+					isKeyboardFocused && "is-keyboardFocused",
+					isHovered && "is-hover"
+				],
+				iconName: "Search",
+				setName: "workflow",
+				type: "search",
+				placeholder: "Search",
+				name: "search",
+				customInputClasses: [`${rootClass}-input`],
+				customIconClasses: [`${rootClass}-icon`],
+				autocomplete: false,
+				value: inputValue,
+			}, context)
+		)}
+		${when(inputValue && !isCollapsed, () =>
 			ClearButton({
 				isDisabled,
 				size,
 				customClasses: [`${rootClass}-clearButton`],
 				isFocusable: false,
 			}, context)
 		)}
-		${when(showHelpText, () =>
+		${when(showHelpText && !isCollapsed, () =>
 			HelpText({
 				text: helpTextLabel,
 				size,