fix(Autocomplete): ensure value is not visible behind the trigger but…

…ton (#1543)
dnbexperience · Aug 31, 2022 · de65acb · de65acb
1 parent 59ec706
commit de65acb
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 10 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.js
@@ -173,6 +173,7 @@ export const AutocompleteToggleExample = () => (
         /* jsx */ `
 <Autocomplete
   label="Label:"
+  value={10}
   show_submit_button={true}
   on_change={({ data }) => {
     console.log('on_change', data)

diff --git a/...dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap b/...dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
@@ -2907,12 +2907,12 @@ legend.dnb-form-label {
     z-index: 3;
     cursor: text; }
   @media screen and (min-width: 40em) {
-    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__placeholder,
-    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input {
+    .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__placeholder,
+    .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__input {
       padding-right: 0 !important; } }
   @media screen and (max-width: 40em) {
-    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__placeholder,
-    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input {
+    .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__placeholder,
+    .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__input {
       padding-right: 2.5rem !important; } }
   .dnb-autocomplete .dnb-input__inner__element.dnb-p {
     white-space: nowrap;

diff --git a/...plete-screenshot-have-to-match-autocomplete-with-drawer-button-1-1887c.snap.png b/...plete-screenshot-have-to-match-autocomplete-with-drawer-button-1-1887c.snap.png
diff --git a/...t-test-js-autocomplete-screenshot-have-to-match-disabled-state-1-bd401.snap.png b/...t-test-js-autocomplete-screenshot-have-to-match-disabled-state-1-bd401.snap.png
diff --git a/packages/dnb-eufemia/src/components/autocomplete/style/_autocomplete.scss b/packages/dnb-eufemia/src/components/autocomplete/style/_autocomplete.scss
@@ -134,8 +134,8 @@
       cursor: text;
     }
 
-    &--has-submit-element .dnb-input__placeholder,
-    &--has-submit-element .dnb-input__input {
+    &--has-inner-element .dnb-input__placeholder,
+    &--has-inner-element .dnb-input__input {
       @include allAbove(small) {
         // same width of submit button
         padding-right: 0 !important; // use important so we avoid to have all sizes in addition

diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -1370,10 +1370,10 @@ exports[`Button scss have to match default theme snapshot 1`] = `
     .dnb-button--signal[disabled] {
       color: var(--color-black-20);
       background-color: var(--color-accent-yellow-30); }
-  .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text), .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]) {
+  .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]) {
     background-color: transparent;
     box-shadow: none; }
-    .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)::after, .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled])::after {
+    .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled])::after {
       content: '';
       position: absolute;
       top: 0;

diff --git a/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss b/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss
@@ -329,11 +329,11 @@
   }
 
   // input-button
-  // Because we can not anymore have a square, we have to trick that part
-  &--input-button#{&}--secondary:not(&--has-text),
   &--input-button#{&}--secondary:not(&--has-text):not([disabled]) {
+    // Because we can not anymore have a square, we have to trick that part
     background-color: transparent;
     box-shadow: none;
+
     &::after {
       content: '';
       position: absolute;

diff --git a/packages/dnb-eufemia/src/components/input/Input.js b/packages/dnb-eufemia/src/components/input/Input.js
@@ -406,6 +406,7 @@ export default class Input extends React.PureComponent {
         `dnb-input--${type}`, //type_modifier
         size && !sizeIsNumber && `dnb-input--${size}`,
         hasSubmitButton && 'dnb-input--has-submit-element',
+        inner_element && 'dnb-input--has-inner-element',
         isTrue(clear) && 'dnb-input--has-clear-button',
         align && `dnb-input__align--${align}`,
         status && `dnb-input__status--${status_state}`,