playbook_ui 14.22.0.pre.alpha.PLAY2132phonenumberinputvalidationtooaggressive8863 → 14.22.0.pre.alpha.PLAY2207preservesearchinputrails8526

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1d6a59e379ef07855a87f0d7307d5a76bf1de432a900d969397a397d9a10a99e
-  data.tar.gz: 372b3ab76782e480172dc12fad993af8a3344ce87f46af9890c7bd46c47186f1
+  metadata.gz: fb55b0bca007611e41aa7ce0472e8e483b7cd331474f40cb148c7b1035a49f55
+  data.tar.gz: '062979c589167bf83791e83d6ba8bdf57027f60a5f3dca112becf14c5329eeb3'
 SHA512:
-  metadata.gz: 290439859254bfa9e21304b8e4c3d3c575d329f60ad001044e9cb74e5745f30e82a4056ccc703c4cfaae45f7ec77402ea2e2e0cdfbe541371ee527d8947aadeb
-  data.tar.gz: 12344f42764d13b4412482833c296637561d36c02a86584db409d3fee0b45a053b58806e1d1ed7eb0b978c3b263b937af3948ba42296585f39e2cdd1adb5654b
+  metadata.gz: 8bcbbe90d7ab4ba8461d71468d0f12ba34c2fcda3d6254de02d4ef3b0ab9ca49009af25122de796e7e7403dbacc0241781d03fd5401516a605dc2bb831c6fd46
+  data.tar.gz: c1d521f3b072a5326b6caa43efbdd462c68d8861b91a8db031fa8c974c088e947709d0c2bfe28a46a38358232d152a01924d097214e74b7e88883a82f432e4ef

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -20,7 +20,7 @@ interface CustomCellProps {
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
   selectableRows?: boolean
   customStyle?: GenericObject
-}
+} 
 
 export const CustomCell = ({
   getValue,
@@ -35,7 +35,7 @@ export const CustomCell = ({
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
-
+    
     if (!expandedControl) {
       setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
     }
@@ -46,8 +46,8 @@ export const CustomCell = ({
 
   return (
     <div style={{ paddingLeft: `${row.depth * 1.25}em`}}>
-      <Flex
-          alignItems="center"
+      <Flex 
+          alignItems="center" 
           columnGap="xs"
           justify="start"
           orientation="row"
@@ -71,11 +71,12 @@ export const CustomCell = ({
           >
             {row.getIsExpanded() ? (
               <Icon cursor="pointer"
-                  icon="circle-play-down"
+                  icon="circle-play"
+                  rotation={90}
               />
             ) : (
               <Icon cursor="pointer"
-                  icon="circle-play"
+                  icon="circle-play"    
                />
             )}
           </button>

data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx

@@ -7,7 +7,6 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 import Flex from "../../pb_flex/_flex"
 import Caption from "../../pb_caption/_caption"
-import Icon from "../../pb_icon/_icon"
 
 import { ToggleIconButton } from "./ToggleIconButton"
 import { renderCollapsibleTrail } from "./CollapsibleTrail"
@@ -33,19 +32,17 @@ export const SubRowHeaderRow = ({
   subRowHeaders,
   table,
 }: SubRowHeaderRowProps & GlobalProps) => {
-  const { inlineRowLoading, customSort, onCustomSortClick } = useContext(AdvancedTableContext)
+  const { inlineRowLoading } = useContext(AdvancedTableContext)
 
   const numberOfColumns = table.getAllFlatColumns().length
   const rowHasChildren = row.original.children ? true : false
   const canExpand = inlineRowLoading ? rowHasChildren : row.getCanExpand()
-  const hasSubrowsToSort = row.getParentRow()?.subRows
-
 
   return (
     <tr className="custom-row bg-silver">
       <td
           className={`custom-row-first-column ${
-            isChrome() ? "chrome-styles" : ""
+          isChrome() ? "chrome-styles" : ""
           }`}
           colSpan={1}
       >
@@ -53,39 +50,21 @@ export const SubRowHeaderRow = ({
         <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
           <Flex align="center" 
               columnGap="xs"
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              //@ts-ignore
-              justifyContent={customSort && hasSubrowsToSort && hasSubrowsToSort.length > 1 ? "between" : undefined}
           >
-            <Flex columnGap="xs">
-              {enableToggleExpansion === "all" && canExpand ? (
-                <ToggleIconButton onClick={onClick} 
-                    row={row} 
-                />
-              ) : null}
-              <Caption
-                  marginLeft={canExpand ? "none" : "xs"}
-                  text={subRowHeaders[row.depth - 1]}
+            {enableToggleExpansion === "all" && canExpand ? (
+              <ToggleIconButton onClick={onClick} 
+                  row={row}
               />
-            </Flex>
-            {customSort && hasSubrowsToSort && hasSubrowsToSort.length > 1 && (
-              <button
-                  aria-label="Sort this group"
-                  className="sort-button-icon gray-icon"
-                  onClick={() => { onCustomSortClick && onCustomSortClick(row.getParentRow()?.subRows)}}
-              >
-                <Icon 
-                    cursor="pointer" 
-                    fixedWidth 
-                    icon="sort" 
-                />
-              </button>
-            )}
+            ) : null}
+            <Caption
+                marginLeft={canExpand ? "none" : "xs"}
+                text={subRowHeaders[row.depth - 1]}
+            />
           </Flex>
         </div>
       </td>
 
       <td colSpan={numberOfColumns - 1} />
     </tr>
-  );
+  )
 }

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -87,7 +87,7 @@ export function useTableState({
       // Handle grouped columns
       if (column.columns && column.columns.length > 0) {
         return {
-          header: column.header || column.label || "",
+          header: column.label || "",
           columns: buildColumns(column.columns, false),
         };
       }
@@ -95,7 +95,7 @@ export function useTableState({
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
-          header: column.header ?? column.label ?? "",
+          header: column.label || "",
         }),
       };
 

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

@@ -189,11 +189,6 @@
         box-sizing: border-box !important;
       }
     }
-    // Fixes for tooltip picking up th styling from Table kit
-    .pb_tooltip_kit {
-      font-weight: unset;
-      text-transform: unset;
-    }
   }
 
   .pb_advanced_table_body {

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

@@ -36,7 +36,6 @@ type AdvancedTableProps = {
   columnDefinitions: GenericObject[]
   columnGroupBorderColor?: "text_lt_default" | "text_lt_light" | "text_lt_lighter" | "text_dk_default" | "text_dk_light" | "text_dk_lighter"
   columnVisibilityControl?: GenericObject
-  customSort?:boolean;
   dark?: boolean
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
@@ -68,7 +67,6 @@ type AdvancedTableProps = {
   tableProps?: GenericObject
   toggleExpansionIcon?: string | string[]
   onRowSelectionChange?: (arg: RowSelectionState) => void
-  onCustomSortClick?: (arg: GenericObject[]) => void
   virtualizedRows?: boolean
   allowFullScreen?: boolean
   fullScreenControl?: (controls: FullscreenControls) => void
@@ -83,7 +81,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     columnDefinitions,
     columnGroupBorderColor,
     columnVisibilityControl,
-    customSort,
     dark = false,
     data = {},
     enableToggleExpansion = "header",
@@ -98,7 +95,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     maxHeight,
     onRowToggleClick,
     onToggleExpansionClick,
-    onCustomSortClick,
     pagination = false,
     paginationProps,
     pinnedRows,
@@ -329,7 +325,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
             columnVisibilityControl={columnVisibilityControl}
-            customSort={customSort}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}
@@ -341,7 +336,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             isActionBarVisible={isActionBarVisible}
             isFullscreen={isFullscreen}
             loading={loading}
-            onCustomSortClick={onCustomSortClick}
             onExpandByDepthClick={onExpandByDepthClick}
             pinnedRows={pinnedRows}
             responsive={responsive}

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

@@ -19,15 +19,14 @@ examples:
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
-  - advanced_table_column_styling_rails: Column Styling
-  - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
+  # - advanced_table_column_styling_rails: Column Styling
+  # - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
 
   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_custom_sort: Custom Sort
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
@@ -41,7 +40,6 @@ examples:
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
-  - advanced_table_with_custom_header: Custom Header Cell
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_column_headers: Multi-Header Columns

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

@@ -38,5 +38,3 @@ export { default as AdvancedTableRowStyling } from './_advanced_table_row_stylin
 export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
 export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
 export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
-export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
-export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'

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

@@ -30,11 +30,11 @@
                                     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", icon: "circle-play-down", cursor: "pointer" }) %>
+                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
                                 </button>
                             <% end %>
                         <% end %>
-                        <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex/flex_item") do %>       
                             <% if column[:custom_renderer].present? %>
                                 <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
                             <% elsif index.zero? %>

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -5,7 +5,7 @@
 @import "../tokens/typography";
 
 [class^=pb_badge_kit] {
-  $pb_badge_height_rounded: 16px;
+  $pb_badge_height: 18px;
 
   display: inline-flex;
   align-items: center;
@@ -13,6 +13,7 @@
   border-radius: $border_rad_light;
   padding: 0 $space_xs/2;
   border-width: 1px;
+  border-style: solid;
   border-color: $card_light;
   white-space: nowrap;
 
@@ -30,10 +31,10 @@
   }
 
   &[class*=_rounded] {
-    height: $pb_badge_height_rounded;
-    min-height: $pb_badge_height_rounded;
-    min-width: $pb_badge_height_rounded;
-    border-radius: $pb_badge_height_rounded / 2;
+    height: $pb_badge_height;
+    min-height: $pb_badge_height;
+    min-width: $pb_badge_height;
+    border-radius: $pb_badge_height / 2;
   }
 
   &[class*=_notification] {

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

@@ -1,10 +1,6 @@
 import React from 'react'
-import colors from '../../tokens/exports/_colors.module.scss'
-import barGraphTheme from '../barGraphTheme';
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-
 
+import BarGraph from '../_bar_graph'
 
 const chartData = [{
   name: 'Installation',
@@ -23,33 +19,19 @@ const chartData = [{
   data: [1111, 677, 3245, 500, 200],
 }]
 
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Custom Data Colors",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  colors: [colors.data_4, colors.data_5, colors.data_6, colors.data_7, colors.data_8],
-}
-
-const BarGraphColors = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const BarGraphColors = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
+        id="bar-colors"
+        title="Bar Graph with Custom Data Colors"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
 export default BarGraphColors

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

@@ -0,0 +1,72 @@
+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],
+  },
+]
+
+const renderIcon = (iconName, color) => {
+  return ReactDOMServer.renderToStaticMarkup(
+  <Icon
+      color={color}
+      icon={iconName}
+  />)
+};
+
+const barGraphOptions = {
+  yAxis: {
+    tickInterval: 5,
+  },
+  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,
+  },
+}
+
+const BarGraphCustom = () => (
+  <div>
+    <BarGraph
+        chartData={chartData}
+        customOptions={barGraphOptions}
+        id="happiness-dashboard"
+        legend
+        title="Bar Graph with Custom Overrides"
+    />
+  </div>
+)
+
+export default BarGraphCustom

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

@@ -0,0 +1,6 @@
+The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
+ It's important to note that certain options may require specific script imports to function properly.
+
+Note: If you are having trouble getting any Highcharts options to work, please match the formatting of our [staticOptions](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L85-L141). For example, `yAxis` will need to be wrapped with square brackets.
+
+You may also need to override any of the [defaults](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L45-L73) in order to get that options to work.

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

@@ -1,8 +1,6 @@
 import React from 'react'
-import barGraphTheme from '../barGraphTheme';
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
 
+import BarGraph from '../_bar_graph'
 
 const chartData = [{
   name: 'Installation',
@@ -21,35 +19,19 @@ const chartData = [{
   data: [1111, 677, 3245, 500, 200],
 }]
 
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: 'Solar Employment Growth by Sector, 2010-2016',
-  },
-  subtitle: {
-    text: 'Source: thesolarfoundation.com',
-  },
-  xAxis: {
-    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-}
-
-const BarGraphDefault = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const BarGraphDefault = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="bar-default"
+        subTitle="Source: thesolarfoundation.com"
+        title="Solar Employment Growth by Sector, 2010-2016"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
 export default BarGraphDefault

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

@@ -1,69 +1,39 @@
 import React from 'react'
-import barGraphTheme from '../barGraphTheme';
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
 
+import BarGraph from '../_bar_graph'
 
 const chartData = [{
   name: 'Number of Installations',
   data: [1475, 200, 3000, 654, 656],
 }]
 
-const pixelHeightChartOptions = {
-  chart: {
-    height: "300"
-  },
-  series: chartData,
-  title: {
-    text: "Fixed Height (300px)",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-};
-
-const percentageHeightChartOptions = {
-  chart: {
-    height: "50%"
-  },
-  series: chartData,
-  title: {
-    text: "Percentage Height (50%)",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-};
-
-const pixelOptions = Highcharts.merge({}, barGraphTheme, pixelHeightChartOptions)
-
-const percentageOptions = Highcharts.merge({}, barGraphTheme, percentageHeightChartOptions)
-
-const BarGraphHeight = () => (
+const BarGraphDefault = (props) => (
   <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={pixelOptions}
-      />
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        height="300"
+        id="bar-fixed-height"
+        title="Fixed Height (300px)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
+    />
 
     <br />
     <br />
 
-    <HighchartsReact
-        highcharts={Highcharts}
-        options={percentageOptions}
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        height="50%"
+        id="bar-percentage-height"
+        title="Percentage Height (50%)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
     />
   </div>
 )
 
-export default BarGraphHeight
+export default BarGraphDefault

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

@@ -1,10 +1,9 @@
 import React from 'react'
-import barGraphTheme from '../barGraphTheme';
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
 
+import BarGraph from '../_bar_graph'
 
-const chartOptions = {
+
+const barGraphOptions = {
     chart: {
         type: 'bar'
     },
@@ -23,8 +22,13 @@ const chartOptions = {
         lineWidth: 0
     },
     yAxis: {
+        min: 0,
         title: {
-            text: '',
+            text: 'Population (millions)',
+            align: 'high'
+        },
+        labels: {
+            overflow: 'justify'
         },
     },
     tooltip: {
@@ -47,16 +51,16 @@ const chartOptions = {
     }, {
         name: 'Year 2018',
         data: [1276, 1007, 4561, 746]
-    }],
+    }]
 }
 
-const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-const BarGraphHorizontal = () => (
+const BarGraphHorizontal = (props) => (
   <div>
-    <HighchartsReact
-        highcharts={Highcharts}
-        options={options}
+    <BarGraph
+        customOptions={barGraphOptions}
+        id="bar-horizontal"
+        yAxisMin={0}
+        {...props}
     />
   </div>
 )