playbook_ui 14.10.0.pre.alpha.play1662cssbargraph5214 → 14.10.0.pre.alpha.play16825206

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fe47ff4f6f8066eefe41139b5c0bc8a3a249a4862daf2a573f203d407b0abedb
-  data.tar.gz: 251e3caa684d8657a58bd66e9aaa363f8f135ae80fc746ec9f9c54bbb06654e6
+  metadata.gz: 4c3686695d192a5f6435b3e5b6e8fd120a4b5910c068d87cd5308eb0af9e38a0
+  data.tar.gz: da63348971a44ce424f553d0b5220bc10276d9110b9d7f26f59d3a8e0d446a78
 SHA512:
-  metadata.gz: bcceed9a15c145e0787a23da6ab6d5fcfc9c97244b90a7cefc711b73120f249eaa064b9512c9090bdab8326acab85da444f48e49ced76aacd6289fd56aa7b188
-  data.tar.gz: 8a7d1df92bc0dfc9ec8f4e3beee707f17e6da9eb145c3146fbb790af83e4c7eed0bca782eb911c829e3888915fe713e7c76a7658ae6951944616382268356d53
+  metadata.gz: 3a48fa614326e140e32a7a1352a160de4946f2ec72a992558519613ac2e6032fbbf015109fae16cba5f16121494c9d69bd709bc646f2a8df448c4d5364f255d1
+  data.tar.gz: 19a0afe7eef42092273a30082159872df0cd9e51304b2e5bee2df47d8f16c6d66c3fae0df0862256502ecd4e860f6f984659e282ef39623976a06942aa004ba4

data/app/pb_kits/playbook/_playbook.scss

@@ -128,3 +128,4 @@
 @import 'utilities/truncate';
 @import 'utilities/vertical_align';
 @import 'utilities/height';
+@import 'utilities/gap';

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

@@ -0,0 +1,29 @@
+@import "spacing";
+
+.gap_none {
+  gap: 0;
+}
+
+.gap_xxs {
+  gap: $space_xxs;
+}
+
+.gap_xs {
+  gap: $space_xs;
+}
+
+.gap_sm {
+  gap: $space_sm;
+}
+
+.gap_md {
+  gap: $space_md;
+}
+
+.gap_lg {
+  gap: $space_lg;
+}
+
+.gap_xl {
+  gap: $space_xl;
+}

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

@@ -27,6 +27,7 @@ export default [
   "overflow",
   "order",
   "numberSpacing",
+  "gap",
   "maxWidth",
   "minWidth",
   "width",

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

@@ -108,6 +108,10 @@ type MinWidth = {
   minWidth?: string,
 }
 
+type Gap = {
+  gap?: string,
+}
+
 type NumberSpacing = {
   numberSpacing?: "tabular",
 }
@@ -196,7 +200,7 @@ type MinHeight = {
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
-  LineHeight & Margin & Width & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
+  LineHeight & Margin & Width & MinWidth & MaxWidth & Gap & 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) => {
@@ -372,6 +376,11 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += maxWidth ? `max_width_${filterClassName(maxWidth)} ` : ''
     return css.trimEnd()
   },
+  gapProps: ({ gap }: Gap) => {
+    let css = ''
+    css += gap ? `gap_${gap} ` : ''
+    return css.trimEnd()
+  },
   minHeightProps: ({ minHeight }: MinHeight) => {
     const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
     if (heightValues.includes(minHeight)) {
@@ -530,15 +539,15 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
   },
 
 
-  topProps: ({top}) => getPositioningPropsClasses('top', top), 
+  topProps: ({top}) => getPositioningPropsClasses('top', top),
+
+  rightProps: ({right}) => getPositioningPropsClasses('right', right),
 
-  rightProps: ({right}) => getPositioningPropsClasses('right', right), 
+  bottomProps:({bottom}) =>  getPositioningPropsClasses('bottom', bottom),
 
-  bottomProps:({bottom}) =>  getPositioningPropsClasses('bottom', bottom), 
-  
   leftProps: ({left}) => getPositioningPropsClasses('left', left),
-    
-  
+
+
   textAlignProps: ({ textAlign }: TextAlign) => {
     if (typeof textAlign === 'object') {
       return getResponsivePropClasses(textAlign, 'text_align')
@@ -558,7 +567,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
 
 const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[key: string]: any}} = {
   heightProps: ({ height }: Height) => {
-    return height ? { height } : {}; 
+    return height ? { height } : {};
   },
 
   maxHeightProps: ({ maxHeight }: MaxHeight) => {
@@ -566,7 +575,7 @@ const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[
   },
 
   minHeightProps: ({ minHeight }: MinHeight) => {
-    return minHeight ? { minHeight } : {}; 
+    return minHeight ? { minHeight } : {};
   },
 }