Skip to content

DS Storybook - Add story for Search #5795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jcfilben merged 4 commits into from
Feb 12, 2026
Merged

DS Storybook - Add story for Search #5795

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
83525b4
Add story for Search
jcfilben Feb 10, 2026
75b4231
address feedback from review
jcfilben Feb 10, 2026
fd86062
Change textAlign to commonArg
jcfilben Feb 12, 2026
5dd4665
Merge remote-tracking branch 'origin/master' into sb-search
jcfilben Feb 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 54 additions & 0 deletions shared/aries-core/src/stories/components/TextInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { TextInput } from 'grommet';
import { Search } from '@hpe-design/icons-grommet';
import {
dropAlignArg,
iconArg,
placeholderArg,
reverseArg,
widthArg,
heightArg,
} from '../utils/commonArgs';

const meta = {
title: 'Components/TextInput',
component: TextInput,
argTypes: {
defaultSuggestion: {
control: { type: 'number' },
},
dropAlign: dropAlignArg,
Copy link
Collaborator

@britt6612 britt6612 Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wondering if we should leave the dropAlign off?

   <TextInput
      aria-label="search"
      icon={<SearchIcon />}
      placeholder="Search"
      reverse
      value={value}
      onChange={event => setValue(event.target.value)}
      type="search"
      {...props}
    />

we usually dont use it in our code examples

Copy link
Collaborator Author

@jcfilben jcfilben Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed dropAlign

Copy link
Collaborator

@britt6612 britt6612 Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cool

dropHeight: heightArg,
icon: iconArg,
placeholder: placeholderArg,
reverse: reverseArg,
suggestions: {
control: { type: 'object' },
},
textAlign: {
Copy link
Collaborator

@seanhillweb seanhillweb Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This feels like it could become a commonArg - willing to approve and revise later if needed.

Copy link
Collaborator Author

@jcfilben jcfilben Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call, changed this to be a commonArg

control: { type: 'select' },
options: ['start', 'center', 'end'],
},
width: widthArg,
},
} satisfies Meta<typeof TextInput>;

export default meta;
type Story = StoryObj<typeof meta>;

export const SearchExample = {
name: 'Search',
render: args => <TextInput {...args} />,
args: {
defaultSuggestion: undefined,
dropAlign: { top: 'bottom', left: 'left' },
dropHeight: undefined,
icon: <Search />,
placeholder: 'Search',
reverse: true,
suggestions: ['Suggestion 1', 'Suggestion 2', 'Suggestion 3'],
textAlign: undefined,
width: undefined,
Copy link
Collaborator

@britt6612 britt6612 Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we do medium as default so its not as long width wide

Copy link
Collaborator Author

@jcfilben jcfilben Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tried setting width medium, but it puts the icon way outside the input container. Wondering if I should just remove the width prop, not sure we want people in hpe doing that
Screenshot 2026-02-10 at 3 39 34 PM

Copy link
Collaborator Author

@jcfilben jcfilben Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed width for now

Copy link
Collaborator

@britt6612 britt6612 Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh weird yeah I didnt notice that

Copy link
Collaborator

@britt6612 britt6612 Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Im good with leaving it out for now

},
} satisfies Story;
4 changes: 4 additions & 0 deletions shared/aries-core/src/stories/utils/commonArgs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,10 @@ export const disabledArg: ArgType = {
control: { type: 'boolean' },
};

export const dropAlignArg: ArgType = {
control: { type: 'object' },
};

export const elevationArg: ArgType = {
control: { type: 'select' },
options: tShirtSizes,
Expand Down