fix(Expiry): correct class placement and CSS specificity issue (#2915)

This PR is based on #2914
dnbexperience · Nov 17, 2023 · ae1154d · ae1154d
1 parent 706beb3
commit ae1154d
Show file tree

Hide file tree

Showing 13 changed files with 12 additions and 6 deletions.
diff --git a/...n-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/demos.mdx b/...n-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/demos.mdx
@@ -9,7 +9,11 @@ import * as Examples from './Examples'
 
 The locale is what determines the components `placeholder` format .e.g. `mm/åå` in norwegian, `mm/yy` in english.
 
-<ChangeLocale bottom label="Locale used in the demos:" showUS={true} />
+<ChangeLocale
+  bottom
+  label="Locale used in the demos:"
+  listUSLocale={true}
+/>
 
 English (US) is not included in Eufemia by default. You can include it like:
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/Expiry.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/Expiry.tsx
@@ -52,7 +52,7 @@ function Expiry(props: ExpiryProps) {
 
   return (
     <FieldBlock
-      className={classnames(className)}
+      className={classnames('dnb-forms-field-expiry', className)}
       labelSecondary={labelSecondary}
       labelDescription={labelDescription}
       info={info}
@@ -61,8 +61,8 @@ function Expiry(props: ExpiryProps) {
       {...pickSpacingProps(props)}
     >
       <MultiInputMask
+        stretch
         id={`${idRef}__input`}
-        className="dnb-forms-field-expiry"
         label={label}
         labelDirection={layout}
         values={expiry}

diff --git a/...e_snapshots__/anchor-for-sbanken-have-to-match-expiry-with-help-button.snap.png b/...e_snapshots__/anchor-for-sbanken-have-to-match-expiry-with-help-button.snap.png
diff --git a/...__image_snapshots__/anchor-for-sbanken-have-to-match-the-disbled-state.snap.png b/...__image_snapshots__/anchor-for-sbanken-have-to-match-the-disbled-state.snap.png
diff --git a/..._/__image_snapshots__/anchor-for-sbanken-have-to-match-the-empty-state.snap.png b/..._/__image_snapshots__/anchor-for-sbanken-have-to-match-the-empty-state.snap.png
diff --git a/..._/__image_snapshots__/anchor-for-sbanken-have-to-match-the-error-state.snap.png b/..._/__image_snapshots__/anchor-for-sbanken-have-to-match-the-error-state.snap.png
diff --git a/...snapshots__/anchor-for-sbanken-have-to-match-the-input-filled-in-value.snap.png b/...snapshots__/anchor-for-sbanken-have-to-match-the-input-filled-in-value.snap.png
diff --git a/..._image_snapshots__/anchor-for-ui-have-to-match-expiry-with-help-button.snap.png b/..._image_snapshots__/anchor-for-ui-have-to-match-expiry-with-help-button.snap.png
diff --git a/...ts__/__image_snapshots__/anchor-for-ui-have-to-match-the-disbled-state.snap.png b/...ts__/__image_snapshots__/anchor-for-ui-have-to-match-the-disbled-state.snap.png
diff --git a/...ests__/__image_snapshots__/anchor-for-ui-have-to-match-the-empty-state.snap.png b/...ests__/__image_snapshots__/anchor-for-ui-have-to-match-the-empty-state.snap.png
diff --git a/...ests__/__image_snapshots__/anchor-for-ui-have-to-match-the-error-state.snap.png b/...ests__/__image_snapshots__/anchor-for-ui-have-to-match-the-error-state.snap.png
diff --git a/...mage_snapshots__/anchor-for-ui-have-to-match-the-input-filled-in-value.snap.png b/...mage_snapshots__/anchor-for-ui-have-to-match-the-input-filled-in-value.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/style/dnb-expiry.scss b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/style/dnb-expiry.scss
@@ -1,9 +1,11 @@
 @import '../../style/field-sizes.scss';
 
 .dnb-forms-field-expiry {
-  width: var(--forms-field-width--small);
+  .dnb-multi-input-mask {
+    width: var(--forms-field-width--small);
 
-  .dnb-input__shell {
-    justify-content: center;
+    .dnb-input__shell {
+      justify-content: center;
+    }
   }
 }