playbook_ui 13.28.0.pre.alpha.PLAY13592980 → 13.28.0.pre.alpha.dialogturbostreameventlistener3017

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

@@ -0,0 +1,76 @@
+import React from 'react'
+
+import Table from '../_table'
+import Button from '../../pb_button/_button'
+
+const TableOuterPadding = (props) => {
+  return (
+    <Table
+        outerPadding="sm"
+        size="sm"
+        {...props}
+    >
+      <thead>
+        <tr>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{''}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td align="right">
+            {' '}
+            <Button
+                onClick={() => alert('button clicked!')}
+                text="Action"
+                variant="secondary"
+                {...props}
+            />
+            {' '}
+          </td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td align="right">
+            {' '}
+            <Button
+                onClick={() => alert('button clicked!')}
+                text="Action"
+                variant="secondary"
+                {...props}
+            />
+            {' '}
+          </td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td align="right">
+            {' '}
+            <Button
+                onClick={() => alert('button clicked!')}
+                text="Action"
+                variant="secondary"
+                {...props}
+            />
+            {' '}
+          </td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableOuterPadding

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

@@ -0,0 +1 @@
+Pass any of our spacing tokens to the `outerPadding` / `outer_padding` prop to customize a table's outer padding (both the left padding of the first column and the right padding of the last column).

data/app/pb_kits/playbook/pb_table/docs/example.yml

@@ -5,10 +5,10 @@ examples:
     - table_lg: Large
     - table_sticky: Sticky Header
     - table_header: Table Header
-    - table_alignment_row: Row Alignment
-    - table_alignment_column: Column Alignment
-    - table_alignment_shift_row: Shift Row
-    - table_alignment_shift_data: Shift Column Data
+    - table_alignment_row_rails: Row Alignment
+    - table_alignment_column_rails: Cell Alignment
+    - table_alignment_shift_row_rails: Row Shift
+    - table_alignment_shift_data_rails: Cell Shift
     - table_side_highlight: Side Highlight
     - table_container: Table Container Off
     - table_disable_hover: Disable Hover
@@ -26,7 +26,7 @@ examples:
     - table_striped: Striped Table
     - table_with_subcomponents_rails: Table with Sub Components (Table Elements)
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
-
+    - table_outer_padding: Outer Padding
 
   react:
     - table_sm: Small
@@ -34,9 +34,9 @@ examples:
     - table_lg: Large
     - table_sticky: Sticky Header
     - table_alignment_row: Row Alignment
-    - table_alignment_column: Column Alignment
-    - table_alignment_shift_row: Shift Row
-    - table_alignment_shift_data: Shift Column Data
+    - table_alignment_column: Cell Alignment
+    - table_alignment_shift_row: Row Shift
+    - table_alignment_shift_data: Cell Shift
     - table_side_highlight: Side Highlight
     - table_container: Table Container Off
     - table_disable_hover: Disable Hover
@@ -54,4 +54,4 @@ examples:
     - table_striped: Striped Table
     - table_with_subcomponents: Table with Sub Components (Table Elements)
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
-
+    - table_outer_padding: Outer Padding

data/app/pb_kits/playbook/pb_table/docs/index.js

@@ -24,3 +24,4 @@ export { default as TableStriped } from './_table_striped.jsx'
 export { default as TableDiv } from './_table_div.jsx'
 export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
 export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
+export { default as TableOuterPadding } from './_table_outer_padding.jsx'

data/app/pb_kits/playbook/pb_table/styles/_all.scss

@@ -19,3 +19,4 @@
 @import "vertical_border";
 @import "table_header";
 @import "striped";
+@import "outer_padding";

data/app/pb_kits/playbook/pb_table/styles/_outer_padding.scss

@@ -0,0 +1,21 @@
+@import "../../tokens/spacing";
+
+[class^=pb_table] {
+  @each $name, $value in $spaces {
+    &.outer_padding_#{$name} {
+      td:first-child,
+      th:first-child,
+      .pb_table_td:first-child,
+      .pb_table_th:first-child {
+        padding-left: #{$value} !important;
+      }
+  
+      td:last-child,
+      th:last-child,
+      .pb_table_td:last-child,
+      .pb_table_th:last-child {
+        padding-right: #{$value} !important;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/table.rb

@@ -30,12 +30,16 @@ module Playbook
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[table div],
                  default: "table"
+      prop :outer_padding, type: Playbook::Props::Enum,
+                           values: ["none", "xxs", "xs", "sm", "md", "lg", "xl", nil],
+                           default: nil
 
       def classname
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
           disable_hover_class, container_class, data_table_class, sticky_class, collapse_class,
-          vertical_border_class, striped_class, "table-responsive-#{responsive}", separator: " "
+          vertical_border_class, striped_class, outer_padding_class,
+          "table-responsive-#{responsive}", separator: " "
         )
       end
 
@@ -76,6 +80,15 @@ module Playbook
       def vertical_border_class
         vertical_border ? "vertical-border" : nil
       end
+
+      def outer_padding_class
+        if outer_padding.nil?
+          outer_padding
+        else
+          space_css_name = outer_padding != "none" ? "space_" : ""
+          outer_padding.present? ? "outer_padding_#{space_css_name}#{outer_padding}" : nil
+        end
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_table/table.test.js

@@ -52,7 +52,6 @@ const TableTagTable = () => {
   );
 };
 
-
 const props = {
   data: { testid: "table" },
   sticky: false
@@ -161,3 +160,8 @@ test("Renders Table.Cell subkit for HTML Table elements Table", () => {
   expect(head).toBeInTheDocument()
   expect(head.tagName).toBe("TD")
 })
+
+test("Should have outerPadding class", () => {
+  const kit = renderKit(Table, props, { outerPadding: "sm" })
+  expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card outer_padding_space_sm table-collapse-sm")
+})

data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import TreemapChart from './_treemap_chart';
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const testId = 'treemapchart1';
+
+test('uses exact classname', () => {
+  const data = [
+    {
+      name: "Pepperoni",
+      parent: "Toppings",
+      value: 600,
+    }, {
+      name: "Cheese",
+      parent: "Toppings",
+      value: 510,
+    }, {
+      name: "Mushroom",
+      parent: "Toppings",
+      value: 330,
+    },{
+      name: "Onions",
+      parent: "Toppings",
+      value: 250,
+    }, {
+      name: "Olives",
+      parent: "Toppings",
+      value: 204,
+    }, {
+      name: "Pineapple",
+      parent: "Toppings",
+      value: 90,
+    }, {
+      name: "Pizza Toppings",
+      id: "Toppings",
+    },
+  ]
+  render(
+    <TreemapChart
+        chartData={data}
+        data={{ testid: testId }}
+        id="tree-map-id"
+    />
+  );
+ 
+  const kit = screen.getByTestId(testId);
+  expect(kit).toHaveClass('pb_treemap_chart');
+});

data/app/pb_kits/playbook/playbook-doc.js

@@ -34,6 +34,7 @@ import * as DateYearStacked from 'pb_date_year_stacked/docs'
 import * as Detail from 'pb_detail/docs'
 import * as Dialog from 'pb_dialog/docs'
 import * as DistributionBarDocs from 'pb_distribution_bar/docs'
+import * as Draggable from 'pb_draggable/docs'
 import * as Dropdown from 'pb_dropdown/docs'
 import * as FileUpload from 'pb_file_upload/docs'
 import * as Filter from 'pb_filter/docs'
@@ -137,6 +138,7 @@ WebpackerReact.registerComponents({
   ...Detail,
   ...Dialog,
   ...DistributionBarDocs,
+  ...Draggable,
   ...Dropdown,
   ...FileUpload,
   ...Filter,

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

@@ -0,0 +1,18 @@
+$vertical_align_baseline:   baseline !default;
+$vertical_align_sub:         sub !default;
+$vertical_align_super:       super !default;
+$vertical_align_text_top:    text-top !default; 
+$vertical_align_text_bottom: text-bottom !default;
+$vertical_align_middle:      middle !default;
+$vertical_align_top:         top !default;
+$vertical_align_bottom:      bottom !default;
+$vertical_align: (
+  baseline:         $vertical_align_baseline,
+  sub:              $vertical_align_sub,
+  super:            $vertical_align_super,
+  text_top:         $vertical_align_text_top,
+  text_bottom:      $vertical_align_text_bottom,
+  middle:           $vertical_align_middle,
+  top:              $vertical_align_top,
+  bottom:           $vertical_align_bottom
+);

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

@@ -0,0 +1,16 @@
+@import "../tokens/vertical_align";
+
+
+$vertical_align_classes: (
+  vertical_align_baseline: $vertical_align_baseline,
+  vertical_align_sub: $vertical_align_sub,
+  vertical_align_super: $vertical_align_super,
+  vertical_align_text_top: $vertical_align_text_top,
+  vertical_align_text_bottom: $vertical_align_text_bottom,
+  vertical_align_middle: $vertical_align_middle,
+  vertical_align_top: $vertical_align_top,
+  vertical_align_bottom: $vertical_align_bottom,
+);
+
+
+@include global_props_responsive_css($vertical_align, 'vertical_align', 'vertical-align');

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

@@ -156,6 +156,10 @@ type Truncate = {
   truncate?: TruncateType
 }
 
+type VerticalAlign =  {
+  verticalAlign?: "baseline" | "super" | "top" | "middle" | "bottom" | "sub" | "text-top" | "text-bottom"
+}
+
 type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
 type ZIndexResponsiveType = {[key: string]: ZIndexType}
 type ZIndex = {
@@ -167,7 +171,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding &
-  Position & Shadow & TextAlign & Truncate & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
+  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -470,6 +474,13 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     } else {
       return textAlign ? `text_align_${textAlign} ` : ''
     }
+  },
+  verticalAlignProps: ({ verticalAlign }: VerticalAlign) => {
+    if (typeof verticalAlign === 'object') {
+      return getResponsivePropClasses(verticalAlign, 'vertical_align')
+    } else {
+      return verticalAlign ? `vertical_align_${verticalAlign} ` : ''
+    }
   }
 }
 

data/dist/menu.yml

@@ -352,6 +352,10 @@ kits:
         platforms: *web
         description: 
         status: "stable"
+      - name: "draggable"
+        platforms: *react_only
+        description:
+        status: "beta"
   - name: message_text_patterns
     description: 
     components:
@@ -463,5 +467,4 @@ kits:
         status: "stable"
       - name: "user"
         platforms: *web
-        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
-        status: "stable"
+        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.