playbook_ui 14.17.0 → 14.18.0.pre.alpha.PLAY2037selectinlinecareterror7490

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

@@ -5,27 +5,32 @@ examples:
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
-  - advanced_table_table_props_sticky_header: Table Props Sticky Header
+  - advanced_table_sticky_header_rails: Sticky Header
+  - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+  - advanced_table_column_border_color_rails: Column Group Border Color
   # - advanced_table_selectable_rows: Selectable Rows
   # - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
 
-
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
   - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
   - advanced_table_expanded_control: Expanded Control
+  - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
-  - advanced_table_table_props_sticky_header: Table Props Sticky Header
+  - advanced_table_sticky_header: Sticky Header
+  - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
+  - advanced_table_sticky_columns: Sticky Columns
+  - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
@@ -34,10 +39,11 @@ examples:
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
+  - advanced_table_column_border_color: Column Group Border Color
   # - advanced_table_no_subrows: Table with No Subrows
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
   - advanced_table_inline_editing: Inline Cell Editing
-  - advanced_table_fullscreen: Fullscreen
+  - advanced_table_fullscreen: Fullscreen

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

@@ -22,4 +22,9 @@ export { default as AdvancedTableSelectableRowsActions } from './_advanced_table
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
 export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
-export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
+export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
+export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
+export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
+export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
+export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
+export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -31,6 +31,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         this.toggleElement(this.target);
       }
     });
+    
+    this.hideCloseIcon()
 
     const nestedButtons = this.element
       .closest("table")
@@ -49,6 +51,11 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     });
   }
 
+  hideCloseIcon() {
+    const closeIcon = this.element.querySelector(UP_ARROW_SELECTOR);
+    closeIcon.style.display = "none";
+}
+
   showElement(elements) {
     elements.forEach((elem) => {
       elem.style.display = "table-row";

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -0,0 +1,97 @@
+@mixin advanced-table-sticky-mixin(
+  $border-color,
+  $bg-main,
+  $bg-secondary,
+  $highlight: $info_subtle
+) {
+  border-radius: 4px;
+  box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
+  display: block;
+  [class^="pb_table"].table-sm.table-card thead tr th:first-child,
+  [class^="pb_table"].table-sm:not(.no-hover).table-card
+    tbody
+    tr
+    td:first-child {
+    border-left-width: 0px !important;
+  }
+  [class^="pb_table"].table-sm.table-card thead tr th:last-child,
+  [class^="pb_table"].table-sm:not(.no-hover).table-card
+    tbody
+    tr
+    td:last-child {
+    border-right-width: 0px;
+  }
+  [class^="pb_table"].table-sm.table-card tbody tr:last-child td:first-child,
+  [class^="pb_table"].table-sm.table-card tbody tr:last-child td:last-child {
+    border-radius: 0 0 0 0;
+  }
+  .table-header-cells:first-child,
+  td:first-child,
+  .pb_table_td:first-child,
+  .checkbox-cell.checkbox-cell-header:first-child,
+  .table-header-cells.sticky-left,
+  [class*="pinned-left"] {
+    background-color: $bg-main;
+    box-shadow: $shadow_deep !important;
+    position: sticky !important;
+    left: 0;
+    z-index: 2;
+  }
+
+  .bg-silver {
+    td:first-child,
+    .sticky-left {
+      background-color: $bg-secondary;
+    }
+  }
+  .bg-row-selection {
+    td:first-child,
+    .sticky-left {
+      background-color: $highlight;
+    }
+  }
+
+  .bg-white {
+    td:first-child,
+    .sticky-left {
+      background-color: $bg-main;
+    }
+  }
+
+  .virtualized-table-row {
+    &.bg-silver td:first-child {
+      background-color: $bg-secondary;
+    }
+    &.bg-white td:first-child {
+      background-color: $bg-main;
+    }
+    &.bg-row-selection td:first-child {
+      background-color: $highlight;
+    }
+  }
+
+  .row-selection-actions-card {
+    border-right-width: 0px;
+    border-left-width: 0px;
+    position: sticky;
+    top: 0;
+    left: 0;
+    border-radius: unset;
+  }
+
+  .checkbox-cell {
+    display: table-cell !important;
+  }
+
+  .sticky-header {
+    thead {
+      th:first-child {
+        box-shadow: 1px 0 10px -2px $border-color !important;
+      }
+    }
+
+    .pb_advanced_table_header {
+      box-shadow: none !important;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -30,7 +30,7 @@
                                     class="gray-icon expand-toggle-icon"
                                     data-advanced-table="true">
                                     <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
-                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
                                 </button>
                             <% end %>
                         <% end %>

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

@@ -55,4 +55,30 @@ $background_colors: map-merge($additional_colors, $merge_kits7);
       transition: 700ms ease-in;
     }
   }
+
+  &[class*=imageoverlay] {
+    position: relative;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      background-color: inherit;
+    }
+
+    * {
+      position: relative;
+      z-index: 2;
+    }
+  }
+
+  @each $key, $value in $opacity {
+    &.imageoverlay_#{$key}::before {
+      opacity: $value;
+    }
+  }
 }

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

@@ -25,6 +25,7 @@ type BackgroundProps = {
   backgroundPosition?: ResponsiveProp<string> | string,
   backgroundRepeat?: ResponsiveProp<BackgroundRepeat> | BackgroundRepeat,
   imageUrl?: ResponsiveProp<string> | string,
+  imageOverlay?: 'opacity_1' | 'opacity_2' | 'opacity_3' | 'opacity_4' | 'opacity_5' | 'opacity_6' | 'opacity_7' | 'opacity_8' | 'opacity_9' | 'opacity_10',
   children?: React.ReactChild[] | React.ReactNode,
   className?: string,
   customColor?: string,
@@ -83,11 +84,12 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     data = {},
     htmlOptions = {},
     id,
+    imageOverlay,
     imageUrl = '',
     tag = 'div',
     transition = '',
   } = props
-  
+
   const [responsiveProps, setResponsiveProps] = useState({
     backgroundSize: getResponsiveValue(backgroundSize),
     backgroundPosition: getResponsiveValue(backgroundPosition),
@@ -132,6 +134,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
       [`pb_background_color_${resBackgroundColor}`]: resBackgroundColor && !customColor,
       [`pb_background_custom_color`]: !!customColor,
     },
+    imageOverlay ? `imageoverlay_${imageOverlay}` : "",
     className
   );
 
@@ -155,7 +158,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-  
+
   return (
     <Tag
         {...ariaProps}
@@ -168,7 +171,6 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     >
       {children}
     </Tag>
-  
   )
 }
 

data/app/pb_kits/playbook/pb_background/background.test.js

@@ -37,3 +37,8 @@ test('backgroundSize = auto', () => {
   const kit = renderKit(Background, props, { classname: "background-image", imageUrl: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", backgroundSize: 'auto' })
   expect(kit).toHaveStyle('background-size: auto')
 })
+
+test('applies correct overlay class when imageOverlay prop is provided', () => {
+  const kit = renderKit(Background, props, { imageOverlay: 'opacity_6' });
+  expect(kit).toHaveClass('imageoverlay_opacity_6');
+});

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import Background from "../../pb_background/_background"
+import Flex from "../../pb_flex/_flex"
+import FlexItem from "../../pb_flex/_flex_item"
+import Title from "../../pb_title/_title"
+
+const BackgroundOverlay = (props) => {
+  return (
+    <Background
+        alt="colorful background"
+        backgroundColor="category_21"
+        className="background lazyload"
+        imageOverlay="opacity_2"
+        imageUrl="https://unsplash.it/500/400/?image=633"
+        {...props}
+      >
+        <Flex
+            orientation="column"
+            vertical="center"
+            {...props}
+        >
+          <FlexItem>
+            <Title
+                dark
+                padding="lg"
+                size={1}
+                text="Background Kit Image"
+            />
+          </FlexItem>
+        </Flex>
+      </Background>
+  )
+}
+
+export default BackgroundOverlay

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md

@@ -0,0 +1 @@
+An overlay can be added to the background image by setting the `imageOverlay` prop and adding a `backgroundColor`. The `imageOverlay` prop can be set to any opacity ranging from `opacity_1` to `opacity_10`.

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

@@ -19,3 +19,4 @@ examples:
   - background_status_subtle: Status Subtle
   - background_category: Category
   - background_size: Size
+  - background_overlay: Overlay

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

@@ -6,3 +6,4 @@ export { default as BackgroundStatus } from './_background_status.jsx'
 export { default as BackgroundStatusSubtle } from './_background_status_subtle.jsx'
 export { default as BackgroundCategory } from './_background_category.jsx'
 export { default as BackgroundSize } from './_background_size.jsx'
+export { default as BackgroundOverlay } from './_background_overlay.jsx'

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -10,7 +10,7 @@ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { merge } from '../utilities/object' 
+import { merge } from '../utilities/object'
 
 type CircleChartProps = {
   align?: "left" | "right" | "center";

data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js

@@ -28,7 +28,7 @@ test('uses exact classname', () => {
       value: 49,
     },
     {
-      name: 'After call',
+      name: 'After Call',
       value: 10,
     },
   ]
@@ -39,7 +39,7 @@ test('uses exact classname', () => {
         id='circlechartid'
     />
   );
- 
+
   const kit = screen.getByTestId(testId);
   expect(kit).toHaveClass('pb_circle_chart');
 });

data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts

@@ -0,0 +1,53 @@
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
+
+const circleChartTheme = {
+  title: { text: "" },
+  chart: {
+    type: "pie",
+  },
+  tooltip: {
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, colors.bg_dark],
+        [1, colors.bg_dark],
+      ],
+    },
+    pointFormat:
+      '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
+      "<b>{point.y}</b>",
+    followPointer: true,
+    shadow: false,
+    borderWidth: 0,
+    borderRadius: 10,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_default,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+  },
+  plotOptions: {
+    pie: {
+      dataLabels: {
+        enabled: false,
+      },
+      innerSize: '50%',
+      borderColor: "",
+      borderWidth: null as number | null,
+      colors: [
+        colors.data_1,
+        colors.data_2,
+        colors.data_3,
+        colors.data_4,
+        colors.data_5,
+        colors.data_6,
+        colors.data_7,
+      ],
+    },
+  },
+  credits: { enabled: false }
+}
+
+export default circleChartTheme;

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>
@@ -18,7 +18,7 @@
     chart_data: data_51,
     id: "with-a-block-2",
     rounded: true,
-}) do %> 
+}) do %>
     <%= pb_rails('title', props: {text: "83", size: 1, tag: 'div'}) %>
 <% end %>
 

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx

@@ -13,7 +13,7 @@ const dataWithABlock = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx

@@ -12,7 +12,7 @@ const dataWithColors = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx

@@ -12,7 +12,7 @@ const data = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx

@@ -12,7 +12,7 @@ const data = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx

@@ -14,7 +14,7 @@ const data = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx

@@ -14,7 +14,7 @@ const CircleChartLiveData = (props) => {
       value: 49,
     },
     {
-      name: 'After call',
+      name: 'After Call',
       value: 10,
     },
   ])
@@ -29,7 +29,7 @@ const CircleChartLiveData = (props) => {
       value: 12,
     },
     {
-      name: 'After call',
+      name: 'After Call',
       value: 140,
     },
   ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+
+const data = [
+  {
+    name: 'Waiting for Calls',
+    y: 41,
+  },
+  {
+    name: 'On Call',
+    y: 49,
+  },
+  {
+    name: 'After Call',
+    y: 10,
+  },
+]
+
+const baseOptions = {
+  series: [{ data: data }],
+}
+
+const CircleChartPbStyles = () => {
+  const options = Highcharts.merge({}, circleChartTheme, baseOptions )
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default CircleChartPbStyles;

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md

@@ -0,0 +1 @@
+You don't need to use the Circle Chart Kit to apply Playbook styles to your Highcharts circle chart. Just import circleChartTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx

@@ -12,7 +12,7 @@ const dataRounded = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

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

@@ -14,6 +14,7 @@ examples:
 
   react:
   - circle_chart_default: Default Style
+  - circle_chart_pb_styles: Playbook Styles
   - circle_chart_live_data: Live Data
   - circle_chart_rounded: Rounded Corners
   - circle_chart_block: Accepts Any Block
@@ -22,7 +23,5 @@ examples:
   - circle_chart_with_legend_kit: Legend
   - circle_chart_legend_position: Legend Position
   - circle_chart_with_title: Title
-  - circle_chart_inner_sizes: Inner Circle Size Options  
+  - circle_chart_inner_sizes: Inner Circle Size Options
   - circle_chart_custom_tooltip: Tooltip Customization
-
-

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

@@ -8,4 +8,5 @@ export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend
 export { default as CircleChartLegendPosition } from './_circle_chart_legend_position.jsx'
 export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
 export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
-export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
+export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
+export { default as CircleChartPbStyles } from "./_circle_chart_pb_styles.jsx"

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss

@@ -53,4 +53,42 @@ $pb_button_styles: (
       }
     }
   }
-}
+  &.size_small {
+    @each $style in $pb_button_styles {
+      [class^=pb_button_kit][class*=_#{$style}] {
+        width: 20px;
+        height: 20px;
+        min-height: 20px;
+        border-radius: 10px;
+        line-height: 20px;
+        flex-basis: 20px;
+        min-width: 20px;
+        padding: 0;
+      }
+    }
+    // centering small icon svg
+    .pb_button_content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // rails
+      svg.pb_custom_icon {
+        height: 14px;
+        width: 14px;
+        vertical-align: middle;
+      }
+      // react (nested within an additional span)
+      > span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        > svg.pb_custom_icon {
+          height: 14px;
+          width: 14px;
+          vertical-align: middle;
+          display: inline-block;
+        }
+      }
+    }
+  }
+}