playbook_ui 13.28.0.pre.alpha.play829selectablecardalignment2978 → 13.29.0

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/_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'
@@ -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.