feat(MultiMask): Add stretch property

dnbexperience · Nov 17, 2023 · 4d2f9fd · 4d2f9fd
1 parent 8e1359e
commit 4d2f9fd
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 4 deletions.
diff --git a/.../dnb-design-system-portal/src/docs/uilib/components/input-masked/properties.mdx b/.../dnb-design-system-portal/src/docs/uilib/components/input-masked/properties.mdx
@@ -111,6 +111,7 @@ Read more about other addons [on the open-source project](https://github.com/tex
 | `inputs`         | array of [MultiInputMaskInput](/uilib/components/input-masked/properties/#multiinputmask-inputs-properties) that defines the inputs in the component. The id's defined here is used to map input value to correct property in `values` parameters used in `onChange` |
 | `values`         | _(optional)_ values used for the inputs in the component. Expects an object with keys matching the id's defined in `inputs`                                                                                                                                          |
 | `delimiter`      | _(optional)_ character that separates the input inputs.                                                                                                                                                                                                              |
+| `stretch`        | _(optional)_ use `true` in order to stretch the input to the available space. Defaults to false.                                                                                                                                                                     |
 | `status`         | _(optional)_ text with a status message. The style defaults to an error message. You can use true to only get the status color, without a message.`.                                                                                                                 |
 | `statusState`    | _(optional)_ defines the state of the status. Currently, there are two statuses [error, info]. Defaults to error.                                                                                                                                                    |
 | `suffix`         | _(optional)_ Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.                                                                                                    |

diff --git a/packages/dnb-eufemia/src/components/input-masked/MultiInputMask.tsx b/packages/dnb-eufemia/src/components/input-masked/MultiInputMask.tsx
@@ -67,6 +67,10 @@ export type MultiInputMaskProps<T extends string> = {
    * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   statusState?: FormStatusState
+  /**
+   * Set it to `true` in order to stretch the input to the available space. Defaults to false.
+   */
+  stretch?: boolean
   /**
    * Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.
    */
@@ -88,6 +92,7 @@ function MultiInputMask<T extends string>({
   statusState,
   values: defaultValues,
   className,
+  stretch,
   suffix,
   ...props
 }: MultiInputMaskProps<T>) {
@@ -138,6 +143,7 @@ function MultiInputMask<T extends string>({
         status={status}
         status_state={statusState}
         suffix={suffix}
+        stretch={stretch}
         input_element={inputs.map((input, index) => (
           <Fragment key={input.id}>
             <MultiInputMaskInput

diff --git a/...dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.tsx.snap b/...dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.tsx.snap
@@ -1288,7 +1288,7 @@ html[data-visual-test] .dnb-input__input {
   gap: 1rem;
 }
 
-.dnb-multi-input-mask__input {
+.dnb-multi-input-mask__input.dnb-input__input {
   display: inline-block;
   width: auto;
   margin: 0;
@@ -1302,10 +1302,10 @@ html[data-visual-test] .dnb-input__input {
   overflow: visible;
   white-space: nowrap;
 }
-.dnb-multi-input-mask__input:first-of-type {
+.dnb-multi-input-mask__input.dnb-input__input:first-of-type {
   padding-left: 0.5rem;
 }
-.dnb-multi-input-mask__input:last-of-type {
+.dnb-multi-input-mask__input.dnb-input__input:last-of-type {
   padding-right: 0.5rem;
 }
 

diff --git a/packages/dnb-eufemia/src/components/input-masked/style/dnb-input-masked.scss b/packages/dnb-eufemia/src/components/input-masked/style/dnb-input-masked.scss
@@ -24,7 +24,7 @@
   }
 }
 
-.dnb-multi-input-mask__input {
+.dnb-multi-input-mask__input.dnb-input__input {
   display: inline-block;
   width: auto;
 

diff --git a/packages/dnb-eufemia/src/components/input/Input.d.ts b/packages/dnb-eufemia/src/components/input/Input.d.ts
@@ -186,6 +186,9 @@ export interface InputProps
   on_submit_focus?: (...args: any[]) => any;
   on_submit_blur?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;
+  /**
+   * Will be called on a clear button click. Returns `{ value, previousValue, event }`.
+   */
   on_clear?: (...args: any[]) => any;
 }
 export default class Input extends React.Component<InputProps, any> {