playbook_ui 13.3.0 → 13.4.0.pre.alpha.PLAY973Hash1181

data/app/pb_kits/playbook/utilities/_spacing.scss

@@ -1,69 +1,112 @@
 @import "../tokens/spacing";
 
 $space_classes: (
-	xxs: $space_xxs,
-	xs: $space_xs,
-	sm: $space_sm,
-	md: $space_md,
-	lg: $space_lg,
-	xl: $space_xl,
-	none: 0,
+  xxs: $space_xxs,
+  xs: $space_xs,
+  sm: $space_sm,
+  md: $space_md,
+  lg: $space_lg,
+  xl: $space_xl,
+  none: 0,
   auto: auto,
   initial: initial,
   inherit: inherit
 );
 
 $positions: (
-	m: "margin",
-	mr: "margin-right",
-	ml: "margin-left",
-	mt: "margin-top",
-	mb: "margin-bottom",
-	mx: ("margin-left", "margin-right"),
-	my: ("margin-top", "margin-bottom"),
-	p: "padding",
-	pr: "padding-right",
-	pl: "padding-left",
-	pt: "padding-top",
-	pb: "padding-bottom",
-	px: ("padding-left", "padding-right"),
-	py: ("padding-top", "padding-bottom")
+  m: "margin",
+  mr: "margin-right",
+  ml: "margin-left",
+  mt: "margin-top",
+  mb: "margin-bottom",
+  mx: ("margin-left", "margin-right"),
+  my: ("margin-top", "margin-bottom"),
+  p: "padding",
+  pr: "padding-right",
+  pl: "padding-left",
+  pt: "padding-top",
+  pb: "padding-bottom",
+  px: ("padding-left", "padding-right"),
+  py: ("padding-top", "padding-bottom")
 );
 
-@each $position_name, $position in $positions {
-	@each $space_name, $space in $space_classes {
-		.#{$position_name}_#{$space_name} {
-			@if type-of($position)=="list" {
-				@each $coordinate in $position {
-					#{$coordinate}: #{$space} !important;
-				}
-			}
-			@else {
-				#{$position}: #{$space} !important;
-			}
-		}
-	}
+$break_methods: (
+  at: "break_at",
+  on: "break_on",
+);
+
+@each $position_name,
+$position in $positions {
+
+  @each $space_name,
+  $space in $space_classes {
+    .#{$position_name}_#{$space_name} {
+      @if type-of($position)=="list" {
+        @each $coordinate in $position {
+          #{$coordinate}: #{$space} !important;
+        }
+      }
+
+      @else {
+        #{$position}: #{$space} !important;
+      }
+    }
+  }
 }
 
-@each $size, $size_value in $breakpoints_max_only {
-  @each $position_name, $position in $positions {
-    @each $space_name, $space in $space_classes {
-        $min_size: map-get($size_value, "min");
-        $max_size: map-get($size_value, "max");
-        .#{$position_name}_#{$size}_#{$space_name} {
-          @if type-of($position)=="list" {
-            @each $coordinate in $position {
-              @include break_at( $max_size) {
-              #{$coordinate}: #{$space} !important;
+// Generate media queries
+@each $size,
+$size_value in $breakpoints_grid {
+
+  @each $position_name,
+  $position in $positions {
+
+		@each $break_method,
+		$method in $break_methods {
+
+			@each $space_name,
+			$space in $space_classes {
+				$min_size: map-get($size_value, "min");
+				$max_size: map-get($size_value, "max");
+
+				.break_#{$break_method}_#{$size}\:#{$position_name}_#{$space_name} {
+          @if type-of($position) == "list" {
+            @if $break_method == "on" {
+              @each $coordinate in $position {
+                @include break_on($min_size, $max_size) {
+                  #{$coordinate}: #{$space} !important;
+                }
+              }
+            }
+
+            @else {
+              @each $coordinate in $position {
+                @if ($max_size != null) {
+                  @include break_at($max_size) {
+                    #{$coordinate}: #{$space} !important;
+                  }
+                }
               }
             }
           }
+
           @else {
-            @include break_at( $max_size) {
-              #{$position}: #{$space} !important;
+            @if $break_method == "on" {
+              @include break_on($min_size, $max_size) {
+                #{$position}: #{$space} !important;
+              }
+            }
+
+            @else {
+              @if ($max_size != null) {
+                @include break_at($max_size) {
+                  #{$position}: #{$space} !important;
+                }
+              }
             }
           }
-        }
-    }
-  }
+				}
+			}
+		}
+	}
 }

data/app/pb_kits/playbook/utilities/_text_align.scss

@@ -0,0 +1,3 @@
+@import "../tokens/text_align";
+
+@include global_props_responsive_css($text_align, 'text_align', 'text-align');

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -62,6 +62,7 @@ type FlexWrap = {
 
 type Hover = Shadow & {
   background?: string,
+  color?: string,
   scale?: "sm" | "md" | "lg"
 }
 
@@ -85,6 +86,8 @@ type Margin = {
   marginX?: AllSizes,
   marginY?: AllSizes,
   margin?: AllSizes,
+  break?: string,
+  default?: string
 }
 
 type MaxWidth = {
@@ -107,6 +110,8 @@ type Padding = {
   paddingX?: AllSizes,
   paddingY?: AllSizes,
   padding?: AllSizes,
+  break?: string,
+  default?: string
 }
 
 type Position = {
@@ -119,6 +124,10 @@ type Shadow = {
 
 type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
 
+type TextAlign = {
+  textAlign?: "start" | "end" | "left" | "right" | "center" | "justify" | "justifyAll" | "matchParent",
+}
+
 type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
 type ZIndexResponsiveType = {[key: string]: ZIndexType}
 type ZIndex = {
@@ -130,7 +139,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
-  Position & Shadow & ZIndex & { hover?: string };
+  Position & Shadow & TextAlign & ZIndex & { hover?: string };
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -149,6 +158,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
       css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
       css += hover.background ? `hover_background_${hover.background } ` : '';
       css += hover.scale ? `hover_scale_${hover.scale} ` : '';
+      css += hover.color ? `hover_color_${hover.color } ` : '';
       return css;
   },
 
@@ -186,13 +196,24 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
       padding,
     };
 
+    const screenSizeValues = ["xs", "sm", "md", "lg", "xl"]
+
     function handleObjectValue(properties: Margin | Padding, prefix: string) {
       let classResult = '';
 
+      const breakValue = properties.break || "on";
+      const defaultValue = properties.default || null;
+
       Object.entries(properties).forEach(([key, value]) => {
-        classResult += `${prefix}_${key}_${value} `;
+        if (screenSizeValues.includes(key)) {
+          classResult += `break_${breakValue}_${key}:${prefix}_${value} `;
+        }
       });
 
+      if (defaultValue) {
+        classResult += `${prefix}_${defaultValue} `;
+      }
+
       return classResult;
     }
 
@@ -377,6 +398,13 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += position && position !== 'static' ? `position_${position}` : ''
     return css
   },
+  textAlignProps: ({ textAlign }: TextAlign) => {
+    if (typeof textAlign === 'object') {
+      return getResponsivePropClasses(textAlign, 'text_align')
+    } else {
+      return textAlign ? `text_align_${textAlign} ` : ''
+    }
+  }
 }
 
 type DefaultProps = {[key: string]: string} | Record<string, unknown>