playbook_ui 13.4.0.pre.alpha.play961turnoffdeprecationwarnings1171 → 13.5.0.pre.alpha.PLAY823globalpropoverflow1188

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a5687cf64fd91e0542870d040a225a5ce93425595201932182dac4bfd5222608
-  data.tar.gz: 1aa93b8be4d0c630173934157a703de11fca34d72fb0539ec8d5b25f67dc1f7c
+  metadata.gz: 00e50b9e82d3a8a3731f8044cf47c1604e70a4b2b9006dca8774be500c6dd11f
+  data.tar.gz: 879064cb31cbdf95719c5905633c9776ded11e6a0b33a4c1683c35b2547de43c
 SHA512:
-  metadata.gz: 4cb69e3c3405c327d6b0b6b8ce41cfe5663d1ac8d2256b8d9bb3e13bf06d32f09a0bbe293fbe07c086a8005d886bc6993e3f53fda967c3fd5f71ab7be473215a
-  data.tar.gz: c9ead3436044663c3e7726b79bc1869b26abfb9bc4d46721ee1012b6f6e9cc6df9eab7afd2b033be3e97ba1e2c888dca4bc7be497764585a5a267819fe9bb79b
+  metadata.gz: ff26d28f5082fa07f99a79a295d673bc7b32eea47ee1a40e3eae337f3c2c9eadba273db9781de8b307486d4534bbb9e59aeae2035cff7d9ae392060838be2a41
+  data.tar.gz: 261da322e4bfaa7f630a136f8b5dceee8616fe151afbcb06c427b755cf46e01e858a29d31b86b2782b96224a63738f44edb9b14b55999c9676efdc7f13f4ea8e

data/app/pb_kits/playbook/_playbook.scss

@@ -113,5 +113,6 @@
 @import './utilities/border_radius';
 @import './utilities/hover';
 @import './utilities/text_align';
+@import './utilities/overflow';
 
 @import 'pb_multi_level_select/multi_level_select';

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -25,7 +25,7 @@ type BackgroundProps = {
   id?: string,
   imageUrl?: string,
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td',
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
   transition?: 'fade' | 'blur' | 'scale',
 } & GlobalProps
 

data/app/pb_kits/playbook/pb_background/background.rb

@@ -92,7 +92,7 @@ module Playbook
       prop :image_url
 
       prop :tag, type: Playbook::Props::Enum,
-                  values: %w[h1 h2 h3 h4 h5 h6 p div span tr th td],
+                  values: %w[h1 h2 h3 h4 h5 h6 p div span tr th td thead col],
                   default: "div"
 
       prop :transition, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_body/_body.tsx

@@ -24,7 +24,7 @@ type BodyProps = {
 } & GlobalProps
 
 const Body = (props: BodyProps): React.ReactElement => {
-  if (props.variant) deprecatedProps() //status prop is deprecated, use color instead please
+  if (props.variant) deprecatedProps("Body", ["status"]) //status prop is deprecated, use color instead please
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_caption/_caption.tsx

@@ -17,7 +17,7 @@ type CaptionProps = {
 } & GlobalProps;
 
 const Caption = (props: CaptionProps): React.ReactElement => {
-  if (props.variant) deprecatedProps() //variant prop is deprecated, use color instead
+  if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -49,7 +49,7 @@ type DatePickerProps = {
 } & GlobalProps
 
 const DatePicker = (props: DatePickerProps): React.ReactElement => {
-  if (props.plugins) deprecatedProps()
+  if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
 
   const {
     allowInput = false,

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx

@@ -19,7 +19,7 @@ type DateTimeStackedProps = {
 }
 
 const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
-  if (props.date) deprecatedProps()
+  if (props.date) deprecatedProps('Date Time Stacked', ['date'])
 
   const {
     date,

data/app/pb_kits/playbook/pb_flex/_flex_item.scss

@@ -44,14 +44,6 @@
     order: -1;
   }
 
-  $overflow_values: auto, hidden, inherit, initial, scroll, visible;
-
-  @each $value in $overflow_values {
-    &.overflow_#{$value} {
-      overflow: #{$value}
-    }
-  }
-
   @for $i from 0 through 12 {
     &[class*=_flex_#{$i}]{
       flex: $i;

data/app/pb_kits/playbook/pb_flex/_flex_item.tsx

@@ -8,7 +8,7 @@ type FlexItemPropTypes = {
   grow?: boolean,
   shrink?: boolean,
   className?: string,
-  overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
+  // overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
   order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
   alignSelf?: "start" | "end" | "center" | "stretch" | null,
   displayFlex?: boolean
@@ -20,7 +20,6 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
     className,
     fixedSize,
     grow,
-    overflow = null,
     shrink,
     flex = 'none',
     order = 'none',
@@ -30,7 +29,6 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   const growClass = grow === true ? 'grow' : ''
   const displayFlexClass = displayFlex === true ? `display_flex_${displayFlex}` : ''
   const flexClass = flex !== 'none' ? `flex_${flex}` : ''
-  const overflowClass = overflow ? `overflow_${overflow}` : ''
   const shrinkClass = shrink === true ? 'shrink' : ''
   const alignSelfClass = alignSelf ? `align_self_${alignSelf}` : ''
   const fixedStyle =
@@ -39,7 +37,7 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
 
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), overflowClass, orderClass, alignSelfClass, globalProps(props), className)}
+        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
         style={fixedStyle}
     >
       {children}

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -9,10 +9,6 @@ module Playbook
       prop :shrink, type: Playbook::Props::Boolean,
                     default: false
 
-      prop :overflow, type: Playbook::Props::Enum,
-                      values: %w[auto hidden inherit initial scroll visible] + [nil],
-                      default: nil
-
       prop :align_self, type: Playbook::Props::Enum,
                         values: %w[start center end stretch] + [nil],
                         default: nil
@@ -21,7 +17,7 @@ module Playbook
                           default: false
 
       def classname
-        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + overflow_class + align_self_class
+        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
       end
 
       def style_value
@@ -46,10 +42,6 @@ module Playbook
         grow ? "grow" : nil
       end
 
-      def overflow_class
-        overflow ? " overflow_#{overflow}" : ""
-      end
-
       def shrink_class
         shrink ? "shrink" : nil
       end

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md

@@ -1,2 +1,2 @@
-You can individually align a pieace of table data, but a more practical use would be applied to align a column.
+You can individually align a piece of table data, but a more practical use would be applied to align a column.
 In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md

@@ -1,2 +1,2 @@
-You can individually shift a pieace of table data, or shift an entire column.
+You can individually shift a piece of table data, or shift an entire column.
 The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.

data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb

@@ -38,4 +38,41 @@
       <td>Value 3</td>
     </tr>
   </tbody>
-<% end %>
+<% end %>
+
+<%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
+  <colgroup>
+    <%= pb_rails("background", props: { background_color: "error_subtle", tag: "col" }) %>
+    <%= pb_rails("background", props: { background_color: "card_light", tag: "col" }) %>
+    <%= pb_rails("background", props: { background_color: "warning_subtle", tag: "col" }) %>
+  </colgroup>
+  <%= pb_rails("background", props: { background_color: "card_light", tag: "thead" }) do %>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+    </tr>
+  <% end %>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx

@@ -6,57 +6,122 @@ import Background from "../../pb_background/_background"
 const TableWithBackgroundKit = (props) => {
   return (
     <div>
-      <Table
-          {...props}
-      >
-        <thead>
-          <tr>
-              <th>{'Column 1'}</th>
-              <th>{'Column 2'}</th>
-              <th>{'Column 3'}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>{'Value 1'}</td>
-            <td>{'Value 2'}</td>
-            <td>{'Value 3'}</td>
-          </tr>
+      <div>
+        <Table
+            {...props}
+        >
+          <thead>
+            <tr>
+                <th>{'Column 1'}</th>
+                <th>{'Column 2'}</th>
+                <th>{'Column 3'}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+            </tr>
+            <Background
+                backgroundColor="error_subtle"
+                tag='tr'
+            >
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+            </Background>
+            <tr>
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+            </tr>
+            <tr>
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+            </tr>
+            <Background
+                backgroundColor="warning_subtle"
+                tag='tr'
+            >
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+            </Background>
+            <tr>
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+            </tr>
+          </tbody>
+        </Table>
+      </div>
+      <div>
+        <Table
+            paddingTop="sm"
+            {...props}
+        >
+          <colgroup>
+            <Background
+                backgroundColor="error_subtle"
+                tag='col'
+            />
+            <Background
+                backgroundColor="card_light"
+                tag='col'
+            />
+            <Background
+                backgroundColor="warning_subtle"
+                tag='col'
+            />
+          </colgroup>
           <Background
-              backgroundColor="error_subtle"
-              tag='tr'
+              backgroundColor="card_light"
+              tag='thead'
           >
-            <td>{'Value 1'}</td>
-            <td>{'Value 2'}</td>
-            <td>{'Value 3'}</td>
+            <tr>
+                <th>{'Column 1'}</th>
+                <th>{'Column 2'}</th>
+                <th>{'Column 3'}</th>
+            </tr>
           </Background>
-          <tr>
-            <td>{'Value 1'}</td>
-            <td>{'Value 2'}</td>
-            <td>{'Value 3'}</td>
-          </tr>
-          <tr>
-            <td>{'Value 1'}</td>
-            <td>{'Value 2'}</td>
-            <td>{'Value 3'}</td>
-          </tr>
-          <Background
-              backgroundColor="warning_subtle"
-              tag='tr'
-          >
-            <td>{'Value 1'}</td>
-            <td>{'Value 2'}</td>
-            <td>{'Value 3'}</td>
-          </Background>
-          <tr>
-            <td>{'Value 1'}</td>
-            <td>{'Value 2'}</td>
-            <td>{'Value 3'}</td>
-          </tr>
-        </tbody>
-      </Table>
+          <tbody>
+            <tr>
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+            </tr>
+            <tr>
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+            </tr>
+            <tr>
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+            </tr>
+            <tr>
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+            </tr>
+            <tr>
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+            </tr>
+            <tr>
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+            </tr>
+          </tbody>
+        </Table>
+        </div>
     </div>
   )
 }
 
-export default TableWithBackgroundKit
+export default TableWithBackgroundKit

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx

@@ -20,7 +20,7 @@ type TimeStackedProps = {
 }
 
 const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
-  if (props.date) deprecatedProps() //date prop is deprecated, use time instead
+  if (props.date) deprecatedProps('Time Stacked', ['date']) //date prop is deprecated, use time instead
 
   const {
     align = 'left',

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -22,7 +22,7 @@ type TitleProps = {
 } & GlobalProps
 
 const Title = (props: TitleProps): React.ReactElement => {
-  if (props.variant) deprecatedProps() //variant prop is deprecated, use color instead
+  if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/tokens/_overflow.scss

@@ -0,0 +1,10 @@
+$visible: visible !default;
+$hidden: hidden !default;
+$scroll: scroll !default;
+$auto: auto !default;
+$overflow: (
+  visible: $visible,
+  hidden: $hidden,
+  scroll: $scroll,
+  auto: $auto,
+);

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

@@ -0,0 +1,22 @@
+@import "../tokens/overflow";
+
+$overflow_classes: (
+  visible: $visible,
+  hidden: $hidden,
+  scroll: $scroll,
+  auto: $auto,
+);
+
+$variants: (
+  overflow_x: "overflow-x",
+  overflow_y: "overflow-y",
+  overflow: "overflow",
+);
+
+@each $variant_name, $variant_property in $variants {
+  @each $class_name, $overflow_value in $overflow_classes {
+    .#{$variant_name}_#{$class_name} {
+      #{$variant_property}: #{$overflow_value} !important;
+    }
+  }
+}

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

@@ -128,6 +128,13 @@ type TextAlign = {
   textAlign?: "start" | "end" | "left" | "right" | "center" | "justify" | "justifyAll" | "matchParent",
 }
 
+type OverflowTypes = "scroll" | "visible" | "hidden" | "auto"
+type Overflow = {
+overflowX?: OverflowTypes,
+overflowY?: OverflowTypes,
+overflow?: OverflowTypes
+}
+
 type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
 type ZIndexResponsiveType = {[key: string]: ZIndexType}
 type ZIndex = {
@@ -138,7 +145,7 @@ type ZIndex = {
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
-  LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
+  LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding &
   Position & Shadow & TextAlign & ZIndex & { hover?: string };
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
@@ -255,6 +262,14 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += borderRadius ? `border_radius_${borderRadius} ` : ''
     return css
   },
+  overflowProps: ({ overflow, overflowX, overflowY }: Overflow) => {
+    let css = ''
+    css += overflow ? `overflow_${overflow}` : ''
+    css += overflowX ? `overflow_x_${overflowX}` : ''
+    css += overflowY ? `overflow_y_${overflowY}` : ''
+    return css
+  },
+
   darkProps: ({ dark }: Dark) => dark ? 'dark' : '',
   numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
     let css = ''
@@ -417,13 +432,13 @@ export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {})
 }
 
 
-export const deprecatedProps = (): void => {
-  // if (process.env.NODE_ENV === 'development') {
-  //   /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
-  //   props.forEach((prop) => {
-  //     console.warn(`${kit} Kit: The prop '${prop}' is deprecated and will be removed in a future release!`)
-  //   })
-  // }
+export const deprecatedProps = (kit: string, props: string[] = []): void => {
+  if (process.env.NODE_ENV === 'development') {
+    /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
+    props.forEach((prop) => {
+      console.warn(`${kit} Kit: The prop '${prop}' is deprecated and will be removed in a future release!`)
+    })
+  }
 }
 
 export const domSafeProps = (props: {[key: string]: string}): {[key: string]: string} => {