playbook_ui 13.20.0.pre.alpha.PBNTR225advancedtablefeedback2375 → 13.20.0.pre.alpha.play1247htmloptions2403

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

@@ -21,44 +21,85 @@
 .z_index_1 {
   z-index: 100;
 }
+
 .z_index_2 {
   z-index: 200;
 }
+
 .z_index_3 {
   z-index: 300;
 }
+
 .z_index_4 {
   z-index: 400;
 }
+
 .z_index_5 {
   z-index: 500;
 }
+
 .z_index_6 {
   z-index: 600;
 }
+
 .z_index_7 {
   z-index: 700;
 }
+
 .z_index_8 {
   z-index: 800;
 }
+
 .z_index_9 {
   z-index: 900;
 }
+
 .z_index_10 {
   z-index: 1000;
 }
 
 $zIndex_values: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
-    
+
 @each $size, $size_value in $breakpoints_grid {
   @each $zIndex_value in $zIndex_values {
-      $min_size: map-get($size_value, "min");
-      $max_size: map-get($size_value, "max");
-      .z_index_#{$size}_#{$zIndex_value} {
-        @include break_on($min_size, $max_size) {
-          z-index: #{$zIndex_value * 100} !important;
-        }
+    $min_size: map-get($size_value, "min");
+    $max_size: map-get($size_value, "max");
+
+    .z_index_#{$size}_#{$zIndex_value} {
+      @include break_on($min_size, $max_size) {
+        z-index: #{$zIndex_value * 100} !important;
+      }
+    }
+  }
+}
+
+$space_classes: (
+  xxs: $space_xxs,
+  xs: $space_xs,
+  sm: $space_sm,
+  md: $space_md,
+  lg: $space_lg,
+  xl: $space_xl,
+  0: 0,
+  auto: auto,
+  initial: initial,
+  inherit: inherit
+);
+
+$positions: "top", "right", "bottom", "left";
+
+@each $position in $positions {
+  @each $space_name, $space in $space_classes {
+    .#{$position}_#{$space_name} {
+      @if $space_name == "0" {
+        #{$position}: 0 !important;
+      }
+      @else if $space_name == "auto" or $space_name == "initial" or $space_name == "inherit" {
+        #{$position}: #{$space} !important;
+      }
+      @else {
+        #{$position}: #{-$space} !important;
       }
+    }
   }
 }

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

@@ -118,6 +118,22 @@ type Position = {
   position?: "relative" | "absolute" | "fixed" | "sticky" | "static",
 }
 
+type Top = {
+  top?: Sizes,
+}
+
+type Right = {
+  right?: Sizes,
+}
+
+type Bottom = {
+  bottom?: Sizes,
+}
+
+type Left = {
+  left?: Sizes,
+}
+
 type Shadow = {
   shadow?: "none" | "deep" | "deeper" | "deepest",
 }
@@ -151,7 +167,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding &
-  Position & Shadow & TextAlign & Truncate & ZIndex & { hover?: string };
+  Position & Shadow & TextAlign & Truncate & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -424,6 +440,12 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += position && position !== 'static' ? `position_${position}` : ''
     return css
   },
+
+  topProps: ({ top }: Top) => top ? `top_${top}` : '',
+  rightProps: ({ right }: Right) => right ? `right_${right}` : '',
+  bottomProps: ({ bottom }: Bottom) => bottom ? `bottom_${bottom}` : '',
+  leftProps: ({ left }: Left) => left ? `left_${left}` : '',
+
   textAlignProps: ({ textAlign }: TextAlign) => {
     if (typeof textAlign === 'object') {
       return getResponsivePropClasses(textAlign, 'text_align')