Fix flexbox props output in both versions

playbook/app/pb_kits/playbook/_playbook.scss

@@ -92,6 +92,7 @@
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
+@import './utilities/mixins';
 @import './utilities/spacing';
 @import './utilities/cursor';
 @import './utilities/max_width';

playbook/app/pb_kits/playbook/utilities/_align_content.scss

@@ -1,29 +1,10 @@
-.align_content_start {
-  display: flex;
-  align-content: start !important;
-}
-
-.align_content_end {
-  display: flex;
-  align-content: end !important;
-}
-
-.align_content_center {
-  display: flex;
-  align-content: center !important;
-}
-
-.align_content_space_between {
-  display: flex;
-  align-content: space-between !important;
-}
-
-.align_content_space_around {
-  display: flex;
-  align-content: space-around !important;
-}
-
-.align_content_space_evenly {
-  display: flex;
-  align-content: space-evenly !important;
-}
+$align_content_values: (
+  start: start,
+  end: end,
+  center: center,
+  space_between: space-between,
+  space_around: space-around,
+  space_evenly: space-evenly
+);
+
+@include global_props_responsive_css($align_content_values, 'align_content', 'align-content');

playbook/app/pb_kits/playbook/utilities/_align_items.scss

@@ -1,35 +1,11 @@
-.align_items_flex_start {
-  display: flex;
-  align-items: flex-start !important;
-}
-
-.align_items_flex_end {
-  display: flex;
-  align-items: flex-end !important;
-}
-
-.align_items_start {
-  display: flex;
-  align-items: start !important;
-}
-
-.align_items_end {
-  display: flex;
-  align-items: end !important;
-}
-
-
-.align_items_center {
-  display: flex;
-  align-items: center !important;
-}
-
-.align_items_baseline {
-  display: flex;
-  align-items: baseline !important;
-}
-
-.align_items_stretch {
-  display: flex;
-  align-items: stretch !important;
-}
+$align_items_values: (
+  flex_start: flex-start,
+  flex_end: flex-end,
+  start: start,
+  center: center,
+  end: end,
+  baseline: baseline,
+  stretch: stretch,
+);
+
+@include global_props_responsive_css($align_items_values, 'align_items', 'align-items');

playbook/app/pb_kits/playbook/utilities/_align_self.scss

@@ -1,29 +1,10 @@
-.align_self_start {
-  display: flex;
-  align-self: start !important;
-}
-
-.align_self_end {
-  display: flex;
-  align-self: end !important;
-}
-
-.align_self_auto {
-  display: flex;
-  align-self: auto !important;
-}
-
-.align_self_center {
-  display: flex;
-  align-self: center !important;
-}
-
-.align_self_stretch {
-  display: flex;
-  align-self: stretch !important;
-}
-
-.align_self_baseline {
-  display: flex;
-  align-self: baseline !important;
-}
+$align_self_values: (
+  auto: auto,
+  start: start,
+  center: center,
+  end: end,
+  baseline: baseline,
+  stretch: stretch,
+);
+
+@include global_props_responsive_css($align_self_values, 'align_self', 'align-self');

playbook/app/pb_kits/playbook/utilities/_flex.scss

@@ -1,15 +1,20 @@
-.flex_auto {
-  flex: auto !important;
-}
+$flex_values: (
+  auto: auto,
+  initial: initial,
+  none: none,
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+  6: 6,
+  7: 7,
+  8: 8,
+  9: 9,
+  10: 10,
+  11: 11,
+  12: 12,
+);
 
-.flex_initial {
-  flex: initial !important;
-}
-
-.flex_none {
-  flex: none !important;
-}
-
-.flex_1 {
-  flex: 1 !important;
-}
+@include global_props_responsive_css($flex_values, 'flex', 'flex');

playbook/app/pb_kits/playbook/utilities/_flex_direction.scss

@@ -5,24 +5,4 @@ $flex_direction_values: (
   column_reverse: column-reverse
 );
 
-@include break_at(breakpoint("lg")) {
-  .test {
-    display: none;
-  }
-}
-
-@each $flex-direction, $flex-direction-value in $flex_direction_values {
-  .flex_direction_#{$flex-direction} {
-    display: flex;
-    flex-direction: #{$flex-direction-value} !important;
-  }
-}
-
-@each $flex-direction, $flex-direction-value in $flex_direction_values {
-  @each $breakpoint, $breakpoint-value in $breakpoints {
-    .flex_direction_#{$breakpoint}_#{$flex-direction} {
-      display: flex;
-      flex-direction: #{$flex-direction-value} !important;
-    }
-  }
-}
+@include global_props_responsive_css($flex_direction_values, 'flex_direction', 'flex-direction');

playbook/app/pb_kits/playbook/utilities/_flex_grow.scss

@@ -1,9 +1,6 @@
-.flex_grow_1 {
-  display: flex;
-  flex-grow: 1 !important;
-}
+$flex_grow_values: (
+  0: 0,
+  1: 1,
+);
 
-.flex_grow_0 {
-  display: flex;
-  flex-grow: 0 !important;
-}
+@include global_props_responsive_css($flex_grow_values, 'flex_grow', 'flex-grow');

playbook/app/pb_kits/playbook/utilities/_flex_shrink.scss

@@ -1,9 +1,6 @@
-.flex_shrink_1 {
-  display: flex;
-  flex-shrink: 1 !important;
-}
+$flex_shrink_values: (
+  0: 0,
+  1: 1,
+);
 
-.flex_shrink_0 {
-  display: flex;
-  flex-shrink: 0 !important;
-}
+@include global_props_responsive_css($flex_shrink_values, 'flex_shrink', 'flex-shrink');

playbook/app/pb_kits/playbook/utilities/_flex_wrap.scss

@@ -1,14 +1,7 @@
-.flex_wrap_wrap {
-  display: flex;
-  flex-wrap: wrap !important;
-}
+$flex_wrap_values: (
+  wrap: wrap,
+  nowrap: nowrap,
+  wrap_reverse: wrap-reverse,
+);
 
-.flex_wrap_nowrap {
-  display: flex;
-  flex-wrap: nowrap !important;
-}
-
-.flex_wrap_wrap_reverse {
-  display: flex;
-  flex-wrap: wrap-reverse !important;
-}
+@include global_props_responsive_css($flex_wrap_values, 'flex_wrap', 'flex-wrap');

playbook/app/pb_kits/playbook/utilities/_justify_content.scss

@@ -1,23 +1,10 @@
-.justify_content_start {
-  justify-content: start !important;
-}
-
-.justify_content_end {
-  justify-content: end !important;
-}
-
-.justify_content_center {
-  justify-content: center !important;
-}
-
-.justify_content_space_between {
-  justify-content: space-between !important;
-}
-
-.justify_content_space_around {
-  justify-content: space-around !important;
-}
-
-.justify_content_space_evenly {
-  justify-content: space-evenly !important;
-}
+$justify_content_values: (
+  start: start,
+  center: center,
+  end: end,
+  space_around: space-around,
+  space_between: space-between,
+  space_evenly: space-evenly,
+);
+
+@include global_props_responsive_css($justify_content_values, 'justify_content', 'justify-content');

playbook/app/pb_kits/playbook/utilities/_justify_self.scss

@@ -1,19 +1,9 @@
-.justify_self_auto {
-  justify-self: auto !important;
-}
-
-.justify_self_start {
-  justify-self: start !important;
-}
-
-.justify_self_end {
-  justify-self: end !important;
-}
-
-.justify_self_center {
-  justify-self: center !important;
-}
-
-.justify_self_stretch {
-  justify-self: stretch !important;
-}
+$justify_self_values: (
+  auto: auto,
+  start: start,
+  center: center,
+  end: end,
+  stretch: stretch,
+);
+
+@include global_props_responsive_css($justify_self_values, 'justify_self', 'justify-self');

playbook/app/pb_kits/playbook/utilities/_mixins.scss

@@ -0,0 +1,26 @@
+@mixin global_props_css($props, $class_prefix, $css_attribute, $responsive) {
+  @each $propkey, $propvalue in $props {
+    .#{$class_prefix}_#{$propkey} {
+      #{$css_attribute}: #{$propvalue} !important;
+      @content;
+    }
+  }
+
+  @if $responsive {
+    @each $size, $size_value in $breakpoints_grid {
+      @each $prop_key, $prop_value in $props {
+          $min_size: map-get($size_value, "min");
+          $max_size: map-get($size_value, "max");
+          .#{$class_prefix}_#{$size}_#{$prop_key} {
+            @include break_on($min_size, $max_size) {
+              #{$css_attribute}: #{$prop_value} !important;
+            }
+          }
+      }
+    }
+  }
+}
+
+@mixin global_props_responsive_css($props, $class_prefix, $css_attribute) {
+  @include global_props_css($props, $class_prefix, $css_attribute, 1)
+}