feat: enhance #input support for stretch together with a horizontal…

… `label` + new prop `label_direction="vertical"`
dnbexperience · Jul 4, 2019 · 1e742fc · 1e742fc
1 parent daeef10
commit 1e742fc
Show file tree

Hide file tree

Showing 23 changed files with 1,097 additions and 920 deletions.
diff --git a/...ystem-portal/src/pages/uilib/components/input-masked/input-masked-properties.md b/...ystem-portal/src/pages/uilib/components/input-masked/input-masked-properties.md
@@ -2,7 +2,7 @@
 draft: true
 ---
 
-For more details, se the [Input](/uilib/components/input) component.
+For more details and **properties**, se the [Input](/uilib/components/input) component.
 
 | Properties  | Description                                                                                                                                                                                                                     |
 | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

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
@@ -116,6 +116,16 @@ class Example extends PureComponent {
 />
           `}
         </ComponentBox>
+        <ComponentBox caption="Stretched `Input` with `FormRow` and a long label">
+          {/* @jsx */ `
+<FormRow
+  size={true}
+  label="Long label labwl Adipiscing mauris dis proin nec:"
+>
+  <Input value="Placeholder ..." stretch />
+</FormRow>
+          `}
+        </ComponentBox>
         <ComponentBox caption="Numbers are ligned by using Proportional Lining">
           {/* @jsx */ `
 <Input
@@ -143,6 +153,7 @@ class Example extends PureComponent {
   <Input
     label="Label:"
     value="Input ..."
+    selectall="true"
     on_submit={event => {
       console.log('on_submit')
     }}

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
@@ -7,6 +7,7 @@ draft: true
 | `value`               | _(optional)_ the content value of the 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.                                                                                                 |
+| `label_direction`     | _(optional)_ use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`                                                                                  |
 | `status`              | _(optional)_ text with a status message. The style defaults to an error message.                                                                                                              |
 | `status_state`        | _(optional)_ defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.                                                                          |
 | `placeholder`         | _(optional)_ the placeholder which shows up once the input value is empty                                                                                                                     |