playbook_ui 15.0.0.pre.alpha.PLAY2419dialogaccessibility10324 → 15.0.0.pre.alpha.PLAY2420atfirstcolumnborderfix10588
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 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +44 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb +4 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +13 -8
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_card/_card.scss +12 -4
- data/app/pb_kits/playbook/pb_card/_card.tsx +3 -3
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +10 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +3 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +8 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +2 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +1 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +6 -4
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +48 -4
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +5 -7
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +9 -0
- 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 +1 -0
- data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx +1 -0
- data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +2 -1
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +3 -1
- data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb +5 -0
- data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx +24 -0
- data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +1 -0
- 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 +11 -0
- data/app/pb_kits/playbook/pb_nav/_item.tsx +19 -5
- data/app/pb_kits/playbook/pb_nav/item.html.erb +6 -2
- 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 +62 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb +35 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +49 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md +1 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md +2 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb +38 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +51 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb +46 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +62 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md +3 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb +47 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +60 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb +25 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +36 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +44 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +100 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +126 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb +32 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +48 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb +68 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +81 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb +31 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +42 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md +2 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb +35 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +51 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml +27 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js +11 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts +106 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb +1 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb +28 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx +31 -0
- 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_circle_chart/pb_circle_chart.rb +28 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx +51 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +3 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.html.erb +41 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.jsx +80 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.md +1 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -3
- data/app/pb_kits/playbook/pb_text_input/text_input.test.js +38 -0
- data/dist/chunks/{_line_graph-pjRvO-Xb.js → _line_graph-CUfJ7E4h.js} +1 -1
- data/dist/chunks/{_typeahead-CZo22jaG.js → _typeahead-DCp1lVJx.js} +2 -2
- data/dist/chunks/_weekday_stacked-YwRTPuBs.js +37 -0
- data/dist/chunks/{lib-CY5ZPzic.js → lib-BTs5acfO.js} +1 -1
- data/dist/chunks/{pb_form_validation-D3b0JKHH.js → pb_form_validation-CKkaQFX3.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +15 -1
- 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 +37 -2
- data/lib/playbook/version.rb +1 -1
- metadata +77 -8
- data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +0 -65
- data/dist/chunks/_weekday_stacked-CXuGHKcc.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: fb833a8775f659948f1e90084a1e418c9f1990b9b28dc15a45d461c30f5e878d
         | 
| 4 | 
            +
              data.tar.gz: 329ba8ff5ac11d588a0fd59c584589f40bcd19a47c1cc6cc5c60fa1f5adaee7b
         | 
| 5 5 | 
             
            SHA512:
         | 
| 6 | 
            -
              metadata.gz:  | 
| 7 | 
            -
              data.tar.gz:  | 
| 6 | 
            +
              metadata.gz: 6b1777937a33c8c81ba488ece823c2bd1d22b13f8566868b215282511e9661231754cbfeb15c3459239cdaa8a739d8443786995c48d9044a2888d516d86d8105
         | 
| 7 | 
            +
              data.tar.gz: 41c634981687bbc52dde755073cac4f546c2697023f420e6421c08708f6dfaa167fc5974170589c3c07997d67b963e01726ccfb7766e423771a8e857300a02e8
         | 
| @@ -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';
         | 
| @@ -108,6 +109,8 @@ | |
| 108 109 | 
             
            @import 'pb_user_badge/user_badge';
         | 
| 109 110 | 
             
            @import 'pb_weekday_stacked/weekday_stacked';
         | 
| 110 111 | 
             
            @import 'pb_empty_state/empty_state';
         | 
| 112 | 
            +
            @import 'pb_pb_bar_graph/pb_bar_graph';
         | 
| 113 | 
            +
            @import 'pb_pb_circle_chart/pb_circle_chart';
         | 
| 111 114 | 
             
            @import 'utilities/mixins';
         | 
| 112 115 | 
             
            @import 'utilities/spacing';
         | 
| 113 116 | 
             
            @import 'utilities/cursor';
         | 
| @@ -1011,18 +1011,55 @@ | |
| 1011 1011 | 
             
            .pb-advanced-table-popover-option:hover {
         | 
| 1012 1012 | 
             
              background-color: $bg_light;
         | 
| 1013 1013 | 
             
            }
         | 
| 1014 | 
            +
             | 
| 1014 1015 | 
             
            // Removes borders when Wrapped inside the Card Kit
         | 
| 1015 | 
            -
            .pb_card_kit > .pb_advanced_table  | 
| 1016 | 
            -
             | 
| 1017 | 
            -
            . | 
| 1018 | 
            -
            . | 
| 1016 | 
            +
            .pb_card_kit > .pb_advanced_table {
         | 
| 1017 | 
            +
              // Remove right border only from the actual last column
         | 
| 1018 | 
            +
              .pb_advanced_table_body tr td:last-child,
         | 
| 1019 | 
            +
              .pb_advanced_table_header tr th:last-child {
         | 
| 1020 | 
            +
                box-shadow: none !important; // prevents double up of borders on Firefox when in Card Kit
         | 
| 1019 1021 | 
             
                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-"] .pb_table.vertical-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 | 
            +
              }
         | 
| 1020 1057 | 
             
            }
         | 
| 1021 1058 |  | 
| 1022 | 
            -
            // | 
| 1023 | 
            -
            .pb_card_kit > .pb_advanced_table tr:last-child, | 
| 1059 | 
            +
            // Removes bottom borders when wrapped inside the Card Kit (keep existing behavior)
         | 
| 1060 | 
            +
            .pb_card_kit > .pb_advanced_table tr:last-child,
         | 
| 1024 1061 | 
             
            .pb_card_kit > .pb_advanced_table .last-row-cell {
         | 
| 1025 1062 | 
             
              td {
         | 
| 1026 | 
            -
                border-bottom: none !important; | 
| 1063 | 
            +
                border-bottom: none !important;
         | 
| 1027 1064 | 
             
              }
         | 
| 1028 1065 | 
             
            }
         | 
| @@ -39,5 +39,7 @@ | |
| 39 39 | 
             
                ],
         | 
| 40 40 | 
             
              },
         | 
| 41 41 | 
             
            ] %>
         | 
| 42 | 
            -
             | 
| 43 | 
            -
            <%= pb_rails(" | 
| 42 | 
            +
            <%# Adjusting for test purposes. Will revert prior to commit. %>
         | 
| 43 | 
            +
            <%= pb_rails("card", props: {})  do %>
         | 
| 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 %>
         | 
    
        data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx
    CHANGED
    
    | @@ -1,4 +1,5 @@ | |
| 1 1 | 
             
            import React from "react"
         | 
| 2 | 
            +
            import Card from "../../pb_card/_card"
         | 
| 2 3 | 
             
            import AdvancedTable from '../../pb_advanced_table/_advanced_table'
         | 
| 3 4 | 
             
            import MOCK_DATA from "./advanced_table_mock_data.json"
         | 
| 4 5 |  | 
| @@ -44,19 +45,23 @@ const AdvancedTableColumnHeadersVerticalBorder = (props) => { | |
| 44 45 | 
             
                  ],
         | 
| 45 46 | 
             
                },
         | 
| 46 47 | 
             
              ];
         | 
| 47 | 
            -
             | 
| 48 | 
            +
             | 
| 48 49 | 
             
              const tableProps = {
         | 
| 50 | 
            +
                container: false,
         | 
| 49 51 | 
             
                verticalBorder: true
         | 
| 50 52 | 
             
              }
         | 
| 51 | 
            -
             | 
| 53 | 
            +
            // Adjusted for testing purposes. Will revert prior to commit.
         | 
| 52 54 | 
             
              return (
         | 
| 53 55 | 
             
                <>
         | 
| 54 | 
            -
                  < | 
| 55 | 
            -
             | 
| 56 | 
            -
             | 
| 57 | 
            -
             | 
| 58 | 
            -
             | 
| 59 | 
            -
             | 
| 56 | 
            +
                  <Card>
         | 
| 57 | 
            +
                    <AdvancedTable
         | 
| 58 | 
            +
                        columnDefinitions={columnDefinitions}
         | 
| 59 | 
            +
                        columnGroupBorderColor="text_lt_default"
         | 
| 60 | 
            +
                        tableData={MOCK_DATA}
         | 
| 61 | 
            +
                        tableProps={tableProps}
         | 
| 62 | 
            +
                        {...props}
         | 
| 63 | 
            +
                    />
         | 
| 64 | 
            +
                  </Card>
         | 
| 60 65 | 
             
                </>
         | 
| 61 66 | 
             
              )
         | 
| 62 67 | 
             
            }
         | 
| @@ -4,7 +4,6 @@ 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
         | 
| 8 7 | 
             
              - bar_graph_height: Height
         | 
| 9 8 | 
             
              - bar_graph_spline: Spline
         | 
| 10 9 | 
             
              - 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,7 +33,8 @@ | |
| 33 33 |  | 
| 34 34 | 
             
            // Highlight styles
         | 
| 35 35 | 
             
            .pb_card_kit_highlight_top,
         | 
| 36 | 
            -
            .pb_card_kit_highlight_side | 
| 36 | 
            +
            .pb_card_kit_highlight_side,
         | 
| 37 | 
            +
            .pb_card_kit_highlight_right_side {
         | 
| 37 38 | 
             
              overflow: hidden;
         | 
| 38 39 | 
             
            }
         | 
| 39 40 |  | 
| @@ -52,13 +53,20 @@ | |
| 52 53 | 
             
              }
         | 
| 53 54 | 
             
            }
         | 
| 54 55 |  | 
| 55 | 
            -
            // Highlight side variants | 
| 56 | 
            +
            // Highlight side variants
         | 
| 56 57 | 
             
            @each $color_name, $color_value in $pb_card_highlight_colors {
         | 
| 57 58 | 
             
              .pb_card_kit_highlight_side.pb_card_kit_highlight_#{$color_name}::before {
         | 
| 58 59 | 
             
                @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
         | 
| 59 60 | 
             
              }
         | 
| 60 61 | 
             
            }
         | 
| 61 62 |  | 
| 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 | 
            +
             | 
| 62 70 | 
             
            // Card Header
         | 
| 63 71 | 
             
            .pb_card_header_kit {
         | 
| 64 72 | 
             
              flex-grow: 0;
         | 
| @@ -68,7 +76,7 @@ | |
| 68 76 | 
             
              padding: $space_sm;
         | 
| 69 77 | 
             
              border: 0;
         | 
| 70 78 | 
             
              border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
         | 
| 71 | 
            -
             | 
| 79 | 
            +
             | 
| 72 80 | 
             
              // Inherit border radius from parent card
         | 
| 73 81 | 
             
              .pb_card_kit_border_radius_xs & {
         | 
| 74 82 | 
             
                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" | "top",
         | 
| 29 | 
            +
                position?: "side" | "right_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,6 +87,16 @@ $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 | 
            +
             | 
| 90 100 | 
             
            @mixin pb_card_header_color($header_color) {
         | 
| 91 101 | 
             
              background: $header_color;
         | 
| 92 102 | 
             
            }
         | 
| @@ -4,6 +4,9 @@ | |
| 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 %>
         | 
| 7 10 | 
             
            <%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
         | 
| 8 11 | 
             
              Side Position & Category 2 Color
         | 
| 9 12 | 
             
            <% end %>
         | 
| @@ -21,6 +21,14 @@ 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 | 
            +
             | 
| 24 32 | 
             
                  <Card
         | 
| 25 33 | 
             
                      {...props}
         | 
| 26 34 | 
             
                      highlight={{ position: 'side', color: 'category_2' }}
         | 
| @@ -65,6 +65,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => { | |
| 65 65 | 
             
                    id={id}
         | 
| 66 66 | 
             
                >
         | 
| 67 67 | 
             
                  <Button
         | 
| 68 | 
            +
                      aria={aria}
         | 
| 68 69 | 
             
                      dark={dark}
         | 
| 69 70 | 
             
                      disabled={disabled}
         | 
| 70 71 | 
             
                      htmlType={type}
         | 
| @@ -78,6 +79,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => { | |
| 78 79 | 
             
                  >
         | 
| 79 80 | 
             
                    <Icon
         | 
| 80 81 | 
             
                        fixedWidth
         | 
| 82 | 
            +
                        htmlOptions={{'aria-hidden': true}}
         | 
| 81 83 | 
             
                        icon={icon}
         | 
| 82 84 | 
             
                    />
         | 
| 83 85 | 
             
                  </Button>
         | 
| @@ -210,10 +210,12 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => { | |
| 210 210 | 
             
                      className="input_wrapper"
         | 
| 211 211 | 
             
                  >
         | 
| 212 212 |  | 
| 213 | 
            -
                     | 
| 214 | 
            -
             | 
| 215 | 
            -
             | 
| 216 | 
            -
             | 
| 213 | 
            +
                    {!hideLabel && (
         | 
| 214 | 
            +
                      <Caption
         | 
| 215 | 
            +
                          className="pb_date_picker_kit_label"
         | 
| 216 | 
            +
                          text={label}
         | 
| 217 | 
            +
                      />
         | 
| 218 | 
            +
                    )}
         | 
| 217 219 | 
             
                      <>
         | 
| 218 220 | 
             
                        <div className="date_picker_input_wrapper">
         | 
| 219 221 | 
             
                          <input
         | 
| @@ -89,6 +89,48 @@ 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 | 
            +
             | 
| 92 134 | 
             
              const disabledWeekDays = () => {
         | 
| 93 135 | 
             
                return (
         | 
| 94 136 | 
             
                  [
         | 
| @@ -201,6 +243,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT | |
| 201 243 | 
             
              // |             Flatpickr initializer w/ config             |
         | 
| 202 244 | 
             
              // ===========================================================
         | 
| 203 245 |  | 
| 246 | 
            +
              const { setMinDate, setMaxDate } = getMinMaxDates()
         | 
| 247 | 
            +
             | 
| 204 248 | 
             
              flatpickr(`#${pickerId}`, {
         | 
| 205 249 | 
             
                allowInput,
         | 
| 206 250 | 
             
                closeOnSelect,
         | 
| @@ -212,8 +256,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT | |
| 212 256 | 
             
                locale: {
         | 
| 213 257 | 
             
                  rangeSeparator: ' to '
         | 
| 214 258 | 
             
                },
         | 
| 215 | 
            -
                maxDate,
         | 
| 216 | 
            -
                minDate,
         | 
| 259 | 
            +
                maxDate: setMaxDate,
         | 
| 260 | 
            +
                minDate: setMinDate,
         | 
| 217 261 | 
             
                mode,
         | 
| 218 262 | 
             
                nextArrow: '<i class="far fa-angle-right"></i>',
         | 
| 219 263 | 
             
                onOpen: [() => {
         | 
| @@ -250,7 +294,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT | |
| 250 294 |  | 
| 251 295 | 
             
              // create html option tags for desired years
         | 
| 252 296 | 
             
              let years = ''
         | 
| 253 | 
            -
              for (let year =  | 
| 297 | 
            +
              for (let year = setMaxYear; year >= setMinYear; year--) {
         | 
| 254 298 | 
             
                years += `<option value="${year}">${year}</option>`
         | 
| 255 299 | 
             
              }
         | 
| 256 300 |  | 
| @@ -323,7 +367,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT | |
| 323 367 | 
             
              }
         | 
| 324 368 | 
             
            // === End of Automatic Sync Logic ===
         | 
| 325 369 |  | 
| 326 | 
            -
             | 
| 370 | 
            +
             | 
| 327 371 | 
             
              // Adding dropdown icons to year and month select
         | 
| 328 372 | 
             
              dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
         | 
| 329 373 | 
             
              if (picker.monthElements[0].parentElement) {
         | 
| @@ -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 classes = {
         | 
| 77 | 
            +
                base: classnames("pb_dialog", buildCss("pb_dialog", size, placement), globalProps(props), className),
         | 
| 78 78 | 
             
                afterOpen: "pb_dialog_after_open",
         | 
| 79 79 | 
             
                beforeClose: "pb_dialog_before_close",
         | 
| 80 80 | 
             
              };
         | 
| @@ -93,10 +93,8 @@ const Dialog = (props: DialogProps): React.ReactElement => { | |
| 93 93 |  | 
| 94 94 | 
             
              const dynamicInlineProps = globalInlineProps(props); 
         | 
| 95 95 |  | 
| 96 | 
            -
              const  | 
| 96 | 
            +
              const wrapperClasses = classnames(
         | 
| 97 97 | 
             
                buildCss("pb_dialog_wrapper"),
         | 
| 98 | 
            -
                globalProps(props),
         | 
| 99 | 
            -
                className
         | 
| 100 98 | 
             
              );
         | 
| 101 99 |  | 
| 102 100 | 
             
              const [triggerOpened, setTriggerOpened] = useState(false),
         | 
| @@ -173,11 +171,11 @@ const Dialog = (props: DialogProps): React.ReactElement => { | |
| 173 171 | 
             
                      {...ariaProps} 
         | 
| 174 172 | 
             
                      {...dataProps}
         | 
| 175 173 | 
             
                      {...htmlProps} 
         | 
| 176 | 
            -
                      className={ | 
| 174 | 
            +
                      className={wrapperClasses}
         | 
| 177 175 | 
             
                  >
         | 
| 178 176 | 
             
                    <Modal
         | 
| 179 177 | 
             
                        ariaHideApp={false}
         | 
| 180 | 
            -
                        className={ | 
| 178 | 
            +
                        className={classes}
         | 
| 181 179 | 
             
                        closeTimeoutMS={200}
         | 
| 182 180 | 
             
                        contentLabel="Dialog"
         | 
| 183 181 | 
             
                        id={id}
         | 
| @@ -35,6 +35,7 @@ type FixedConfirmationToastProps = { | |
| 35 35 |  | 
| 36 36 | 
             
            const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
         | 
| 37 37 | 
             
              const [showToast, toggleToast] = useState(true);
         | 
| 38 | 
            +
             | 
| 38 39 | 
             
              const {
         | 
| 39 40 | 
             
                autoClose = 0,
         | 
| 40 41 | 
             
                children,
         | 
| @@ -87,8 +88,15 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React | |
| 87 88 | 
             
                <>
         | 
| 88 89 | 
             
                  {showToast && (
         | 
| 89 90 | 
             
                    <div
         | 
| 91 | 
            +
                        aria-atomic="true"
         | 
| 92 | 
            +
                        aria-live="polite"
         | 
| 90 93 | 
             
                        className={css}
         | 
| 91 94 | 
             
                        onClick={handleClick}
         | 
| 95 | 
            +
                        onKeyDown={(e) => {
         | 
| 96 | 
            +
                          if (e.key === "Enter" || e.key === " ") handleClick();
         | 
| 97 | 
            +
                        }}
         | 
| 98 | 
            +
                        role="status"
         | 
| 99 | 
            +
                        tabIndex={0}
         | 
| 92 100 | 
             
                        {...htmlProps}
         | 
| 93 101 | 
             
                    >
         | 
| 94 102 | 
             
                      {returnedIcon && icon !== "none" && (
         | 
| @@ -111,6 +119,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React | |
| 111 119 |  | 
| 112 120 | 
             
                      {closeable && (
         | 
| 113 121 | 
             
                        <Icon
         | 
| 122 | 
            +
                            aria={{ "label": "Close Toast" }}
         | 
| 114 123 | 
             
                            className="pb_icon"
         | 
| 115 124 | 
             
                            cursor="pointer"
         | 
| 116 125 | 
             
                            fixedWidth={false}
         | 
| @@ -1,6 +1,6 @@ | |
| 1 | 
            -
            <%= pb_content_tag do %>
         | 
| 1 | 
            +
            <%= pb_content_tag(:div, "aria-atomic": "true", "aria-live": "polite", role: "status", tabindex: 0, onkeydown: "if(event.key==='Enter'||event.key===' '){ this.remove(); }" ) 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, aria: { "aria-label": "#{object.icon_value} icon" } }) %>
         | 
| 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 }) if object.closeable %>
         | 
| 11 | 
            +
                <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true, aria: { "aria-label": "Close Toast" } }) if object.closeable %>
         | 
| 12 12 | 
             
            <% end %>
         | 
| @@ -91,6 +91,7 @@ | |
| 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" } %>
         | 
| 94 95 | 
             
              <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
         | 
| 95 96 | 
             
              <%= form.email_field :example_email_field, props: { label: true } %>
         | 
| 96 97 | 
             
              <%= form.number_field :example_number_field, props: { label: true } %>
         | 
| @@ -16,6 +16,7 @@ type LoadingInlineProps = { | |
| 16 16 | 
             
              htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
         | 
| 17 17 | 
             
              id?: string,
         | 
| 18 18 | 
             
              text?: string,
         | 
| 19 | 
            +
              variant?: "dotted" | "solid" ,
         | 
| 19 20 | 
             
            }
         | 
| 20 21 |  | 
| 21 22 | 
             
            const LoadingInline = (props: LoadingInlineProps) => {
         | 
| @@ -28,6 +29,7 @@ const LoadingInline = (props: LoadingInlineProps) => { | |
| 28 29 | 
             
                htmlOptions = {},
         | 
| 29 30 | 
             
                id,
         | 
| 30 31 | 
             
                text = ' Loading',
         | 
| 32 | 
            +
                variant = 'dotted',
         | 
| 31 33 | 
             
              } = props
         | 
| 32 34 |  | 
| 33 35 | 
             
              const ariaProps = buildAriaProps(aria)
         | 
| @@ -54,7 +56,7 @@ const LoadingInline = (props: LoadingInlineProps) => { | |
| 54 56 | 
             
                    <Icon
         | 
| 55 57 | 
             
                        aria={{ label: 'loading icon' }}
         | 
| 56 58 | 
             
                        fixedWidth
         | 
| 57 | 
            -
                        icon= | 
| 59 | 
            +
                        icon={variant === 'dotted' ? 'spinner' : variant === 'solid' ? 'spinner-solid' : undefined}
         | 
| 58 60 | 
             
                        pulse
         | 
| 59 61 | 
             
                    />
         | 
| 60 62 | 
             
                    {text}
         | 
| @@ -0,0 +1,24 @@ | |
| 1 | 
            +
            import React from 'react'
         | 
| 2 | 
            +
            import { LoadingInline } from 'playbook-ui'
         | 
| 3 | 
            +
             | 
| 4 | 
            +
            const LoadingInlineVariant = (props) => {
         | 
| 5 | 
            +
              return (
         | 
| 6 | 
            +
                <div>
         | 
| 7 | 
            +
                  <LoadingInline 
         | 
| 8 | 
            +
                      text=" Dotted Spinner" 
         | 
| 9 | 
            +
                      variant="dotted" 
         | 
| 10 | 
            +
                      {...props}
         | 
| 11 | 
            +
                  />
         | 
| 12 | 
            +
             | 
| 13 | 
            +
                  <br />
         | 
| 14 | 
            +
              
         | 
| 15 | 
            +
                  <LoadingInline
         | 
| 16 | 
            +
                      text=" Solid Spinner"
         | 
| 17 | 
            +
                      variant="solid"
         | 
| 18 | 
            +
                      {...props}
         | 
| 19 | 
            +
                  />
         | 
| 20 | 
            +
                </div>
         | 
| 21 | 
            +
              )
         | 
| 22 | 
            +
            }
         | 
| 23 | 
            +
             | 
| 24 | 
            +
            export default LoadingInlineVariant
         | 
| @@ -3,9 +3,11 @@ examples: | |
| 3 3 | 
             
              rails:
         | 
| 4 4 | 
             
              - loading_inline_default: Default
         | 
| 5 5 | 
             
              - loading_inline_custom: Custom Text
         | 
| 6 | 
            +
              - loading_inline_variant: Variant
         | 
| 6 7 |  | 
| 7 8 |  | 
| 8 9 |  | 
| 9 10 | 
             
              react:
         | 
| 10 11 | 
             
              - loading_inline_default: Default
         | 
| 11 12 | 
             
              - loading_inline_custom: Custom Text
         | 
| 13 | 
            +
              - loading_inline_variant: Variant
         | 
| @@ -1,6 +1,6 @@ | |
| 1 1 | 
             
            <%= pb_content_tag do %>
         | 
| 2 2 |  | 
| 3 3 | 
             
              <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
         | 
| 4 | 
            -
                <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon:  | 
| 4 | 
            +
                <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: object.spinner_icon, pulse: true }) %> <%= object.text %>
         | 
| 5 5 | 
             
              <% end %>
         | 
| 6 6 | 
             
            <% end %>
         | 
| @@ -8,10 +8,21 @@ module Playbook | |
| 8 8 | 
             
                               default: "left"
         | 
| 9 9 | 
             
                  prop :dark, type: Playbook::Props::Boolean, default: false
         | 
| 10 10 | 
             
                  prop :text, type: Playbook::Props::String, default: "Loading"
         | 
| 11 | 
            +
                  prop :variant, type: Playbook::Props::Enum,
         | 
| 12 | 
            +
                                 values: %w[dotted solid],
         | 
| 13 | 
            +
                                 default: "dotted"
         | 
| 11 14 |  | 
| 12 15 | 
             
                  def classname
         | 
| 13 16 | 
             
                    generate_classname("pb_loading_inline_kit", align)
         | 
| 14 17 | 
             
                  end
         | 
| 18 | 
            +
             | 
| 19 | 
            +
                  def spinner_icon
         | 
| 20 | 
            +
                    if variant == "dotted"
         | 
| 21 | 
            +
                      "spinner"
         | 
| 22 | 
            +
                    elsif variant == "solid"
         | 
| 23 | 
            +
                      "spinner-solid"
         | 
| 24 | 
            +
                    end
         | 
| 25 | 
            +
                  end
         | 
| 15 26 | 
             
                end
         | 
| 16 27 | 
             
              end
         | 
| 17 28 | 
             
            end
         |