@sb1/ffe-datepicker - npm Package Compare versions

Comparing version 100.5.1 to 100.5.2

css/datepicker.css

@@ -1,8 +0,7 @@
-.ffe-input-group > .ffe-form-label {
-  color: var(--ffe-color-foreground-default) !important;
-}
 .ffe-datepicker {
   position: relative;
+  height: 2.8125rem;
   display: grid;
   grid-template-columns: 1fr auto;
+  background-color: var(--ffe-color-surface-primary-default);
   width: -webkit-fit-content;
@@ -72,2 +71,11 @@ width: -moz-fit-content;
 .ffe-datepicker .ffe-dateinput {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 2.7495rem;
+  border: none;
+  padding: var(--ffe-spacing-2xs) var(--ffe-spacing-sm);
   position: relative;
@@ -82,11 +90,2 @@ grid-column: 1 / 3;
 }
-.ffe-datepicker .ffe-dateinput.ffe-input-field {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  border: none;
-}
 .ffe-datepicker .ffe-dateinput__field {
@@ -128,12 +127,6 @@ padding-block: var(--ffe-spacing-2xs);
 .ffe-datepicker--invalid:focus-within {
-  outline: none;
   -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
           box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
+  border: var(--ffe-g-border-width) solid var(--ffe-color-border-feedback-critical);
 }
-.ffe-datepicker--invalid .ffe-input-field:focus-within {
-  border-color: var(--ffe-color-border-feedback-critical);
-  -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
-          box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
-  background-color: var(--ffe-color-surface-primary-default);
-}
 .ffe-datepicker--invalid .ffe-dateinput,
@@ -143,5 +136,2 @@ .ffe-datepicker--invalid .ffe-dateinput__field {
 }
-.ffe-datepicker--invalid .ffe-input-field:has(~ .ffe-datepicker__button:hover) {
-  background-color: var(--ffe-color-surface-primary-default);
-}
 .ffe-calendar {
@@ -148,0 +138,0 @@ border: var(--ffe-g-border-width) solid var(--ffe-color-border-primary-default);

less/dateinput.less

@@ -1,10 +0,7 @@
-.ffe-input-group {
-    > .ffe-form-label {
-        color: var(--ffe-color-foreground-default) !important;
-    }
-}
 .ffe-datepicker {
     position: relative;
+    height: 2.8125rem; //Etterlikner ffe-input-field
     display: grid;
     grid-template-columns: 1fr auto;
+    background-color: var(--ffe-color-surface-primary-default);
     width: fit-content;
@@ -77,2 +74,7 @@ border: var(--ffe-g-border-width) solid
     .ffe-dateinput {
+        display: flex;
+        align-items: center;
+        height: 2.7495rem; //Litt mindre enn parent for å unngå hopping ved åpning av kalenderen
+        border: none;
+        padding: var(--ffe-spacing-2xs) var(--ffe-spacing-sm);
         position: relative;
@@ -88,8 +90,2 @@ grid-column: 1 e('/') 3;
 
-        &.ffe-input-field {
-            display: flex;
-            align-items: center;
-            border: none;
-        }
-
         &__field {
@@ -140,16 +136,8 @@ padding-block: var(--ffe-spacing-2xs);
         &:focus-within {
-            outline: none;
             box-shadow: var(--ffe-g-border-focus-box-shadow)
                 var(--ffe-color-border-feedback-critical);
+            border: var(--ffe-g-border-width) solid
+                var(--ffe-color-border-feedback-critical);
         }
 
-        .ffe-input-field {
-            &:focus-within {
-                border-color: var(--ffe-color-border-feedback-critical);
-                box-shadow: var(--ffe-g-border-focus-box-shadow)
-                    var(--ffe-color-border-feedback-critical);
-                background-color: var(--ffe-color-surface-primary-default);
-            }
-        }
-
         .ffe-dateinput,
@@ -159,7 +147,3 @@ .ffe-dateinput__field {
         }
-
-        .ffe-input-field:has(~ .ffe-datepicker__button:hover) {
-            background-color: var(--ffe-color-surface-primary-default);
-        }
     }
 }

package.json

 {
     "name": "@sb1/ffe-datepicker",
-    "version": "100.5.1",
+    "version": "100.5.2",
     "description": "FFE Datepicker",
@@ -23,7 +23,7 @@ "license": "MIT",
     "dependencies": {
-        "@sb1/ffe-core": "^100.5.1",
-        "@sb1/ffe-form": "^100.5.1"
+        "@sb1/ffe-core": "^100.5.2",
+        "@sb1/ffe-form": "^100.5.2"
     },
     "devDependencies": {
-        "@sb1/ffe-buildtool": "^100.5.1"
+        "@sb1/ffe-buildtool": "^100.5.2"
     },
@@ -33,3 +33,3 @@ "publishConfig": {
     },
-    "gitHead": "2716ba131556bce3e3c4c250717225daad0cf8bf"
+    "gitHead": "a5f4873cd292e0c01f7c1e11e6a74b77140333bf"
 }

No alert changes

Worsened metrics

Total package byte prevSize

30290

-2.43%

Lines of code

342

-2.84%

Dependency changes

• Updated

  @sb1/ffe-core@^100.5.2

• Updated

  @sb1/ffe-form@^100.5.2