fix(types): fix #input align prop

dnbexperience · Feb 8, 2021 · 3eda80c · 3eda80c
1 parent 5c22a07
commit 3eda80c
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 8 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/input/properties.md
@@ -7,7 +7,7 @@ showTabs: true
 | Properties                                  | Description                                                                                                                                                                                                                                                                                                               |
 | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `value`                                     | _(optional)_ the content value of the input.                                                                                                                                                                                                                                                                              |
-| `align`                                     | _(optional)_ defines the `text-align` of the input. Defaults to `left`.                                                                                                                                                                                                                                                   |
+| `align`                                     | _(optional)_ defines the text alignment of the input. Can be `left`, `right` or `center`. 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`                                                                                                                                                                                                              |
 | `label_sr_only`                             | _(optional)_ use `true` to make the label only readable by screen readers.                                                                                                                                                                                                                                                |

diff --git a/packages/dnb-ui-lib/src/components/input-masked/InputMasked.js b/packages/dnb-ui-lib/src/components/input-masked/InputMasked.js
@@ -42,6 +42,7 @@ export default class InputMasked extends React.PureComponent {
       PropTypes.bool
     ]),
     placeholder_char: PropTypes.string,
+    align: PropTypes.oneOf(['left', 'center', 'right']),
 
     on_change: PropTypes.func,
     on_submit: PropTypes.func,
@@ -60,6 +61,7 @@ export default class InputMasked extends React.PureComponent {
     pipe: null,
     keep_char_positions: false,
     placeholder_char: '_',
+    align: null,
 
     on_change: null,
     on_submit: null,

diff --git a/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`InputMasked component have to match type="text" snapshot 1`] = `
 <InputMasked
+  align="'left'"
   currency_mask="currency_mask"
   disabled={false}
   id="input-masked"
@@ -26,7 +27,7 @@ exports[`InputMasked component have to match type="text" snapshot 1`] = `
   value="test"
 >
   <Input
-    align={null}
+    align="'left'"
     autocomplete="off"
     class={null}
     className="dnb-input-masked"
@@ -75,7 +76,7 @@ exports[`InputMasked component have to match type="text" snapshot 1`] = `
     value="test"
   >
     <span
-      className="dnb-input dnb-input--text dnb-form-component dnb-input-masked"
+      className="dnb-input dnb-input--text dnb-form-component dnb-input-masked dnb-input__align--'left'"
     >
       <span
         className="dnb-input__inner"

diff --git a/packages/dnb-ui-lib/src/components/input/Input.js b/packages/dnb-ui-lib/src/components/input/Input.js
@@ -76,7 +76,7 @@ export default class Input extends React.PureComponent {
       PropTypes.func,
       PropTypes.node
     ]),
-    align: PropTypes.string,
+    align: PropTypes.oneOf(['left', 'center', 'right']),
     selectall: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     stretch: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),

diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -6,7 +6,7 @@ exports[`Input component have to match type="search" snapshot 1`] = `
     Object {
       "displayName": "Input",
       "props": Object {
-        "align": "align",
+        "align": "'left'",
         "autocomplete": "autocomplete",
         "children": "children",
         "class": "class",
@@ -165,7 +165,7 @@ exports[`Input component have to match type="search" snapshot 1`] = `
               Object {
                 "displayName": "Input",
                 "props": Object {
-                  "align": "align",
+                  "align": "'left'",
                   "autocomplete": "autocomplete",
                   "children": "children",
                   "class": "class",
@@ -262,7 +262,7 @@ exports[`Input component have to match type="search" snapshot 1`] = `
                 Object {
                   "displayName": "Input",
                   "props": Object {
-                    "align": "align",
+                    "align": "'left'",
                     "autocomplete": "autocomplete",
                     "children": "children",
                     "class": "class",
@@ -505,7 +505,7 @@ exports[`Input component have to match type="text" snapshot 1`] = `
     Object {
       "displayName": "Input",
       "props": Object {
-        "align": "align",
+        "align": "'left'",
         "autocomplete": "autocomplete",
         "children": "children",
         "class": "class",