From aa11152437c978dcfd2d80ae8e9d291e36dd58f9 Mon Sep 17 00:00:00 2001 From: Kalpana Chavhan Date: Fri, 9 Jan 2026 22:24:55 +0530 Subject: [PATCH] docs(fuselage): add visual states documentation to SearchInput --- .../SearchInput/SearchInput.stories.tsx | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/packages/fuselage/src/components/SearchInput/SearchInput.stories.tsx b/packages/fuselage/src/components/SearchInput/SearchInput.stories.tsx index 43c064edd5..ceac889451 100644 --- a/packages/fuselage/src/components/SearchInput/SearchInput.stories.tsx +++ b/packages/fuselage/src/components/SearchInput/SearchInput.stories.tsx @@ -93,3 +93,28 @@ export const States: StoryFn = () => ( /> ); +States.parameters = { + docs: { + description: { + story: ` +### Visual States and Interaction Documentation +This story demonstrates the **SearchInput** component's appearance across different state combinations and sizes. + +#### Y-Axis: Component States +The vertical axis illustrates how the input responds to different interaction and validation logic: +- **Default / Small:** The base state of the component. +- **Hover:** The visual style when the user's cursor is over the input. +- **Active:** The state when the input is being actively pressed or clicked. +- **Focus:** The state when the component is selected via mouse or keyboard (**Tab** key), showing the focus ring for accessibility. +- **Disabled:** Prevents interaction and reduces opacity to signal the input is unavailable. +- **Errored:** Applies a validation error style (red border). The story also shows combined states (e.g., **Errored + Focus**) to ensure accessibility is maintained even during validation failures. + +#### X-Axis: Content Variations +The horizontal axis shows how states interact with different internal configurations: +- **With Placeholder:** Showing the hint text style. +- **With Value:** Showing standard typed text. +- **With Icon:** Showing the alignment and spacing when an 'addon' (magnifier icon) is present. +`, + }, + }, +}; \ No newline at end of file