Merge pull request #1303 from undp/1300-radio-button-has-inconsistent…

…-appearance #1300 - abstracted common radio/checkbox styles
undp · Oct 29, 2023 · 42a69d0 · 42a69d0
2 parents 82fb6ab + f29b86e
commit 42a69d0
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 15 deletions.
diff --git a/docs/css/base-minimal-no-grid.min.css b/docs/css/base-minimal-no-grid.min.css
diff --git a/docs/css/base-minimal.min.css b/docs/css/base-minimal.min.css
diff --git a/docs/css/components/checkbox-radio-common.min.css b/docs/css/components/checkbox-radio-common.min.css
diff --git a/docs/css/components/checkbox.min.css b/docs/css/components/checkbox.min.css
diff --git a/stories/Components/Forms/Checkbox/Checkbox.jsx b/stories/Components/Forms/Checkbox/Checkbox.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import './checkbox-radio-common.scss';
 import './checkbox.scss';
 import '../../../assets/scss/_typography.scss';
 

diff --git a/stories/Components/Forms/Checkbox/checkbox-radio-common.scss b/stories/Components/Forms/Checkbox/checkbox-radio-common.scss
@@ -0,0 +1,13 @@
+@import '../../../assets/scss/variables';
+
+.form-check {
+  align-items: center;
+  display: flex;
+  position: relative;
+
+  label {
+    cursor: pointer;
+    font-size: $font-size-16;
+    padding: 0 7px;
+  }
+}
diff --git a/stories/Components/Forms/Checkbox/checkbox.scss b/stories/Components/Forms/Checkbox/checkbox.scss
@@ -3,18 +3,6 @@
 @import '../../../assets/scss/breakpoints';
 
 /* checkbox */
-.form-check {
-  align-items: center;
-  display: flex;
-  position: relative;
-
-  label {
-    cursor: pointer;
-    font-size: $font-size-16;
-    padding: 0 7px;
-  }
-}
-
 input[type='checkbox'] {
   @extend %checbox-radio-before;
 

diff --git a/stories/Components/Forms/Radio/Radio.jsx b/stories/Components/Forms/Radio/Radio.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import '../Checkbox/checkbox-radio-common.scss';
 import './radio.scss';
 import '../../../assets/scss/_typography.scss';
 

diff --git a/stories/assets/scss/_components.scss b/stories/assets/scss/_components.scss
@@ -26,3 +26,4 @@
 @import '../../Atom/Table/table';
 // @import '../../Atom/Typography/Links/link';
 @import '../../Atom/Video/video';
+@import '../../Components/Forms/Checkbox/checkbox-radio-common';