feat: add state animation to #radio button

dnbexperience · Jun 5, 2019 · db06946 · db06946
1 parent 7a8dfd5
commit db06946
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 40 deletions.
diff --git a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -111,6 +111,14 @@ exports[`Checkbox scss have to match default theme snapshot 1`] = `
  * Utilities
  */
 .dnb-checkbox {
+  /*
+    * When checkbox is OFF
+    * aka when the checkbox is not :checked
+    */
+  /*
+    * When checkbox is ON
+    * aka when the checkbox is :checked
+    */
   /*
     * When checkboxed OFF
     * aka when the checkbox is not :checked
@@ -143,6 +151,16 @@ exports[`Checkbox scss have to match default theme snapshot 1`] = `
     * On error state
     *
     */ }
+  .dnb-checkbox__input {
+    opacity: 0; }
+  .dnb-checkbox__gfx {
+    transition: opacity 200ms ease-out, transform 200ms ease-out; }
+  .dnb-checkbox__input:not(:checked) ~ .dnb-checkbox__gfx {
+    opacity: 0;
+    transform: scale(0.8); }
+  .dnb-checkbox__input:checked ~ .dnb-checkbox__gfx {
+    opacity: 1;
+    transform: scale(1); }
   .dnb-checkbox__input:not(:checked) ~ .dnb-checkbox__button {
     background-color: var(--color-white);
     border-color: var(--color-sea-green-alt); }
@@ -412,15 +430,7 @@ exports[`Checkbox scss have to match snapshot 1`] = `
   width: auto;
   margin: 0;
   padding: 0;
-  color: var(--color-white);
-  /*
-    * When checkbox is OFF
-    * aka when the checkbox is not :checked
-    */
-  /*
-    * When checkbox is ON
-    * aka when the checkbox is :checked
-    */ }
+  color: var(--color-white); }
   .dnb-checkbox__shell {
     position: relative;
     display: flex;
@@ -450,17 +460,9 @@ exports[`Checkbox scss have to match snapshot 1`] = `
     position: absolute;
     width: var(--checkbox-height);
     height: var(--checkbox-height);
-    transition: opacity 200ms ease-out, transform 200ms ease-out;
     fill: currentColor;
     shape-rendering: geometricPrecision; }
-  .dnb-checkbox__input:not(:checked) ~ .dnb-checkbox__gfx {
-    opacity: 0;
-    transform: scale(0.8); }
-  .dnb-checkbox__input:checked ~ .dnb-checkbox__gfx {
-    opacity: 1;
-    transform: scale(1); }
   .dnb-checkbox__input {
-    opacity: 0;
     position: absolute;
     top: 0;
     left: 0;

diff --git a/packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss b/packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss
@@ -68,32 +68,11 @@
     width: var(--checkbox-height);
     height: var(--checkbox-height);
 
-    transition: opacity 200ms ease-out, transform 200ms ease-out;
     fill: currentColor;
     shape-rendering: geometricPrecision;
   }
 
-  /*
-    * When checkbox is OFF
-    * aka when the checkbox is not :checked
-    */
-  &__input:not(:checked) ~ &__gfx {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-
-  /*
-    * When checkbox is ON
-    * aka when the checkbox is :checked
-    */
-  &__input:checked ~ &__gfx {
-    opacity: 1;
-    transform: scale(1);
-  }
-
   &__input {
-    opacity: 0;
-
     position: absolute;
     top: 0;
     left: 0;

diff --git a/packages/dnb-ui-lib/src/components/checkbox/style/themes/dnb-checkbox-theme-ui.scss b/packages/dnb-ui-lib/src/components/checkbox/style/themes/dnb-checkbox-theme-ui.scss
@@ -6,6 +6,31 @@
 @import '../../../../style/themes/imports.scss';
 
 .dnb-checkbox {
+  &__input {
+    opacity: 0;
+  }
+  &__gfx {
+    transition: opacity 200ms ease-out, transform 200ms ease-out;
+  }
+
+  /*
+    * When checkbox is OFF
+    * aka when the checkbox is not :checked
+    */
+  &__input:not(:checked) ~ &__gfx {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  /*
+    * When checkbox is ON
+    * aka when the checkbox is :checked
+    */
+  &__input:checked ~ &__gfx {
+    opacity: 1;
+    transform: scale(1);
+  }
+
   /*
     * When checkboxed OFF
     * aka when the checkbox is not :checked

diff --git a/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap b/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
@@ -326,6 +326,10 @@ exports[`Radio scss have to match default theme snapshot 1`] = `
     * When is ON
     * aka when the radio is :checked
     */
+  /*
+  * When radio is OFF
+  * aka when the radio is not :checked
+  */
   /*
     * On disabled
     *
@@ -352,14 +356,23 @@ exports[`Radio scss have to match default theme snapshot 1`] = `
     */
   /* stylelint-disable */
   /* stylelint-enable */ }
+  .dnb-radio__input {
+    opacity: 0; }
+  .dnb-radio__dot {
+    background-color: var(--color-sea-green-alt);
+    transition: opacity 200ms ease-out, transform 200ms ease-out; }
   .dnb-radio__input:not(:checked) ~ .dnb-radio__button {
     background-color: var(--color-white);
     border-color: var(--color-sea-green-alt); }
   .dnb-radio__input:checked ~ .dnb-radio__button {
     background-color: var(--color-white);
     border-color: var(--color-sea-green-alt); }
   .dnb-radio__input:checked ~ .dnb-radio__dot {
-    background-color: var(--color-sea-green-alt); }
+    opacity: 1;
+    transform: scale(1); }
+  .dnb-radio__input:not(:checked) ~ .dnb-radio__dot {
+    opacity: 0;
+    transform: scale(0.8); }
   .dnb-radio__input[disabled] ~ .dnb-radio__button {
     border-color: var(--color-mint-green-50); }
   .dnb-radio__input[disabled]:checked ~ .dnb-radio__button {

diff --git a/packages/dnb-ui-lib/src/components/radio/style/themes/dnb-radio-theme-ui.scss b/packages/dnb-ui-lib/src/components/radio/style/themes/dnb-radio-theme-ui.scss
@@ -6,6 +6,14 @@
 @import '../../../../style/themes/imports.scss';
 
 .dnb-radio {
+  &__input {
+    opacity: 0;
+  }
+  &__dot {
+    background-color: var(--color-sea-green-alt);
+    transition: opacity 200ms ease-out, transform 200ms ease-out;
+  }
+
   /*
     * When is OFF
     * aka when the radio is not :checked
@@ -24,7 +32,17 @@
     border-color: var(--color-sea-green-alt);
   }
   &__input:checked ~ &__dot {
-    background-color: var(--color-sea-green-alt);
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  /*
+  * When radio is OFF
+  * aka when the radio is not :checked
+  */
+  &__input:not(:checked) ~ &__dot {
+    opacity: 0;
+    transform: scale(0.8);
   }
 
   /*