playbook_ui 14.9.0.pre.rc.16 → 14.9.0.pre.rc.17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8ab25ef480fdafc4e7dbe01d8a996b66f4aff5cafdbfbe2c39149954238969a4
-  data.tar.gz: f1168644429453dec42a540d09dec3410aed9a7375982553f7fca2abfb537e6a
+  metadata.gz: d00eca4bbfbc0c7635601ac8ea5bc581b72dc830ef1341b878a85bd7ed1e71fc
+  data.tar.gz: cfcdad0ccad5a5cc1d02625b5ac13fdbd3abd48ac162b6821968c65f70e93d1b
 SHA512:
-  metadata.gz: 9de68a63391ed82f5417582571b01731b2eab2b974304311caada2a0fa5d0565a231c964a62fc6e3fdda00738f4f2c417e23e15c26c223244b60bf3bf9f4880c
-  data.tar.gz: b8b961b78de3bed1f50860eae0facb39fb6b9f7fba49267debcf4492815a9c3f4b313ca9dfd1a6575cfb0faf4784ee19a40416e3841e15397eeee6948a9c8b76
+  metadata.gz: f19a2d498ee2652e7e20956b8ce047e638135ad3b9274dc19edeabf82b04ed4de1110c003b48bdda87773f44d9f3e09cf4413678ddce5073fcab4ba220a4ac2a
+  data.tar.gz: aff5d022e2cfd855ecace5ea28927f9c1183c6f25231ce65a6266893fa3a616f6483dbe68270ff8c89cf7f3482ba9586a68b804c50b461406855bc5217d37ddc

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_progress_simple/_progress_simple.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+
+type ModifiedGlobalProps = Omit<GlobalProps, 'width'>
 
 type ProgressSimpleProps = {
   align?: "left" | "center" | "right",
@@ -16,7 +18,7 @@ type ProgressSimpleProps = {
   value: number,
   variant?: "default" | "positive" | "negative" | "warning",
   width: string,
-}
+} & ModifiedGlobalProps
 
 const ProgressSimple = (props: ProgressSimpleProps): React.ReactElement => {
   const {
@@ -56,7 +58,7 @@ const ProgressSimple = (props: ProgressSimpleProps): React.ReactElement => {
   )
 
   return (
-    <div 
+    <div
         {...dataProps}
         {...htmlProps}
         className={wrapperClass}

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb

@@ -1,9 +1,10 @@
-<%= content_tag(:div, class: object.wrapper_classname) do %>
+<%= content_tag(:div,
+class: object.wrapper_classname,
+style: object.style) do %>
   <%= content_tag(:div,
   id: object.id,
   data: object.data_values,
   class: object.classname,
-  style: object.style,
   **combined_html_options) do %>
     <%= content_tag(:div, "",
       class: "progress_simple_value",

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb

@@ -21,6 +21,11 @@ module Playbook
                      values: %w[default positive negative warning],
                      default: "default"
 
+      # Explicitly defining the width prop here so the local prop takes precedence over global width prop
+      def width
+        prop(:width)
+      end
+
       def number_value
         validate_required_progress_props
 

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