-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: #textarea as a component (#189)
* add first reused styled version of textarea * add first reused styled version of textarea * make #textarea placeholder and label positioning work * make #textarea placeholder looking good and give them a line-clamp * enhance #textarea tests and examples + screenshot tests * add align prop to #textara + correct border radios * add change log info about the new #textarea + #radio and #checkbox * add on_change event to #textarea demo examples * change the order of #textarea in the components listing * enhance #textarea docs
- Loading branch information
1 parent
67ea201
commit 5d352ee
Showing
44 changed files
with
1,769 additions
and
184 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
packages/dnb-design-system-portal/src/pages/uilib/components/textarea.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| --- | ||
| title: 'Textarea' | ||
| draft: false | ||
| status: null | ||
| order: 17 | ||
| --- | ||
|
|
||
| import Tabs from 'Tags/Tabs' | ||
|
|
||
| import TextareaInfo from 'Pages/uilib/components/textarea/textarea-info' | ||
| import TextareaProperties from 'Pages/uilib/components/textarea/textarea-properties' | ||
| import TextareaEvents from 'Pages/uilib/components/textarea/textarea-events' | ||
|
|
||
| # Textarea | ||
|
|
||
| <Tabs> | ||
| <Tabs.Content> | ||
| <TextareaInfo /> | ||
| </Tabs.Content> | ||
| <Tabs.Content> | ||
| <TextareaProperties /> | ||
| </Tabs.Content> | ||
| <Tabs.Content> | ||
| <TextareaEvents /> | ||
| </Tabs.Content> | ||
| </Tabs> |
123 changes: 123 additions & 0 deletions
123
packages/dnb-design-system-portal/src/pages/uilib/components/textarea/Examples.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| /** | ||
| * UI lib Component Example | ||
| * | ||
| */ | ||
|
|
||
| import React, { PureComponent, Fragment } from 'react' | ||
| import ComponentBox from '../../../../shared/tags/ComponentBox' | ||
| import styled from '@emotion/styled' | ||
|
|
||
| class Example extends PureComponent { | ||
| render() { | ||
| return ( | ||
| <Fragment> | ||
| <ComponentBox | ||
| caption="Placeholder text" | ||
| data-dnb-test="textarea-default" | ||
| > | ||
| {/* @jsx */ ` | ||
| <Textarea | ||
| label="Default:" | ||
| rows="2" | ||
| cols="20" | ||
| value="Textarea value\\nNewline" | ||
| on_change={({ value }) => { console.log('on_change', value) }} | ||
| on_focus={() => { console.log('on_focus') }} | ||
| on_blur={() => { console.log('on_blur') }} | ||
| /> | ||
| `} | ||
| </ComponentBox> | ||
| <ComponentBox caption="Placeholder text"> | ||
| {/* @jsx */ ` | ||
| <FormLabel for_id="text-textarea-1" text="Placeholder:" /> | ||
| <Textarea | ||
| id="text-textarea-1" | ||
| placeholder="Placeholder text" | ||
| /> | ||
| `} | ||
| </ComponentBox> | ||
| <ComponentBox caption="Vertical placed label, using `.dnb-form-group`"> | ||
| {/* @jsx */ ` | ||
| <Textarea | ||
| label="Vertical:" | ||
| rows="3" | ||
| cols="33" | ||
| value="Textarea value with more than 3 lines\\nNewline\\nNewline\\nNewline\\nNewline" | ||
| /> | ||
| `} | ||
| </ComponentBox> | ||
| <ComponentBox caption="Horizontal placed label, using `.dnb-form-group`"> | ||
| {/* @jsx */ ` | ||
| <Textarea | ||
| label="Horizontal:" | ||
| rows="3" | ||
| value="Nec litora inceptos vestibulum id interdum donec gravida." | ||
| /> | ||
| `} | ||
| </ComponentBox> | ||
| <ComponentBox caption="Max length usage"> | ||
| {/* @jsx */ ` | ||
| <Textarea | ||
| label="Length limit:" | ||
| rows="3" | ||
| cols="33" | ||
| maxLength="20" | ||
| required | ||
| value="Nec litora inceptos vestibulum id interdum donec gravida." | ||
| /> | ||
| `} | ||
| </ComponentBox> | ||
| <ComponentBox | ||
| caption="With FormStatus failure message" | ||
| data-dnb-test="textarea-error" | ||
| > | ||
| {/* @jsx */ ` | ||
| <Textarea | ||
| label="Error Message:" | ||
| cols="33" | ||
| value="Nec litora inceptos vestibulum id interdum donec gravida." | ||
| status="Message to the user" | ||
| /> | ||
| `} | ||
| </ComponentBox> | ||
| <ComponentBox caption="Show failure status"> | ||
| {/* @jsx */ ` | ||
| <Textarea | ||
| label="Show status:" | ||
| status="error" | ||
| value="Shows status with border only" | ||
| /> | ||
| `} | ||
| </ComponentBox> | ||
| <ComponentBox caption="Disabled textarea"> | ||
| {/* @jsx */ ` | ||
| <Textarea | ||
| label="Disabled:" | ||
| disabled | ||
| value="Nec litora inceptos vestibulum id interdum donec gravida." | ||
| /> | ||
| `} | ||
| </ComponentBox> | ||
| </Fragment> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| const Wrapper = styled.div` | ||
| display: block; | ||
| width: 100%; | ||
| ${'' /* .dnb-textarea textarea { | ||
| min-width: 10rem; | ||
| } | ||
| .dnb-form-label + .dnb-textarea { | ||
| margin-top: 0; | ||
| } */} | ||
| ` | ||
|
|
||
| export { Example } | ||
| export default () => ( | ||
| <Wrapper> | ||
| <Example /> | ||
| </Wrapper> | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 9 additions & 0 deletions
9
...dnb-design-system-portal/src/pages/uilib/components/textarea/textarea-events.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| --- | ||
| draft: true | ||
| --- | ||
|
|
||
| | Events | Description | | ||
| | ----------- | -------------------------------------------------------------------------------------------- | | ||
| | `on_change` | _(optional)_ will be called on value changes made by the user. Returns a string `{ value }`. | | ||
| | `on_focus` | _(optional)_ will be called on focus set by the user. Returns a string `{ value }`. | | ||
| | `on_blur` | _(optional)_ will be called on blur set by the user. Returns a string `{ value }`. | |
18 changes: 18 additions & 0 deletions
18
...s/dnb-design-system-portal/src/pages/uilib/components/textarea/textarea-info.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| --- | ||
| draft: true | ||
| --- | ||
|
|
||
| import Examples from 'Pages/uilib/components/textarea/Examples' | ||
| import TextareaAsElement from 'Pages/uilib/components/textarea/textarea-element' | ||
|
|
||
| ## Description | ||
|
|
||
| The `Textarea` component has to be used as a multi-line text input control with an unlimited number of characters possible. | ||
|
|
||
| ## Demos | ||
|
|
||
| <Examples /> | ||
|
|
||
| ### Textarea as HTML element only | ||
|
|
||
| <TextareaAsElement /> |
16 changes: 16 additions & 0 deletions
16
...design-system-portal/src/pages/uilib/components/textarea/textarea-properties.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| --- | ||
| draft: true | ||
| --- | ||
|
|
||
| | Properties | Description | | ||
| | ---------------- | -------------------------------------------------------------------------------------------------------------- | | ||
| | `id` | _(optional)_ the `id` attribute of the textarea element | | ||
| | `value` | _(optional)_ the content value of the textarea. | | ||
| | `align` | _(optional)_ defines the `text-align` of the textarea. Defaults to `left`. | | ||
| | `placeholder` | _(optional)_ the placeholder which shows up once the textarea value is empty | | ||
| | `label` | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created. textarea. | | ||
| | `status` | _(optional)_ text with a status message. The style defaults to an error message. | | ||
| | `status_state` | _(optional)_ defines the state of the status. Currently are two statuses `[error, info]`. Defaults to `error`. | | ||
| | `textarea_state` | _(optional)_ to control the visual focus state as a prop, like `focus` or `blur`. | | ||
| | `textarea_class` | _(optional)_ in case we have to set a custom textarea class. | | ||
| | `disabled` | _(optional)_ to disable the textarea. | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| /** | ||
| * ATTENTION: This file is auto generated by using "prepareTemplates". | ||
| * Do not change the content! | ||
| * | ||
| */ | ||
|
|
||
| /** | ||
| * Library Index textarea to autogenerate all the components and patterns | ||
| * Used by "prepareTextareas" | ||
| */ | ||
|
|
||
| import Textarea from './textarea/Textarea' | ||
| export * from './textarea/Textarea' | ||
| export default Textarea |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.