playbook_ui 14.9.0.pre.alpha.play17004992 → 14.9.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 585093eef9e79407e25a130a2a77f097c248bc2884116fc21bc9946c53b4cfe0
-  data.tar.gz: 82327cf34bd6c8b448e67549d84243c17622d2382ee07efa8730e13544c36be1
+  metadata.gz: 47520ce9398f8aa52de58407b61451e364bb6ea6c79ef2f69b0489568423ba48
+  data.tar.gz: eef14ed7518ad125404d5e12def9432bf114f68d6aebf28441b3bb0be0289e9b
 SHA512:
-  metadata.gz: e62d590332efe256a1464c1a2dfb104cb6078ddae7003114d656b016921f4252537ce52c78265b8ab27c4bca5e1dd0c93344d32080bfc2183e75cad551d1ace0
-  data.tar.gz: 6935b07d0cadec5f1156367e0488ce352aaf2cacbe7d9310b10b064db8428e4801e4ba7805c66a53dc68a313c5ea2be87219684465c0a4f09712c5fcc057c1a3
+  metadata.gz: 3152f44d47e293ce8b18149179592c917a13d4053512cc035155444b7a4f3d9548393cdda692bd79578a4bf41a8d54361d287e36a0e05a4e960025ab00cb7875
+  data.tar.gz: bb56a8669a4faa58aa4749294711c92b28facf23439af23f628d13720d01484f2e7fc9bcf399d266b9a7d50377b04f87cd0b9be026bd0b9de7928d76d3c8bbc1

data/app/pb_kits/playbook/_playbook.scss

@@ -111,7 +111,6 @@
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';
-@import 'utilities/width';
 @import 'utilities/min_width';
 @import 'utilities/max_width';
 @import 'utilities/positioning';
@@ -127,4 +126,3 @@
 @import 'utilities/overflow';
 @import 'utilities/truncate';
 @import 'utilities/vertical_align';
-@import 'utilities/height';

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -7,7 +7,6 @@ import {
   createColumnHelper,
   getCoreRowModel,
   getExpandedRowModel,
-  getPaginationRowModel,
   getSortedRowModel,
   Row,
   useReactTable,
@@ -26,7 +25,6 @@ import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelper
 import { CustomCell } from "./Components/CustomCell"
 import { TableHeader } from "./SubKits/TableHeader"
 import { TableBody } from "./SubKits/TableBody"
-import Pagination from "../pb_pagination/_pagination"
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
@@ -44,8 +42,6 @@ type AdvancedTableProps = {
   loading?: boolean | string
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void
-  pagination?: boolean,
-  paginationProps?: GenericObject
   responsive?: "scroll" | "none",
   sortControl?: GenericObject
   tableData: GenericObject[]
@@ -71,8 +67,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     loading,
     onRowToggleClick,
     onToggleExpansionClick,
-    pagination = false,
-    paginationProps,
     responsive = "scroll",
     sortControl,
     tableData,
@@ -183,17 +177,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }
   }
 
-  const paginationInitializer = pagination ? {
-    getPaginationRowModel: getPaginationRowModel(),
-    paginateExpandedRows: false,
-    initialState: {
-        pagination: {
-            pageIndex: paginationProps?.pageIndex ?? 0,
-            pageSize: paginationProps?.pageSize ??  20,
-        },
-    },
-} : {}
-
 //initialize table
   const table = useReactTable({
     data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
@@ -206,7 +189,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     enableSortingRemoval: false,
     sortDescFirst: true,
     ...expandAndSortState(),
-    ... paginationInitializer,
     ...tableOptions,
   })
 
@@ -245,10 +227,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     className
   )
 
-  const onPageChange = (page: number) => {
-    table.setPageIndex(page - 1)
-  }
-
   return (
     <div {...ariaProps} 
         {...dataProps} 
@@ -272,45 +250,23 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             toggleExpansionIcon,
           }}
       >
-        <>
-          {pagination &&
-              <Pagination
-                  current={table.getState().pagination.pageIndex + 1}
-                  key={`pagination-top-${table.getState().pagination.pageIndex + 1}`}
-                  marginBottom="xs"
-                  onChange={onPageChange}
-                  range={paginationProps?.range ? paginationProps?.range : 5}
-                  total={table.getPageCount()}
-                  />
-          }
-          <Table
-              className={`${loading ? "content-loading" : ""}`}
-              dark={dark}
-              dataTable
-              numberSpacing="tabular"
-              responsive="none"
-              {...tableProps}
-          >
-            {children ? (
-              children
-            ) : (
-              <>
-                <TableHeader />
-                <TableBody />
-              </>
-            )}
-          </Table>
-          {pagination &&
-            <Pagination
-                current={table.getState().pagination.pageIndex + 1}
-                key={`pagination-bottom-${table.getState().pagination.pageIndex + 1}`}
-                marginTop="xs"
-                onChange={onPageChange}
-                range={paginationProps?.range ? paginationProps?.range : 5}
-                total={table.getPageCount()}
-            />
-          }
-        </>
+        <Table
+            className={`${loading ? "content-loading" : ""}`}
+            dark={dark}
+            dataTable
+            numberSpacing="tabular"
+            responsive="none"
+            {...tableProps}
+        >
+          {children ? (
+            children
+          ) : (
+            <>
+              <TableHeader />
+              <TableBody />
+            </>
+          )}
+        </Table>
       </AdvancedTableContext.Provider>
     </div>
   )

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions }) %>
+<%= pb_rails("advanced_table", props: {table_data: @table_data, column_definitions: column_definitions}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb

@@ -55,5 +55,5 @@
 
 <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

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

@@ -3,7 +3,6 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_beta_sort: Enable Sorting
-  - advanced_table_custom_cell_rails: Custom Components for Cells
 
   react:
   - advanced_table_default: Default (Required Props)
@@ -18,5 +17,3 @@ examples:
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
-  - advanced_table_pagination: Pagination
-  - advanced_table_pagination_with_props: Pagination Props

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

@@ -10,5 +10,3 @@ export { default as AdvancedTableTableProps } from './_advanced_table_table_prop
 export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
 export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
 export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
-export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
-export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'

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

@@ -4,10 +4,8 @@
                 <%= pb_rails("table/table_header", props: { tag: "div", id: item[:accessor], classname: object.th_classname, sort_menu: item[:sort_menu] }) do %>
                     <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", text_align: "end" }) do %>
                         <% if index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") %>
-                            <button
-                              class="gray-icon toggle-all-icon"
-                              onclick="expandAllRows(this); event.preventDefault();">
-                              <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
+                            <button class="gray-icon toggle-all-icon" onclick="expandAllRows(this)">
+                                <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
                             </button>
                         <% end %>
                         <%= item[:label] %>
@@ -15,4 +13,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>

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

@@ -11,9 +11,7 @@
                                 </button>
                             <% end %>
                             <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
-                                <% if column[:custom_renderer].present? %>
-                                    <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
-                                <% elsif index.zero? %>
+                                <% if index.zero? %>
                                     <% if object.depth.zero? %>
                                         <%= object.row[column[:accessor].to_sym] %>
                                     <% else %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -26,21 +26,6 @@ module Playbook
 
     private
 
-      def custom_renderer_value(column, index)
-        if index.zero?
-          if depth.zero?
-            row[column[:accessor].to_sym]
-          else
-            depth_accessors.each_with_index do |item, accessor_index|
-              key = item.to_sym
-              return row[key] if depth - 1 == accessor_index
-            end
-          end
-        else
-          row[column[:accessor].to_sym]
-        end
-      end
-
       def subrow_depth_classname
         depth.positive? ? "depth-sub-row-#{depth}" : ""
       end

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -31,12 +31,14 @@ $avatar-sizes: (
         [class^=pb_card_kit].overlay_top_center {
           left: 50%;
           transform: translateX(-50%);
+          padding: 2px !important;
         }
 
         [class^=pb_card_kit].overlay_left_center,
         [class^=pb_card_kit].overlay_right_center {
           top: 50%;
           transform: translateY(-50%);
+          padding: 2px !important;
         }
       }
 

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 type BackgroundColors = 'gradient' |
   'dark' |'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'shadow' |
@@ -145,12 +145,6 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     } : {})
   };
 
-  const dynamicInlineProps = globalInlineProps(props);
-  const combinedStyles = {
-    ...backgroundStyle,
-    ...dynamicInlineProps
-  };
-
   const Tag: React.ReactElement | any = `${tag}`;
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -164,7 +158,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
         alt={alt}
         className={classes}
         id={id}
-        style={combinedStyles}
+        style={backgroundStyle}
     >
       {children}
     </Tag>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx

@@ -1,70 +1,66 @@
 import React from 'react'
-import ReactDOMServer from 'react-dom/server'
-import BarGraph from '../_bar_graph'
-import Icon from '../../pb_icon/_icon'
 
-const chartData = [
-  {
-    name: 'Role',
-    data: [0, 200, 300, 654, 656],
-  },
-  {
-    name: 'Company',
-    data: [150, 524, 320, 440, 500],
-  },
-]
+import BarGraph from '../_bar_graph'
 
-const renderIcon = (iconName, color) => {
-  return ReactDOMServer.renderToStaticMarkup(
-  <Icon
-      color={color}
-      icon={iconName}
-  />)
-};
+const chartData = [{
+  name: 'Installation',
+  data: [1475, 200, 3000, 654, 656],
+}, {
+  name: 'Manufacturing',
+  data: [4434, 524, 2320, 440, 500],
+}, {
+  name: 'Sales & Distribution',
+  data: [3387, 743, 1344, 434, 440],
+}, {
+  name: 'Project Development',
+  data: [3227, 878, 999, 780, 1000],
+}, {
+  name: 'Other',
+  data: [1111, 677, 3245, 500, 200],
+}]
 
 const barGraphOptions = {
-  yAxis: {
-    tickInterval: 5,
+  subtitle: {
+    text: "Overwritten subtitle",
+    style: {
+      color: "red"
+    }
   },
   xAxis: {
-    categories: ['1', '2', '3', '4', '5'],
-    labels: {
-      useHTML: true,
-      formatter: function () {
-        switch (this.value) {
-          case '1':
-            return `${renderIcon('frown', 'error')}`;
-          case '2':
-            return `${renderIcon('frown', 'warning')}`;
-          case '3':
-            return `${renderIcon('frown-open', 'neutral')}`;
-          case '4':
-            return `${renderIcon('smile', 'category_7')}`;
-          case '5':
-            return `${renderIcon('smile-beam', 'success')}`;
-          default:
-            return ''
-        }
-      },
-      style: {
-        fontSize: '1.4em',
-      },
-      y: 42,
-    },
-  },
-  legend: {
-    itemMarginTop: 62,
-  },
+      labels: {
+          useHTML: true,
+          formatter: function() {
+              switch (this.value) {
+                  case 'Jan':
+                      return `<i class="far fa-apple-whole"></i> ${this.value}`
+                  case 'Feb':
+                      return `<i class="far fa-strawberry"></i> ${this.value}`
+                  case 'Mar':
+                      return `<i class="far fa-lemon"></i> ${this.value}`
+                  case 'Apr':
+                      return `<i class="far fa-pear"></i> ${this.value}`
+                  case 'May':
+                      return `<i class="far fa-peach"></i> ${this.value}`
+                  default:
+                      return ''
+              }
+          }
+      }
+  }
 }
 
-const BarGraphCustom = () => (
+const BarGraphCustom = (props) => (
   <div>
     <BarGraph
+        axisTitle="Number of Employees"
         chartData={chartData}
         customOptions={barGraphOptions}
-        id="happiness-dashboard"
-        legend
+        id="bar-custom"
+        subTitle="Subtitle to replace"
         title="Bar Graph with Custom Overrides"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb

@@ -1,42 +1,49 @@
 <% data = [{
-  name: 'Role',
-  data: [0, 200, 300, 654, 656],
+    name: 'Installation',
+    data: [1475,200,3000,654,656]
 }, {
-  name: 'Company',
-  data: [150, 524, 320, 440, 500],
+    name: 'Manufacturing',
+    data: [4434,524,2320,440,500]
+}, {
+    name: 'Sales & Distribution',
+    data: [3387,743,1344,434,440,]
+}, {
+    name: 'Project Development',
+    data: [3227,878,999,780,1000]
+}, {
+    name: 'Other',
+    data: [1111,677,3245,500,200]
 }] %>
 
 <% bar_graph_options = {
-  customOptions: {
-    yAxis: {
-      tickInterval: 5,
-    },
-    xAxis: {
-      categories: [
-        raw(pb_rails("icon", props: { icon: "frown", color: "error", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "frown", color: "warning", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "frown-open", color: "neutral", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "smile", color: "category_7", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "smile-beam", color: "success", size: "2x" }))
-      ],
-      labels: {
-        useHTML: true,
-        sytle: {
-          fontSize: '1.4em',
+    customOptions: {
+        subtitle: {
+            text: "Overwritten subtitle",
+            style: {
+                color: "red"
+            }
         },
-        y: 42,
-      },
-    },
-    legend: {
-      itemMarginTop: 62,
-    },
-  } 
+        xAxis: {
+            categories: [
+                '<i class="far fa-apple-whole"></i> Jan',
+                '<i class="far fa-strawberry"></i> Feb',
+                '<i class="far fa-lemon"></i> Mar',
+                '<i class="far fa-pear"></i> Apr',
+                '<i class="far fa-peach"></i> May'
+            ],
+            labels: {
+                useHTML: true,
+            }
+        }
+    }
 } %>
 
 <%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
     chart_data: data,
     id: "bar-default",
-    legend: true,
+    y_axis_min: 0,
+    subtitle: 'Subtitle to replace',
     title: 'Bar Graph with Custom Overrides',
     custom_options: bar_graph_options
-}) %>
+}) %>

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -1,25 +1,24 @@
 @import "./body_mixins";
 @import "../tokens/titles";
 
-[class^="pb_body_kit"] {
+[class^=pb_body_kit]{
   @include pb_body($text_lt_default);
   @each $color_name, $color_value in $pb_body_colors {
     &[class*=_#{"" + $color_name}] {
       @include pb_body($color_value);
     }
     @each $status_name, $status_value in $pb_body_status {
-      &[class*="_default_#{$status_name}"] {
+      &[class*=_default_#{$status_name}] {
         @include pb_body($status_value);
       }
     }
   }
-  @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
-    &[class*="_#{$dark_color_name}"][class*="dark"] {
+  @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
+    &[class*=_#{$dark_color_name}][class*=dark]{
       @include pb_body($dark_color_value);
     }
   }
-  b,
-  strong {
+  b, strong {
     font-weight: $bold;
   }
 
@@ -30,8 +29,7 @@
     }
   }
 
-  em,
-  i {
+  em, i {
     font-style: italic;
   }
 
@@ -41,25 +39,26 @@
   }
 
   @each $status_name, $status_value in $pb_body_status {
-    &[class*="#{$status_name}"] {
+    &[class*=#{$status_name}] {
       @include pb_body($status_value);
     }
   }
 
-  &[class*="dark"] {
+  &[class*=dark] {
     a {
       color: $active_dark;
     }
     @include pb_body_dark();
-    @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
-      &[class*="_#{$dark_color_name}"][class*="dark"] {
+    @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
+      &[class*=_#{$dark_color_name}][class*=dark]{
         @include pb_body($dark_color_value);
       }
     }
-    @each $status_name, $status_value in $pb_dark_body_status {
-      &[class*="_#{$status_name}"] {
+    @each $status_name, $status_value in $pb_body_status {
+      &[class*=_#{$status_name}] {
         @include pb_body($status_value);
       }
     }
   }
+
 }

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -3,35 +3,29 @@
 @import "../tokens/typography";
 
 $pb_body_colors: (
-  default: $text_lt_default,
-  light: $text_lt_light,
-  lighter: $text_lt_lighter,
-  link: $primary,
-  error: $error,
-  success: $text_lt_success_sm,
+  default:        $text_lt_default,
+  light:          $text_lt_light,
+  lighter:        $text_lt_lighter,
+  link:           $primary,
+  error:          $error,
+  success:        $text_lt_success_sm,
 );
 
 $pb_dark_body_colors: (
-  default: $text_dk_default,
-  light: $text_dk_light,
-  lighter: $text_dk_lighter,
-  link: $active_dark,
-  error: $error,
-  success: $text_dk_success_sm,
+  default:        $text_dk_default,
+  light:          $text_dk_light,
+  lighter:        $text_dk_lighter,
+  link:           $active_dark,
+  error:          $error,
+  success:        $text_dk_success_sm,
 );
 
 // Order is important here!
 $pb_body_status: (
-  default: $text_lt_default,
-  negative: $error,
-  dark_error: $error_dark_body,
-  positive: $text_lt_success_sm,
-);
-
-$pb_dark_body_status: (
-  default: $text_dk_default,
-  negative: $error_dark,
-  positive: $text_dk_success_sm,
+  default:        $text_lt_default,
+  negative:       $error,
+  dark_error:     $error_dark_body,
+  positive:       $text_lt_success_sm,
 );
 
 @mixin pb_body($color: $text_lt_default) {

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -13,7 +13,6 @@ const BreadCrumbsDefault = (props) => {
       <Icon
           icon="home"
           size="1x"
-          {...props}
       />
       <BreadCrumbItem
           {...props}
@@ -23,13 +22,11 @@ const BreadCrumbsDefault = (props) => {
             size="4"
             tag="span"
             text="Home"
-            {...props}
         />
       </BreadCrumbItem>
       <Icon
           icon="users"
           size="1x"
-          {...props}
       />
       <Link
           {...props}
@@ -39,20 +36,17 @@ const BreadCrumbsDefault = (props) => {
             size="4"
             tag="span"
             text="Users"
-            {...props}
         />
       </Link>
       <Icon
           icon="user"
           size="1x"
-          {...props}
       />
       <Link {...props}>
         <Title
             size="4"
             tag="span"
             text="User"
-            {...props}
         />
       </Link>
     </BreadCrumbs>