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
|