playbook_ui 14.8.0.pre.alpha.PLAY1658tanstackbump4657 → 14.8.0.pre.alpha.PLAY1680newwidthprop4661

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c34918e042ff05229cd38821d218ff77de30c33ccbafbf05ed70d0393dc9609e
-  data.tar.gz: bb94daebc61e1615b3752347d6aa69e10ecd261267380f14f864d878a5231bd8
+  metadata.gz: 470ceb2308e2f5f036f019c0ae83adb3446f845a4e83f75560b0a2d6b1bec89b
+  data.tar.gz: 0a443da489c1d1242379a99ec020a709e4f24e03b1c65b148aefb50d91f06bc1
 SHA512:
-  metadata.gz: 22da37f0010cb2819757ee0eedb2484daf12730c82d5b98a7ceec251595137b4c4c86ed339ea682216278d3508736b83af1f451ee371f47f18b3f4bc20a41afd
-  data.tar.gz: f06c136f366fb43ecb80e5fe8e02aa3ed2eb1380c36de2039e473cb566a11071d221cd89d545f8465d9f9a2e07c6b44cbe8cceb7b632eb8218c360a4b511405a
+  metadata.gz: a9fc193798b1eff208434da829db369218807400c99f6b3b601282b3f3a4ad10107ffb75ac93a647aa0bf92fa4d2c1692d987bd183500bbcd0fe105ddd18df8b
+  data.tar.gz: 58cc3188841d723a6d402b79b9c964bda66d33a88db3c90c1fa0753fcf220af9bb4e0850603519c4558eac64b98528024b544babab98f1ecd9efc5c10eb8e04a

data/app/pb_kits/playbook/_playbook.scss

@@ -111,6 +111,7 @@
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';
+@import 'utilities/width';
 @import 'utilities/min_width';
 @import 'utilities/max_width';
 @import 'utilities/positioning';

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

@@ -1,31 +1,47 @@
-.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 {

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;
 }
 

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

@@ -29,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)} ` : ''