playbook_ui 14.10.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5137 → 14.10.0.pre.alpha.PLAY1750pbcontenttagkitbutton5308
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +32 -19
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +3 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +35 -3
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +32 -18
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +8 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb +1 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.html.erb +43 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx +60 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx +74 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/index.js +185 -92
- data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +55 -8
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +17 -14
- data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +78 -0
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +4 -3
- data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +13 -2
- data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +2 -6
- data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb +6 -4
- data/app/pb_kits/playbook/pb_button/button.html.erb +2 -3
- data/app/pb_kits/playbook/pb_card/_card.scss +21 -3
- data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +18 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +40 -0
- data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +1 -6
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +3 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +1 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb +8 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx +9 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.md +1 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -6
- 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_file_upload/_file_upload.tsx +24 -15
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx +3 -1
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx +4 -1
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +1 -13
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +64 -1
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +3 -1
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.html.erb +10 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx +42 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.md +3 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_section_separator/section_separator.rb +4 -1
- data/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading.scss +2 -2
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_description.md +3 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.html.erb +9 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md +1 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.html.erb +7 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.html.erb +119 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx +10 -2
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.html.erb +15 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx +6 -2
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width_rails.md +3 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.html.erb +3 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.html.erb +63 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx +11 -3
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml +7 -2
- data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.html.erb +8 -12
- data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.rb +48 -1
- data/app/pb_kits/playbook/pb_table/_table.tsx +74 -18
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +88 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +4 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +87 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +5 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_table/index.ts +17 -17
- data/app/pb_kits/playbook/pb_table/styles/_scroll.scss +38 -2
- data/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss +17 -3
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx +18 -0
- data/app/pb_kits/playbook/pb_text_input/inputMask.ts +22 -1
- data/app/pb_kits/playbook/pb_text_input/text_input.test.js +80 -0
- data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +5 -5
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.html.erb +4 -5
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx +4 -4
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md +1 -1
- data/app/pb_kits/playbook/pb_timeline/timeline.rb +6 -6
- data/app/pb_kits/playbook/utilities/_gap.scss +29 -0
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +1 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +18 -9
- data/dist/chunks/_typeahead-C2iCBqxQ.js +36 -0
- data/dist/chunks/_weekday_stacked-CWnbnW7m.js +45 -0
- data/dist/chunks/{lib-sMFo2JZy.js → lib-B7sgJtGS.js} +1 -1
- data/dist/chunks/{pb_form_validation-CgvjWbOK.js → pb_form_validation-C5Cc0-1v.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +1 -1
- 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/classnames.rb +1 -0
- data/lib/playbook/spacing.rb +21 -0
- data/lib/playbook/version.rb +1 -1
- metadata +32 -8
- data/dist/chunks/_typeahead-CoIYBETL.js +0 -22
- data/dist/chunks/_weekday_stacked-Qj3GFYzA.js +0 -45
- /data/app/pb_kits/playbook/pb_skeleton_loading/docs/{_skeleton_loading_border_radius.md → _skeleton_loading_border_radius_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_skeleton_loading/docs/{_skeleton_loading_height_width.md → _skeleton_loading_height_width_react.md} +0 -0
@@ -21,6 +21,14 @@
|
|
21
21
|
border-width: 0px;
|
22
22
|
}
|
23
23
|
|
24
|
+
@function ends-with($string, $suffix) {
|
25
|
+
$suffix-length: str-length($suffix);
|
26
|
+
@if $suffix-length == 0 {
|
27
|
+
@return true;
|
28
|
+
}
|
29
|
+
@return str-slice($string, -$suffix-length) == $suffix;
|
30
|
+
}
|
31
|
+
|
24
32
|
[class^=pb_card_header_kit] {
|
25
33
|
flex-grow: 0;
|
26
34
|
flex-shrink: 0;
|
@@ -30,9 +38,19 @@
|
|
30
38
|
border: 0;
|
31
39
|
border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
|
32
40
|
@each $color_name, $color_value in $pb_card_header_colors {
|
33
|
-
|
34
|
-
|
35
|
-
|
41
|
+
@if not ends-with($color_name, '_subtle') {
|
42
|
+
&[class*="_#{$color_name}"] {
|
43
|
+
@include pb_card_header_color($color_value);
|
44
|
+
color: lightenText($color_value);
|
45
|
+
}
|
46
|
+
}
|
47
|
+
}
|
48
|
+
@each $color_name, $color_value in $pb_card_header_colors {
|
49
|
+
@if ends-with($color_name, '_subtle') {
|
50
|
+
&[class*="_#{$color_name}"] {
|
51
|
+
@include pb_card_header_color($color_value);
|
52
|
+
color: lightenText($color_value);
|
53
|
+
}
|
36
54
|
}
|
37
55
|
}
|
38
56
|
@each $color_name, $color_value in $pb_card_header_colors {
|
@@ -88,3 +88,21 @@
|
|
88
88
|
Body
|
89
89
|
<% end %>
|
90
90
|
<% end %>
|
91
|
+
|
92
|
+
<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
|
93
|
+
<%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success_subtle" }) do %>
|
94
|
+
<%= pb_rails("body", props: { text: "Success Subtle" }) %>
|
95
|
+
<% end %>
|
96
|
+
<%= pb_rails("card/card_body", props: { padding: "md" }) do %>
|
97
|
+
Body
|
98
|
+
<% end %>
|
99
|
+
<% end %>
|
100
|
+
|
101
|
+
<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
|
102
|
+
<%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error_subtle" }) do %>
|
103
|
+
<%= pb_rails("body", props: { text: "Error Subtle"}) %>
|
104
|
+
<% end %>
|
105
|
+
<%= pb_rails("card/card_body", props: { padding: "md" }) do %>
|
106
|
+
Body
|
107
|
+
<% end %>
|
108
|
+
<% end %>
|
@@ -231,6 +231,46 @@ const CardHeader = (props) => {
|
|
231
231
|
/>
|
232
232
|
</Card.Body>
|
233
233
|
</Card>
|
234
|
+
|
235
|
+
<Card
|
236
|
+
{...props}
|
237
|
+
marginBottom='sm'
|
238
|
+
padding="none"
|
239
|
+
>
|
240
|
+
<Card.Header
|
241
|
+
headerColor="success_subtle"
|
242
|
+
>
|
243
|
+
<Body
|
244
|
+
text="Success Subtle"
|
245
|
+
/>
|
246
|
+
</Card.Header>
|
247
|
+
<Card.Body>
|
248
|
+
<Body
|
249
|
+
{...props}
|
250
|
+
text="Body"
|
251
|
+
/>
|
252
|
+
</Card.Body>
|
253
|
+
</Card>
|
254
|
+
|
255
|
+
<Card
|
256
|
+
{...props}
|
257
|
+
marginBottom='sm'
|
258
|
+
padding="none"
|
259
|
+
>
|
260
|
+
<Card.Header
|
261
|
+
headerColor="error_subtle"
|
262
|
+
>
|
263
|
+
<Body
|
264
|
+
text="Error Subtle"
|
265
|
+
/>
|
266
|
+
</Card.Header>
|
267
|
+
<Card.Body>
|
268
|
+
<Body
|
269
|
+
{...props}
|
270
|
+
text="Body"
|
271
|
+
/>
|
272
|
+
</Card.Body>
|
273
|
+
</Card>
|
234
274
|
</>
|
235
275
|
)
|
236
276
|
}
|
@@ -1,9 +1,4 @@
|
|
1
|
-
<%=
|
2
|
-
id: object.id,
|
3
|
-
data: object.data,
|
4
|
-
class: object.classname,
|
5
|
-
**combined_html_options
|
6
|
-
) do %>
|
1
|
+
<%= pb_content_tag(:label) do %>
|
7
2
|
<%= content.presence || object.input %>
|
8
3
|
<% if object.indeterminate %>
|
9
4
|
<span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">
|
@@ -20,6 +20,7 @@ type CircleIconButtonProps = {
|
|
20
20
|
onClick?: React.MouseEventHandler<HTMLElement>,
|
21
21
|
newWindow?: boolean,
|
22
22
|
type?: 'button' | 'submit' | 'reset' | undefined,
|
23
|
+
target?: string
|
23
24
|
variant?: 'primary' | 'secondary' | 'link',
|
24
25
|
}
|
25
26
|
|
@@ -36,6 +37,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
|
|
36
37
|
loading = false,
|
37
38
|
onClick = noop,
|
38
39
|
type,
|
40
|
+
target,
|
39
41
|
link,
|
40
42
|
newWindow,
|
41
43
|
variant,
|
@@ -66,6 +68,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
|
|
66
68
|
loading={loading}
|
67
69
|
newWindow={newWindow}
|
68
70
|
onClick={onClick}
|
71
|
+
target={target}
|
69
72
|
text={null}
|
70
73
|
variant={variant}
|
71
74
|
>
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<%= pb_content_tag do %>
|
2
|
-
<%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
|
2
|
+
<%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, target: object.target, disabled: object.disabled, dark: object.dark}) do %>
|
3
3
|
<%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
|
4
4
|
<% end %>
|
5
5
|
<% end %>
|
@@ -10,3 +10,11 @@
|
|
10
10
|
link: "https://google.com",
|
11
11
|
new_window: true
|
12
12
|
}) %>
|
13
|
+
<br/>
|
14
|
+
<%= pb_rails("circle_icon_button", props: {
|
15
|
+
icon: "info",
|
16
|
+
variant: "secondary",
|
17
|
+
aria: { label: "Link to Playbook in new window" },
|
18
|
+
link: "https://playbook.powerapp.cloud/",
|
19
|
+
target: "child"
|
20
|
+
}) %>
|
@@ -21,6 +21,15 @@ const CircleIconButtonLink = (props) => (
|
|
21
21
|
{...props}
|
22
22
|
/>
|
23
23
|
|
24
|
+
<br/>
|
25
|
+
|
26
|
+
<CircleIconButton
|
27
|
+
aria={{ label: "Link to Playbook in new window" }}
|
28
|
+
icon="info"
|
29
|
+
link="https://playbook.powerapp.cloud/"
|
30
|
+
target="child"
|
31
|
+
variant="secondary"
|
32
|
+
/>
|
24
33
|
</div>
|
25
34
|
)
|
26
35
|
|
@@ -0,0 +1 @@
|
|
1
|
+
The `link` prop accepts a string that is used as an href value and causes the button to act as a link. The default behavior of a link is to open in the current window. You can optionally alter the link behavior by adding the `newWindow` prop (boolean), which will open the link in a new window, or by calling the `target` prop, which accepts `_self`, `_blank`, `_parent`, `_top`, `child`, or any string, allowing you to specify any link target.
|
@@ -1,9 +1,4 @@
|
|
1
|
-
<%=
|
2
|
-
aria: object.aria,
|
3
|
-
class: object.classname + object.error_class,
|
4
|
-
data: object.data,
|
5
|
-
id: object.id,
|
6
|
-
**combined_html_options) do %>
|
1
|
+
<%= pb_content_tag do %>
|
7
2
|
<div class="input_wrapper">
|
8
3
|
<% if content.present? %>
|
9
4
|
<%= content %>
|
@@ -1,19 +1,14 @@
|
|
1
|
-
<%=
|
2
|
-
aria: object.aria,
|
3
|
-
class: object.classname,
|
4
|
-
data: object.data,
|
5
|
-
id: object.id,
|
6
|
-
**combined_html_options) do %>
|
1
|
+
<%= pb_content_tag do %>
|
7
2
|
<% if object.label.present? %>
|
8
3
|
<%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
|
9
4
|
<% end %>
|
10
5
|
<div class="dropdown_wrapper<%= error_class %>" style="position: relative">
|
11
|
-
<input
|
12
|
-
data-default-value="<%= input_default_value %>"
|
13
|
-
id="dropdown-selected-option"
|
14
|
-
name="<%= object.name %>"
|
15
|
-
style="display: none"
|
16
|
-
<%= object.required ? "required" : ""%>
|
6
|
+
<input
|
7
|
+
data-default-value="<%= input_default_value %>"
|
8
|
+
id="dropdown-selected-option"
|
9
|
+
name="<%= object.name %>"
|
10
|
+
style="display: none"
|
11
|
+
<%= object.required ? "required" : ""%>
|
17
12
|
/>
|
18
13
|
<% if content.present? %>
|
19
14
|
<%= content.presence %>
|
@@ -1,20 +1,15 @@
|
|
1
|
-
<%=
|
2
|
-
aria: object.aria,
|
3
|
-
class: object.classname,
|
4
|
-
data: object.data,
|
5
|
-
id: object.id,
|
6
|
-
**combined_html_options) do %>
|
1
|
+
<%= pb_content_tag do %>
|
7
2
|
<%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
|
8
|
-
<% if content.present? %>
|
3
|
+
<% if content.present? %>
|
9
4
|
<%= content.presence %>
|
10
|
-
<% else %>
|
5
|
+
<% else %>
|
11
6
|
<%= pb_rails("list/item", props: {
|
12
|
-
display: "flex",
|
13
|
-
justify_content: "center",
|
14
|
-
padding:"xs",
|
15
|
-
}) do %>
|
7
|
+
display: "flex",
|
8
|
+
justify_content: "center",
|
9
|
+
padding:"xs",
|
10
|
+
}) do %>
|
16
11
|
<%= pb_rails("body", props: {text: "No option"}) %>
|
17
12
|
<% end %>
|
18
13
|
<% end %>
|
19
|
-
<% end %>
|
20
|
-
<% end %>
|
14
|
+
<% end %>
|
15
|
+
<% end %>
|
@@ -1,15 +1,10 @@
|
|
1
|
-
<%=
|
2
|
-
aria: object.aria,
|
3
|
-
class: object.classname,
|
4
|
-
data: object.data,
|
5
|
-
id: object.option[:id],
|
6
|
-
**combined_html_options) do %>
|
1
|
+
<%= pb_content_tag do %>
|
7
2
|
<%= pb_rails("list/item", props: {
|
8
|
-
display: "flex",
|
9
|
-
justify_content: "center",
|
10
|
-
padding:"none",
|
3
|
+
display: "flex",
|
4
|
+
justify_content: "center",
|
5
|
+
padding:"none",
|
11
6
|
cursor: "pointer"
|
12
|
-
}) do %>
|
7
|
+
}) do %>
|
13
8
|
<div class="dropdown_option_wrapper">
|
14
9
|
<% if content.present? %>
|
15
10
|
<%= content.presence %>
|
@@ -18,4 +13,4 @@
|
|
18
13
|
<% end %>
|
19
14
|
</div>
|
20
15
|
<% end %>
|
21
|
-
<% end %>
|
16
|
+
<% end %>
|
@@ -1,21 +1,16 @@
|
|
1
|
-
<%=
|
2
|
-
aria: object.aria,
|
3
|
-
class: object.classname,
|
4
|
-
data: object.data,
|
5
|
-
id: object.id,
|
6
|
-
**combined_html_options) do %>
|
1
|
+
<%= pb_content_tag do %>
|
7
2
|
<% if content.present? %>
|
8
3
|
<div style="display: inline-block" tabindex="0" data-dropdown-custom-trigger>
|
9
4
|
<%= content.presence %>
|
10
5
|
</div>
|
11
6
|
<% else %>
|
12
7
|
<%= pb_rails("flex", props: {
|
13
|
-
align: "center",
|
14
|
-
border_radius:"lg",
|
15
|
-
classname: object.trigger_wrapper_classes,
|
16
|
-
cursor: "pointer",
|
17
|
-
justify: "between",
|
18
|
-
padding_x:"sm",
|
8
|
+
align: "center",
|
9
|
+
border_radius:"lg",
|
10
|
+
classname: object.trigger_wrapper_classes,
|
11
|
+
cursor: "pointer",
|
12
|
+
justify: "between",
|
13
|
+
padding_x:"sm",
|
19
14
|
padding_y:"xs",
|
20
15
|
html_options: {tabindex:"0"}
|
21
16
|
}) do %>
|
@@ -23,7 +18,7 @@
|
|
23
18
|
<%= pb_rails("flex", props: {align: "center"}) do %>
|
24
19
|
<% if object.custom_display.present? %>
|
25
20
|
<%= pb_rails("flex", props: {align: "center"}) do %>
|
26
|
-
<div id="dropdown_trigger_custom_display" style="display: none;">
|
21
|
+
<div id="dropdown_trigger_custom_display" style="display: none;">
|
27
22
|
<%= object.custom_display %>
|
28
23
|
</div>
|
29
24
|
<%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
|
@@ -40,4 +35,3 @@
|
|
40
35
|
<% end %>
|
41
36
|
<% end %>
|
42
37
|
<% end %>
|
43
|
-
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React, { useEffect, useCallback, useRef } from 'react'
|
2
|
-
import { useDropzone, DropzoneInputProps, DropzoneRootProps } from 'react-dropzone'
|
2
|
+
import { useDropzone, DropzoneInputProps, DropzoneRootProps, FileRejection } from 'react-dropzone'
|
3
3
|
import classnames from 'classnames'
|
4
4
|
|
5
5
|
import { buildCss, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
|
@@ -9,8 +9,10 @@ import type { Callback } from '../types'
|
|
9
9
|
import Body from '../pb_body/_body'
|
10
10
|
import Card from '../pb_card/_card'
|
11
11
|
|
12
|
+
import { isEmpty } from '../utilities/object'
|
13
|
+
|
12
14
|
type FileUploadProps = {
|
13
|
-
accept?: string[]
|
15
|
+
accept?: Record<string, string[]>,
|
14
16
|
className?: string,
|
15
17
|
customMessage?: string,
|
16
18
|
dark?: boolean,
|
@@ -19,7 +21,7 @@ type FileUploadProps = {
|
|
19
21
|
acceptedFilesDescription?: string,
|
20
22
|
maxSize?: number,
|
21
23
|
onFilesAccepted: Callback<File, File>,
|
22
|
-
onFilesRejected: (error: string, files:
|
24
|
+
onFilesRejected: (error: string, files: readonly FileRejection[]) => void,
|
23
25
|
}
|
24
26
|
|
25
27
|
const getFormattedFileSize = (fileSize: number): string => {
|
@@ -28,7 +30,7 @@ const getFormattedFileSize = (fileSize: number): string => {
|
|
28
30
|
|
29
31
|
const FileUpload = (props: FileUploadProps): React.ReactElement => {
|
30
32
|
const {
|
31
|
-
accept =
|
33
|
+
accept = {},
|
32
34
|
acceptedFilesDescription = '',
|
33
35
|
className,
|
34
36
|
customMessage,
|
@@ -48,30 +50,37 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
|
|
48
50
|
getRootProps: () => DropzoneRootProps & any;
|
49
51
|
getInputProps: () => DropzoneInputProps & any;
|
50
52
|
isDragActive: boolean;
|
51
|
-
|
53
|
+
fileRejections: readonly FileRejection[];
|
52
54
|
}
|
53
55
|
|
54
|
-
const { getRootProps, getInputProps, isDragActive,
|
56
|
+
const { getRootProps, getInputProps, isDragActive, fileRejections }: DropZoneProps = useDropzone({
|
55
57
|
accept,
|
56
58
|
maxSize,
|
57
59
|
onDrop,
|
58
60
|
})
|
59
61
|
|
60
|
-
const prevRejected = useRef<
|
62
|
+
const prevRejected = useRef<readonly FileRejection[] | null>(null);
|
61
63
|
|
62
|
-
|
64
|
+
let maxFileSizeText = ''
|
65
|
+
if (maxSize !== undefined) {
|
66
|
+
maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
|
67
|
+
}
|
63
68
|
|
64
69
|
useEffect(() => {
|
65
|
-
if (
|
66
|
-
const isFileTooLarge = maxSize &&
|
70
|
+
if (fileRejections === prevRejected.current) return
|
71
|
+
const isFileTooLarge = maxSize && fileRejections.length > 0 && fileRejections[0].file.size > maxSize;
|
67
72
|
if (isFileTooLarge) {
|
68
|
-
onFilesRejected(`File size is too large! ${maxFileSizeText}`,
|
73
|
+
onFilesRejected(`File size is too large! ${maxFileSizeText}`, fileRejections)
|
69
74
|
}
|
70
|
-
prevRejected.current =
|
71
|
-
}, [maxFileSizeText, maxSize, onFilesRejected,
|
75
|
+
prevRejected.current = fileRejections
|
76
|
+
}, [maxFileSizeText, maxSize, onFilesRejected, fileRejections])
|
72
77
|
|
73
78
|
const acceptedFileTypes = () => {
|
74
|
-
|
79
|
+
if (!accept) {
|
80
|
+
return []
|
81
|
+
}
|
82
|
+
|
83
|
+
return Object.keys(accept).map((fileType) => {
|
75
84
|
if (fileType.startsWith('image/')) {
|
76
85
|
return fileType.replace('image/', ' ')
|
77
86
|
} else {
|
@@ -86,7 +95,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
|
|
86
95
|
const getDescription = () => {
|
87
96
|
return customMessage
|
88
97
|
? customMessage
|
89
|
-
: `Choose a file or drag it here.${accept
|
98
|
+
: `Choose a file or drag it here.${isEmpty(accept) ? '' : ` The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`}${maxSize ? ` ${maxFileSizeText}` : ''}`;
|
90
99
|
}
|
91
100
|
|
92
101
|
return (
|
@@ -25,7 +25,10 @@ const FileUploadCustomDescription = (props) => {
|
|
25
25
|
{...props}
|
26
26
|
/>
|
27
27
|
<FileUpload
|
28
|
-
accept={
|
28
|
+
accept={{
|
29
|
+
"application/pdf": [".pdf"],
|
30
|
+
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
|
31
|
+
}}
|
29
32
|
acceptedFilesDescription="Adobe (.pdf) and Microsoft (.xslx)"
|
30
33
|
onFilesAccepted={handleOnFilesAccepted}
|
31
34
|
{...props}
|
@@ -18,7 +18,7 @@ const AcceptedFilesList = ({ files }) => (
|
|
18
18
|
const RejectedFilesList = ({ files }) => (
|
19
19
|
<List>
|
20
20
|
{files.map((file) => (
|
21
|
-
<ListItem key={file.name}><Body color="error">{`${file.name} (file too large)`}</Body></ListItem>
|
21
|
+
<ListItem key={file.file.name}><Body color="error">{`${file.file.name} (file too large)`}</Body></ListItem>
|
22
22
|
))}
|
23
23
|
</List>
|
24
24
|
)
|
@@ -14,16 +14,6 @@ $pb_icon_circle_sizes: (
|
|
14
14
|
"xl": 100px,
|
15
15
|
);
|
16
16
|
|
17
|
-
@mixin svg_size($name, $match, $adjust) {
|
18
|
-
@if $name == $match {
|
19
|
-
$svg_xy: $adjust;
|
20
|
-
& > svg {
|
21
|
-
width: #{$svg_xy};
|
22
|
-
height: #{$svg_xy};
|
23
|
-
}
|
24
|
-
}
|
25
|
-
}
|
26
|
-
|
27
17
|
[class^=pb_icon_circle_kit] {
|
28
18
|
display: flex;
|
29
19
|
justify-content: center;
|
@@ -57,13 +47,11 @@ $pb_icon_circle_sizes: (
|
|
57
47
|
border-radius: $size/2;
|
58
48
|
background: $silver;
|
59
49
|
color: $text_lt_light;
|
60
|
-
font-size: $size * 0.38;
|
50
|
+
font-size: if($name == "xxs", $size - 6px, $size * 0.38);
|
61
51
|
line-height: $size;
|
62
52
|
flex-shrink: 0;
|
63
53
|
flex-grow: 0;
|
64
54
|
flex-basis: $size;
|
65
|
-
|
66
|
-
@include svg_size($name, "xxs", $size - 6px);
|
67
55
|
}
|
68
56
|
}
|
69
57
|
|
@@ -3,6 +3,11 @@
|
|
3
3
|
@import "../tokens/opacity";
|
4
4
|
@import "./section_separator_mixin";
|
5
5
|
|
6
|
+
$merge_kits1: map-merge($status_colors, $category_colors);
|
7
|
+
$merge_kits2: map-merge($merge_kits1, $product_colors);
|
8
|
+
$merge_kits3: map-merge($merge_kits2, $text_colors);
|
9
|
+
$section_selector_colors: map-merge($merge_kits3, $data_colors);
|
10
|
+
|
6
11
|
$section_colors_light: (
|
7
12
|
background: $bg_light,
|
8
13
|
card: $card_light,
|
@@ -19,8 +24,11 @@ $section_colors_dark: (
|
|
19
24
|
align-items: center;
|
20
25
|
position: relative;
|
21
26
|
span {
|
22
|
-
padding: 0
|
27
|
+
padding: 0;
|
23
28
|
display: flex;
|
29
|
+
[class*="pb_caption_kit"] {
|
30
|
+
padding: 0 $space_xs;
|
31
|
+
}
|
24
32
|
}
|
25
33
|
&::before {
|
26
34
|
content: "";
|
@@ -34,12 +42,40 @@ $section_colors_dark: (
|
|
34
42
|
flex: 1;
|
35
43
|
@include section_separator_horizontal;
|
36
44
|
}
|
45
|
+
@each $color_name, $color_value in $section_selector_colors {
|
46
|
+
&[class*="color_#{$color_name}"] {
|
47
|
+
&::before, &::after {
|
48
|
+
background: $color_value;
|
49
|
+
}
|
50
|
+
|
51
|
+
&[class*=_vertical] {
|
52
|
+
&::after {
|
53
|
+
background: $color_value;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
&[class*=_dashed] {
|
57
|
+
&::before, &::after {
|
58
|
+
border: 1px dashed $color_value;
|
59
|
+
}
|
60
|
+
&[class*=_vertical] {
|
61
|
+
&::after {
|
62
|
+
border: 1px dashed $color_value;
|
63
|
+
background: none;
|
64
|
+
}
|
65
|
+
}
|
66
|
+
}
|
67
|
+
}
|
68
|
+
}
|
69
|
+
|
37
70
|
&[class*=_horizontal] {
|
38
71
|
justify-content: center;
|
39
72
|
}
|
40
73
|
&[class*=_vertical] {
|
41
74
|
margin-left: $space_xs;
|
42
75
|
margin-right: $space_xs;
|
76
|
+
&::before {
|
77
|
+
display: none;
|
78
|
+
}
|
43
79
|
&::after {
|
44
80
|
@include section_separator_vertical(false);
|
45
81
|
}
|
@@ -54,6 +90,33 @@ $section_colors_dark: (
|
|
54
90
|
// Dark =========================
|
55
91
|
|
56
92
|
&.dark {
|
93
|
+
@each $color_name, $color_value in $section_selector_colors {
|
94
|
+
&[class*="color_#{$color_name}"] {
|
95
|
+
&::before, &::after {
|
96
|
+
background: $color_value;
|
97
|
+
}
|
98
|
+
|
99
|
+
&[class*=_vertical] {
|
100
|
+
&::after {
|
101
|
+
@include section_separator_vertical(false);
|
102
|
+
background: $color_value;
|
103
|
+
}
|
104
|
+
}
|
105
|
+
|
106
|
+
&[class*=_dashed] {
|
107
|
+
&::before, &::after {
|
108
|
+
border: 1px dashed $color_value;
|
109
|
+
background: none;
|
110
|
+
}
|
111
|
+
&[class*=_vertical] {
|
112
|
+
&::after {
|
113
|
+
border: 1px dashed $color_value;
|
114
|
+
background: none;
|
115
|
+
}
|
116
|
+
}
|
117
|
+
}
|
118
|
+
}
|
119
|
+
}
|
57
120
|
&::before {
|
58
121
|
@include section_separator_horizontal(true);
|
59
122
|
}
|
@@ -10,6 +10,7 @@ type SectionSeparatorProps = {
|
|
10
10
|
aria?: { [key: string]: string; },
|
11
11
|
children?: React.ReactChild[] | React.ReactChild,
|
12
12
|
className?: string,
|
13
|
+
color?: "default" | "primary",
|
13
14
|
dark?: boolean,
|
14
15
|
data?: { [key: string]: string; },
|
15
16
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
@@ -25,6 +26,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
|
|
25
26
|
aria = {},
|
26
27
|
children,
|
27
28
|
className,
|
29
|
+
color ="default",
|
28
30
|
data = {},
|
29
31
|
htmlOptions = {},
|
30
32
|
id,
|
@@ -37,7 +39,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
|
|
37
39
|
const ariaProps = buildAriaProps(aria)
|
38
40
|
const dataProps = buildDataProps(data)
|
39
41
|
const htmlProps = buildHtmlProps(htmlOptions)
|
40
|
-
const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : ""), globalProps(props), className)
|
42
|
+
const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : "", color !== "default" ? `color_${color}` : ''), globalProps(props), className)
|
41
43
|
const dynamicInlineProps = globalInlineProps(props)
|
42
44
|
|
43
45
|
return (
|
@@ -0,0 +1,10 @@
|
|
1
|
+
<%= pb_rails("section_separator", props: { text: "Default Separator" }) %>
|
2
|
+
<%= pb_rails("section_separator", props: { color: "primary", text: "Primary Separator" }) %>
|
3
|
+
<%= pb_rails("section_separator", props: { color: "primary", line_style: "dashed", text: "Primary Dashed Separator" }) %>
|
4
|
+
<%= pb_rails("section_separator", props: { color: "primary" }) do %>
|
5
|
+
<%= pb_rails("flex", props: { padding: "xs" }) do %>
|
6
|
+
<%= pb_rails("icon", props: { color: "primary", icon: "arrow-down" }) %>
|
7
|
+
<%= pb_rails("detail", props: { text: "Children", size: "sm", color: "link" }) %>
|
8
|
+
<% end %>
|
9
|
+
<% end %>
|
10
|
+
|