docs: enhance #input docs

dnbexperience · May 30, 2019 · 67ea201 · 67ea201
1 parent b4db3e0
commit 67ea201
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 8 deletions.
diff --git a/...gn-system-portal/src/pages/uilib/components/input-masked/input-masked-events.md b/...gn-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
@@ -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
@@ -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/...s/dnb-design-system-portal/src/pages/uilib/components/input/input-properties.md b/...s/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.                                                                                                                                                            |