playbook_ui 14.8.0 → 14.9.0.pre.alpha.PBNTR686advancedtablepaginationpoc4747

data/app/pb_kits/playbook/tokens/exports/_height.module.scss

@@ -0,0 +1,37 @@
+@import "../height";
+
+:export {
+  @mixin export_height($height_list) {
+    @each $name, $value in $height_list {
+      .#{$name} {
+        height: $value;
+      }
+    }
+  }
+
+  @include export_height($heights);
+}
+
+:export {
+  @mixin export_max_height($height_list) {
+    @each $name, $value in $height_list {
+      .max_#{$name} {
+        max-height: $value;
+      }
+    }
+  }
+
+  @include export_max_height($heights);
+}
+
+:export {
+  @mixin export_min_height($height_list) {
+    @each $name, $value in $height_list {
+      .min_#{$name} {
+        min-height: $value;
+      }
+    }
+  }
+
+  @include export_min_height($heights);
+}

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

@@ -0,0 +1,33 @@
+@import "../tokens/exports/height.module";
+
+@mixin export_height($height_list) {
+  @each $name, $value in $height_list {
+    .#{$name} {
+      height: $value;
+    }
+  }
+}
+
+@mixin export_max_height($height_list) {
+  @each $name, $value in $height_list {
+    .max_#{$name} {
+      max-height: $value;
+    }
+  }
+}
+
+@mixin export_min_height($height_list) {
+  @each $name, $value in $height_list {
+    .min_#{$name} {
+      min-height: $value;
+    }
+  }
+}
+
+@include export_height($heights);
+@include export_max_height($heights);
+@include export_min_height($heights);
+
+.height-resize {
+  resize: vertical;
+}

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

@@ -1,29 +1,49 @@
-.max_width_xs {
-  max-width: 360px;
-}
+@import "../tokens/container";
+
 .max_width_0 {
-  max-width: 0;
+  max-width: map-get($containers, 'none');
 }
+
 .max_width_none {
   max-width: none;
 }
 
+.max_width_0_percent {
+  max-width: $container_0;
+}
+
+.max_width_xxs {
+  max-width: $container_xxs;
+}
+
+.max_width_xs {
+  max-width: $container_xs;
+}
+
 .max_width_sm {
-  max-width: 540px;
+  max-width: $container_sm;
 }
 
 .max_width_md {
-  max-width: 720px;
+  max-width: $container_md;
 }
 
 .max_width_lg {
-  max-width: 960px;
+  max-width: $container_lg;
 }
 
 .max_width_xl {
-  max-width: 1140px;
+  max-width: $container_xl;
 }
 
 .max_width_xxl {
-  max-width: 1320px;
+  max-width: $container_xxl;
+}
+
+.max_width_100_percent {
+  max-width: $container_100;
+}
+
+.width-resize {
+  resize: horizontal;
 }

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

@@ -4,7 +4,11 @@
   min-width: map-get($containers, 'none');
 }
 
-.min_with_0_percent {
+.min_width_none {
+  min-width: none;
+}
+
+.min_width_0_percent {
   min-width: $container_0;
 }
 
@@ -40,6 +44,6 @@
   min-width: $container_100;
 }
 
-.minwidth-resize {
+.width-resize {
   resize: horizontal;
 }

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

@@ -0,0 +1,45 @@
+@import "../tokens/container";
+
+.width_none {
+  width: none;
+}
+
+.width_0 {
+  width: map-get($containers, 'none');
+}
+
+.width_0_percent {
+  width: map-get($containers, 'none');
+}
+
+.width_xxs {
+  width: $container_xxs;
+}
+
+.width_xs {
+  width: $container_xs;
+}
+
+.width_sm {
+  width: $container_sm;
+}
+
+.width_md {
+  width: $container_md;
+}
+
+.width_lg {
+  width: $container_lg;
+}
+
+.width_xl {
+  width: $container_xl;
+}
+
+.width_xxl {
+  width: $container_xxl;
+}
+
+.width_100_percent {
+  width: $container_100;
+}

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -7,7 +7,6 @@ export default [
   "right",
   "top",
   "hover",
-  "groupHover",
   "zIndex",
   "verticalAlign",
   "truncate",
@@ -30,6 +29,7 @@ export default [
   "numberSpacing",
   "maxWidth",
   "minWidth",
+  "width",
   "marginRight",
   "marginLeft",
   "marginTop",

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

@@ -95,12 +95,16 @@ type Margin = {
   default?: string
 }
 
+type Width = {
+  width?: string
+}
+
 type MaxWidth = {
-  maxWidth?: Sizes,
+  maxWidth?: string,
 }
 
 type MinWidth = {
-  minWidth?: Sizes,
+  minWidth?: string,
 }
 
 type NumberSpacing = {
@@ -176,7 +180,7 @@ type ZIndex = {
 } | ZIndexResponsiveType
 
 type Height = {
-  height?: string 
+  height?: string
 }
 
 type MaxHeight = {
@@ -191,7 +195,7 @@ type MinHeight = {
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
-  LineHeight & Margin & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
+  LineHeight & Margin & Width & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
   Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left & Height & MaxHeight & MinHeight;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
@@ -351,6 +355,11 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += numberSpacing ? `ns_${numberSpacing} ` : ''
     return css
   },
+  widthProps: ({ width }: Width) => {
+    let css = ''
+    css += width ? `width_${filterClassName(width)} ` : ''
+    return css.trimEnd()
+  },
   minWidthProps: ({ minWidth }: MinWidth) => {
     let css = ''
     css += minWidth ? `min_width_${filterClassName(minWidth)} ` : ''
@@ -361,6 +370,30 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += maxWidth ? `max_width_${filterClassName(maxWidth)} ` : ''
     return css.trimEnd()
   },
+  minHeightProps: ({ minHeight }: MinHeight) => {
+    const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
+    if (heightValues.includes(minHeight)) {
+      let css = ''
+      css += minHeight ? `min_height_${filterClassName(minHeight)} ` : ''
+      return css.trimEnd()
+    }
+  },
+  maxHeightProps: ({ maxHeight }: MaxHeight) => {
+    const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
+    if (heightValues.includes(maxHeight)) {
+      let css = ''
+      css += maxHeight ? `max_height_${filterClassName(maxHeight)} ` : ''
+      return css.trimEnd()
+    }
+  },
+  heightProps: ({ height }: Height) => {
+    const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
+    if (heightValues.includes(height)) {
+      let css = ''
+      css += height ? `height_${filterClassName(height)} ` : ''
+      return css.trimEnd()
+    }
+  },
   zIndexProps: (zIndex: ZIndex) => {
     let css = ''
     Object.entries(zIndex).forEach((zIndexEntry) => {