@wix/design-system
Version:
@wix/design-system
108 lines (90 loc) • 3.57 kB
Markdown
## Feature Examples
### Max length
- description: <p>Define a max number of characters that users can write in the title with <code>maxLength</code> prop.</p><p></p><p><code>maxLength</code> includes spaces and has no default value.</p>
- example:
```jsx
<EditableTitle initialValue="I can only write 24 char" maxLength={24} />;
```
### Auto focus
- description: <p>Make the component ready to type in as soon as it is rendered (on mount) with <code>autoFocus</code> prop.</p>
- example:
```jsx
<EditableTitle initialValue="Start writing now" autoFocus />;
```
### Value
- description: <p>Control title text value with these props:</p><li><code>defaultValue</code> - use it to display a placeholder text. It will become a title if users do not change it.</li><li><code>initialValue</code> - use it to suggest a fitting opening title for users. They can delete and change it themselves.</li><li><code>value</code> - use it to specify the current value of the title.</li><p></p><p>Note that when users delete the <code>initialValue</code>, <code>defaultValue</code> is still shown.</p>
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
<EditableTitle defaultValue="Default Value" />
<EditableTitle initialValue="Initial Value" />
<EditableTitle value="value" />
</StorybookComponents.Stack>;
```
## Common Use Case Examples
### Giving a name for a newly created item
- description: <p>Use Editable title in the <code><Page.Header/></code> when users create a new item with no default name (e.g., a product for the Store).</p><p></p><p>Editable title can work in sync with Form components (e.g., writing 'Green Shoes' in the 'Name' field will automatically change the page title, too).</p>
- example:
```jsx
() => {
const [productName, setProductName] = React.useState('');
return (
<Page height="60vh">
<Page.Header
title=<EditableTitle
defaultValue="Untitled Product"
value={productName}
/>
actionsBar={
<Box gap="SP2">
<Button skin="inverted">Cancel</Button>
<Button>Save</Button>
</Box>
}
breadcrumbs={
<Breadcrumbs
activeId="2"
items={[
{ id: '1', value: 'Products' },
{ id: '2', value: 'Untitled Product' },
]}
/>
}
/>
<Page.Content>
<Layout>
<Cell span={8}>
<Card>
<Card.Header title="Product info" />
<Card.Divider />
<Card.Content>
<Layout>
<Cell span={6}>
<FormField label="Name">
<Input
value={productName}
onChange={(e) => setProductName(e.target.value)}
placeholder="Add a product name"
/>
</FormField>
</Cell>
<Cell span={6}>
<FormField label="Price">
<Input prefix={<Input.Affix>$</Input.Affix>} />
</FormField>
</Cell>
<Cell span={12}>
<FormField label="Description">
<RichTextInputArea minHeight="114px" maxHeight="114px" />
</FormField>
</Cell>
</Layout>
</Card.Content>
</Card>
</Cell>
</Layout>
</Page.Content>
</Page>
);
};
```