From 67ea201d0286b4561affcebf92eb3c055838a34c Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 30 May 2019 21:17:13 +0200 Subject: [PATCH] docs: enhance #input docs --- .../components/input-masked/input-masked-events.md | 2 +- .../src/pages/uilib/components/input/Examples.js | 10 +++++----- .../src/pages/uilib/components/input/input-events.md | 4 +++- .../pages/uilib/components/input/input-properties.md | 4 +++- 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/input-masked/input-masked-events.md b/packages/dnb-design-system-portal/src/pages/uilib/components/input-masked/input-masked-events.md index 29bb6b1d46d..424b26597c1 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/components/input-masked/input-masked-events.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/components/input-masked/input-masked-events.md @@ -4,5 +4,5 @@ draft: true | Events | Description | | ----------- | --------------------------------------------------------------------------------------------- | -| `on_change` | _(optional)_ will be called on state changes made by the user. Returns an string `{ value }`. | +| `on_change` | _(optional)_ will be called on value changes made by the user. Returns an string `{ value }`. | | `on_submit` | _(optional)_ will be called on submit button click. | diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/input/Examples.js b/packages/dnb-design-system-portal/src/pages/uilib/components/input/Examples.js index 02a6857feee..5037a7ecd1a 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/components/input/Examples.js +++ b/packages/dnb-design-system-portal/src/pages/uilib/components/input/Examples.js @@ -34,7 +34,7 @@ class Example extends PureComponent { submit_button_title="Search" placeholder="Search text placeholder" on_change={({ value }) => { - console.log(value) + console.log('on_change', value) }} on_submit={({ value }) => { console.log('Submit:', value) @@ -49,7 +49,7 @@ class Example extends PureComponent { size="medium" placeholder="Medium input placeholder" on_change={({ value }) => { - console.log(value) + console.log('on_change', value) }} /> `} @@ -62,7 +62,7 @@ class Example extends PureComponent { align="right" placeholder="Large input with right aligned text" on_change={({ value }) => { - console.log(value) + console.log('on_change', value) }} /> `} @@ -106,7 +106,7 @@ class Example extends PureComponent { placeholder="Placeholder text" description="Additional description" on_change={({ value }) => { - console.log(value) + console.log('on_change', value) }} /> `} @@ -122,7 +122,7 @@ class Example extends PureComponent { status_animation="fade-in" value="This is the value 1234567890" on_change={({ value }) => { - console.log(value) + console.log('on_change', value) }} /> `} diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/input/input-events.md b/packages/dnb-design-system-portal/src/pages/uilib/components/input/input-events.md index c259622fa76..5f1183e6d92 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/components/input/input-events.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/components/input/input-events.md @@ -4,6 +4,8 @@ draft: true | Events | Description | | ----------------- | -------------------------------------------------------------------------------------------- | -| `on_change` | _(optional)_ will be called on state changes made by the user. Returns a string `{ value }`. | +| `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 }`. | | `on_submit` | _(optional)_ will be called on submit button click. | | `on_state_update` | _(optional)_ will be called once the parameter `checked` changes its value. | diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/input/input-properties.md b/packages/dnb-design-system-portal/src/pages/uilib/components/input/input-properties.md index 3eec5d3ae40..0676f6926d9 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/components/input/input-properties.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/components/input/input-properties.md @@ -6,7 +6,8 @@ draft: true | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | _(optional)_ the `id` attribute of the input element | | `value` | _(optional)_ the content value of the input. | -| `label` | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created. input. | +| `align` | _(optional)_ defines the `text-align` of the input. Defaults to `left`. | +| `label` | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created. | | `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`. | | `placeholder` | _(optional)_ the placeholder which shows up once the input value is empty | @@ -19,3 +20,4 @@ draft: true | `size` | _(optional)_ at the moment `large` is the only available variant. Leave blank if you want a standard size input. | | `attributes` | _(optional)_ insert any other attributes. For example `disabled` or any other custom attributes. | | `input_state` | _(optional)_ defines a custom visual state of the input. Use it only if you have to simulate a custom state. Currently are three statuses `virgin` , `focus` and `dirty`. Defaults to `null`. | +| `disabled` | _(optional)_ to disable the input. |