feat: adds input component (#538)

* feat(input): add experimental component

* feat(search): use input component

* fix(input): adjust flex props

---------

Co-authored-by: lena.rashkovan <[email protected]>

Author: Elena Rashkovan

src/components/experimental/Input/Input.spec.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Input } from './Input';
+
+describe('Experimental: Input', () => {
+    it('renders correctly', async () => {
+        const user = userEvent.setup();
+        const utils = render(<Input placeholder="Test" />);
+
+        const input = await utils.findByPlaceholderText('Test');
+
+        await user.type(input, 'Text');
+
+        expect(input).toHaveValue('Text');
+    });
+});

…nts/experimental/Search/Search.styled.ts …nents/experimental/Input/Input.styled.tssrc/components/experimental/Search/Search.styled.ts renamed to src/components/experimental/Input/Input.styled.ts src/components/experimental/Search/Search.styled.ts renamed to src/components/experimental/Input/Input.styled.ts

@@ -1,26 +1,29 @@
-import { Input as BaseInput, Button as BaseButton, SearchField as BaseSearchField } from 'react-aria-components';
+import { Input as BaseInput } from 'react-aria-components';
 import styled from 'styled-components';
 
 import { getSemanticValue } from '../../../essentials/experimental';
-import SearchIcon from '../../../icons/experimental/SearchIcon';
 import { get } from '../../../utils/experimental/themeGet';
 import { textStyles } from '../Text/Text';
 
-export const Icon = styled(SearchIcon)`
-    position: absolute;
-    left: ${get('space.3')};
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-`;
-
-export const SearchField = styled(BaseSearchField)`
+export const Wrapper = styled.span`
     position: relative;
-    border-radius: ${get('radii.4')};
+
+    display: flex;
+    align-items: center;
+    gap: ${get('space.1')};
+    padding: ${get('space.2')} ${get('space.4')};
+
     background: ${getSemanticValue('surface-variant')};
     color: ${getSemanticValue('on-surface-variant')};
+    border-radius: ${get('radii.4')};
+
+    cursor: text;
 
-    &::before {
+    & > * {
+        flex-shrink: 0;
+    }
+
+    &::after {
         position: absolute;
         pointer-events: none;
         inset: 0;
@@ -30,9 +33,9 @@ export const SearchField = styled(BaseSearchField)`
         transition: opacity ease 200ms;
     }
 
-    &:has([data-hovered])::before {
+    &:hover::after {
         opacity: 0.16;
-        background-color: ${getSemanticValue('on-surface-variant')};
+        background: ${getSemanticValue('on-surface')};
     }
 
     &:has([data-focused]) {
@@ -41,43 +44,31 @@ export const SearchField = styled(BaseSearchField)`
         outline: ${getSemanticValue('interactive')} solid 0.125rem;
         outline-offset: -0.125rem;
 
-        &::before {
+        &::after {
             opacity: 0;
         }
     }
 
     &:has([data-disabled]) {
         opacity: 0.38;
+        pointer-events: none;
     }
 `;
 
-export const Button = styled(BaseButton)`
-    appearance: none;
-    background: none;
-    display: flex;
-    margin: 0;
-    padding: 0;
+export const Input = styled(BaseInput)`
     border: 0;
     outline: 0;
-    cursor: pointer;
-    position: absolute;
-    right: ${get('space.3')};
-    top: 50%;
-    transform: translateY(-50%);
-`;
+    padding: 0;
+
+    flex-grow: 1;
 
-export const Input = styled(BaseInput)`
     background-color: unset;
-    display: block;
-    padding: ${get('space.2')} ${get('space.9')};
-    border: 0;
-    outline: 0;
-    caret-color: ${getSemanticValue('interactive')};
     color: ${getSemanticValue('on-surface')};
+    caret-color: ${getSemanticValue('interactive')};
 
     ${textStyles.variants.label1}
 
-    &[data-placeholder] {
+    &::placeholder {
         color: ${getSemanticValue('on-surface-variant')};
     }
 

src/components/experimental/Input/Input.tsx

@@ -0,0 +1,21 @@
+import React, { ReactElement } from 'react';
+import { InputProps as BaseInputProps } from 'react-aria-components';
+
+import * as Styled from './Input.styled';
+
+interface InputProps extends BaseInputProps {
+    leadingIcon?: React.ReactNode;
+    actionIcon?: React.ReactNode;
+}
+
+export const Input = ({ leadingIcon, actionIcon, ...rest }: InputProps): ReactElement => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+
+    return (
+        <Styled.Wrapper onClick={() => inputRef.current?.focus()}>
+            {leadingIcon}
+            <Styled.Input ref={inputRef} {...rest} />
+            {actionIcon}
+        </Styled.Wrapper>
+    );
+};

src/components/experimental/Input/docs/Input.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { Input } from '../Input';
+import { EyeIcon } from '../../../../icons';
+import { SearchIcon } from '../../../../icons/experimental';
+
+const meta: Meta = {
+    title: 'Experimental/Components/Input',
+    component: Input,
+    parameters: {
+        layout: 'centered'
+    },
+    args: {
+        placeholder: 'Placeholder'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+    args: {
+        disabled: true
+    }
+};
+
+export const WithLeadingIcon: Story = {
+    args: {
+        type: 'search',
+        leadingIcon: <SearchIcon />
+    }
+};
+
+export const WithActionIcon: Story = {
+    args: {
+        type: 'password',
+        actionIcon: <EyeIcon onClick={action('Show password')} />
+    }
+};

src/components/experimental/Search/Search.tsx

@@ -1,25 +1,29 @@
 import React, { ReactElement } from 'react';
-import { SearchFieldProps } from 'react-aria-components';
+import { SearchFieldProps, SearchField } from 'react-aria-components';
 import XCrossCircleIcon from '../../../icons/actions/XCrossCircleIcon';
-
-import * as Styled from './Search.styled';
+import SearchIcon from '../../../icons/experimental/SearchIcon';
+import { Input } from '../Input/Input';
+import { Button } from '../Field/Button';
+import { getSemanticValue } from '../../../essentials/experimental';
 
 interface SearchProps extends SearchFieldProps {
     placeholder: string;
 }
 
 export const Search = ({ placeholder, ...rest }: SearchProps): ReactElement => (
-    <Styled.SearchField aria-label={placeholder} {...rest}>
+    <SearchField aria-label={placeholder} {...rest}>
         {({ state }) => (
-            <>
-                <Styled.Icon size={20} />
-                <Styled.Input placeholder={placeholder} />
-                {state.value !== '' && (
-                    <Styled.Button>
-                        <XCrossCircleIcon size={20} />
-                    </Styled.Button>
-                )}
-            </>
+            <Input
+                leadingIcon={<SearchIcon />}
+                placeholder={placeholder}
+                actionIcon={
+                    state.value !== '' && (
+                        <Button>
+                            <XCrossCircleIcon size={20} color={getSemanticValue('on-surface')} />
+                        </Button>
+                    )
+                }
+            />
         )}
-    </Styled.SearchField>
+    </SearchField>
 );

src/components/experimental/index.ts

@@ -10,6 +10,7 @@ export { Dialog } from './Dialog/Dialog';
 export { Divider } from './Divider/Divider';
 export { IconButton } from './IconButton/IconButton';
 export { InlineSpinner } from './InlineSpinner/InlineSpinner';
+export { Input } from './Input/Input';
 export { Label } from './Label/Label';
 export { ListBox, ListBoxItem } from './ListBox/ListBox';
 export { Modal } from './Modal/Modal';