playbook_ui 13.28.0.pre.alpha.PBNTR296dropdownwithform2941 → 13.28.0.pre.alpha.PBNTR297gradientoverlay3029

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

@@ -4,60 +4,59 @@ import Table from '../_table'
 
 const TableAlignmentShiftRow = (props) => {
   return (
-    <Table
-        {...props}
-    >
-      <thead>
-        <tr>
-          <th>{'Column 1'}</th>
-          <th>{'Column 2'}</th>
-          <th>{'Column 3'}</th>
-          <th>{'Column 4'}</th>
-          <th>{'Column 5'}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>
+    <Table {...props}>
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{'Column 1'}</Table.Header>
+          <Table.Header>{'Column 2'}</Table.Header>
+          <Table.Header>{'Column 3'}</Table.Header>
+          <Table.Header>{'Column 4'}</Table.Header>
+          <Table.Header>{'Column 5'}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>
             {'Value 1a'}
             <br />
             {'Value 1a'}
             <br />
             {'Value 1a'}
-          </td>
-          <td>{'Value 2a'}</td>
-          <td>{'Value 3a'}</td>
-          <td>{'Value 4a'}</td>
-          <td>{'Value 5a'}</td>
-        </tr>
-        <tr shift="middle">
-          <td>
+          </Table.Cell>
+          <Table.Cell>{'Value 2a'}</Table.Cell>
+          <Table.Cell>{'Value 3a'}</Table.Cell>
+          <Table.Cell>{'Value 4a'}</Table.Cell>
+          <Table.Cell>{'Value 5a'}</Table.Cell>
+        </Table.Row>
+        <Table.Row verticalAlign="middle">
+          <Table.Cell>
             {'Value 1b'}
             <br />
             {'Value 1b'}
             <br />
             {'Value 1b'}
-          </td>
-          <td>{'Value 2b'}</td>
-          <td>{'Value 3b'}</td>
-          <td>{'Value 4b'}</td>
-          <td>{'Value 5b'}</td>
-        </tr>
-        <tr shift="down">
-          <td>
+          </Table.Cell>
+          <Table.Cell>{'Value 2b'}</Table.Cell>
+          <Table.Cell>{'Value 3b'}</Table.Cell>
+          <Table.Cell>{'Value 4b'}</Table.Cell>
+          <Table.Cell>{'Value 5b'}</Table.Cell>
+        </Table.Row>
+        <Table.Row verticalAlign="bottom">
+          <Table.Cell>
             {'Value 1c'}
             <br />
             {'Value 1c'}
             <br />
             {'Value 1c'}
-          </td>
-          <td>{'Value 2c'}</td>
-          <td>{'Value 3c'}</td>
-          <td>{'Value 4c'}</td>
-          <td>{'Value 5c'}</td>
-        </tr>
-      </tbody>
+          </Table.Cell>
+          <Table.Cell>{'Value 2c'}</Table.Cell>
+          <Table.Cell>{'Value 3c'}</Table.Cell>
+          <Table.Cell>{'Value 4c'}</Table.Cell>
+          <Table.Cell>{'Value 5c'}</Table.Cell>
+        </Table.Row>
+      </Table.Body>
     </Table>
+
   )
 }
 

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

@@ -0,0 +1 @@
+Pass our `verticalAlign` global prop to any `table.row` subcomponent to change the vertical alignment of all cells within that row.

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

@@ -0,0 +1,53 @@
+<%= pb_rails("table") do %>
+    <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_header", props: { text: "Column 1" }) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 2" }) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 3" }) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 4" }) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 5" }) %>       
+      <% end %>
+    <% end %>
+    <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_cell") do %>
+          Value 1a
+          <br />
+          Value 1a
+          <br />
+          Value 1a
+        <% end %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 2a" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 3a" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 4a" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 5a" }) %>
+      <% end %>
+      <%= pb_rails("table/table_row", props: { vertical_align: "middle" }) do %>
+        <%= pb_rails("table/table_cell") do %>
+          Value 1b
+          <br />
+          Value 1b
+          <br />
+          Value 1b
+        <% end %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 2b" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 3b" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 4b" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 5b" }) %>
+      <% end %>
+      <%= pb_rails("table/table_row", props: { vertical_align: "bottom" }) do %>
+        <%= pb_rails("table/table_cell") do %>
+          Value 1c
+          <br />
+          Value 1c
+          <br />
+          Value 1c
+        <% end %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 2c" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 3c" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 4c" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 5c" }) %>
+      <% end %>
+    <% end %>
+  <% end %>
+  

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

@@ -0,0 +1 @@
+Pass our `vertical_align` global prop to any `table/table_row` subcomponent to change the vertical alignment of all cells within that row.

data/app/pb_kits/playbook/pb_table/docs/{_table_alignment_row.html.erb → _table_outer_padding.html.erb}

@@ -1,11 +1,11 @@
-<%= pb_rails("table") do %>
+<%= pb_rails("table", props: { outer_padding: "sm", size: "sm" }) do %>
   <thead>
     <tr>
       <th>Column 1</th>
       <th>Column 2</th>
       <th>Column 3</th>
       <th>Column 4</th>
-      <th>Column 5</th>
+      <th></th>
     </tr>
   </thead>
   <tbody>
@@ -14,21 +14,21 @@
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
-      <td>Value 5</td>
+      <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
     </tr>
-    <tr align="center">
+    <tr>
       <td>Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
-      <td>Value 5</td>
+      <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
     </tr>
-    <tr align="right">
+    <tr>
       <td>Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
-      <td>Value 5</td>
+      <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
     </tr>
   </tbody>
 <% end %>

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_tooltip/index.js

@@ -58,6 +58,7 @@ export default class PbTooltip extends PbEnhancedElement {
 
     this.popper = createPopper(trigger, this.tooltip, {
       placement: this.position,
+      strategy: 'fixed',
       modifiers: [
         {
           name: 'offset',

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -10,6 +10,7 @@ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import treemap from 'highcharts/modules/treemap'
+import { merge } from 'lodash'
 
 type TreemapChartProps = {
   chartData: {
@@ -21,6 +22,7 @@ type TreemapChartProps = {
   }[];
   className?: string;
   colors: string[];
+  customOptions?: Partial<Highcharts.Options>;
   dark?: boolean;
   drillable: boolean;
   grouped: boolean;
@@ -39,6 +41,7 @@ const TreemapChart = ({
   data = {},
   chartData,
   colors,
+  customOptions = {},
   dark = false,
   drillable = false,
   grouped = false,
@@ -96,20 +99,20 @@ const TreemapChart = ({
 
   useEffect(() => {
     
-    setOptions({ ...staticOptions });
+    setOptions(merge(staticOptions, customOptions));
   }, [chartData]);
 
   return (
     <HighchartsReact
-      containerProps={{
-        className: classnames(globalProps(props), "pb_treemap_chart"),
-        id: id,
-        ...ariaProps,
-        ...dataProps,
-        ...htmlProps
+        containerProps={{
+          className: classnames(globalProps(props), "pb_treemap_chart"),
+          id: id,
+          ...ariaProps,
+          ...dataProps,
+          ...htmlProps
       }}
-      highcharts={Highcharts}
-      options={options}
+        highcharts={Highcharts}
+        options={options}
     />
   );
 };

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/pb_treemap_chart/treemap_chart.rb

@@ -7,6 +7,7 @@ module Playbook
                         default: []
       prop :colors, type: Playbook::Props::Array,
                     default: []
+      prop :custom_options, default: {}
       prop :drillable, type: Playbook::Props::Boolean, default: false
       prop :grouped, type: Playbook::Props::Boolean, default: false
       prop :height
@@ -19,7 +20,7 @@ module Playbook
         "treemap"
       end
 
-      def chart_options
+      def standard_options
         {
           chartData: chart_data,
           className: classname,
@@ -35,6 +36,10 @@ module Playbook
         }
       end
 
+      def chart_options
+        standard_options.deep_merge(custom_options)
+      end
+
       def classname
         generate_classname("pb_treemap_chart")
       end

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'
@@ -65,6 +66,7 @@ import * as MultipleUsers from 'pb_multiple_users/docs'
 import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
 import * as Nav from 'pb_nav/docs'
 import * as OnlineStatus from 'pb_online_status/docs'
+import * as Overlay from 'pb_overlay/docs'
 import * as Passphrase from 'pb_passphrase/docs'
 import * as PbReactPopover from 'pb_popover/docs'
 import * as Person from 'pb_person/docs'
@@ -137,6 +139,7 @@ WebpackerReact.registerComponents({
   ...Detail,
   ...Dialog,
   ...DistributionBarDocs,
+  ...Draggable,
   ...Dropdown,
   ...FileUpload,
   ...Filter,
@@ -168,6 +171,7 @@ WebpackerReact.registerComponents({
   ...MultipleUsersStacked,
   ...Nav,
   ...OnlineStatus,
+  ...Overlay,
   ...Passphrase,
   ...PbReactPopover,
   ...Person,

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