playbook_ui 13.28.0.pre.alpha.PBNTR297gradientoverlay3029 → 13.28.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2937

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

@@ -0,0 +1,52 @@
+<%= pb_rails("table") do %>
+  <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>
+        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>
+        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>
+        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>
+<% end %>

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

@@ -4,59 +4,60 @@ import Table from '../_table'
 
 const TableAlignmentShiftRow = (props) => {
   return (
-    <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>
+    <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>
             {'Value 1a'}
             <br />
             {'Value 1a'}
             <br />
             {'Value 1a'}
-          </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>
+          </td>
+          <td>{'Value 2a'}</td>
+          <td>{'Value 3a'}</td>
+          <td>{'Value 4a'}</td>
+          <td>{'Value 5a'}</td>
+        </tr>
+        <tr shift="middle">
+          <td>
             {'Value 1b'}
             <br />
             {'Value 1b'}
             <br />
             {'Value 1b'}
-          </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>
+          </td>
+          <td>{'Value 2b'}</td>
+          <td>{'Value 3b'}</td>
+          <td>{'Value 4b'}</td>
+          <td>{'Value 5b'}</td>
+        </tr>
+        <tr shift="down">
+          <td>
             {'Value 1c'}
             <br />
             {'Value 1c'}
             <br />
             {'Value 1c'}
-          </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>
+          </td>
+          <td>{'Value 2c'}</td>
+          <td>{'Value 3c'}</td>
+          <td>{'Value 4c'}</td>
+          <td>{'Value 5c'}</td>
+        </tr>
+      </tbody>
     </Table>
-
   )
 }
 

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_rails: Row Alignment
-    - table_alignment_column_rails: Cell Alignment
-    - table_alignment_shift_row_rails: Row Shift
-    - table_alignment_shift_data_rails: Cell Shift
+    - table_alignment_row: Row Alignment
+    - table_alignment_column: Column Alignment
+    - table_alignment_shift_row: Shift Row
+    - table_alignment_shift_data: Shift Column Data
     - 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: Cell Alignment
-    - table_alignment_shift_row: Row Shift
-    - table_alignment_shift_data: Cell Shift
+    - table_alignment_column: Column Alignment
+    - table_alignment_shift_row: Shift Row
+    - table_alignment_shift_data: Shift Column Data
     - 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,4 +24,3 @@ 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,4 +19,3 @@
 @import "vertical_border";
 @import "table_header";
 @import "striped";
-@import "outer_padding";

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

@@ -30,16 +30,12 @@ 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, outer_padding_class,
-          "table-responsive-#{responsive}", separator: " "
+          vertical_border_class, striped_class, "table-responsive-#{responsive}", separator: " "
         )
       end
 
@@ -80,15 +76,6 @@ 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,6 +52,7 @@ const TableTagTable = () => {
   );
 };
 
+
 const props = {
   data: { testid: "table" },
   sticky: false
@@ -160,8 +161,3 @@ 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,7 +10,6 @@ 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: {
@@ -22,7 +21,6 @@ type TreemapChartProps = {
   }[];
   className?: string;
   colors: string[];
-  customOptions?: Partial<Highcharts.Options>;
   dark?: boolean;
   drillable: boolean;
   grouped: boolean;
@@ -41,7 +39,6 @@ const TreemapChart = ({
   data = {},
   chartData,
   colors,
-  customOptions = {},
   dark = false,
   drillable = false,
   grouped = false,
@@ -99,20 +96,20 @@ const TreemapChart = ({
 
   useEffect(() => {
     
-    setOptions(merge(staticOptions, customOptions));
+    setOptions({ ...staticOptions });
   }, [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/treemap_chart.rb

@@ -7,7 +7,6 @@ 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
@@ -20,7 +19,7 @@ module Playbook
         "treemap"
       end
 
-      def standard_options
+      def chart_options
         {
           chartData: chart_data,
           className: classname,
@@ -36,10 +35,6 @@ 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,7 +34,6 @@ 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'
@@ -66,7 +65,6 @@ 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'
@@ -139,7 +137,6 @@ WebpackerReact.registerComponents({
   ...Detail,
   ...Dialog,
   ...DistributionBarDocs,
-  ...Draggable,
   ...Dropdown,
   ...FileUpload,
   ...Filter,
@@ -171,7 +168,6 @@ WebpackerReact.registerComponents({
   ...MultipleUsersStacked,
   ...Nav,
   ...OnlineStatus,
-  ...Overlay,
   ...Passphrase,
   ...PbReactPopover,
   ...Person,

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

@@ -156,10 +156,6 @@ 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 = {
@@ -171,7 +167,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 & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
+  Position & Shadow & TextAlign & Truncate & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -474,13 +470,6 @@ 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,12 +352,6 @@ kits:
         platforms: *web
         description: 
         status: "stable"
-      - name: "overlay"
-        platforms: *react_only
-      - name: "draggable"
-        platforms: *react_only
-        description:
-        status: "beta"
   - name: message_text_patterns
     description: 
     components:
@@ -469,4 +463,5 @@ 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.
+        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"