playbook_ui 15.0.0.pre.alpha.PLAY2473rowhighlightfix10512 → 15.0.0.pre.alpha.PLAY236510413
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +11 -12
- data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +2 -7
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +4 -6
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +0 -9
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +3 -3
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +0 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss +3 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx +62 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb +31 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +81 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb +25 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +40 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md +5 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb +27 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +39 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +5 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb +93 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +131 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md +14 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb +42 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +58 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb +24 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +38 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb +22 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +33 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb +118 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +144 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +60 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb +24 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +42 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb +38 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +52 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +29 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +11 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts +88 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb +1 -0
- data/app/pb_kits/playbook/{pb_pb_bar_graph/pb_bar_graph.rb → pb_pb_circle_chart/pb_circle_chart.rb} +3 -3
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx +51 -0
- data/dist/chunks/{_line_graph-BBny-YYZ.js → _line_graph-B5Dr0Huy.js} +1 -1
- data/dist/chunks/{_typeahead-CeyJ6-GF.js → _typeahead-GbjDoSSQ.js} +2 -2
- data/dist/chunks/{_weekday_stacked-BZw0f9oB.js → _weekday_stacked-DjQv3Sok.js} +3 -3
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +7 -9
- data/dist/playbook-doc.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/forms/builder/form_field_builder.rb +1 -9
- data/lib/playbook/version.rb +1 -1
- metadata +37 -38
- data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.scss +0 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx +0 -62
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb +0 -35
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +0 -49
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md +0 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md +0 -2
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb +0 -38
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +0 -51
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb +0 -46
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +0 -62
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md +0 -3
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb +0 -47
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +0 -60
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb +0 -25
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +0 -36
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +0 -44
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +0 -100
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +0 -126
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb +0 -32
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +0 -48
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb +0 -68
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +0 -81
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb +0 -31
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +0 -42
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md +0 -2
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb +0 -35
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +0 -51
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml +0 -27
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js +0 -11
- data/app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts +0 -106
- data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb +0 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx +0 -31
    
        checksums.yaml
    CHANGED
    
    | @@ -1,7 +1,7 @@ | |
| 1 1 | 
             
            ---
         | 
| 2 2 | 
             
            SHA256:
         | 
| 3 | 
            -
              metadata.gz:  | 
| 4 | 
            -
              data.tar.gz:  | 
| 3 | 
            +
              metadata.gz: c2160795c8e7884b53baf24a0caf41501a31484abfc2558b1cda1eb92c78e156
         | 
| 4 | 
            +
              data.tar.gz: 0bd79d78760dc7617e1ab5a232a703ebb5c20fda537b2bcc8e45d0f69dc36260
         | 
| 5 5 | 
             
            SHA512:
         | 
| 6 | 
            -
              metadata.gz:  | 
| 7 | 
            -
              data.tar.gz:  | 
| 6 | 
            +
              metadata.gz: '079e5354e33efd02c223d772f6ea1a0d4d16f1ac7631231e2ca5a841acc7178ab7e89f3475e6572999e6ed52a35288d3bffce23770d0321392ed532de27468a8'
         | 
| 7 | 
            +
              data.tar.gz: 54c89d7d1eeae1d607b9df1a03aa4820dce84333731b67421b57be5e935b6170953929f86c4ebe8cf79b2029bc57b5d8bebf6ce1d0a92981d460f948b2eea5b5
         | 
| @@ -1,5 +1,6 @@ | |
| 1 1 |  | 
| 2 2 |  | 
| 3 | 
            +
             | 
| 3 4 | 
             
            @import 'pb_advanced_table/advanced_table';
         | 
| 4 5 | 
             
            @import 'pb_avatar/avatar';
         | 
| 5 6 | 
             
            @import 'pb_background/background';
         | 
| @@ -32,6 +33,7 @@ | |
| 32 33 | 
             
            @import 'pb_distribution_bar/distribution_bar';
         | 
| 33 34 | 
             
            @import 'pb_draggable/draggable';
         | 
| 34 35 | 
             
            @import 'pb_dropdown/dropdown';
         | 
| 36 | 
            +
            @import 'pb_empty_state/empty_state';
         | 
| 35 37 | 
             
            @import 'pb_file_upload/file_upload';
         | 
| 36 38 | 
             
            @import 'pb_filter/filter';
         | 
| 37 39 | 
             
            @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
         | 
| @@ -107,8 +109,7 @@ | |
| 107 109 | 
             
            @import 'pb_user/user';
         | 
| 108 110 | 
             
            @import 'pb_user_badge/user_badge';
         | 
| 109 111 | 
             
            @import 'pb_weekday_stacked/weekday_stacked';
         | 
| 110 | 
            -
            @import ' | 
| 111 | 
            -
            @import 'pb_pb_bar_graph/pb_bar_graph';
         | 
| 112 | 
            +
            @import 'pb_pb_circle_chart/pb_circle_chart';
         | 
| 112 113 | 
             
            @import 'utilities/mixins';
         | 
| 113 114 | 
             
            @import 'utilities/spacing';
         | 
| 114 115 | 
             
            @import 'utilities/cursor';
         | 
| @@ -5,7 +5,6 @@ import { flexRender, Row, Cell } from "@tanstack/react-table" | |
| 5 5 | 
             
            import { GenericObject } from "../../types"
         | 
| 6 6 | 
             
            import { isChrome } from "../Utilities/BrowserCheck"
         | 
| 7 7 | 
             
            import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
         | 
| 8 | 
            -
            import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
         | 
| 9 8 |  | 
| 10 9 | 
             
            import LoadingInline from "../../pb_loading_inline/_loading_inline"
         | 
| 11 10 | 
             
            import Checkbox from "../../pb_checkbox/_checkbox"
         | 
| @@ -61,7 +60,7 @@ const TableCellRenderer = ({ | |
| 61 60 | 
             
                    const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
         | 
| 62 61 | 
             
                    const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         | 
| 63 62 | 
             
                    const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
         | 
| 64 | 
            -
             | 
| 63 | 
            +
                    
         | 
| 65 64 | 
             
                    return (
         | 
| 66 65 | 
             
                      <td
         | 
| 67 66 | 
             
                          align={cellAlignment}
         | 
| @@ -133,7 +132,6 @@ export const RegularTableView = ({ | |
| 133 132 |  | 
| 134 133 | 
             
              const columnPinning = table.getState().columnPinning || { left: [] };
         | 
| 135 134 | 
             
              const columnDefinitions = table.options.meta?.columnDefinitions || [];
         | 
| 136 | 
            -
             | 
| 137 135 | 
             
              // Row pinning
         | 
| 138 136 | 
             
              function PinnedRow({ row }: { row: Row<any> }) {
         | 
| 139 137 | 
             
                const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
         | 
| @@ -146,7 +144,7 @@ export const RegularTableView = ({ | |
| 146 144 | 
             
                        backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
         | 
| 147 145 | 
             
                        color: customRowStyle?.fontColor,
         | 
| 148 146 | 
             
                        position: 'sticky',
         | 
| 149 | 
            -
                        top:
         | 
| 147 | 
            +
                        top:   
         | 
| 150 148 | 
             
                          row.getIsPinned() === 'top'
         | 
| 151 149 | 
             
                              ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
         | 
| 152 150 | 
             
                              : undefined,
         | 
| @@ -171,20 +169,21 @@ export const RegularTableView = ({ | |
| 171 169 | 
             
              return (
         | 
| 172 170 | 
             
                <>
         | 
| 173 171 | 
             
                  {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
         | 
| 174 | 
            -
                    <PinnedRow key={row.id}
         | 
| 175 | 
            -
                        row={row}
         | 
| 172 | 
            +
                    <PinnedRow key={row.id} 
         | 
| 173 | 
            +
                        row={row} 
         | 
| 176 174 | 
             
                    />
         | 
| 177 175 | 
             
                  ))}
         | 
| 178 176 | 
             
                  {totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
         | 
| 177 | 
            +
                    const isExpandable = row.getIsExpanded();
         | 
| 179 178 | 
             
                    const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
         | 
| 179 | 
            +
                    const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
         | 
| 180 180 | 
             
                    const numberOfColumns = table.getAllFlatColumns().length;
         | 
| 181 | 
            +
                    const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0]?.cellAccessors?.length);
         | 
| 182 | 
            +
                    const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
         | 
| 183 | 
            +
                    const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
         | 
| 181 184 | 
             
                    const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
         | 
| 182 185 | 
             
                    const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
         | 
| 183 186 |  | 
| 184 | 
            -
                    // Use functions from RowUtils for consistent cell coloring
         | 
| 185 | 
            -
                    const rowColor = getRowColorClass(row, inlineRowLoading || false);
         | 
| 186 | 
            -
                    const isDataLoading = shouldShowLoadingIndicator(row, inlineRowLoading || false, columnDefinitions[0]?.cellAccessors?.length || 0);
         | 
| 187 | 
            -
             | 
| 188 187 | 
             
                    return (
         | 
| 189 188 | 
             
                      <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
         | 
| 190 189 | 
             
                        {isFirstChildofSubrow && subRowHeaders && (
         | 
| @@ -229,7 +228,7 @@ export const RegularTableView = ({ | |
| 229 228 |  | 
| 230 229 | 
             
                        {/* Display LoadingInline if Row Data is querying and there are no children already */}
         | 
| 231 230 | 
             
                        {isDataLoading && (
         | 
| 232 | 
            -
                          <tr key={`${row.id}- | 
| 231 | 
            +
                          <tr key={`${row.id}-row`}>
         | 
| 233 232 | 
             
                            <td colSpan={numberOfColumns}
         | 
| 234 233 | 
             
                                style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
         | 
| 235 234 | 
             
                            >
         | 
| @@ -244,4 +243,4 @@ export const RegularTableView = ({ | |
| 244 243 | 
             
              );
         | 
| 245 244 | 
             
            }
         | 
| 246 245 |  | 
| 247 | 
            -
            export default RegularTableView;
         | 
| 246 | 
            +
            export default RegularTableView;
         | 
| @@ -7,7 +7,6 @@ import { GenericObject } from "../../types" | |
| 7 7 |  | 
| 8 8 | 
             
            import { isChrome } from "../Utilities/BrowserCheck"
         | 
| 9 9 | 
             
            import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
         | 
| 10 | 
            -
            import { getRowColorClass } from "../Utilities/RowUtils"
         | 
| 11 10 |  | 
| 12 11 | 
             
            import LoadingInline from "../../pb_loading_inline/_loading_inline"
         | 
| 13 12 | 
             
            import Checkbox from "../../pb_checkbox/_checkbox"
         | 
| @@ -46,10 +45,10 @@ export const VirtualizedTableView = ({ | |
| 46 45 |  | 
| 47 46 | 
             
              const columnPinning = table.getState().columnPinning || { left: [] };
         | 
| 48 47 | 
             
              const sortingState = JSON.stringify(table.getState().sorting || []);
         | 
| 49 | 
            -
             | 
| 48 | 
            +
              
         | 
| 50 49 | 
             
              // Store column widths extracted from header
         | 
| 51 50 | 
             
              const [columnWidths, setColumnWidths] = useState<{[key: string]: string}>({});
         | 
| 52 | 
            -
             | 
| 51 | 
            +
              
         | 
| 53 52 | 
             
              // Function to get header cell widths
         | 
| 54 53 | 
             
              const getHeaderCellWidths = () => {
         | 
| 55 54 | 
             
                const widths: {[key: string]: string} = {};
         | 
| @@ -137,7 +136,7 @@ export const VirtualizedTableView = ({ | |
| 137 136 | 
             
                  </tr>
         | 
| 138 137 | 
             
                );
         | 
| 139 138 | 
             
              }
         | 
| 140 | 
            -
             | 
| 139 | 
            +
              
         | 
| 141 140 | 
             
              // Establish # of Parent Rows (so that Footer count does not include every single row)
         | 
| 142 141 | 
             
              const topLevelRowCount = table.getRowModel().flatRows.filter((row: Row<GenericObject>) => row.depth === 0).length;
         | 
| 143 142 |  | 
| @@ -173,9 +172,10 @@ export const VirtualizedTableView = ({ | |
| 173 172 |  | 
| 174 173 | 
             
                    if (item.type === 'row') {
         | 
| 175 174 | 
             
                      const row = item.row;
         | 
| 176 | 
            -
             | 
| 177 | 
            -
                       | 
| 178 | 
            -
                      const  | 
| 175 | 
            +
                      const isExpandable = row.getIsExpanded();
         | 
| 176 | 
            +
                      const rowHasNoChildren = row.original?.children && !row.original.children.length;
         | 
| 177 | 
            +
                      const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
         | 
| 178 | 
            +
                      const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
         | 
| 179 179 |  | 
| 180 180 | 
             
                      return (
         | 
| 181 181 | 
             
                        <tr
         | 
| @@ -10,14 +10,9 @@ export const getRowColorClass = ( | |
| 10 10 | 
             
            ): string => {
         | 
| 11 11 | 
             
              const isExpandable = row.getIsExpanded();
         | 
| 12 12 | 
             
              const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
         | 
| 13 | 
            +
              const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
         | 
| 13 14 |  | 
| 14 | 
            -
               | 
| 15 | 
            -
              const shouldShowExpandedBackground = isExpandable && (
         | 
| 16 | 
            -
                (!inlineRowLoading && row.getCanExpand()) ||
         | 
| 17 | 
            -
                (inlineRowLoading && (rowHasNoChildren || row.getCanExpand()))
         | 
| 18 | 
            -
              );
         | 
| 19 | 
            -
             | 
| 20 | 
            -
              return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "bg-white";
         | 
| 15 | 
            +
              return row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
         | 
| 21 16 | 
             
            }
         | 
| 22 17 |  | 
| 23 18 | 
             
            /**
         | 
| @@ -4,6 +4,7 @@ examples: | |
| 4 4 | 
             
              - bar_graph_default: Default
         | 
| 5 5 | 
             
              - bar_graph_legend: Legend
         | 
| 6 6 | 
             
              - bar_graph_legend_position: Legend Position
         | 
| 7 | 
            +
              - bar_graph_legend_non_clickable: Legend Non Clickable
         | 
| 7 8 | 
             
              - bar_graph_height: Height
         | 
| 8 9 | 
             
              - bar_graph_spline: Spline
         | 
| 9 10 | 
             
              - bar_graph_colors: Color Overrides
         | 
| @@ -210,12 +210,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => { | |
| 210 210 | 
             
                      className="input_wrapper"
         | 
| 211 211 | 
             
                  >
         | 
| 212 212 |  | 
| 213 | 
            -
                     | 
| 214 | 
            -
             | 
| 215 | 
            -
             | 
| 216 | 
            -
             | 
| 217 | 
            -
                      />
         | 
| 218 | 
            -
                    )}
         | 
| 213 | 
            +
                    <Caption
         | 
| 214 | 
            +
                        className="pb_date_picker_kit_label"
         | 
| 215 | 
            +
                        text={hideLabel ? null : label}
         | 
| 216 | 
            +
                    />
         | 
| 219 217 | 
             
                      <>
         | 
| 220 218 | 
             
                        <div className="date_picker_input_wrapper">
         | 
| 221 219 | 
             
                          <input
         | 
| @@ -35,7 +35,6 @@ type FixedConfirmationToastProps = { | |
| 35 35 |  | 
| 36 36 | 
             
            const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
         | 
| 37 37 | 
             
              const [showToast, toggleToast] = useState(true);
         | 
| 38 | 
            -
             | 
| 39 38 | 
             
              const {
         | 
| 40 39 | 
             
                autoClose = 0,
         | 
| 41 40 | 
             
                children,
         | 
| @@ -88,15 +87,8 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React | |
| 88 87 | 
             
                <>
         | 
| 89 88 | 
             
                  {showToast && (
         | 
| 90 89 | 
             
                    <div
         | 
| 91 | 
            -
                        aria-atomic="true"
         | 
| 92 | 
            -
                        aria-live="polite"
         | 
| 93 90 | 
             
                        className={css}
         | 
| 94 91 | 
             
                        onClick={handleClick}
         | 
| 95 | 
            -
                        onKeyDown={(e) => {
         | 
| 96 | 
            -
                          if (e.key === "Enter" || e.key === " ") handleClick();
         | 
| 97 | 
            -
                        }}
         | 
| 98 | 
            -
                        role="status"
         | 
| 99 | 
            -
                        tabIndex={0}
         | 
| 100 92 | 
             
                        {...htmlProps}
         | 
| 101 93 | 
             
                    >
         | 
| 102 94 | 
             
                      {returnedIcon && icon !== "none" && (
         | 
| @@ -119,7 +111,6 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React | |
| 119 111 |  | 
| 120 112 | 
             
                      {closeable && (
         | 
| 121 113 | 
             
                        <Icon
         | 
| 122 | 
            -
                            aria={{ "label": "Close Toast" }}
         | 
| 123 114 | 
             
                            className="pb_icon"
         | 
| 124 115 | 
             
                            cursor="pointer"
         | 
| 125 116 | 
             
                            fixedWidth={false}
         | 
| @@ -1,6 +1,6 @@ | |
| 1 | 
            -
            <%= pb_content_tag | 
| 1 | 
            +
            <%= pb_content_tag do %>
         | 
| 2 2 | 
             
                <% if object.icon_value && object.icon_value != "none" %>
         | 
| 3 | 
            -
                <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true | 
| 3 | 
            +
                <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
         | 
| 4 4 | 
             
                <% end %>
         | 
| 5 5 | 
             
                <% if content %>
         | 
| 6 6 | 
             
                    <%= content %>
         | 
| @@ -8,5 +8,5 @@ | |
| 8 8 | 
             
                    <%= pb_rails("title", props: { text: object.text, size: 4, flex: "1", classname: "pb_fixed_confirmation_toast_text" }) %>
         | 
| 9 9 | 
             
                <% end %>
         | 
| 10 10 |  | 
| 11 | 
            -
                <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true | 
| 11 | 
            +
                <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true }) if object.closeable %>
         | 
| 12 12 | 
             
            <% end %>
         | 
| @@ -91,7 +91,6 @@ | |
| 91 91 | 
             
            <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
         | 
| 92 92 | 
             
              <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
         | 
| 93 93 | 
             
              <%= form.text_field :example_text_field, props: { label: true } %>
         | 
| 94 | 
            -
              <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
         | 
| 95 94 | 
             
              <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
         | 
| 96 95 | 
             
              <%= form.email_field :example_email_field, props: { label: true } %>
         | 
| 97 96 | 
             
              <%= form.number_field :example_number_field, props: { label: true } %>
         | 
| @@ -0,0 +1,62 @@ | |
| 1 | 
            +
             | 
| 2 | 
            +
            import React, { useMemo } from 'react'
         | 
| 3 | 
            +
            import classnames from 'classnames'
         | 
| 4 | 
            +
            import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
         | 
| 5 | 
            +
            import Highcharts from "highcharts"
         | 
| 6 | 
            +
            import HighchartsReact from "highcharts-react-official"
         | 
| 7 | 
            +
            import pbCircleGraphTheme from './pbCircleChartTheme'
         | 
| 8 | 
            +
            import { globalProps } from '../utilities/globalProps'
         | 
| 9 | 
            +
             | 
| 10 | 
            +
            type PbCircleChartProps = {
         | 
| 11 | 
            +
              aria?: { [key: string]: string },
         | 
| 12 | 
            +
              className?: string,
         | 
| 13 | 
            +
              data?: { [key: string]: string },
         | 
| 14 | 
            +
              id?: string,
         | 
| 15 | 
            +
              htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
         | 
| 16 | 
            +
              options: Record<string, unknown>
         | 
| 17 | 
            +
            }
         | 
| 18 | 
            +
             | 
| 19 | 
            +
            const PbCircleChart = (props: PbCircleChartProps) => {
         | 
| 20 | 
            +
              const {
         | 
| 21 | 
            +
                aria = {},
         | 
| 22 | 
            +
              className,
         | 
| 23 | 
            +
              data = {},
         | 
| 24 | 
            +
              id,
         | 
| 25 | 
            +
              htmlOptions = {},
         | 
| 26 | 
            +
              options
         | 
| 27 | 
            +
              } = props
         | 
| 28 | 
            +
             | 
| 29 | 
            +
              const ariaProps = buildAriaProps(aria)
         | 
| 30 | 
            +
              const dataProps = buildDataProps(data)
         | 
| 31 | 
            +
              const htmlProps = buildHtmlProps(htmlOptions);
         | 
| 32 | 
            +
              const classes = classnames(buildCss('pb_pb_circle_chart'), globalProps(props), className)
         | 
| 33 | 
            +
             | 
| 34 | 
            +
              const mergedOptions = useMemo(() => {
         | 
| 35 | 
            +
                if (!options || typeof options !== "object") {
         | 
| 36 | 
            +
                  // eslint-disable-next-line no-console
         | 
| 37 | 
            +
                  console.error("❌ Invalid options passed to <PbCircleChart />", options)
         | 
| 38 | 
            +
                  return {}
         | 
| 39 | 
            +
                }
         | 
| 40 | 
            +
             | 
| 41 | 
            +
                return Highcharts.merge({}, pbCircleGraphTheme, options)
         | 
| 42 | 
            +
              }, [options])
         | 
| 43 | 
            +
             | 
| 44 | 
            +
              return (
         | 
| 45 | 
            +
             | 
| 46 | 
            +
                <div>
         | 
| 47 | 
            +
                  <HighchartsReact
         | 
| 48 | 
            +
                      containerProps={{
         | 
| 49 | 
            +
                              className: classnames(globalProps, className),
         | 
| 50 | 
            +
                              id: id,
         | 
| 51 | 
            +
                              ...ariaProps,
         | 
| 52 | 
            +
                              ...dataProps,
         | 
| 53 | 
            +
                              ...htmlProps
         | 
| 54 | 
            +
                            }}
         | 
| 55 | 
            +
                      highcharts={Highcharts}
         | 
| 56 | 
            +
                      options={mergedOptions}
         | 
| 57 | 
            +
                  />
         | 
| 58 | 
            +
                </div>
         | 
| 59 | 
            +
              )
         | 
| 60 | 
            +
            }
         | 
| 61 | 
            +
             | 
| 62 | 
            +
            export default PbCircleChart
         | 
| @@ -0,0 +1,31 @@ | |
| 1 | 
            +
            <% data = [
         | 
| 2 | 
            +
                    {
         | 
| 3 | 
            +
                      name: "Waiting for Calls",
         | 
| 4 | 
            +
                      y: 41,
         | 
| 5 | 
            +
                    },
         | 
| 6 | 
            +
                    {
         | 
| 7 | 
            +
                      name: "On Call",
         | 
| 8 | 
            +
                      y: 49,
         | 
| 9 | 
            +
                    },
         | 
| 10 | 
            +
                    {
         | 
| 11 | 
            +
                      name: "After Call",
         | 
| 12 | 
            +
                      y: 10,
         | 
| 13 | 
            +
                    },
         | 
| 14 | 
            +
                  ] %>
         | 
| 15 | 
            +
             | 
| 16 | 
            +
            <% chart_options = {
         | 
| 17 | 
            +
                series: [{
         | 
| 18 | 
            +
                  data: data,
         | 
| 19 | 
            +
                  innerSize: '100%',
         | 
| 20 | 
            +
                  borderWidth: '20',
         | 
| 21 | 
            +
                }],
         | 
| 22 | 
            +
              } %>
         | 
| 23 | 
            +
             | 
| 24 | 
            +
            <div style="position: relative;">
         | 
| 25 | 
            +
              <%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
         | 
| 26 | 
            +
             | 
| 27 | 
            +
              <div class="pb-circle-chart-block"
         | 
| 28 | 
            +
                   style="position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 1; text-align: center; pointer-events: none;">
         | 
| 29 | 
            +
                <%= pb_rails("title", props: { size: 1, tag: "div", text: "83" }) %>
         | 
| 30 | 
            +
              </div>
         | 
| 31 | 
            +
            </div>
         | 
| @@ -0,0 +1,81 @@ | |
| 1 | 
            +
            import React from "react";
         | 
| 2 | 
            +
            import { PbCircleChart, Title } from "playbook-ui";
         | 
| 3 | 
            +
             | 
| 4 | 
            +
            const data= [
         | 
| 5 | 
            +
                    {
         | 
| 6 | 
            +
                      name: "Waiting for Calls",
         | 
| 7 | 
            +
                      y: 41,
         | 
| 8 | 
            +
                    },
         | 
| 9 | 
            +
                    {
         | 
| 10 | 
            +
                      name: "On Call",
         | 
| 11 | 
            +
                      y: 49,
         | 
| 12 | 
            +
                    },
         | 
| 13 | 
            +
                    {
         | 
| 14 | 
            +
                      name: "After Call",
         | 
| 15 | 
            +
                      y: 10,
         | 
| 16 | 
            +
                    },
         | 
| 17 | 
            +
                  ]
         | 
| 18 | 
            +
             | 
| 19 | 
            +
             | 
| 20 | 
            +
            const PbCircleChartBlockContent = (props) => {
         | 
| 21 | 
            +
            const chartOptions = {
         | 
| 22 | 
            +
                series: [{
         | 
| 23 | 
            +
                  data: data,
         | 
| 24 | 
            +
                  innerSize: '100%',
         | 
| 25 | 
            +
                  borderWidth: 20,
         | 
| 26 | 
            +
                  borderColor: null,
         | 
| 27 | 
            +
                }],
         | 
| 28 | 
            +
                chart: {
         | 
| 29 | 
            +
                  events: {
         | 
| 30 | 
            +
                    render: function() {
         | 
| 31 | 
            +
                      const chart = this;
         | 
| 32 | 
            +
                      const blockElement = document.querySelector('.pb-circle-chart-block');
         | 
| 33 | 
            +
                      if (blockElement) {
         | 
| 34 | 
            +
                        blockElement.style.width = chart.chartWidth + 'px';
         | 
| 35 | 
            +
                        blockElement.style.height = chart.chartHeight + 'px';
         | 
| 36 | 
            +
                      }
         | 
| 37 | 
            +
                    },
         | 
| 38 | 
            +
                    redraw: function() {
         | 
| 39 | 
            +
                      const chart = this;
         | 
| 40 | 
            +
                      const blockElement = document.querySelector('.pb-circle-chart-block');
         | 
| 41 | 
            +
                      if (blockElement) {
         | 
| 42 | 
            +
                        blockElement.style.width = chart.chartWidth + 'px';
         | 
| 43 | 
            +
                        blockElement.style.height = chart.chartHeight + 'px';
         | 
| 44 | 
            +
                      }
         | 
| 45 | 
            +
                    }
         | 
| 46 | 
            +
                  }
         | 
| 47 | 
            +
                }
         | 
| 48 | 
            +
              }
         | 
| 49 | 
            +
             | 
| 50 | 
            +
              return (
         | 
| 51 | 
            +
                <div style={{ position: 'relative' }}>
         | 
| 52 | 
            +
                  <PbCircleChart
         | 
| 53 | 
            +
                      options={chartOptions}
         | 
| 54 | 
            +
                      {...props}
         | 
| 55 | 
            +
                  />
         | 
| 56 | 
            +
                  <div 
         | 
| 57 | 
            +
                      className="pb-circle-chart-block"
         | 
| 58 | 
            +
                      style={{
         | 
| 59 | 
            +
                        position: 'absolute',
         | 
| 60 | 
            +
                        top: 0,
         | 
| 61 | 
            +
                        left: 0,
         | 
| 62 | 
            +
                        display: 'flex',
         | 
| 63 | 
            +
                        justifyContent: 'center',
         | 
| 64 | 
            +
                        alignItems: 'center',
         | 
| 65 | 
            +
                        zIndex: 1,
         | 
| 66 | 
            +
                        textAlign: 'center',
         | 
| 67 | 
            +
                        pointerEvents: 'none'
         | 
| 68 | 
            +
                      }}
         | 
| 69 | 
            +
                  >
         | 
| 70 | 
            +
                    <Title
         | 
| 71 | 
            +
                        size={1}
         | 
| 72 | 
            +
                        tag="div"
         | 
| 73 | 
            +
                    >
         | 
| 74 | 
            +
                      {'83'}
         | 
| 75 | 
            +
                    </Title>
         | 
| 76 | 
            +
                  </div>
         | 
| 77 | 
            +
                </div>
         | 
| 78 | 
            +
              );
         | 
| 79 | 
            +
            };
         | 
| 80 | 
            +
             | 
| 81 | 
            +
            export default PbCircleChartBlockContent;
         | 
| @@ -0,0 +1,25 @@ | |
| 1 | 
            +
            <% data = [
         | 
| 2 | 
            +
                    {
         | 
| 3 | 
            +
                      name: "Waiting for Calls",
         | 
| 4 | 
            +
                      y: 41,
         | 
| 5 | 
            +
                    },
         | 
| 6 | 
            +
                    {
         | 
| 7 | 
            +
                      name: "On Call",
         | 
| 8 | 
            +
                      y: 49,
         | 
| 9 | 
            +
                    },
         | 
| 10 | 
            +
                    {
         | 
| 11 | 
            +
                      name: "After Call",
         | 
| 12 | 
            +
                      y: 10,
         | 
| 13 | 
            +
                    },
         | 
| 14 | 
            +
                  ] %>
         | 
| 15 | 
            +
             | 
| 16 | 
            +
            <% chart_options = {
         | 
| 17 | 
            +
                series: [{ data: data }],
         | 
| 18 | 
            +
                plotOptions: {
         | 
| 19 | 
            +
                  pie: {
         | 
| 20 | 
            +
                    colors: ["#144075", "#1CA05C", "#F9BB00"],
         | 
| 21 | 
            +
                  },
         | 
| 22 | 
            +
                },
         | 
| 23 | 
            +
              } %>
         | 
| 24 | 
            +
             | 
| 25 | 
            +
            <%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
         | 
| @@ -0,0 +1,40 @@ | |
| 1 | 
            +
            import React from "react";
         | 
| 2 | 
            +
            import { PbCircleChart, colors } from "playbook-ui";
         | 
| 3 | 
            +
             | 
| 4 | 
            +
            const data= [
         | 
| 5 | 
            +
                    {
         | 
| 6 | 
            +
                      name: "Waiting for Calls",
         | 
| 7 | 
            +
                      y: 41,
         | 
| 8 | 
            +
                    },
         | 
| 9 | 
            +
                    {
         | 
| 10 | 
            +
                      name: "On Call",
         | 
| 11 | 
            +
                      y: 49,
         | 
| 12 | 
            +
                    },
         | 
| 13 | 
            +
                    {
         | 
| 14 | 
            +
                      name: "After Call",
         | 
| 15 | 
            +
                      y: 10,
         | 
| 16 | 
            +
                    },
         | 
| 17 | 
            +
                  ]
         | 
| 18 | 
            +
             | 
| 19 | 
            +
             | 
| 20 | 
            +
            const PbCircleChartColorOverrides = (props) => {
         | 
| 21 | 
            +
            const chartOptions = {
         | 
| 22 | 
            +
                series: [{ data: data }],
         | 
| 23 | 
            +
                plotOptions: {
         | 
| 24 | 
            +
                  pie: {
         | 
| 25 | 
            +
                    colors: ["#144075", colors.data_4, colors.data_2], // Custom colors via hex OR Playbook color tokens
         | 
| 26 | 
            +
                  },
         | 
| 27 | 
            +
                },
         | 
| 28 | 
            +
              };
         | 
| 29 | 
            +
             | 
| 30 | 
            +
              return (
         | 
| 31 | 
            +
              <div>
         | 
| 32 | 
            +
                <PbCircleChart
         | 
| 33 | 
            +
                    options={chartOptions}
         | 
| 34 | 
            +
                    {...props}
         | 
| 35 | 
            +
                />
         | 
| 36 | 
            +
              </div>
         | 
| 37 | 
            +
            );
         | 
| 38 | 
            +
            }
         | 
| 39 | 
            +
             | 
| 40 | 
            +
            export default PbCircleChartColorOverrides;
         | 
| @@ -0,0 +1,5 @@ | |
| 1 | 
            +
            Custom data colors allow for color customization to match the needs of business requirements.
         | 
| 2 | 
            +
             | 
| 3 | 
            +
            For React, import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables. 
         | 
| 4 | 
            +
             | 
| 5 | 
            +
            For Rails, only HEX colors can be used eg: `#CA0095`
         | 
| @@ -0,0 +1,27 @@ | |
| 1 | 
            +
             | 
| 2 | 
            +
            <% data = [
         | 
| 3 | 
            +
            {
         | 
| 4 | 
            +
                name: 'Waiting for Calls',
         | 
| 5 | 
            +
                y: 41,
         | 
| 6 | 
            +
              },
         | 
| 7 | 
            +
              {
         | 
| 8 | 
            +
                name: 'On Call',
         | 
| 9 | 
            +
                y: 49,
         | 
| 10 | 
            +
              },
         | 
| 11 | 
            +
              {
         | 
| 12 | 
            +
                name: 'After Call',
         | 
| 13 | 
            +
                y: 10,
         | 
| 14 | 
            +
              },
         | 
| 15 | 
            +
            ] %>
         | 
| 16 | 
            +
             | 
| 17 | 
            +
            <% chart_options = {
         | 
| 18 | 
            +
              series: [{ data: data }],
         | 
| 19 | 
            +
              tooltip: {
         | 
| 20 | 
            +
                  headerFormat: nil,
         | 
| 21 | 
            +
                  pointFormat: '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>',
         | 
| 22 | 
            +
                  useHTML: true,
         | 
| 23 | 
            +
                },
         | 
| 24 | 
            +
              } %>
         | 
| 25 | 
            +
             | 
| 26 | 
            +
             | 
| 27 | 
            +
            <%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
         | 
| @@ -0,0 +1,39 @@ | |
| 1 | 
            +
            import React from "react";
         | 
| 2 | 
            +
            import { PbCircleChart } from "playbook-ui";
         | 
| 3 | 
            +
             | 
| 4 | 
            +
            const data = [
         | 
| 5 | 
            +
              {
         | 
| 6 | 
            +
                name: 'Waiting for Calls',
         | 
| 7 | 
            +
                y: 41,
         | 
| 8 | 
            +
              },
         | 
| 9 | 
            +
              {
         | 
| 10 | 
            +
                name: 'On Call',
         | 
| 11 | 
            +
                y: 49,
         | 
| 12 | 
            +
              },
         | 
| 13 | 
            +
              {
         | 
| 14 | 
            +
                name: 'After Call',
         | 
| 15 | 
            +
                y: 10,
         | 
| 16 | 
            +
              },
         | 
| 17 | 
            +
            ]
         | 
| 18 | 
            +
             | 
| 19 | 
            +
            const PbCircleChartCustomTooltip = (props) => {
         | 
| 20 | 
            +
            const chartOptions = {
         | 
| 21 | 
            +
                series: [{ data: data }],
         | 
| 22 | 
            +
                tooltip: {
         | 
| 23 | 
            +
                  headerFormat: null,
         | 
| 24 | 
            +
                  pointFormat: '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>',
         | 
| 25 | 
            +
                  useHTML: true,
         | 
| 26 | 
            +
                },
         | 
| 27 | 
            +
              }
         | 
| 28 | 
            +
             | 
| 29 | 
            +
              return (
         | 
| 30 | 
            +
                <div>
         | 
| 31 | 
            +
                  <PbCircleChart
         | 
| 32 | 
            +
                      options={chartOptions}
         | 
| 33 | 
            +
                      {...props}
         | 
| 34 | 
            +
                  />
         | 
| 35 | 
            +
                </div>
         | 
| 36 | 
            +
              );
         | 
| 37 | 
            +
            };
         | 
| 38 | 
            +
             | 
| 39 | 
            +
            export default PbCircleChartCustomTooltip;
         | 
| @@ -0,0 +1,5 @@ | |
| 1 | 
            +
            Custom tooltip formatting is configured through the tooltip object in the chart options: 
         | 
| 2 | 
            +
            `headerFormat` **Type**: String | when set to null will disable the header.
         | 
| 3 | 
            +
            `pointFormat` **Type**: String | defines the HTML template for each data point and supports custom HTML when `useHTML` is enabled.
         | 
| 4 | 
            +
            `useHTML` **Type**: boolean (default false) | enables HTML rendering in tooltips.
         | 
| 5 | 
            +
            `{point.name}` and `{point.y}` are useful values that can be referenced for each point in the graph.
         |