Skip to content
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

Jump to bottom

docs(TextInput): update documentation + stories #2590

Merged
merged 4 commits into from
Oct 20, 2023
Merged

docs(TextInput): update documentation + stories #2590

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
127bdbe
docs: add size and icon examples
cf-remylenoir Oct 13, 2023
20749ea
chore: update stories
cf-remylenoir Oct 13, 2023
22dffb6
docs: update copy
cf-remylenoir Oct 19, 2023
8b32755
Merge branch 'main' into F36-805-text-input-documentation
cf-remylenoir Oct 20, 2023
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: 20 additions & 0 deletions packages/components/forms/examples/TextInputIconExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react';
import { TextInput, Stack } from '@contentful/f36-components';
import { SearchIcon } from '@contentful/f36-icons';

export default function TextInputIconExample() {
return (
<Stack flexDirection="column">
<TextInput
icon={<SearchIcon />}
size="small"
placeholder="Search for an item"
/>
<TextInput
icon={<SearchIcon />}
size="medium"
placeholder="Search for an item"
/>
</Stack>
);
}
11 changes: 11 additions & 0 deletions packages/components/forms/examples/TextInputSizeExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react';
import { TextInput, Stack } from '@contentful/f36-components';

export default function TextInputSizeExample() {
return (
<Stack flexDirection="column">
<TextInput size="small" defaultValue="I'm a small TextInput" />
<TextInput size="medium" defaultValue="I'm a medium TextInput" />
</Stack>
);
}
17 changes: 16 additions & 1 deletion packages/components/forms/src/TextInput/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,25 @@ You can use the `TextInput` as an uncontrolled input, for that you can:

When `TextInput` is used outside of form (without `FormControl`) and has no `<label>` associated with it, you need to specify `aria-label`.

### Using an icon

It is possible to provide an icon to the `TextInput`. It will be displayed on the left-hand side of the input.

```jsx file=../../examples/TextInputIconExample.tsx

```

### With different sizes

`TextInput` comes with the `small` and `medium` sizes.

```jsx file=../../examples/TextInputSizeExample.tsx

```

### With action buttons

`TextInput.Group` enables the user to set a button at the start or end of an input, with some spacing or collapsed.
Example of usage:

```jsx file=../../examples/TextInputGroupExample.tsx

Expand Down
326 changes: 190 additions & 136 deletions packages/components/forms/stories/TextInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React from 'react';
import React, { useState } from 'react';

import { TextInput, TextInputProps } from '../src';
import { SectionHeading } from '@contentful/f36-typography';
import { Flex } from '@contentful/f36-core';
import { SearchIcon } from '@contentful/f36-icons';
import { LockIcon, SearchIcon } from '@contentful/f36-icons';
import { IconButton } from '@contentful/f36-button';

export default {
title: 'Form Elements/TextInput',
Expand Down Expand Up @@ -31,138 +32,191 @@ Basic.args = {
size: 'medium',
};

export const Overview = () => (
<Flex flexDirection="column">
<SectionHeading as="h3" marginBottom="spacingS">
Text Input default
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput
aria-label="Example label for input"
name="Input name 1"
id="input-1"
placeholder="My great input"
defaultValue="defaultValue"
/>
export const Overview = () => {
const [isFirstLocked, setFirstLocked] = useState(true);
const [isSecondLocked, setSecondLocked] = useState(true);

return (
<Flex flexDirection="column">
<SectionHeading as="h3" marginBottom="spacingS">
Text Input default
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput
aria-label="Example label for input"
name="Input name 1"
id="input-1"
placeholder="My great input"
defaultValue="defaultValue"
/>
</Flex>

<SectionHeading as="h3" marginBottom="spacingS">
Text Input default small
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput
aria-label="Example label for input"
name="Input name 2"
id="input-2"
placeholder="My great input"
defaultValue="defaultValue"
size="small"
/>
</Flex>

<SectionHeading as="h3" marginBottom="spacingS">
Text Input disabled
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput
aria-label="Example label for input"
name="Example name 3"
id="input-3"
placeholder="My great input"
isDisabled
/>
</Flex>

<SectionHeading as="h3" marginBottom="spacingS">
Text Input disabled small
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput
aria-label="Example label for input"
name="Example name 4"
id="input-4"
placeholder="My great input"
isDisabled
size="small"
/>
</Flex>

<SectionHeading as="h3" marginBottom="spacingS">
Text Input invalid
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput
aria-label="Example label for input"
name="Example name 5"
id="input-5"
placeholder="My great input"
isInvalid
/>
</Flex>

<SectionHeading as="h3" marginBottom="spacingS">
Text Input invalid
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput
aria-label="Example label for input"
name="Example name 6"
id="input-6"
placeholder="My great input"
isInvalid
size="small"
/>
</Flex>

<SectionHeading as="h3" marginBottom="spacingS">
Text Input with icon as a placeholder
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput
aria-label="Example label for input"
name="Example name 7"
value="Example value"
id="input-7"
placeholder="My great input"
icon={<SearchIcon />}
/>
</Flex>

<SectionHeading as="h3" marginBottom="spacingS">
Text Input with icon as a placeholder small
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput
aria-label="Example label for input"
name="Example name 8"
value="Example value"
id="input-8"
placeholder="My great input"
icon={<SearchIcon />}
size="small"
/>
</Flex>

<SectionHeading as="h3" marginBottom="spacingS">
Text Input Group with action button
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput.Group>
<TextInput
aria-label="Content type name"
id="content-type-name"
value="Example value"
isDisabled={isFirstLocked}
/>
<IconButton
aria-label="Unlock"
variant="secondary"
icon={<LockIcon />}
onClick={() => {
setFirstLocked((value) => !value);
}}
/>
</TextInput.Group>
</Flex>

<SectionHeading as="h3" marginBottom="spacingS">
Text Input Group with action button small
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput.Group>
<TextInput
size="small"
aria-label="Content type name"
id="content-type-name"
value="Example value"
isDisabled={isSecondLocked}
/>
<IconButton
size="small"
aria-label="Unlock"
variant="secondary"
icon={<LockIcon />}
onClick={() => {
setSecondLocked((value) => !value);
}}
/>
</TextInput.Group>
</Flex>

<SectionHeading as="h3" marginBottom="spacingS">
Number input
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput
name="Example name 12"
id="input-12"
type="number"
placeholder="Number input"
size="small"
/>
</Flex>
</Flex>

<SectionHeading as="h3" marginBottom="spacingS">
Text Input default small
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput
aria-label="Example label for input"
name="Input name 2"
id="input-2"
placeholder="My great input"
defaultValue="defaultValue"
size="small"
/>
</Flex>

<SectionHeading as="h3" marginBottom="spacingS">
Text Input disabled
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput
aria-label="Example label for input"
name="Example name 3"
id="input-3"
placeholder="My great input"
isDisabled
/>
</Flex>

<SectionHeading as="h3" marginBottom="spacingS">
Text Input disabled small
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput
aria-label="Example label for input"
name="Example name 4"
id="input-4"
placeholder="My great input"
isDisabled
size="small"
/>
</Flex>

<SectionHeading as="h3" marginBottom="spacingS">
Text Input invalid
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput
aria-label="Example label for input"
name="Example name 5"
id="input-5"
placeholder="My great input"
isInvalid
/>
</Flex>

<SectionHeading as="h3" marginBottom="spacingS">
Text Input invalid
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput
aria-label="Example label for input"
name="Example name 6"
id="input-6"
placeholder="My great input"
isInvalid
size="small"
/>
</Flex>

<SectionHeading as="h3" marginBottom="spacingS">
Text Input with icon as a placeholder
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput
aria-label="Example label for input"
name="Example name 7"
value="Example value"
id="input-7"
placeholder="My great input"
icon={<SearchIcon />}
/>
</Flex>

<SectionHeading as="h3" marginBottom="spacingS">
Text Input with icon as a placeholder small
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput
aria-label="Example label for input"
name="Example name 8"
value="Example value"
id="input-8"
placeholder="My great input"
icon={<SearchIcon />}
size="small"
/>
</Flex>

<SectionHeading as="h3" marginBottom="spacingS">
Number input
</SectionHeading>

<Flex marginBottom="spacingL">
<TextInput
name="Example name 12"
id="input-12"
type="number"
placeholder="Number input"
size="small"
/>
</Flex>
</Flex>
);
);
};
Loading