Skip to content

feat(apollo-wind): add a none variant to Input [MST-16240] #1300

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

Open
KodudulaAshishUiPath wants to merge 1 commit into
base: main
Choose a base branch
from
+36 −3
Open

feat(apollo-wind): add a none variant to Input [MST-16240] #1300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
20 changes: 18 additions & 2 deletions packages/apollo-wind/src/components/ui/input.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ const meta = {
argTypes: {
variant: {
control: 'select',
options: ['default', 'ghost'],
options: ['default', 'ghost', 'none'],
description:
'Visual style. Ghost removes the border and sets a surface background, suited for compact panel inputs.',
'Visual style. Ghost removes the border and sets a surface background, suited for compact panel inputs. None paints no box in any theme, for a field whose className draws its own.',
},
size: {
control: 'select',
Expand Down Expand Up @@ -120,6 +120,22 @@ export const Ghost: Story = {
},
};

export const None: Story = {
parameters: {
docs: {
description: {
story:
'None paints no box, so className draws one that holds in every theme. Under Future, a default Input switches to its own 40px borderless box, while this one keeps 34px with a border.',
},
},
},
args: {
variant: 'none',
placeholder: 'Boxed by className',
className: 'h-[34px] rounded border border-input bg-background px-2 text-sm',
},
};

export const CompactSearch: Story = {
render: () => (
<div className="relative flex items-center">
Expand Down
15 changes: 15 additions & 0 deletions packages/apollo-wind/src/components/ui/input.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,4 +101,19 @@ describe('Input', () => {
expect(input).toHaveClass('h-6', 'text-xs', 'rounded', 'bg-surface-overlay');
expect(input).not.toHaveClass('border-input');
});

it('applies none variant without any future theme classes', () => {
render(<Input variant="none" />);
const input = screen.getByRole('textbox');
expect(input).toHaveClass('border-0', 'bg-transparent');
expect(input).not.toHaveClass('border-input');
expect([...input.classList].filter((name) => name.startsWith('future:'))).toEqual([]);
});

it('lets className draw the box for the none variant', () => {
render(<Input variant="none" className="h-[34px] rounded border bg-background" />);
const input = screen.getByRole('textbox');
expect(input).toHaveClass('h-[34px]', 'rounded', 'border', 'bg-background');
expect(input).not.toHaveClass('h-9', 'rounded-md', 'border-0', 'bg-transparent');
});
});
4 changes: 3 additions & 1 deletion packages/apollo-wind/src/components/ui/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ const IN_GROUP_CLASS =
'h-full w-full rounded-none !border-0 !ring-0 bg-transparent p-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:h-full future:rounded-none future:border-0 future:bg-transparent future:p-0 future:focus-visible:ring-offset-0';

export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
variant?: 'default' | 'ghost';
/** `none` paints no box in any theme, for a caller whose `className` draws its own. */
variant?: 'default' | 'ghost' | 'none';
size?: 'default' | 'xs';
/**
* Field-specific feedback rendered immediately below the input.
Expand Down Expand Up @@ -69,6 +70,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
// Variant
variant === 'default' && 'border border-input bg-transparent',
variant === 'ghost' && 'border-0 bg-surface-overlay',
variant === 'none' && 'border-0 bg-transparent shadow-none',
// Future theme overrides apply only to the default variant + default size
variant === 'default' &&
size === 'default' &&
Expand Down
Loading