feat(Input): add inner_element property for internal usage (as of now) (

#1466)

packages/dnb-design-system-portal/src/docs/uilib/components/input/properties.md

@@ -35,4 +35,5 @@ showTabs: true
 | `submit_element`                            | _(optional)_ accepts a React element which will show up like the "submit button" would do on `type="search"`.                                                                                                                                                                                                            |
 | `inner_ref`                                 | _(optional)_ by providing a React.ref we can get the internally used input element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.                                                                                                                                                     |
 | `input_element`                             | _(internal)_ by providing a new component we can change the internally used element. Also supports a string only, like `input_element="input"`.                                                                                                                                                                          |
+| `inner_element`                             | _(internal)_ by providing a new component to be rendered inside the "shell" – we can add a freely customizable internal element. Used by the Autocomplete component.                                                                                                                                                     |
 | [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                                                                                                                    |

packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap

@@ -457,6 +457,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
                 icon_position={null}
                 icon_size="icon_size"
                 id="autocomplete-id"
+                inner_element={null}
                 inner_ref={null}
                 input_attributes={null}
                 input_class={null}

packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap

@@ -438,6 +438,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
                   icon_position="left"
                   icon_size={null}
                   id="date-picker-id__input"
+                  inner_element={null}
                   inner_ref={null}
                   input_attributes={null}
                   input_class={null}

packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap

@@ -20,6 +20,7 @@ exports[`InputMasked component have to match type="text" snapshot 1`] = `
   icon_position="left"
   icon_size={null}
   id="input-masked"
+  inner_element={null}
   inner_ref={null}
   input_attributes={null}
   input_class={null}
@@ -85,6 +86,7 @@ exports[`InputMasked component have to match type="text" snapshot 1`] = `
       icon_position="left"
       icon_size={null}
       id="input-masked"
+      inner_element={null}
       inner_ref={null}
       input_attributes={null}
       input_class={null}

packages/dnb-eufemia/src/components/input/Input.js

@@ -100,6 +100,7 @@ export const inputPropTypes = {
   icon_position: PropTypes.oneOf(['left', 'right']),
   inner_ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  inner_element: PropTypes.node,
 
   // Submit button
   submit_element: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
@@ -168,6 +169,7 @@ export default class Input extends React.PureComponent {
     icon_size: null,
     icon_position: 'left',
     readOnly: false,
+    inner_element: null,
 
     // Submit button
     submit_element: null,
@@ -359,6 +361,7 @@ export default class Input extends React.PureComponent {
       submit_button_icon,
       submit_button_status,
       submit_element,
+      inner_element,
       autocomplete,
       readOnly,
       stretch,
@@ -521,6 +524,12 @@ export default class Input extends React.PureComponent {
             <span {...shellParams}>
               {InputElement || <input ref={this._ref} {...inputParams} />}
 
+              {inner_element && (
+                <span className="dnb-input__inner__element dnb-p">
+                  {inner_element}
+                </span>
+              )}
+
               {icon && (
                 <InputIcon
                   className="dnb-input__icon"

packages/dnb-eufemia/src/components/input/__tests__/Input.test.js

@@ -508,6 +508,27 @@ describe('Input with clear button', () => {
       `You can not have a clear button and icon_position="right"`
     )
   })
+
+  it('should render inner_element', () => {
+    const CustomComponent = () => <div>custom element</div>
+    const Comp = mount(
+      <Component inner_element={<CustomComponent />} icon="bell" />
+    )
+
+    expect(
+      Comp.find('.dnb-input')
+        .instance()
+        .querySelector('.dnb-input__input ~ .dnb-input__inner__element')
+        .textContent
+    ).toBe('custom element')
+
+    expect(
+      Comp.find('.dnb-input')
+        .instance()
+        .querySelector('.dnb-input__inner__element ~ .dnb-input__icon')
+        .querySelector('svg')
+    ).toBeTruthy()
+  })
 })
 
 describe('Input scss', () => {

packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap

@@ -21,6 +21,7 @@ exports[`Input component have to match type="search" snapshot 1`] = `
         "icon_position": "'left'",
         "icon_size": "icon_size",
         "id": "id",
+        "inner_element": "inner_element",
         "inner_ref": [Function],
         "input_attributes": "input_attributes",
         "input_class": "input_class",
@@ -108,6 +109,7 @@ exports[`Input component have to match type="search" snapshot 1`] = `
   icon_position="left"
   icon_size={null}
   id="input"
+  inner_element={null}
   inner_ref={null}
   input_attributes={null}
   input_class={null}
@@ -227,6 +229,7 @@ exports[`Input component have to match type="search" snapshot 1`] = `
                   "icon_position": "'left'",
                   "icon_size": "icon_size",
                   "id": "id",
+                  "inner_element": "inner_element",
                   "inner_ref": [Function],
                   "input_attributes": "input_attributes",
                   "input_class": "input_class",
@@ -521,6 +524,7 @@ exports[`Input component have to match type="text" snapshot 1`] = `
         "icon_position": "'left'",
         "icon_size": "icon_size",
         "id": "id",
+        "inner_element": "inner_element",
         "inner_ref": [Function],
         "input_attributes": "input_attributes",
         "input_class": "input_class",
@@ -608,6 +612,7 @@ exports[`Input component have to match type="text" snapshot 1`] = `
   icon_position="left"
   icon_size={null}
   id="input"
+  inner_element={null}
   inner_ref={null}
   input_attributes={null}
   input_class={null}

packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/InputPassword.test.js.snap

@@ -28,6 +28,7 @@ exports[`InputPassword component have to match snapshot 1`] = `
   icon_position="left"
   icon_size={null}
   id="input"
+  inner_element={null}
   inner_ref={null}
   input_attributes={null}
   input_class={null}
@@ -94,6 +95,7 @@ exports[`InputPassword component have to match snapshot 1`] = `
     icon_position="left"
     icon_size={null}
     id="input"
+    inner_element={null}
     inner_ref={
       Object {
         "current": <input

packages/dnb-eufemia/src/components/skeleton/__tests__/__snapshots__/Skeleton.test.js.snap

@@ -94,6 +94,7 @@ exports[`Skeleton component have to match snapshot 1`] = `
             icon_position="left"
             icon_size={null}
             id="input"
+            inner_element={null}
             inner_ref={null}
             input_attributes={null}
             input_class={null}