playbook_ui 14.11.1 → 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5673
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 +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +18 -2
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +27 -5
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +17 -2
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +23 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +29 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +61 -4
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +13 -8
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +3 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.jsx +50 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb +38 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx +60 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx +78 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.jsx +53 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.jsx +52 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +33 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_no_subrows.json +42 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_with_id.json +299 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +6 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +15 -3
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +11 -11
- data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +12 -3
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +7 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb +9 -0
- data/app/pb_kits/playbook/pb_button/button.html.erb +2 -3
- data/app/pb_kits/playbook/pb_card/card.html.erb +21 -2
- data/app/pb_kits/playbook/pb_card/card.rb +7 -0
- data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +1 -6
- data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +3 -1
- data/app/pb_kits/playbook/pb_collapsible/collapsible.rb +3 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +24 -16
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_turbo_frames.html.erb +13 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_turbo_frames_rails.md +3 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb +1 -3
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md +7 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb +3 -9
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb +38 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md +3 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_drawer/_drawer.scss +145 -183
- data/app/pb_kits/playbook/pb_drawer/_drawer.tsx +158 -268
- data/app/pb_kits/playbook/pb_drawer/context.ts +11 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx +38 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +3 -45
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +0 -1
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx +9 -16
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx +44 -19
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.md +21 -3
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +16 -21
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx +2 -19
- data/app/pb_kits/playbook/pb_drawer/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_drawer/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx +5 -5
- data/app/pb_kits/playbook/pb_drawer/hooks/useBreakpoint.tsx +60 -0
- data/app/pb_kits/playbook/pb_drawer/hooks/useDrawerAnimation.tsx +21 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +7 -12
- data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +9 -14
- data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +6 -11
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +8 -14
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb +74 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md +3 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js +48 -14
- data/app/pb_kits/playbook/pb_icon_button/_icon_button.scss +78 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb +3 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +16 -0
- data/app/pb_kits/playbook/pb_icon_button/icon_button.rb +22 -0
- data/app/pb_kits/playbook/pb_list/item.html.erb +30 -8
- data/app/pb_kits/playbook/pb_list/item.rb +7 -0
- data/app/pb_kits/playbook/pb_list/list.html.erb +31 -11
- data/app/pb_kits/playbook/pb_list/list.rb +4 -0
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +6 -1
- data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss +4 -0
- data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx +1 -0
- data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +30 -12
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb +15 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx +24 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +20 -1
- data/app/pb_kits/playbook/pb_radio/_radio.scss +12 -8
- data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +8 -3
- data/app/pb_kits/playbook/pb_select/_select.scss +3 -5
- data/app/pb_kits/playbook/pb_select/_select.tsx +5 -1
- data/app/pb_kits/playbook/pb_select/select.html.erb +2 -2
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +9 -1
- data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.jsx +4 -1
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +17 -3
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb +3 -0
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +11 -4
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +3 -0
- data/app/pb_kits/playbook/pb_table/_table.tsx +2 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb +74 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb +74 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.html.erb +47 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_rails.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_table/index.ts +187 -88
- data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +12 -0
- data/app/pb_kits/playbook/pb_table/styles/_scroll.scss +6 -5
- data/app/pb_kits/playbook/pb_table/table.html.erb +1 -1
- data/app/pb_kits/playbook/pb_table/table.rb +17 -2
- data/app/pb_kits/playbook/pb_table/table_row.html.erb +20 -1
- data/app/pb_kits/playbook/pb_table/table_row.rb +5 -0
- data/app/pb_kits/playbook/pb_table/utilities/addDataTitle.ts +22 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +46 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask_rails.md +3 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_text_input/index.js +103 -0
- data/app/pb_kits/playbook/pb_text_input/text_input.html.erb +4 -0
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +33 -3
- data/app/pb_kits/playbook/pb_timeline/_timeline.scss +30 -30
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +3 -2
- data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx +12 -4
- data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +5 -1
- data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.tsx +8 -3
- data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx +6 -1
- data/app/pb_kits/playbook/pb_typeahead/components/Option.tsx +21 -6
- data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.tsx +13 -6
- data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx +7 -3
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb +19 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx +27 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +4 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +5 -5
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/dist/chunks/_typeahead-BWwaAo_0.js +36 -0
- data/dist/chunks/_weekday_stacked-zyBCd1s8.js +45 -0
- data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
- data/dist/chunks/{lib-B7sgJtGS.js → lib-kMuhBuU7.js} +2 -2
- data/dist/chunks/{pb_form_validation-C5Cc0-1v.js → pb_form_validation-DBJ0wZuS.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +6 -0
- data/dist/playbook-doc.js +1 -1
- 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/version.rb +2 -2
- metadata +70 -10
- data/dist/chunks/_typeahead-C2iCBqxQ.js +0 -36
- data/dist/chunks/_weekday_stacked-E-5KcEkc.js +0 -45
- data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_table_props.md → _advanced_table_table_props_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/{_fixed_confirmation_toast_auto_close.md → _fixed_confirmation_toast_auto_close_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_table/docs/{_table_with_collapsible.md → _table_with_collapsible_react.md} +0 -0
@@ -4,7 +4,7 @@
|
|
4
4
|
@import "../pb_body/body";
|
5
5
|
@import "../tokens/transition";
|
6
6
|
|
7
|
-
[class^=pb_radio_kit] {
|
7
|
+
[class^="pb_radio_kit"] {
|
8
8
|
display: inline-flex;
|
9
9
|
cursor: pointer;
|
10
10
|
|
@@ -16,10 +16,11 @@
|
|
16
16
|
border-radius: 1000px;
|
17
17
|
border: 2px solid $border_light;
|
18
18
|
margin-right: $space_xs;
|
19
|
-
transition: background $transition_default ease,
|
19
|
+
transition: background $transition_default ease,
|
20
|
+
box-shadow $transition_default ease, border-color $transition_default ease;
|
20
21
|
}
|
21
22
|
|
22
|
-
@media (hover:hover) {
|
23
|
+
@media (hover: hover) {
|
23
24
|
&:hover .pb_radio_button {
|
24
25
|
background-color: $bg_light;
|
25
26
|
border-color: $border_light;
|
@@ -52,14 +53,14 @@
|
|
52
53
|
}
|
53
54
|
}
|
54
55
|
|
55
|
-
&:disabled:checked + .pb_radio_button{
|
56
|
+
&:disabled:checked + .pb_radio_button {
|
56
57
|
cursor: not-allowed;
|
57
58
|
background-color: $white;
|
58
59
|
border: 6px solid $neutral;
|
59
60
|
}
|
60
61
|
}
|
61
62
|
|
62
|
-
&[class*=vertical] {
|
63
|
+
&[class*="vertical"] {
|
63
64
|
flex-direction: column;
|
64
65
|
align-items: center;
|
65
66
|
.pb_radio_button {
|
@@ -80,7 +81,7 @@
|
|
80
81
|
}
|
81
82
|
&:checked {
|
82
83
|
& ~ .pb_radio_button {
|
83
|
-
border: 6px solid $
|
84
|
+
border: 6px solid $active_dark;
|
84
85
|
}
|
85
86
|
}
|
86
87
|
|
@@ -103,10 +104,10 @@
|
|
103
104
|
}
|
104
105
|
}
|
105
106
|
|
106
|
-
@media (hover:hover) {
|
107
|
+
@media (hover: hover) {
|
107
108
|
&:hover {
|
108
109
|
.pb_radio_button {
|
109
|
-
background-color: rgba($white
|
110
|
+
background-color: rgba($white, 0.1);
|
110
111
|
border-color: $border_dark;
|
111
112
|
}
|
112
113
|
}
|
@@ -115,6 +116,9 @@
|
|
115
116
|
> .pb_radio_button {
|
116
117
|
border-color: $error_dark;
|
117
118
|
}
|
119
|
+
> .pb_body_kit_negative {
|
120
|
+
color: $error_dark;
|
121
|
+
}
|
118
122
|
}
|
119
123
|
}
|
120
124
|
&.error {
|
@@ -29,6 +29,7 @@ const RadioChildren = (props) => {
|
|
29
29
|
marginBottom="none"
|
30
30
|
minWidth="xs"
|
31
31
|
options={options}
|
32
|
+
{...props}
|
32
33
|
/>
|
33
34
|
</Radio>
|
34
35
|
<Radio
|
@@ -40,10 +41,11 @@ const RadioChildren = (props) => {
|
|
40
41
|
value="Typeahead"
|
41
42
|
{...props}
|
42
43
|
>
|
43
|
-
<Typeahead
|
44
|
+
<Typeahead
|
44
45
|
marginBottom="none"
|
45
46
|
minWidth="xs"
|
46
47
|
options={options}
|
48
|
+
{...props}
|
47
49
|
/>
|
48
50
|
</Radio>
|
49
51
|
<Radio
|
@@ -54,9 +56,12 @@ const RadioChildren = (props) => {
|
|
54
56
|
value="Typography"
|
55
57
|
{...props}
|
56
58
|
>
|
57
|
-
<Title
|
59
|
+
<Title
|
60
|
+
text="Custom Typography"
|
61
|
+
{...props}
|
62
|
+
/>
|
58
63
|
</Radio>
|
59
64
|
</div>
|
60
65
|
)
|
61
66
|
}
|
62
|
-
export default RadioChildren
|
67
|
+
export default RadioChildren
|
@@ -209,10 +209,8 @@
|
|
209
209
|
}
|
210
210
|
.pb_select_kit_wrapper {
|
211
211
|
&.error {
|
212
|
-
|
213
|
-
|
214
|
-
border-color: $error_dark;
|
215
|
-
}
|
212
|
+
> select {
|
213
|
+
border-color: $error_dark;
|
216
214
|
}
|
217
215
|
}
|
218
216
|
}
|
@@ -228,7 +226,7 @@
|
|
228
226
|
&:hover {
|
229
227
|
select {
|
230
228
|
color: $white !important;
|
231
|
-
background:
|
229
|
+
background: $focus_input_dark;
|
232
230
|
}
|
233
231
|
svg {
|
234
232
|
color: $primary !important;
|
@@ -127,7 +127,10 @@ const Select = ({
|
|
127
127
|
className="pb_select_kit_label"
|
128
128
|
htmlFor={name}
|
129
129
|
>
|
130
|
-
<Caption
|
130
|
+
<Caption
|
131
|
+
dark={props.dark}
|
132
|
+
text={label}
|
133
|
+
/>
|
131
134
|
</label>
|
132
135
|
}
|
133
136
|
<label
|
@@ -146,6 +149,7 @@ const Select = ({
|
|
146
149
|
}
|
147
150
|
{error &&
|
148
151
|
<Body
|
152
|
+
dark={props.dark}
|
149
153
|
status="negative"
|
150
154
|
text={error}
|
151
155
|
/>
|
@@ -5,7 +5,7 @@
|
|
5
5
|
**combined_html_options) do %>
|
6
6
|
<% if object.label %>
|
7
7
|
<label class="pb_select_kit_label" for="<%= object.name %>">
|
8
|
-
<%= pb_rails("caption", props: { text: object.label }) %>
|
8
|
+
<%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
|
9
9
|
</label>
|
10
10
|
<% end %>
|
11
11
|
<label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
|
@@ -23,7 +23,7 @@
|
|
23
23
|
object.all_attributes
|
24
24
|
)
|
25
25
|
%>
|
26
|
-
<%= pb_rails("body", props: { status: "negative", text: object.error }) %>
|
26
|
+
<%= pb_rails("body", props: { status: "negative", text: object.error, dark: object.dark }) %>
|
27
27
|
<% end %>
|
28
28
|
<% if object.multiple != true %>
|
29
29
|
<%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(angle_down_path), fixed_width: true, classname: "pb_select_kit_caret"}) %>
|
@@ -16,6 +16,7 @@ type SelectableIconProps = {
|
|
16
16
|
checked?: boolean,
|
17
17
|
className?: string,
|
18
18
|
customIcon?: {[key: string] :SVGElement},
|
19
|
+
dark?: boolean,
|
19
20
|
disabled?: boolean,
|
20
21
|
data?: GenericObject,
|
21
22
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
@@ -33,6 +34,7 @@ const SelectableIcon = ({
|
|
33
34
|
className,
|
34
35
|
checked = false,
|
35
36
|
customIcon,
|
37
|
+
dark = false,
|
36
38
|
data = {},
|
37
39
|
disabled = false,
|
38
40
|
htmlOptions = {},
|
@@ -52,10 +54,12 @@ const SelectableIcon = ({
|
|
52
54
|
const classes = classnames(
|
53
55
|
buildCss('pb_selectable_icon_kit', {
|
54
56
|
checked: checked,
|
57
|
+
dark: dark,
|
55
58
|
disabled: disabled,
|
56
59
|
enabled: !disabled,
|
57
60
|
}),
|
58
61
|
globalProps(props),
|
62
|
+
dark ? 'dark' : '',
|
59
63
|
className
|
60
64
|
)
|
61
65
|
|
@@ -73,17 +77,19 @@ const SelectableIcon = ({
|
|
73
77
|
<>
|
74
78
|
<Icon
|
75
79
|
customIcon={customIcon}
|
80
|
+
dark={dark}
|
76
81
|
icon={icon}
|
77
82
|
size="2x"
|
78
83
|
/>
|
79
84
|
<Title
|
85
|
+
dark={dark}
|
80
86
|
size={4}
|
81
87
|
tag="h4"
|
82
88
|
text={text}
|
83
89
|
/>
|
84
90
|
</>
|
85
91
|
)}
|
86
|
-
|
92
|
+
|
87
93
|
{inputs === 'enabled' && (
|
88
94
|
<>
|
89
95
|
<input
|
@@ -98,10 +104,12 @@ const SelectableIcon = ({
|
|
98
104
|
<label htmlFor={inputIdPresent}>
|
99
105
|
<Icon
|
100
106
|
customIcon={customIcon}
|
107
|
+
dark={dark}
|
101
108
|
icon={icon}
|
102
109
|
size="2x"
|
103
110
|
/>
|
104
111
|
<Title
|
112
|
+
dark={dark}
|
105
113
|
size={4}
|
106
114
|
tag="h4"
|
107
115
|
text={text}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React, { useState } from 'react'
|
2
2
|
import SelectableIcon from '../_selectable_icon'
|
3
3
|
|
4
|
-
const SelectableIconDefault = () => {
|
4
|
+
const SelectableIconDefault = (props) => {
|
5
5
|
const [ checkSelected, toggleSelected ] = useState(true)
|
6
6
|
const [ checkUnselected, toggleUnselected ] = useState(false)
|
7
7
|
const [ checkDisabled, toggleDisabled ] = useState(false)
|
@@ -15,6 +15,7 @@ const SelectableIconDefault = () => {
|
|
15
15
|
inputId={10}
|
16
16
|
onChange={() => toggleSelected(!checkSelected)}
|
17
17
|
text="US Dollar"
|
18
|
+
{...props}
|
18
19
|
/>
|
19
20
|
|
20
21
|
<SelectableIcon
|
@@ -23,6 +24,7 @@ const SelectableIconDefault = () => {
|
|
23
24
|
inputId={11}
|
24
25
|
onChange={() => toggleUnselected(!checkUnselected)}
|
25
26
|
text="Euro"
|
27
|
+
{...props}
|
26
28
|
/>
|
27
29
|
|
28
30
|
<SelectableIcon
|
@@ -32,6 +34,7 @@ const SelectableIconDefault = () => {
|
|
32
34
|
inputId={12}
|
33
35
|
onChange={() => toggleDisabled(!checkDisabled)}
|
34
36
|
text="Yen"
|
37
|
+
{...props}
|
35
38
|
/>
|
36
39
|
</div>
|
37
40
|
)
|
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
|
|
2
2
|
|
3
3
|
import SelectableIcon from '../_selectable_icon'
|
4
4
|
|
5
|
-
const SelectableIconSingleSelect = () => {
|
5
|
+
const SelectableIconSingleSelect = (props) => {
|
6
6
|
const [ selectedFormat, toggleFormat ] = useState(null)
|
7
7
|
|
8
8
|
return (
|
@@ -17,6 +17,7 @@ const SelectableIconSingleSelect = () => {
|
|
17
17
|
onChange={() => toggleFormat('Cassette')}
|
18
18
|
text="Cassette"
|
19
19
|
value="Cassette"
|
20
|
+
{...props}
|
20
21
|
/>
|
21
22
|
|
22
23
|
<SelectableIcon
|
@@ -28,6 +29,7 @@ const SelectableIconSingleSelect = () => {
|
|
28
29
|
onChange={() => toggleFormat('CD')}
|
29
30
|
text="CD"
|
30
31
|
value="CD"
|
32
|
+
{...props}
|
31
33
|
/>
|
32
34
|
|
33
35
|
<SelectableIcon
|
@@ -39,6 +41,7 @@ const SelectableIconSingleSelect = () => {
|
|
39
41
|
onChange={() => toggleFormat('Vinyl')}
|
40
42
|
text="Vinyl"
|
41
43
|
value="Vinyl"
|
44
|
+
{...props}
|
42
45
|
/>
|
43
46
|
</div>
|
44
47
|
)
|
@@ -4,9 +4,23 @@
|
|
4
4
|
data: object.data,
|
5
5
|
id: object.id,
|
6
6
|
**combined_html_options) do %>
|
7
|
-
|
8
|
-
|
9
|
-
<%= pb_rails("
|
7
|
+
<% if enable_drag %>
|
8
|
+
<%= pb_rails("draggable", props: {initial_items: object.items}) do %>
|
9
|
+
<%= pb_rails("draggable/draggable_container") do %>
|
10
|
+
<%= pb_rails("list", props: {ordered: false}) do %>
|
11
|
+
<% object.items.each do |item| %>
|
12
|
+
<%= pb_rails("draggable/draggable_item", props: {drag_id: item[:drag_id]}) do %>
|
13
|
+
<%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item), drag_id: item[:drag_id]) )%>
|
14
|
+
<% end %>
|
15
|
+
<% end %>
|
16
|
+
<% end %>
|
17
|
+
<% end %>
|
18
|
+
<% end %>
|
19
|
+
<% else %>
|
20
|
+
<%= pb_rails("list") do %>
|
21
|
+
<% object.items.each do |item| %>
|
22
|
+
<%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>
|
23
|
+
<% end %>
|
10
24
|
<% end %>
|
11
25
|
<% end %>
|
12
26
|
<% end %>
|
@@ -4,6 +4,13 @@
|
|
4
4
|
data: object.data,
|
5
5
|
id: object.id,
|
6
6
|
**combined_html_options) do %>
|
7
|
+
<% if object.drag_id && object.drag_handle %>
|
8
|
+
<span style="vertical-align: middle;">
|
9
|
+
<%= pb_rails("body") do %>
|
10
|
+
<svg width="auto" height="auto" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
|
11
|
+
<% end %>
|
12
|
+
</span>
|
13
|
+
<% end %>
|
7
14
|
<% if object.variant == "radio"%>
|
8
15
|
<%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
|
9
16
|
<% if content.present? %>
|
@@ -19,10 +26,10 @@
|
|
19
26
|
<% if object.variant == "checkbox"%>
|
20
27
|
<script>
|
21
28
|
var checkboxElement = document.querySelector("#<%=object.id%> input[type=checkbox]")
|
22
|
-
|
29
|
+
|
23
30
|
checkboxElement.addEventListener("change", (evt) => {
|
24
31
|
var listItemElement = document.querySelector("#<%=object.id%>")
|
25
|
-
|
32
|
+
|
26
33
|
if (evt.target.checked) {
|
27
34
|
listItemElement.classList.add("checked_item");
|
28
35
|
} else {
|
@@ -34,9 +41,9 @@
|
|
34
41
|
<script>
|
35
42
|
var radioElement = document.querySelector("#<%=object.id%> input[type=radio]")
|
36
43
|
|
37
|
-
radioElement.addEventListener("change", () => {
|
44
|
+
radioElement.addEventListener("change", () => {
|
38
45
|
var radios = radioElement.closest("ul").querySelectorAll("input[type=radio]")
|
39
|
-
|
46
|
+
|
40
47
|
radios.forEach((radio) => {
|
41
48
|
if (radio.checked) {
|
42
49
|
radio.closest("li").classList.add("checked_item");
|
@@ -6,6 +6,9 @@ module Playbook
|
|
6
6
|
prop :tabindex
|
7
7
|
prop :checked, type: Playbook::Props::Boolean,
|
8
8
|
default: false
|
9
|
+
prop :drag_handle, type: Playbook::Props::Boolean,
|
10
|
+
default: true
|
11
|
+
prop :drag_id, type: Playbook::Props::String
|
9
12
|
prop :name, type: Playbook::Props::String
|
10
13
|
prop :text, type: Playbook::Props::String
|
11
14
|
prop :value, type: Playbook::Props::String
|
@@ -2,7 +2,6 @@ import React, { useEffect } from 'react'
|
|
2
2
|
import classnames from 'classnames'
|
3
3
|
import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
|
4
4
|
import { globalProps, GlobalProps, globalInlineProps } from '../utilities/globalProps'
|
5
|
-
import PbTable from '.'
|
6
5
|
import {
|
7
6
|
TableHead,
|
8
7
|
TableHeader,
|
@@ -10,6 +9,7 @@ import {
|
|
10
9
|
TableRow,
|
11
10
|
TableCell,
|
12
11
|
} from "./subcomponents";
|
12
|
+
import { addDataTitle } from './utilities/addDataTitle'
|
13
13
|
|
14
14
|
type TableProps = {
|
15
15
|
aria?: { [key: string]: string },
|
@@ -196,8 +196,7 @@ const Table = (props: TableProps): React.ReactElement => {
|
|
196
196
|
}, [stickyRightColumn]);
|
197
197
|
|
198
198
|
useEffect(() => {
|
199
|
-
|
200
|
-
instance.connect()
|
199
|
+
addDataTitle()
|
201
200
|
}, [])
|
202
201
|
|
203
202
|
return (
|
@@ -0,0 +1,74 @@
|
|
1
|
+
<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["a"], sticky_right_column: ["b"] }) do %>
|
2
|
+
<thead>
|
3
|
+
<tr>
|
4
|
+
<th id="a">Column 1</th>
|
5
|
+
<th>Column 2</th>
|
6
|
+
<th>Column 3</th>
|
7
|
+
<th>Column 4</th>
|
8
|
+
<th>Column 5</th>
|
9
|
+
<th>Column 6</th>
|
10
|
+
<th>Column 7</th>
|
11
|
+
<th>Column 8</th>
|
12
|
+
<th>Column 9</th>
|
13
|
+
<th>Column 10</th>
|
14
|
+
<th>Column 11</th>
|
15
|
+
<th>Column 12</th>
|
16
|
+
<th>Column 13</th>
|
17
|
+
<th>Column 14</th>
|
18
|
+
<th id="b">Column 15</th>
|
19
|
+
</tr>
|
20
|
+
</thead>
|
21
|
+
<tbody>
|
22
|
+
<tr>
|
23
|
+
<td id="a">Value 1</td>
|
24
|
+
<td>Value 2</td>
|
25
|
+
<td>Value 3</td>
|
26
|
+
<td>Value 4</td>
|
27
|
+
<td>Value 5</td>
|
28
|
+
<td>Value 6</td>
|
29
|
+
<td>Value 7</td>
|
30
|
+
<td>Value 8</td>
|
31
|
+
<td>Value 9</td>
|
32
|
+
<td>Value 10</td>
|
33
|
+
<td>Value 11</td>
|
34
|
+
<td>Value 12</td>
|
35
|
+
<td>Value 13</td>
|
36
|
+
<td>Value 14</td>
|
37
|
+
<td id="b">Value 15</td>
|
38
|
+
</tr>
|
39
|
+
<tr>
|
40
|
+
<td id="a">Value 1</td>
|
41
|
+
<td>Value 2</td>
|
42
|
+
<td>Value 3</td>
|
43
|
+
<td>Value 4</td>
|
44
|
+
<td>Value 5</td>
|
45
|
+
<td>Value 6</td>
|
46
|
+
<td>Value 7</td>
|
47
|
+
<td>Value 8</td>
|
48
|
+
<td>Value 9</td>
|
49
|
+
<td>Value 10</td>
|
50
|
+
<td>Value 11</td>
|
51
|
+
<td>Value 12</td>
|
52
|
+
<td>Value 13</td>
|
53
|
+
<td>Value 14</td>
|
54
|
+
<td id="b">Value 15</td>
|
55
|
+
</tr>
|
56
|
+
<tr>
|
57
|
+
<td id="a">Value 1</td>
|
58
|
+
<td>Value 2</td>
|
59
|
+
<td>Value 3</td>
|
60
|
+
<td>Value 4</td>
|
61
|
+
<td>Value 5</td>
|
62
|
+
<td>Value 6</td>
|
63
|
+
<td>Value 7</td>
|
64
|
+
<td>Value 8</td>
|
65
|
+
<td>Value 9</td>
|
66
|
+
<td>Value 10</td>
|
67
|
+
<td>Value 11</td>
|
68
|
+
<td>Value 12</td>
|
69
|
+
<td>Value 13</td>
|
70
|
+
<td>Value 14</td>
|
71
|
+
<td id="b">Value 15</td>
|
72
|
+
</tr>
|
73
|
+
</tbody>
|
74
|
+
<% end %>
|
@@ -1,3 +1,3 @@
|
|
1
|
-
The `
|
1
|
+
The `sticky_left_column` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
|
2
2
|
|
3
|
-
Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `
|
3
|
+
Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `sticky_left_column`.
|
@@ -0,0 +1,74 @@
|
|
1
|
+
<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_right_column: ["13", "14", "15"] }) do %>
|
2
|
+
<thead>
|
3
|
+
<tr>
|
4
|
+
<th>Column 1</th>
|
5
|
+
<th>Column 2</th>
|
6
|
+
<th>Column 3</th>
|
7
|
+
<th>Column 4</th>
|
8
|
+
<th>Column 5</th>
|
9
|
+
<th>Column 6</th>
|
10
|
+
<th>Column 7</th>
|
11
|
+
<th>Column 8</th>
|
12
|
+
<th>Column 9</th>
|
13
|
+
<th>Column 10</th>
|
14
|
+
<th>Column 11</th>
|
15
|
+
<th>Column 12</th>
|
16
|
+
<th id="13">Column 13</th>
|
17
|
+
<th id="14">Column 14</th>
|
18
|
+
<th id="15">Column 15</th>
|
19
|
+
</tr>
|
20
|
+
</thead>
|
21
|
+
<tbody>
|
22
|
+
<tr>
|
23
|
+
<td>Value 1</td>
|
24
|
+
<td>Value 2</td>
|
25
|
+
<td>Value 3</td>
|
26
|
+
<td>Value 4</td>
|
27
|
+
<td>Value 5</td>
|
28
|
+
<td>Value 6</td>
|
29
|
+
<td>Value 7</td>
|
30
|
+
<td>Value 8</td>
|
31
|
+
<td>Value 9</td>
|
32
|
+
<td>Value 10</td>
|
33
|
+
<td>Value 11</td>
|
34
|
+
<td>Value 12</td>
|
35
|
+
<td id="13">Value 13</td>
|
36
|
+
<td id="14">Value 14</td>
|
37
|
+
<td id="15">Value 15</td>
|
38
|
+
</tr>
|
39
|
+
<tr>
|
40
|
+
<td>Value 1</td>
|
41
|
+
<td>Value 2</td>
|
42
|
+
<td>Value 3</td>
|
43
|
+
<td>Value 4</td>
|
44
|
+
<td>Value 5</td>
|
45
|
+
<td>Value 6</td>
|
46
|
+
<td>Value 7</td>
|
47
|
+
<td>Value 8</td>
|
48
|
+
<td>Value 9</td>
|
49
|
+
<td>Value 10</td>
|
50
|
+
<td>Value 11</td>
|
51
|
+
<td>Value 12</td>
|
52
|
+
<td id="13">Value 13</td>
|
53
|
+
<td id="14">Value 14</td>
|
54
|
+
<td id="15">Value 15</td>
|
55
|
+
</tr>
|
56
|
+
<tr>
|
57
|
+
<td>Value 1</td>
|
58
|
+
<td>Value 2</td>
|
59
|
+
<td>Value 3</td>
|
60
|
+
<td>Value 4</td>
|
61
|
+
<td>Value 5</td>
|
62
|
+
<td>Value 6</td>
|
63
|
+
<td>Value 7</td>
|
64
|
+
<td>Value 8</td>
|
65
|
+
<td>Value 9</td>
|
66
|
+
<td>Value 10</td>
|
67
|
+
<td>Value 11</td>
|
68
|
+
<td>Value 12</td>
|
69
|
+
<td id="13">Value 13</td>
|
70
|
+
<td id="14">Value 14</td>
|
71
|
+
<td id="15">Value 15</td>
|
72
|
+
</tr>
|
73
|
+
</tbody>
|
74
|
+
<% end %>
|
@@ -0,0 +1,3 @@
|
|
1
|
+
The `sticky_right_column` prop works in the same way as the above `sticky_left_column` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
|
2
|
+
|
3
|
+
Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `sticky_right_column` prop.
|
@@ -0,0 +1,47 @@
|
|
1
|
+
<% content = capture do %>
|
2
|
+
<%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
|
3
|
+
<%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
|
4
|
+
<% end %>
|
5
|
+
<% end %>
|
6
|
+
|
7
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
8
|
+
<%= pb_rails("table/table_head") do %>
|
9
|
+
<%= pb_rails("table/table_row") do %>
|
10
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
11
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
12
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
13
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
14
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
15
|
+
<%= pb_rails("table/table_header", props: { text: ""}) %>
|
16
|
+
<% end %>
|
17
|
+
<% end %>
|
18
|
+
<%= pb_rails("table/table_body") do %>
|
19
|
+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, id: "1" }) do %>
|
20
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
21
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
22
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
23
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
24
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
25
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
|
26
|
+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
|
27
|
+
<% end %>
|
28
|
+
<% end %>
|
29
|
+
<%= pb_rails("table/table_row") do %>
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
31
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
32
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
33
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
34
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
35
|
+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
36
|
+
<% end %>
|
37
|
+
<%= pb_rails("table/table_row") do %>
|
38
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
39
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
40
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
41
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
42
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
43
|
+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
44
|
+
<% end %>
|
45
|
+
<% end %>
|
46
|
+
<% end %>
|
47
|
+
|
@@ -0,0 +1,2 @@
|
|
1
|
+
The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsible_content` prop to add any content to the collapsible Row.
|
2
|
+
Please be aware that you will need to pass in an `id` to any table rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.
|
@@ -5,6 +5,8 @@ examples:
|
|
5
5
|
- table_lg: Large
|
6
6
|
- table_sticky: Sticky Header
|
7
7
|
- table_sticky_left_columns: Sticky Left Column
|
8
|
+
- table_sticky_right_columns: Sticky Right Column
|
9
|
+
- table_sticky_columns: Sticky Left and Right Columns
|
8
10
|
- table_header: Table Header
|
9
11
|
- table_alignment_row_rails: Row Alignment
|
10
12
|
- table_alignment_column_rails: Cell Alignment
|
@@ -28,6 +30,7 @@ examples:
|
|
28
30
|
- table_with_subcomponents_rails: Table with Sub Components (Table Elements)
|
29
31
|
- table_with_subcomponents_as_divs: Table with Sub Components (Divs)
|
30
32
|
- table_outer_padding: Outer Padding
|
33
|
+
- table_with_collapsible: Table with Collapsible
|
31
34
|
|
32
35
|
react:
|
33
36
|
- table_sm: Small
|