refactor: write button-group to use more library conventions

sebnitu · Aug 28, 2020 · 7ab3170 · 7ab3170
1 parent 831c52f
commit 7ab3170
Show file tree

Hide file tree

Showing 16 changed files with 138 additions and 62 deletions.
diff --git a/docs/dist/styles.css b/docs/dist/styles.css
diff --git a/docs/dist/styles.css.map b/docs/dist/styles.css.map
diff --git a/docs/dist/styles.min.css b/docs/dist/styles.min.css
diff --git a/docs/dist/styles.min.css.map b/docs/dist/styles.min.css.map
diff --git a/packages/button-group/dist/styles.css b/packages/button-group/dist/styles.css
diff --git a/packages/button-group/dist/styles.css.map b/packages/button-group/dist/styles.css.map
diff --git a/packages/button-group/dist/styles.min.css b/packages/button-group/dist/styles.min.css
diff --git a/packages/button-group/dist/styles.min.css.map b/packages/button-group/dist/styles.min.css.map
diff --git a/packages/button-group/src/_button-group.scss b/packages/button-group/src/_button-group.scss
@@ -4,12 +4,14 @@
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
-  margin: (var.$gap * -1) 0 0 (var.$gap * -1);
+  margin-top: (var.$gap * -1);
+  margin-left: (var.$gap * -1);
 
   #{var.$children-selector} {
     z-index: 1;
     flex: 0 0 auto;
-    margin: var.$gap 0 0 var.$gap;
+    margin-top: var.$gap;
+    margin-left: var.$gap;
     border-radius: var.$border-radius;
 
     &:hover {

diff --git a/packages/button-group/src/_button-group_gap.scss b/packages/button-group/src/_button-group_gap.scss
@@ -6,10 +6,12 @@ $_v: var.$prefix-modifier-value;
 
 @each $key, $value in var.$gap-scale {
   .#{$_b}button-group#{$_m}gap#{$_v}#{$key} {
-    margin: (-$value) 0 0 (-$value);
+    margin-top: (-$value);
+    margin-left: (-$value);
 
     #{var.$children-selector} {
-      margin: $value 0 0 $value;
+      margin-top: $value;
+      margin-left: $value;
     }
   }
 }
diff --git a/packages/button-group/src/_button-group_join.scss b/packages/button-group/src/_button-group_join.scss
@@ -6,10 +6,12 @@ $_m: var.$prefix-modifier;
 $_v: var.$prefix-modifier-value;
 
 .#{$_b}button-group#{$_m}join {
-  margin: (var.$gap-join * -1) 0 0 (var.$gap-join * -1);
+  margin-top: (var.$gap-join * -1);
+  margin-left: (var.$gap-join * -1);
 
   #{var.$children-selector} {
-    margin: var.$gap-join 0 0 var.$gap-join;
+    margin-top: var.$gap-join;
+    margin-left: var.$gap-join;
     border-radius: 0;
 
     &:first-child {

diff --git a/packages/button-group/src/_variables.scss b/packages/button-group/src/_variables.scss
@@ -8,12 +8,13 @@ $prefix-modifier-value: core.$prefix-modifier-value !default;
 $breakpoints: core.$breakpoints !default;
 $border-radius: core.$border-radius !default;
 $children-selector: "> *";
-$gap: 0.5rem !default;
+$gap: 0.5em !default;
 $gap-join: -1px !default;
 $gap-scale: (
+  "none": 0,
   "xs": 1px,
-  "sm": 0.25rem,
-  "md": 0.5rem,
-  "lg": 1rem,
-  "xl": 1.5rem
+  "sm": 0.25em,
+  "md": 0.5em,
+  "lg": 1em,
+  "xl": 1.5em,
 ) !default;