playbook_ui 14.8.0.pre.alpha.PLAY1649rolloutheightglobalprops4635 → 14.8.0.pre.alpha.PLAY1680newwidthprop4661

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: db8ee9f13c7629142d8ebee9009fe589989ec0a27cf7cb7177adf16d52ffa1d3
-  data.tar.gz: c793285b7a81d5ff14d5caba6ec65320c00763fba4fc01d9d388794bc684289a
+  metadata.gz: 470ceb2308e2f5f036f019c0ae83adb3446f845a4e83f75560b0a2d6b1bec89b
+  data.tar.gz: 0a443da489c1d1242379a99ec020a709e4f24e03b1c65b148aefb50d91f06bc1
 SHA512:
-  metadata.gz: 9768ae568bb5b7688320d5c6fc48dee29c5f551614622c2e0f5ce9f0efe08b91891a5ef5798b912aed744e9c0cb6cea69a7a3fdb1046dcbe528cd8d760f634cc
-  data.tar.gz: e33ec41098720c971d57a925d57d9f77882e977bfea8273c60c4ff87b8b4302cdf323f51fe629a79f343c7db729a2ca9061feed631229c9818c39b6207759204
+  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/pb_background/_background.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 type BackgroundColors = 'gradient' |
   'dark' |'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'shadow' |
@@ -145,12 +145,6 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     } : {})
   };
 
-  const dynamicInlineProps = globalInlineProps(props);
-  const combinedStyles = {
-    ...backgroundStyle,
-    ...dynamicInlineProps
-  };
-
   const Tag: React.ReactElement | any = `${tag}`;
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -164,7 +158,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
         alt={alt}
         className={classes}
         id={id}
-        style={combinedStyles}
+        style={backgroundStyle}
     >
       {children}
     </Tag>

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, ReactElement } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
-import { globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import CollapsibleContent from './child_kits/CollapsibleContent'
@@ -75,7 +75,6 @@ const Collapsible = ({
     globalProps(props),
     className
   )
-  const dynamicInlineProps = globalInlineProps(props)
   return (
     <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
       <div
@@ -84,7 +83,6 @@ const Collapsible = ({
           {...htmlProps}
           className={classes}
           id={id}
-          style={dynamicInlineProps}
       >
         {Main ? (
           <CollapsibleMain {...mainProps}>

data/app/pb_kits/playbook/pb_drawer/_drawer.tsx

@@ -7,7 +7,7 @@ import {
   buildDataProps,
   buildHtmlProps,
 } from "../utilities/props";
-import { globalProps, globalInlineProps } from "../utilities/globalProps";
+import { globalProps } from "../utilities/globalProps";
 
 import { DialogContext } from "../pb_dialog/_dialog_context";
 
@@ -101,8 +101,6 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
 
   const classes = classnames(buildCss("pb_drawer_wrapper"), className);
 
-  const dynamicInlineProps = globalInlineProps(props)
-
   const [triggerOpened, setTriggerOpened] = useState(false);
 
   const breakpointWidths: Record<DrawerProps["breakpoint"], number> = {
@@ -200,7 +198,6 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
           {...dataProps}
           {...htmlProps}
           className={classes}
-          style={dynamicInlineProps}
       >
           {isModalVisible && (
             <div

data/app/pb_kits/playbook/pb_image/_image.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 type ImageType = {
@@ -41,7 +41,6 @@ const Image = (props: ImageType): React.ReactElement => {
     globalProps(props),
     className
   )
-  const dynamicInlineProps = globalInlineProps(props)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
@@ -57,7 +56,6 @@ const Image = (props: ImageType): React.ReactElement => {
         id={id}
         onError={onError}
         src={url}
-        style={dynamicInlineProps}
     />
   )
 }

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
-import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 
 type LayoutPropTypes = {
   aria?: {[key: string]: string},
@@ -19,7 +19,7 @@ type LayoutPropTypes = {
   variant?: "light" | "dark" | "gradient",
   transparent?: boolean,
   layout?: "sidebar" | "collection" | "kanban" | "content" | "masonry",
-} & GlobalProps
+}
 
 type LayoutSideProps = {
   children: React.ReactNode[] | React.ReactNode,
@@ -159,8 +159,6 @@ const Layout = (props: LayoutPropTypes) => {
   const filteredProps = {...props}
   delete filteredProps?.position
 
-  const dynamicInlineProps = globalInlineProps(props)
-
   return (
     <div
         {...ariaProps}
@@ -173,8 +171,7 @@ const Layout = (props: LayoutPropTypes) => {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore
         globalProps(filteredProps)
-        )}
-        style={dynamicInlineProps}
+      )}
     >
       {subComponentTags('Side')}
       {nonSideChildren}

data/app/pb_kits/playbook/pb_overlay/_overlay.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 import OverlayPercentage from './subcomponents/_overlay_percentage'
 import OverlayToken from './subcomponents/_overlay_token'
 
@@ -39,7 +39,6 @@ const Overlay = (props: OverlayProps) => {
     const dataProps = buildDataProps(data)
     const classes = classnames(buildCss('pb_overlay'), globalProps(props), className)
     const htmlProps = buildHtmlProps(htmlOptions)
-    const dynamicInlineProps = globalInlineProps(props)
 
     const getPosition = () => {
         return Object.keys(layout)[0]
@@ -58,7 +57,6 @@ const Overlay = (props: OverlayProps) => {
             {...htmlProps}
             className={classes}
             id={id}
-            style={dynamicInlineProps}
         >
             {isSizePercentage ?
                 OverlayPercentage({

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 
 import Caption from '../pb_caption/_caption'
 
@@ -38,7 +38,6 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : ""), globalProps(props), className)
-  const dynamicInlineProps = globalInlineProps(props)
 
   return (
 
@@ -48,7 +47,6 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
         {...htmlProps}
         className={classes}
         id={id}
-        style={dynamicInlineProps}
     >
       {
         children && children ||

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 import PbTable from '.'
 import {
   TableHead,
@@ -64,7 +64,6 @@ const Table = (props: TableProps): React.ReactElement => {
     const spaceCssName = outerPadding !== 'none' ? 'space_' : ''
     const outerPaddingCss = outerPadding ? `outer_padding_${spaceCssName}${outerPadding}` : ''
     const isTableTag = tag === 'table'
-    const dynamicInlineProps = globalInlineProps(props)
 
     const classNames = classnames(
         'pb_table',
@@ -100,7 +99,6 @@ const Table = (props: TableProps): React.ReactElement => {
                     {...htmlProps}
                     className={classNames}
                     id={id}
-                    style={dynamicInlineProps}
                 >
                     {children}
                 </table>

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