playbook_ui 15.0.0.pre.alpha.PLAY2420atfirstcolumnborderfix10590 → 15.0.0.pre.alpha.PLAY2422fixedconftoastaccessibility10327
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 +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +7 -44
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb +2 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +8 -12
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_card/_card.scss +4 -12
- data/app/pb_kits/playbook/pb_card/_card.tsx +3 -3
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +0 -10
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +0 -3
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +0 -8
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +0 -2
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +0 -1
- data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +0 -1
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +4 -6
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +4 -48
- data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +1 -5
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +8 -6
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +65 -0
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +2 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +0 -1
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +2 -13
- data/app/pb_kits/playbook/pb_icon/icon.rb +1 -9
- data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx +0 -1
- data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +1 -2
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +1 -1
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +1 -3
- data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -1
- data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb +0 -11
- data/app/pb_kits/playbook/pb_nav/_item.tsx +5 -19
- data/app/pb_kits/playbook/pb_nav/item.html.erb +2 -6
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -3
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +3 -2
- data/app/pb_kits/playbook/pb_text_input/text_input.test.js +0 -38
- data/dist/chunks/{_line_graph-CUfJ7E4h.js → _line_graph-CApw7aQD.js} +1 -1
- data/dist/chunks/_typeahead-J1_avqdO.js +6 -0
- data/dist/chunks/_weekday_stacked-DMSGdE48.js +37 -0
- data/dist/chunks/{lib-BTs5acfO.js → lib-CY5ZPzic.js} +1 -1
- data/dist/chunks/{pb_form_validation-CKkaQFX3.js → pb_form_validation-D3b0JKHH.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +1 -15
- 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 +2 -37
- data/lib/playbook/version.rb +1 -1
- metadata +8 -77
- data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb +0 -5
- data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx +0 -24
- 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/pb_bar_graph.rb +0 -28
- data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx +0 -31
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss +0 -3
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx +0 -62
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb +0 -31
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +0 -81
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb +0 -25
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +0 -40
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md +0 -5
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb +0 -27
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +0 -39
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +0 -5
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb +0 -93
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +0 -131
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md +0 -14
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb +0 -42
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +0 -58
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb +0 -24
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +0 -38
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb +0 -22
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +0 -33
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb +0 -118
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +0 -144
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +0 -60
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb +0 -24
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +0 -42
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb +0 -38
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +0 -52
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +0 -29
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +0 -11
- data/app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts +0 -88
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb +0 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb +0 -28
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx +0 -51
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.html.erb +0 -41
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.jsx +0 -80
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.md +0 -1
- data/dist/chunks/_typeahead-DCp1lVJx.js +0 -6
- data/dist/chunks/_weekday_stacked-YwRTPuBs.js +0 -37
    
        checksums.yaml
    CHANGED
    
    | @@ -1,7 +1,7 @@ | |
| 1 1 | 
             
            ---
         | 
| 2 2 | 
             
            SHA256:
         | 
| 3 | 
            -
              metadata.gz:  | 
| 4 | 
            -
              data.tar.gz:  | 
| 3 | 
            +
              metadata.gz: be71db65aaae3d05ad5a05e9c505672f4d5157b3a43c21324e5123b064fea3e1
         | 
| 4 | 
            +
              data.tar.gz: 9a591a8849f6905e08519883fcd212b0ecc7348b537e6348961c0daf6dede396
         | 
| 5 5 | 
             
            SHA512:
         | 
| 6 | 
            -
              metadata.gz:  | 
| 7 | 
            -
              data.tar.gz:  | 
| 6 | 
            +
              metadata.gz: 7e48c32c68eaa11b6ff4ace1b9a92eeca35e9174ecb230ba372ba4358e462c02ff8986921f0748bd16fb68edf0594cefa906d581beff1f5b7c2a813409b3afa4
         | 
| 7 | 
            +
              data.tar.gz: bd223268365e712962a7fa62c419ac6c522a995ab4d738bd0ad9d43dea585189b229bf4ac9041b15de82f7a586801eddc6d529735bb472486e6838c971b3ceda
         | 
| @@ -1,6 +1,5 @@ | |
| 1 1 |  | 
| 2 2 |  | 
| 3 | 
            -
             | 
| 4 3 | 
             
            @import 'pb_advanced_table/advanced_table';
         | 
| 5 4 | 
             
            @import 'pb_avatar/avatar';
         | 
| 6 5 | 
             
            @import 'pb_background/background';
         | 
| @@ -109,8 +108,6 @@ | |
| 109 108 | 
             
            @import 'pb_user_badge/user_badge';
         | 
| 110 109 | 
             
            @import 'pb_weekday_stacked/weekday_stacked';
         | 
| 111 110 | 
             
            @import 'pb_empty_state/empty_state';
         | 
| 112 | 
            -
            @import 'pb_pb_bar_graph/pb_bar_graph';
         | 
| 113 | 
            -
            @import 'pb_pb_circle_chart/pb_circle_chart';
         | 
| 114 111 | 
             
            @import 'utilities/mixins';
         | 
| 115 112 | 
             
            @import 'utilities/spacing';
         | 
| 116 113 | 
             
            @import 'utilities/cursor';
         | 
| @@ -1011,55 +1011,18 @@ | |
| 1011 1011 | 
             
            .pb-advanced-table-popover-option:hover {
         | 
| 1012 1012 | 
             
              background-color: $bg_light;
         | 
| 1013 1013 | 
             
            }
         | 
| 1014 | 
            -
             | 
| 1015 1014 | 
             
            // Removes borders when Wrapped inside the Card Kit
         | 
| 1016 | 
            -
            .pb_card_kit > .pb_advanced_table  | 
| 1017 | 
            -
             | 
| 1018 | 
            -
             | 
| 1019 | 
            -
             | 
| 1020 | 
            -
                box-shadow: none !important; // prevents double up of borders on Firefox when in Card Kit
         | 
| 1015 | 
            +
            .pb_card_kit > .pb_advanced_table .pb_advanced_table_body .last-cell,
         | 
| 1016 | 
            +
            .pb_card_kit > .pb_advanced_table .pb_advanced_table_header .last-header-cell,
         | 
| 1017 | 
            +
            .pb_card_kit > .pb_advanced_table .pb_advanced_table_body tr td:last-child,
         | 
| 1018 | 
            +
            .pb_card_kit > .pb_advanced_table .pb_advanced_table_header tr th:last-child {
         | 
| 1021 1019 | 
             
                border-right: none !important;
         | 
| 1022 | 
            -
              }
         | 
| 1023 | 
            -
             | 
| 1024 | 
            -
              // Without vertical border, remove all last-cell borders
         | 
| 1025 | 
            -
              .pb_table:not(.vertical-border) {
         | 
| 1026 | 
            -
                .pb_advanced_table_body .last-cell,
         | 
| 1027 | 
            -
                .pb_advanced_table_header .last-header-cell {
         | 
| 1028 | 
            -
                  box-shadow: none !important;
         | 
| 1029 | 
            -
                  border-right: none !important;
         | 
| 1030 | 
            -
                }
         | 
| 1031 | 
            -
              }
         | 
| 1032 | 
            -
             | 
| 1033 | 
            -
              // For tables WITH vertical borders, only remove border from actual last column
         | 
| 1034 | 
            -
              .pb_table.vertical-border {
         | 
| 1035 | 
            -
                .pb_advanced_table_body .last-cell:not(:last-child),
         | 
| 1036 | 
            -
                .pb_advanced_table_header .last-header-cell:not(:last-child) {
         | 
| 1037 | 
            -
                  box-shadow: none !important;
         | 
| 1038 | 
            -
                  border-right: 1px solid $border_light !important;
         | 
| 1039 | 
            -
                }
         | 
| 1040 | 
            -
             | 
| 1041 | 
            -
                // Dark mode
         | 
| 1042 | 
            -
                &.dark {
         | 
| 1043 | 
            -
                  .pb_advanced_table_body .last-cell:not(:last-child),
         | 
| 1044 | 
            -
                  .pb_advanced_table_header .last-header-cell:not(:last-child) {
         | 
| 1045 | 
            -
                    border-right: 1px solid $border_dark !important;
         | 
| 1046 | 
            -
                  }
         | 
| 1047 | 
            -
                }
         | 
| 1048 | 
            -
              }
         | 
| 1049 | 
            -
             | 
| 1050 | 
            -
              // Support column group border colors
         | 
| 1051 | 
            -
              &.pb_advanced_table[class*="column-group-border-"] {
         | 
| 1052 | 
            -
                .pb_advanced_table_body .last-cell:not(:last-child),
         | 
| 1053 | 
            -
                .pb_advanced_table_header .last-header-cell:not(:last-child) {
         | 
| 1054 | 
            -
                  border-right: 1px solid var(--column-border-color) !important;
         | 
| 1055 | 
            -
                }
         | 
| 1056 | 
            -
              }
         | 
| 1057 1020 | 
             
            }
         | 
| 1058 1021 |  | 
| 1059 | 
            -
            // | 
| 1060 | 
            -
            .pb_card_kit > .pb_advanced_table tr:last-child,
         | 
| 1022 | 
            +
            //  Removes borders when Wrapped inside the Card Kit
         | 
| 1023 | 
            +
            .pb_card_kit > .pb_advanced_table tr:last-child, 
         | 
| 1061 1024 | 
             
            .pb_card_kit > .pb_advanced_table .last-row-cell {
         | 
| 1062 1025 | 
             
              td {
         | 
| 1063 | 
            -
                border-bottom: none !important;
         | 
| 1026 | 
            +
                border-bottom: none !important; 
         | 
| 1064 1027 | 
             
              }
         | 
| 1065 1028 | 
             
            }
         | 
| @@ -39,7 +39,5 @@ | |
| 39 39 | 
             
                ],
         | 
| 40 40 | 
             
              },
         | 
| 41 41 | 
             
            ] %>
         | 
| 42 | 
            -
             | 
| 43 | 
            -
            <%= pb_rails(" | 
| 44 | 
            -
              <%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false, vertical_border: true } }) %>
         | 
| 45 | 
            -
            <% end %>
         | 
| 42 | 
            +
             | 
| 43 | 
            +
            <%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true } }) %>
         | 
    
        data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx
    CHANGED
    
    | @@ -1,5 +1,4 @@ | |
| 1 1 | 
             
            import React from "react"
         | 
| 2 | 
            -
            import Card from "../../pb_card/_card"
         | 
| 3 2 | 
             
            import AdvancedTable from '../../pb_advanced_table/_advanced_table'
         | 
| 4 3 | 
             
            import MOCK_DATA from "./advanced_table_mock_data.json"
         | 
| 5 4 |  | 
| @@ -45,22 +44,19 @@ const AdvancedTableColumnHeadersVerticalBorder = (props) => { | |
| 45 44 | 
             
                  ],
         | 
| 46 45 | 
             
                },
         | 
| 47 46 | 
             
              ];
         | 
| 48 | 
            -
             | 
| 47 | 
            +
              
         | 
| 49 48 | 
             
              const tableProps = {
         | 
| 50 49 | 
             
                verticalBorder: true
         | 
| 51 50 | 
             
              }
         | 
| 52 | 
            -
             | 
| 51 | 
            +
             | 
| 53 52 | 
             
              return (
         | 
| 54 53 | 
             
                <>
         | 
| 55 | 
            -
                  < | 
| 56 | 
            -
             | 
| 57 | 
            -
             | 
| 58 | 
            -
             | 
| 59 | 
            -
             | 
| 60 | 
            -
             | 
| 61 | 
            -
                        {...props}
         | 
| 62 | 
            -
                    />
         | 
| 63 | 
            -
                  </Card>
         | 
| 54 | 
            +
                  <AdvancedTable
         | 
| 55 | 
            +
                      columnDefinitions={columnDefinitions}
         | 
| 56 | 
            +
                      tableData={MOCK_DATA}
         | 
| 57 | 
            +
                      tableProps={tableProps}
         | 
| 58 | 
            +
                      {...props}
         | 
| 59 | 
            +
                  />
         | 
| 64 60 | 
             
                </>
         | 
| 65 61 | 
             
              )
         | 
| 66 62 | 
             
            }
         | 
| @@ -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
         | 
| @@ -20,7 +20,7 @@ | |
| 20 20 | 
             
            // Dark mode
         | 
| 21 21 | 
             
            .pb_card_kit.dark {
         | 
| 22 22 | 
             
              @include pb_card_dark;
         | 
| 23 | 
            -
             | 
| 23 | 
            +
              
         | 
| 24 24 | 
             
              &.pb_card_kit_selected {
         | 
| 25 25 | 
             
                @include pb_card_selected_dark;
         | 
| 26 26 | 
             
              }
         | 
| @@ -33,8 +33,7 @@ | |
| 33 33 |  | 
| 34 34 | 
             
            // Highlight styles
         | 
| 35 35 | 
             
            .pb_card_kit_highlight_top,
         | 
| 36 | 
            -
            .pb_card_kit_highlight_side | 
| 37 | 
            -
            .pb_card_kit_highlight_right_side {
         | 
| 36 | 
            +
            .pb_card_kit_highlight_side {
         | 
| 38 37 | 
             
              overflow: hidden;
         | 
| 39 38 | 
             
            }
         | 
| 40 39 |  | 
| @@ -53,20 +52,13 @@ | |
| 53 52 | 
             
              }
         | 
| 54 53 | 
             
            }
         | 
| 55 54 |  | 
| 56 | 
            -
            // Highlight side variants
         | 
| 55 | 
            +
            // Highlight side variants  
         | 
| 57 56 | 
             
            @each $color_name, $color_value in $pb_card_highlight_colors {
         | 
| 58 57 | 
             
              .pb_card_kit_highlight_side.pb_card_kit_highlight_#{$color_name}::before {
         | 
| 59 58 | 
             
                @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
         | 
| 60 59 | 
             
              }
         | 
| 61 60 | 
             
            }
         | 
| 62 61 |  | 
| 63 | 
            -
            // Highlight side right variants
         | 
| 64 | 
            -
            @each $color_name, $color_value in $pb_card_highlight_colors {
         | 
| 65 | 
            -
              .pb_card_kit_highlight_right_side.pb_card_kit_highlight_#{$color_name}::before {
         | 
| 66 | 
            -
                @include pb_card_right_highlight($pb_card_highlight_size, 100%, $color_value);
         | 
| 67 | 
            -
              }
         | 
| 68 | 
            -
            }
         | 
| 69 | 
            -
             | 
| 70 62 | 
             
            // Card Header
         | 
| 71 63 | 
             
            .pb_card_header_kit {
         | 
| 72 64 | 
             
              flex-grow: 0;
         | 
| @@ -76,7 +68,7 @@ | |
| 76 68 | 
             
              padding: $space_sm;
         | 
| 77 69 | 
             
              border: 0;
         | 
| 78 70 | 
             
              border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
         | 
| 79 | 
            -
             | 
| 71 | 
            +
              
         | 
| 80 72 | 
             
              // Inherit border radius from parent card
         | 
| 81 73 | 
             
              .pb_card_kit_border_radius_xs & {
         | 
| 82 74 | 
             
                border-radius: $border_radius_xs $border_radius_xs 0px 0px;
         | 
| @@ -26,7 +26,7 @@ type CardPropTypes = { | |
| 26 26 | 
             
              dragHandle?: boolean,
         | 
| 27 27 | 
             
              htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
         | 
| 28 28 | 
             
              highlight?: {
         | 
| 29 | 
            -
                position?: "side" | " | 
| 29 | 
            +
                position?: "side" | "top",
         | 
| 30 30 | 
             
                color?: string,
         | 
| 31 31 | 
             
              },
         | 
| 32 32 | 
             
              id?: string,
         | 
| @@ -56,7 +56,7 @@ const Header = (props: CardHeaderProps) => { | |
| 56 56 | 
             
              const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
         | 
| 57 57 | 
             
              const headerColorCSS = `pb_card_header_kit_${headerColor}`
         | 
| 58 58 | 
             
              const headerStripedCSS = headerColorStriped ? `pb_card_header_kit_${headerColor}_striped` : ''
         | 
| 59 | 
            -
             | 
| 59 | 
            +
              
         | 
| 60 60 | 
             
              const headerCSS = classnames(
         | 
| 61 61 | 
             
                'pb_card_header_kit',
         | 
| 62 62 | 
             
                headerColorCSS,
         | 
| @@ -108,7 +108,7 @@ const Card = (props: CardPropTypes): React.ReactElement => { | |
| 108 108 | 
             
              const borderRadiusCSS = borderRadius !== 'md' ? `pb_card_kit_border_radius_${borderRadius}` : ''
         | 
| 109 109 | 
             
              const highlightPositionCSS = highlight.position ? `pb_card_kit_highlight_${highlight.position}` : ''
         | 
| 110 110 | 
             
              const highlightColorCSS = highlight.color ? `pb_card_kit_highlight_${highlight.color}` : ''
         | 
| 111 | 
            -
             | 
| 111 | 
            +
              
         | 
| 112 112 | 
             
              const cardCss = classnames(
         | 
| 113 113 | 
             
                'pb_card_kit', // Base class
         | 
| 114 114 | 
             
                selectedCSS,
         | 
| @@ -87,16 +87,6 @@ $pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $addition | |
| 87 87 | 
             
              background: $background;
         | 
| 88 88 | 
             
            }
         | 
| 89 89 |  | 
| 90 | 
            -
            @mixin pb_card_right_highlight($width, $height, $background){
         | 
| 91 | 
            -
              content: "";
         | 
| 92 | 
            -
              position: absolute;
         | 
| 93 | 
            -
              top: 0;
         | 
| 94 | 
            -
              right: 0;
         | 
| 95 | 
            -
              width: $width;
         | 
| 96 | 
            -
              height: $height;
         | 
| 97 | 
            -
              background: $background;
         | 
| 98 | 
            -
            }
         | 
| 99 | 
            -
             | 
| 100 90 | 
             
            @mixin pb_card_header_color($header_color) {
         | 
| 101 91 | 
             
              background: $header_color;
         | 
| 102 92 | 
             
            }
         | 
| @@ -4,9 +4,6 @@ | |
| 4 4 | 
             
            <%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
         | 
| 5 5 | 
             
              Top Position & Warning Color
         | 
| 6 6 | 
             
            <% end %>
         | 
| 7 | 
            -
            <%= pb_rails("card", props: {highlight: {position: "right_side", color:"product_5_highlight"}, margin_bottom: "sm"}) do %>
         | 
| 8 | 
            -
              Right Side Position & Product 5 Highlight Color
         | 
| 9 | 
            -
            <% end %>
         | 
| 10 7 | 
             
            <%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
         | 
| 11 8 | 
             
              Side Position & Category 2 Color
         | 
| 12 9 | 
             
            <% end %>
         | 
| @@ -21,14 +21,6 @@ const CardHighlight = (props) => { | |
| 21 21 | 
             
                    {'Top Position & Warning Color'}
         | 
| 22 22 | 
             
                  </Card>
         | 
| 23 23 |  | 
| 24 | 
            -
                  <Card
         | 
| 25 | 
            -
                      {...props}
         | 
| 26 | 
            -
                      highlight={{ position: 'right_side', color: 'product_5_highlight' }}
         | 
| 27 | 
            -
                      marginBottom="sm"
         | 
| 28 | 
            -
                  >
         | 
| 29 | 
            -
                    {'Right Side Position & Product 5 Highlight Color'}
         | 
| 30 | 
            -
                  </Card>
         | 
| 31 | 
            -
             | 
| 32 24 | 
             
                  <Card
         | 
| 33 25 | 
             
                      {...props}
         | 
| 34 26 | 
             
                      highlight={{ position: 'side', color: 'category_2' }}
         | 
| @@ -65,7 +65,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => { | |
| 65 65 | 
             
                    id={id}
         | 
| 66 66 | 
             
                >
         | 
| 67 67 | 
             
                  <Button
         | 
| 68 | 
            -
                      aria={aria}
         | 
| 69 68 | 
             
                      dark={dark}
         | 
| 70 69 | 
             
                      disabled={disabled}
         | 
| 71 70 | 
             
                      htmlType={type}
         | 
| @@ -79,7 +78,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => { | |
| 79 78 | 
             
                  >
         | 
| 80 79 | 
             
                    <Icon
         | 
| 81 80 | 
             
                        fixedWidth
         | 
| 82 | 
            -
                        htmlOptions={{'aria-hidden': true}}
         | 
| 83 81 | 
             
                        icon={icon}
         | 
| 84 82 | 
             
                    />
         | 
| 85 83 | 
             
                  </Button>
         | 
| @@ -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
         | 
| @@ -89,48 +89,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT | |
| 89 89 | 
             
                }
         | 
| 90 90 | 
             
              }
         | 
| 91 91 |  | 
| 92 | 
            -
              // Helper function to get min/max years based on yearRange. If minDate/maxDate provided, grab year from those values
         | 
| 93 | 
            -
              const getMinMaxYears = () => {
         | 
| 94 | 
            -
                const [minYear, maxYear] = yearRange;
         | 
| 95 | 
            -
             | 
| 96 | 
            -
                const extractYear = (dateOption: typeof minDate | typeof maxDate): number | null => {
         | 
| 97 | 
            -
                  if (!dateOption) return null;
         | 
| 98 | 
            -
             | 
| 99 | 
            -
                  // If it's already a number, assume it's a year
         | 
| 100 | 
            -
                  if (typeof dateOption === 'number') {
         | 
| 101 | 
            -
                    return dateOption;
         | 
| 102 | 
            -
                  }
         | 
| 103 | 
            -
             | 
| 104 | 
            -
                  // If it's a string, extract year with regex
         | 
| 105 | 
            -
                  if (typeof dateOption === 'string') {
         | 
| 106 | 
            -
                    const match = dateOption.match(/\b(19|20)\d{2}\b/);
         | 
| 107 | 
            -
                    return match ? parseInt(match[0], 10) : null;
         | 
| 108 | 
            -
                  }
         | 
| 109 | 
            -
             | 
| 110 | 
            -
                  // If it's a Date object, get the year directly
         | 
| 111 | 
            -
                  if (dateOption instanceof Date) {
         | 
| 112 | 
            -
                    return dateOption.getFullYear();
         | 
| 113 | 
            -
                  }
         | 
| 114 | 
            -
             | 
| 115 | 
            -
                  return null;
         | 
| 116 | 
            -
                };
         | 
| 117 | 
            -
             | 
| 118 | 
            -
                const setMinYear = minDate ? (extractYear(minDate) ?? minYear) : minYear;
         | 
| 119 | 
            -
                const setMaxYear = maxDate ? (extractYear(maxDate) ?? maxYear) : maxYear;
         | 
| 120 | 
            -
             | 
| 121 | 
            -
                return { setMinYear, setMaxYear };
         | 
| 122 | 
            -
              };
         | 
| 123 | 
            -
             | 
| 124 | 
            -
              const { setMinYear, setMaxYear } = getMinMaxYears()
         | 
| 125 | 
            -
             | 
| 126 | 
            -
              // Helper function to get min/max dates based on yearRange
         | 
| 127 | 
            -
              const getMinMaxDates = () => {
         | 
| 128 | 
            -
                const setMinDate = minDate || `01/01/${setMinYear}`
         | 
| 129 | 
            -
                const setMaxDate = maxDate || `12/31/${setMaxYear}`
         | 
| 130 | 
            -
             | 
| 131 | 
            -
                return { setMinDate, setMaxDate }
         | 
| 132 | 
            -
              }
         | 
| 133 | 
            -
             | 
| 134 92 | 
             
              const disabledWeekDays = () => {
         | 
| 135 93 | 
             
                return (
         | 
| 136 94 | 
             
                  [
         | 
| @@ -243,8 +201,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT | |
| 243 201 | 
             
              // |             Flatpickr initializer w/ config             |
         | 
| 244 202 | 
             
              // ===========================================================
         | 
| 245 203 |  | 
| 246 | 
            -
              const { setMinDate, setMaxDate } = getMinMaxDates()
         | 
| 247 | 
            -
             | 
| 248 204 | 
             
              flatpickr(`#${pickerId}`, {
         | 
| 249 205 | 
             
                allowInput,
         | 
| 250 206 | 
             
                closeOnSelect,
         | 
| @@ -256,8 +212,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT | |
| 256 212 | 
             
                locale: {
         | 
| 257 213 | 
             
                  rangeSeparator: ' to '
         | 
| 258 214 | 
             
                },
         | 
| 259 | 
            -
                maxDate | 
| 260 | 
            -
                minDate | 
| 215 | 
            +
                maxDate,
         | 
| 216 | 
            +
                minDate,
         | 
| 261 217 | 
             
                mode,
         | 
| 262 218 | 
             
                nextArrow: '<i class="far fa-angle-right"></i>',
         | 
| 263 219 | 
             
                onOpen: [() => {
         | 
| @@ -294,7 +250,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT | |
| 294 250 |  | 
| 295 251 | 
             
              // create html option tags for desired years
         | 
| 296 252 | 
             
              let years = ''
         | 
| 297 | 
            -
              for (let year =  | 
| 253 | 
            +
              for (let year = yearRange[1]; year >= yearRange[0]; year--) {
         | 
| 298 254 | 
             
                years += `<option value="${year}">${year}</option>`
         | 
| 299 255 | 
             
              }
         | 
| 300 256 |  | 
| @@ -367,7 +323,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT | |
| 367 323 | 
             
              }
         | 
| 368 324 | 
             
            // === End of Automatic Sync Logic ===
         | 
| 369 325 |  | 
| 370 | 
            -
             | 
| 326 | 
            +
                
         | 
| 371 327 | 
             
              // Adding dropdown icons to year and month select
         | 
| 372 328 | 
             
              dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
         | 
| 373 329 | 
             
              if (picker.monthElements[0].parentElement) {
         | 
| @@ -12,14 +12,10 @@ export const CloseIcon = (props: CloseIconProps): React.ReactElement => { | |
| 12 12 | 
             
              const timesIcon = getAllIcons()["times"]
         | 
| 13 13 | 
             
              return (
         | 
| 14 14 | 
             
                <div
         | 
| 15 | 
            -
                    aria-label="Close Dialog"
         | 
| 16 15 | 
             
                    className="pb_dialog_close_icon"
         | 
| 17 | 
            -
                    onClick={onClose} | 
| 18 | 
            -
                    role="button"    
         | 
| 19 | 
            -
                    tabIndex={0}
         | 
| 16 | 
            +
                    onClick={onClose}
         | 
| 20 17 | 
             
                >
         | 
| 21 18 | 
             
                  <Icon
         | 
| 22 | 
            -
                      aria={{ "hidden": true }} 
         | 
| 23 19 | 
             
                      className="svg-inline--fa"
         | 
| 24 20 | 
             
                      customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
         | 
| 25 21 | 
             
                      fixedWidth
         | 
| @@ -73,8 +73,8 @@ const Dialog = (props: DialogProps): React.ReactElement => { | |
| 73 73 | 
             
              const ariaProps = buildAriaProps(aria);
         | 
| 74 74 | 
             
               const dataProps = buildDataProps(data)
         | 
| 75 75 | 
             
               const htmlProps = buildHtmlProps(htmlOptions);
         | 
| 76 | 
            -
              const  | 
| 77 | 
            -
                base: classnames("pb_dialog", buildCss("pb_dialog", size, placement) | 
| 76 | 
            +
              const dialogClassNames = {
         | 
| 77 | 
            +
                base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
         | 
| 78 78 | 
             
                afterOpen: "pb_dialog_after_open",
         | 
| 79 79 | 
             
                beforeClose: "pb_dialog_before_close",
         | 
| 80 80 | 
             
              };
         | 
| @@ -93,8 +93,10 @@ const Dialog = (props: DialogProps): React.ReactElement => { | |
| 93 93 |  | 
| 94 94 | 
             
              const dynamicInlineProps = globalInlineProps(props); 
         | 
| 95 95 |  | 
| 96 | 
            -
              const  | 
| 96 | 
            +
              const classes = classnames(
         | 
| 97 97 | 
             
                buildCss("pb_dialog_wrapper"),
         | 
| 98 | 
            +
                globalProps(props),
         | 
| 99 | 
            +
                className
         | 
| 98 100 | 
             
              );
         | 
| 99 101 |  | 
| 100 102 | 
             
              const [triggerOpened, setTriggerOpened] = useState(false),
         | 
| @@ -171,13 +173,13 @@ const Dialog = (props: DialogProps): React.ReactElement => { | |
| 171 173 | 
             
                      {...ariaProps} 
         | 
| 172 174 | 
             
                      {...dataProps}
         | 
| 173 175 | 
             
                      {...htmlProps} 
         | 
| 174 | 
            -
                      className={ | 
| 176 | 
            +
                      className={classes}
         | 
| 175 177 | 
             
                  >
         | 
| 176 178 | 
             
                    <Modal
         | 
| 177 179 | 
             
                        ariaHideApp={false}
         | 
| 178 | 
            -
                        className={ | 
| 180 | 
            +
                        className={dialogClassNames}
         | 
| 179 181 | 
             
                        closeTimeoutMS={200}
         | 
| 180 | 
            -
                        contentLabel=" | 
| 182 | 
            +
                        contentLabel="Minimal Modal Example"
         | 
| 181 183 | 
             
                        id={id}
         | 
| 182 184 | 
             
                        isOpen={modalIsOpened}
         | 
| 183 185 | 
             
                        onRequestClose={onClose}
         | 
| @@ -12,7 +12,7 @@ | |
| 12 12 | 
             
                    data-cancel-button-id="<%= object.cancel_button_id %>"
         | 
| 13 13 | 
             
                <% end %>
         | 
| 14 14 | 
             
            >
         | 
| 15 | 
            -
                <%= pb_content_tag(:dialog | 
| 15 | 
            +
                <%= pb_content_tag(:dialog) do %>
         | 
| 16 16 | 
             
                        <% if object.status === "" && object.title %>
         | 
| 17 17 | 
             
                            <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
         | 
| 18 18 | 
             
                        <% end %>
         | 
| @@ -0,0 +1,65 @@ | |
| 1 | 
            +
            // Three places in Nitro depend on this function inside the window scope.
         | 
| 2 | 
            +
            // We will keep this file until we remove this dependency from Nitro.
         | 
| 3 | 
            +
            const dialogHelper = () => {
         | 
| 4 | 
            +
              const openTrigger = document.querySelectorAll("[data-open-dialog]");
         | 
| 5 | 
            +
              const closeTrigger = document.querySelectorAll("[data-close-dialog]");
         | 
| 6 | 
            +
              const dialogs = document.querySelectorAll(".pb_dialog_rails")
         | 
| 7 | 
            +
             | 
| 8 | 
            +
              const loadingButton = document.querySelector('[data-disable-with="Loading"]');
         | 
| 9 | 
            +
              if (loadingButton) {
         | 
| 10 | 
            +
                loadingButton.addEventListener("click", function() {
         | 
| 11 | 
            +
                  const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
         | 
| 12 | 
            +
                  const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
         | 
| 13 | 
            +
                  let currentClass = okayLoadingButton.className;
         | 
| 14 | 
            +
                  let cancelClass = cancelButton ? cancelButton.className : "";
         | 
| 15 | 
            +
             | 
| 16 | 
            +
                  let newClass = currentClass.replace("_enabled", "_disabled_loading");
         | 
| 17 | 
            +
                  let newCancelClass = cancelClass.replace("_enabled", "_disabled");
         | 
| 18 | 
            +
             | 
| 19 | 
            +
                  // Disable the buttons
         | 
| 20 | 
            +
                  okayLoadingButton.disabled = true;
         | 
| 21 | 
            +
                  if (cancelButton) cancelButton.disabled = true;
         | 
| 22 | 
            +
             | 
| 23 | 
            +
                  okayLoadingButton.className = newClass;
         | 
| 24 | 
            +
                  if (cancelButton) cancelButton.className = newCancelClass;
         | 
| 25 | 
            +
                });
         | 
| 26 | 
            +
              }
         | 
| 27 | 
            +
             | 
| 28 | 
            +
             | 
| 29 | 
            +
              openTrigger.forEach((open) => {
         | 
| 30 | 
            +
                open.addEventListener("click", () => {
         | 
| 31 | 
            +
                  var openTriggerData = open.dataset.openDialog;
         | 
| 32 | 
            +
                  var targetDialog = document.getElementById(openTriggerData)
         | 
| 33 | 
            +
                  if (targetDialog.open) return;
         | 
| 34 | 
            +
                  targetDialog.showModal();
         | 
| 35 | 
            +
                });
         | 
| 36 | 
            +
              });
         | 
| 37 | 
            +
             | 
| 38 | 
            +
              closeTrigger.forEach((close) => {
         | 
| 39 | 
            +
                close.addEventListener("click", () => {
         | 
| 40 | 
            +
                  var closeTriggerData = close.dataset.closeDialog;
         | 
| 41 | 
            +
                  document.getElementById(closeTriggerData).close();
         | 
| 42 | 
            +
                });
         | 
| 43 | 
            +
              });
         | 
| 44 | 
            +
             | 
| 45 | 
            +
              // Close dialog box on outside click
         | 
| 46 | 
            +
              dialogs.forEach((dialogElement) => {
         | 
| 47 | 
            +
                dialogElement.addEventListener("mousedown", (event) => {
         | 
| 48 | 
            +
                  const dialogParentDataset = dialogElement.parentElement.dataset
         | 
| 49 | 
            +
                  if (dialogParentDataset.overlayClick === "overlay_close") return
         | 
| 50 | 
            +
             | 
| 51 | 
            +
                  const dialogModal = event.target.getBoundingClientRect()
         | 
| 52 | 
            +
                  const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
         | 
| 53 | 
            +
                                                    event.clientX > dialogModal.right ||
         | 
| 54 | 
            +
                                                    event.clientY < dialogModal.top ||
         | 
| 55 | 
            +
                                                    event.clientY > dialogModal.bottom
         | 
| 56 | 
            +
             | 
| 57 | 
            +
                  if (clickedOutsideDialogModal) {
         | 
| 58 | 
            +
                    dialogElement.close()
         | 
| 59 | 
            +
                    event.stopPropagation()
         | 
| 60 | 
            +
                  }
         | 
| 61 | 
            +
                })
         | 
| 62 | 
            +
              })
         | 
| 63 | 
            +
            };
         | 
| 64 | 
            +
             | 
| 65 | 
            +
            export default dialogHelper;
         | 
| @@ -2,8 +2,8 @@ | |
| 2 2 | 
             
                    <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
         | 
| 3 3 | 
             
                        <%= content.presence || object.title %>
         | 
| 4 4 |  | 
| 5 | 
            -
                        <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %>  | 
| 6 | 
            -
                            <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon) | 
| 5 | 
            +
                        <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> >
         | 
| 6 | 
            +
                            <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon) }) %>
         | 
| 7 7 | 
             
                        </button>
         | 
| 8 8 | 
             
                    <% end %>
         | 
| 9 9 | 
             
                    <%= pb_rails("section_separator") %>
         | 
| @@ -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 } %>
         | 
| @@ -20,7 +20,7 @@ export type IconSizes = "lg" | |
| 20 20 | 
             
            | ""
         | 
| 21 21 |  | 
| 22 22 | 
             
            type IconProps = {
         | 
| 23 | 
            -
              aria?: { | 
| 23 | 
            +
              aria?: {[key: string]: string},
         | 
| 24 24 | 
             
              border?: string,
         | 
| 25 25 | 
             
              className?: string,
         | 
| 26 26 | 
             
              color?: string,
         | 
| @@ -211,15 +211,7 @@ const Icon = (props: IconProps) => { | |
| 211 211 | 
             
              )
         | 
| 212 212 |  | 
| 213 213 | 
             
              aria.label ? null : aria.label = `${icon} icon`
         | 
| 214 | 
            -
             | 
| 215 | 
            -
              const normalizedAria: { [key: string]: string } = Object.fromEntries(
         | 
| 216 | 
            -
                Object.entries(aria).map(([key, value]) => [
         | 
| 217 | 
            -
                  key,
         | 
| 218 | 
            -
                  typeof value === "boolean" ? String(value) : value,
         | 
| 219 | 
            -
                ])
         | 
| 220 | 
            -
              )
         | 
| 221 | 
            -
              
         | 
| 222 | 
            -
              const ariaProps = buildAriaProps(normalizedAria)
         | 
| 214 | 
            +
              const ariaProps: {[key: string]: any} = buildAriaProps(aria)
         | 
| 223 215 | 
             
              const dataProps: {[key: string]: any} = buildDataProps(data)
         | 
| 224 216 | 
             
              const htmlProps = buildHtmlProps(htmlOptions)
         | 
| 225 217 |  | 
| @@ -230,7 +222,6 @@ const Icon = (props: IconProps) => { | |
| 230 222 | 
             
                    <>
         | 
| 231 223 | 
             
                      {
         | 
| 232 224 | 
             
                        React.cloneElement(iconElement || customIcon, {
         | 
| 233 | 
            -
                          ...ariaProps,
         | 
| 234 225 | 
             
                          ...dataProps,
         | 
| 235 226 | 
             
                          ...htmlProps,
         | 
| 236 227 | 
             
                          className: classes,
         | 
| @@ -246,7 +237,6 @@ const Icon = (props: IconProps) => { | |
| 246 237 | 
             
                  return (
         | 
| 247 238 | 
             
                    <>
         | 
| 248 239 | 
             
                      <span
         | 
| 249 | 
            -
                          {...ariaProps}
         | 
| 250 240 | 
             
                          {...dataProps}
         | 
| 251 241 | 
             
                          {...htmlProps}
         | 
| 252 242 | 
             
                          className={classesEmoji}
         | 
| @@ -260,7 +250,6 @@ const Icon = (props: IconProps) => { | |
| 260 250 | 
             
                  return (
         | 
| 261 251 | 
             
                    <>
         | 
| 262 252 | 
             
                      <i
         | 
| 263 | 
            -
                          {...ariaProps}
         | 
| 264 253 | 
             
                          {...dataProps}
         | 
| 265 254 | 
             
                          {...htmlProps}
         | 
| 266 255 | 
             
                          className={classes}
         | 
| @@ -110,20 +110,12 @@ module Playbook | |
| 110 110 | 
             
                    svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
         | 
| 111 111 | 
             
                    svg["id"] = object.id
         | 
| 112 112 | 
             
                    svg["data"] = object.data
         | 
| 113 | 
            +
                    svg["aria"] = object.aria
         | 
| 113 114 | 
             
                    svg["height"] = "auto"
         | 
| 114 115 | 
             
                    svg["width"] = "auto"
         | 
| 115 116 | 
             
                    svg["tabindex"] = object.tabindex
         | 
| 116 117 | 
             
                    fill_color = object.color || "currentColor"
         | 
| 117 118 | 
             
                    doc.at_css("path")["fill"] = fill_color
         | 
| 118 | 
            -
             | 
| 119 | 
            -
                    if object.aria.present?
         | 
| 120 | 
            -
                      object.aria.each do |key, value|
         | 
| 121 | 
            -
                        k = key.to_s
         | 
| 122 | 
            -
                        attr = k.start_with?("aria-") ? k : "aria-#{k.tr('_', '-')}"
         | 
| 123 | 
            -
                        svg[attr] = value
         | 
| 124 | 
            -
                      end
         | 
| 125 | 
            -
                    end
         | 
| 126 | 
            -
             | 
| 127 119 | 
             
                    raw doc
         | 
| 128 120 | 
             
                  rescue OpenURI::HTTPError, StandardError
         | 
| 129 121 | 
             
                    # Handle any exceptions and return an empty string
         |