playbook_ui 13.20.0 → 13.21.0.pre.alpha.PBNTR224letuserresetrowexpansion2441
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/index.js +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +6 -1
- data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +5 -2
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +45 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +4 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_alignment_swift.md +26 -6
- data/app/pb_kits/playbook/pb_date/docs/_date_default_swift.md +27 -8
- data/app/pb_kits/playbook/pb_message/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +4 -0
- data/app/pb_kits/playbook/pb_table/_table.tsx +13 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx +24 -25
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx +47 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md +7 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.jsx +48 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_rails.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_rails.md +7 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +6 -2
- data/app/pb_kits/playbook/pb_table/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_table/styles/_striped.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_structure.scss +4 -2
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +64 -0
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx +66 -0
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx +64 -0
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +66 -0
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +74 -0
- data/app/pb_kits/playbook/pb_table/subcomponents/index.tsx +5 -0
- data/app/pb_kits/playbook/pb_table/table.test.js +142 -1
- data/app/pb_kits/playbook/pb_table/table_body.html.erb +17 -0
- data/app/pb_kits/playbook/pb_table/table_body.rb +15 -0
- data/app/pb_kits/playbook/pb_table/table_cell.html.erb +17 -0
- data/app/pb_kits/playbook/pb_table/table_cell.rb +17 -0
- data/app/pb_kits/playbook/pb_table/table_head.html.erb +17 -0
- data/app/pb_kits/playbook/pb_table/table_head.rb +15 -0
- data/app/pb_kits/playbook/pb_table/table_header.html.erb +49 -39
- data/app/pb_kits/playbook/pb_table/table_header.rb +8 -1
- data/app/pb_kits/playbook/pb_table/table_row.html.erb +17 -7
- data/app/pb_kits/playbook/pb_table/table_row.rb +8 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +9 -5
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx +20 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md +30 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +2 -1
- data/app/pb_kits/playbook/pb_user/docs/example.yml +1 -0
- data/app/pb_kits/playbook/utilities/_positioning.scss +48 -7
- data/app/pb_kits/playbook/utilities/globalProps.ts +23 -1
- data/dist/playbook-rails.js +6 -6
- data/lib/playbook/bottom.rb +33 -0
- data/lib/playbook/classnames.rb +4 -0
- data/lib/playbook/kit_base.rb +8 -0
- data/lib/playbook/left.rb +33 -0
- data/lib/playbook/right.rb +33 -0
- data/lib/playbook/top.rb +33 -0
- data/lib/playbook/version.rb +2 -2
- metadata +31 -8
- data/app/pb_kits/playbook/pb_table/_table_row.tsx +0 -47
@@ -1,47 +1,57 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
<%=
|
10
|
-
<% end %>
|
11
|
-
<% else %>
|
12
|
-
<%= link_to next_link, style: link_style do %>
|
13
|
-
<%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>
|
1
|
+
<% if object.tag == "table" %>
|
2
|
+
<%= content_tag(:th,
|
3
|
+
colspan: object.colspan,
|
4
|
+
aria: object.aria,
|
5
|
+
class: object.classname,
|
6
|
+
data: object.data,
|
7
|
+
id: "pb-th#{object.id}" ) do %>
|
8
|
+
<% unless sorting_style? %>
|
9
|
+
<%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
|
14
10
|
<%= content.presence || object.text %>
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
11
|
+
<% end %>
|
12
|
+
<% else %>
|
13
|
+
<%= link_to next_link, style: link_style do %>
|
14
|
+
<%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>
|
15
|
+
<%= content.presence || object.text %>
|
16
|
+
<% if sorting_style? %>
|
17
|
+
<%= pb_rails("icon", props: { icon: object.sort_icon(active_item[:direction], active_item[:active]),
|
18
|
+
fixed_width: true,
|
19
|
+
classname: active_item.any? ? "pb_th_active" : "",
|
20
|
+
padding_left: "xs" }) %>
|
21
|
+
<% end %>
|
20
22
|
<% end %>
|
21
23
|
<% end %>
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
24
|
+
<% if use_dropdown_select %>
|
25
|
+
<%= pb_rails("popover", props: { classname: "pb_filter_sort_menu",
|
26
|
+
close_on_click: "outside",
|
27
|
+
trigger_element_id: "pb-th#{object.id}",
|
28
|
+
tooltip_id: "sort-filter-btn-tooltip#{object.id}",
|
29
|
+
position: object.placement ,
|
30
|
+
padding: 'none'}) do %>
|
31
|
+
<%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
|
32
|
+
<% object.sort_items.each do |sort_item| %>
|
33
|
+
<% item = active_or_first_item(sort_items_for(sort_item)) %>
|
34
|
+
<%= pb_rails("nav/item", props: {
|
35
|
+
text: item[:item],
|
36
|
+
link: next_link(sort_item: sort_item),
|
37
|
+
highlighted_border: false,
|
38
|
+
padding: "xs",
|
39
|
+
icon_right: sort_icon(item[:direction], item[:active]),
|
40
|
+
active: item[:active],
|
41
|
+
classname: "header_nav_item"
|
42
|
+
}) %>
|
43
|
+
<% end %>
|
42
44
|
<% end %>
|
43
45
|
<% end %>
|
44
46
|
<% end %>
|
45
47
|
<% end %>
|
46
48
|
<% end %>
|
47
|
-
<%
|
49
|
+
<% else %>
|
50
|
+
<%= content_tag(:div,
|
51
|
+
aria: object.aria,
|
52
|
+
class: object.classname,
|
53
|
+
data: object.data,
|
54
|
+
id: object.id) do %>
|
55
|
+
<%= content.presence || object.text %>
|
56
|
+
<% end %>
|
57
|
+
<% end %>
|
@@ -23,9 +23,16 @@ module Playbook
|
|
23
23
|
default: ""
|
24
24
|
prop :sort_dropdown, type: Playbook::Props::Boolean,
|
25
25
|
default: false
|
26
|
+
prop :tag, type: Playbook::Props::Enum,
|
27
|
+
values: %w[table div],
|
28
|
+
default: "table"
|
26
29
|
|
27
30
|
def classname
|
28
|
-
generate_classname("pb_table_header_kit", align_class)
|
31
|
+
generate_classname("pb_table_header_kit", align_class) + tag_class
|
32
|
+
end
|
33
|
+
|
34
|
+
def tag_class
|
35
|
+
" pb_table_th"
|
29
36
|
end
|
30
37
|
|
31
38
|
def align_class
|
@@ -1,7 +1,17 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
1
|
+
<% if object.tag == "table" %>
|
2
|
+
<%= content_tag(:tr,
|
3
|
+
aria: object.aria,
|
4
|
+
class: object.classname,
|
5
|
+
data: object.data,
|
6
|
+
id: object.id) do %>
|
7
|
+
<%= content.presence %>
|
8
|
+
<% end %>
|
9
|
+
<% else %>
|
10
|
+
<%= content_tag(:div,
|
11
|
+
aria: object.aria,
|
12
|
+
class: object.classname,
|
13
|
+
data: object.data,
|
14
|
+
id: object.id) do %>
|
15
|
+
<%= content.presence %>
|
16
|
+
<% end %>
|
17
|
+
<% end %>
|
@@ -5,14 +5,21 @@ module Playbook
|
|
5
5
|
class TableRow < Playbook::KitBase
|
6
6
|
prop :side_highlight_color, type: Playbook::Props::String,
|
7
7
|
default: "none"
|
8
|
+
prop :tag, type: Playbook::Props::Enum,
|
9
|
+
values: %w[table div],
|
10
|
+
default: "table"
|
8
11
|
|
9
12
|
def classname
|
10
|
-
generate_classname("pb_table_row_kit", side_highlight_class)
|
13
|
+
generate_classname("pb_table_row_kit", side_highlight_class) + tag_class
|
11
14
|
end
|
12
15
|
|
13
16
|
def side_highlight_class
|
14
17
|
side_highlight_color.present? ? "side_highlight_#{side_highlight_color}" : nil
|
15
18
|
end
|
19
|
+
|
20
|
+
def tag_class
|
21
|
+
" pb_table_tr"
|
22
|
+
end
|
16
23
|
end
|
17
24
|
end
|
18
25
|
end
|
@@ -27,7 +27,7 @@ type TextInputProps = {
|
|
27
27
|
required?: boolean,
|
28
28
|
type: string,
|
29
29
|
value: string | number,
|
30
|
-
children:
|
30
|
+
children: React.ReactElement,
|
31
31
|
addOn?: {
|
32
32
|
icon?: string,
|
33
33
|
alignment?: "right" | "left",
|
@@ -85,8 +85,12 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
|
|
85
85
|
icon={icon}
|
86
86
|
/>
|
87
87
|
)
|
88
|
+
|
89
|
+
const childInput = children ? children.type === "input" : undefined
|
90
|
+
|
88
91
|
const textInput = (
|
89
|
-
|
92
|
+
childInput ? React.cloneElement(children, { className: "text_input" }) :
|
93
|
+
(<input
|
90
94
|
{...domSafeProps(props)}
|
91
95
|
className="text_input"
|
92
96
|
disabled={disabled}
|
@@ -99,7 +103,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
|
|
99
103
|
required={required}
|
100
104
|
type={type}
|
101
105
|
value={value}
|
102
|
-
/>
|
106
|
+
/>)
|
103
107
|
)
|
104
108
|
|
105
109
|
const addOnInput = (
|
@@ -131,7 +135,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
|
|
131
135
|
)
|
132
136
|
|
133
137
|
const render = (() => {
|
134
|
-
if(children) return children
|
138
|
+
if (children && !childInput) return children
|
135
139
|
if (shouldShowAddOn) return addOnInput
|
136
140
|
|
137
141
|
return textInput
|
@@ -144,7 +148,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
|
|
144
148
|
{...htmlProps}
|
145
149
|
className={css}
|
146
150
|
>
|
147
|
-
{label &&
|
151
|
+
{label &&
|
148
152
|
<Caption
|
149
153
|
className="pb_text_input_kit_label"
|
150
154
|
text={label}
|
@@ -58,6 +58,16 @@ const TextInputAddOn = (props) => {
|
|
58
58
|
{...props}
|
59
59
|
/>
|
60
60
|
</div>
|
61
|
+
<div>
|
62
|
+
<TextInput
|
63
|
+
addOn={{ icon: 'frog', alignment: 'right', border: true }}
|
64
|
+
label="Right-Aligned Add On With Child Input"
|
65
|
+
onChange={handleUpdateFourthInput}
|
66
|
+
{...props}
|
67
|
+
>
|
68
|
+
<input />
|
69
|
+
</TextInput>
|
70
|
+
</div>
|
61
71
|
<div>
|
62
72
|
<TextInput
|
63
73
|
addOn={{ icon: 'percent', alignment: 'left', border: false }}
|
@@ -76,6 +86,16 @@ const TextInputAddOn = (props) => {
|
|
76
86
|
{...props}
|
77
87
|
/>
|
78
88
|
</div>
|
89
|
+
<div>
|
90
|
+
<TextInput
|
91
|
+
addOn={{ icon: 'frog', alignment: 'left', border: true }}
|
92
|
+
label="Left-Aligned Add On With Child Input"
|
93
|
+
onChange={handleUpdateFourthInput}
|
94
|
+
{...props}
|
95
|
+
>
|
96
|
+
<input />
|
97
|
+
</TextInput>
|
98
|
+
</div>
|
79
99
|
</>
|
80
100
|
)
|
81
101
|
}
|
@@ -0,0 +1,30 @@
|
|
1
|
+
![user-presence-indicator)](https://github.com/powerhome/playbook/assets/112719604/96ee8408-2e21-4aaf-ae65-9f023515cf8d)
|
2
|
+
|
3
|
+
```swift
|
4
|
+
VStack(alignment: .leading, spacing: Spacing.small) {
|
5
|
+
PBUser(
|
6
|
+
name: name,
|
7
|
+
|
8
|
+
image: img,
|
9
|
+
size: .small,
|
10
|
+
territory: "PHL",
|
11
|
+
title: title,
|
12
|
+
status: .online
|
13
|
+
)
|
14
|
+
PBUser(
|
15
|
+
name: name,
|
16
|
+
image: img,
|
17
|
+
territory: "PHL",
|
18
|
+
title: title,
|
19
|
+
status: .away
|
20
|
+
)
|
21
|
+
PBUser(
|
22
|
+
name: name,
|
23
|
+
image: img,
|
24
|
+
size: .large,
|
25
|
+
territory: "PHL",
|
26
|
+
title: title,
|
27
|
+
status: .offline
|
28
|
+
)
|
29
|
+
}
|
30
|
+
```
|
@@ -7,4 +7,5 @@
|
|
7
7
|
| **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.verticle` |
|
8
8
|
| **size** | `UserAvatarSize` | Changes the size of the User | `.medium` | `.small` `.medium` `.large` |
|
9
9
|
| **territory** | `String` | Adds the User's territory | | |
|
10
|
-
| **title** | `String` | Adds a title | | |
|
10
|
+
| **title** | `String` | Adds a title | | |
|
11
|
+
| **status** | `PBAvatar.PresenceStatus?` | An idicator for the current status of the user | `.none` | `.online` `.away` `.offline` |
|
@@ -21,44 +21,85 @@
|
|
21
21
|
.z_index_1 {
|
22
22
|
z-index: 100;
|
23
23
|
}
|
24
|
+
|
24
25
|
.z_index_2 {
|
25
26
|
z-index: 200;
|
26
27
|
}
|
28
|
+
|
27
29
|
.z_index_3 {
|
28
30
|
z-index: 300;
|
29
31
|
}
|
32
|
+
|
30
33
|
.z_index_4 {
|
31
34
|
z-index: 400;
|
32
35
|
}
|
36
|
+
|
33
37
|
.z_index_5 {
|
34
38
|
z-index: 500;
|
35
39
|
}
|
40
|
+
|
36
41
|
.z_index_6 {
|
37
42
|
z-index: 600;
|
38
43
|
}
|
44
|
+
|
39
45
|
.z_index_7 {
|
40
46
|
z-index: 700;
|
41
47
|
}
|
48
|
+
|
42
49
|
.z_index_8 {
|
43
50
|
z-index: 800;
|
44
51
|
}
|
52
|
+
|
45
53
|
.z_index_9 {
|
46
54
|
z-index: 900;
|
47
55
|
}
|
56
|
+
|
48
57
|
.z_index_10 {
|
49
58
|
z-index: 1000;
|
50
59
|
}
|
51
60
|
|
52
61
|
$zIndex_values: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
|
53
|
-
|
62
|
+
|
54
63
|
@each $size, $size_value in $breakpoints_grid {
|
55
64
|
@each $zIndex_value in $zIndex_values {
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
}
|
65
|
+
$min_size: map-get($size_value, "min");
|
66
|
+
$max_size: map-get($size_value, "max");
|
67
|
+
|
68
|
+
.z_index_#{$size}_#{$zIndex_value} {
|
69
|
+
@include break_on($min_size, $max_size) {
|
70
|
+
z-index: #{$zIndex_value * 100} !important;
|
71
|
+
}
|
72
|
+
}
|
73
|
+
}
|
74
|
+
}
|
75
|
+
|
76
|
+
$space_classes: (
|
77
|
+
xxs: $space_xxs,
|
78
|
+
xs: $space_xs,
|
79
|
+
sm: $space_sm,
|
80
|
+
md: $space_md,
|
81
|
+
lg: $space_lg,
|
82
|
+
xl: $space_xl,
|
83
|
+
0: 0,
|
84
|
+
auto: auto,
|
85
|
+
initial: initial,
|
86
|
+
inherit: inherit
|
87
|
+
);
|
88
|
+
|
89
|
+
$positions: "top", "right", "bottom", "left";
|
90
|
+
|
91
|
+
@each $position in $positions {
|
92
|
+
@each $space_name, $space in $space_classes {
|
93
|
+
.#{$position}_#{$space_name} {
|
94
|
+
@if $space_name == "0" {
|
95
|
+
#{$position}: 0 !important;
|
96
|
+
}
|
97
|
+
@else if $space_name == "auto" or $space_name == "initial" or $space_name == "inherit" {
|
98
|
+
#{$position}: #{$space} !important;
|
99
|
+
}
|
100
|
+
@else {
|
101
|
+
#{$position}: #{-$space} !important;
|
62
102
|
}
|
103
|
+
}
|
63
104
|
}
|
64
105
|
}
|
@@ -118,6 +118,22 @@ type Position = {
|
|
118
118
|
position?: "relative" | "absolute" | "fixed" | "sticky" | "static",
|
119
119
|
}
|
120
120
|
|
121
|
+
type Top = {
|
122
|
+
top?: Sizes,
|
123
|
+
}
|
124
|
+
|
125
|
+
type Right = {
|
126
|
+
right?: Sizes,
|
127
|
+
}
|
128
|
+
|
129
|
+
type Bottom = {
|
130
|
+
bottom?: Sizes,
|
131
|
+
}
|
132
|
+
|
133
|
+
type Left = {
|
134
|
+
left?: Sizes,
|
135
|
+
}
|
136
|
+
|
121
137
|
type Shadow = {
|
122
138
|
shadow?: "none" | "deep" | "deeper" | "deepest",
|
123
139
|
}
|
@@ -151,7 +167,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
|
|
151
167
|
BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
|
152
168
|
FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
|
153
169
|
LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding &
|
154
|
-
Position & Shadow & TextAlign & Truncate & ZIndex & { hover?: string };
|
170
|
+
Position & Shadow & TextAlign & Truncate & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
|
155
171
|
|
156
172
|
const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
|
157
173
|
const keys: string[] = Object.keys(prop)
|
@@ -424,6 +440,12 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
|
|
424
440
|
css += position && position !== 'static' ? `position_${position}` : ''
|
425
441
|
return css
|
426
442
|
},
|
443
|
+
|
444
|
+
topProps: ({ top }: Top) => top ? `top_${top}` : '',
|
445
|
+
rightProps: ({ right }: Right) => right ? `right_${right}` : '',
|
446
|
+
bottomProps: ({ bottom }: Bottom) => bottom ? `bottom_${bottom}` : '',
|
447
|
+
leftProps: ({ left }: Left) => left ? `left_${left}` : '',
|
448
|
+
|
427
449
|
textAlignProps: ({ textAlign }: TextAlign) => {
|
428
450
|
if (typeof textAlign === 'object') {
|
429
451
|
return getResponsivePropClasses(textAlign, 'text_align')
|