playbook_ui 13.19.0 → 13.20.0.pre.alpha.PBNTR225advancedtablefeedback2375
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/pb_advanced_table/Components/CustomCell.tsx +21 -19
- data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +6 -3
- data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +12 -8
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +14 -9
- data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +9 -5
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +14 -10
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +12 -8
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +0 -2
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +2 -9
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +82 -78
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +54 -54
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_chrome_styles.scss +13 -0
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +28 -16
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +4 -8
- data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -4
- data/app/pb_kits/playbook/pb_icon/icon.rb +27 -10
- data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +4 -0
- data/app/pb_kits/playbook/pb_table/_table.tsx +86 -67
- data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +47 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.html.erb +34 -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.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_table/styles/_content.scss +3 -3
- data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_headers.scss +3 -3
- data/app/pb_kits/playbook/pb_table/styles/_hover.scss +11 -11
- data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_reset.scss +3 -3
- data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +4 -4
- data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_striped.scss +4 -4
- data/app/pb_kits/playbook/pb_table/styles/_structure.scss +22 -8
- data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +7 -7
- data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +14 -14
- data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +3 -4
- data/app/pb_kits/playbook/pb_table/table.html.erb +12 -2
- data/app/pb_kits/playbook/pb_table/table.rb +3 -0
- 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/dist/playbook-rails.js +2 -2
- data/lib/playbook/version.rb +2 -2
- metadata +21 -7
@@ -10,21 +10,21 @@
|
|
10
10
|
width: 100%;
|
11
11
|
background: none !important;
|
12
12
|
|
13
|
-
thead {
|
14
|
-
tr {
|
13
|
+
thead, .pb_table_thead {
|
14
|
+
tr, .pb_table_tr {
|
15
15
|
left: $offscreen;
|
16
16
|
position: absolute;
|
17
17
|
top: $offscreen;
|
18
18
|
|
19
|
-
th {
|
19
|
+
th, .pb_table_th {
|
20
20
|
display: block;
|
21
21
|
visibility: visible;
|
22
22
|
}
|
23
23
|
}
|
24
24
|
}
|
25
|
-
tbody {
|
26
|
-
tr {
|
27
|
-
td {
|
25
|
+
tbody, .pb_table_tbody {
|
26
|
+
tr, .pb_table_tr {
|
27
|
+
td, .pb_table_td {
|
28
28
|
display: block;
|
29
29
|
visibility: visible;
|
30
30
|
border-left-width: 1px !important;
|
@@ -63,7 +63,7 @@
|
|
63
63
|
}
|
64
64
|
|
65
65
|
&:first-child {
|
66
|
-
td {
|
66
|
+
td, .pb_table_td {
|
67
67
|
&:first-child {
|
68
68
|
margin-top: $space-xs !important;
|
69
69
|
}
|
@@ -74,9 +74,9 @@
|
|
74
74
|
&.table-card {
|
75
75
|
background: none !important;
|
76
76
|
|
77
|
-
tbody {
|
78
|
-
tr {
|
79
|
-
td {
|
77
|
+
tbody, .pb_table_tbody {
|
78
|
+
tr, .pb_table_tr {
|
79
|
+
td, .pb_table_td {
|
80
80
|
background: $white !important;
|
81
81
|
border-left-width: 1px !important;
|
82
82
|
border-right-width: 1px !important;
|
@@ -98,8 +98,8 @@
|
|
98
98
|
}
|
99
99
|
@media (hover:hover) {
|
100
100
|
&:hover {
|
101
|
-
tbody {
|
102
|
-
tr {
|
101
|
+
tbody, .pb_table_tbody {
|
102
|
+
tr, .pb_table_tr {
|
103
103
|
box-shadow: 0 0 0 $white !important;
|
104
104
|
}
|
105
105
|
}
|
@@ -108,9 +108,9 @@
|
|
108
108
|
// reset the first and last to normalize
|
109
109
|
@each $name, $value in $cell-pad-list {
|
110
110
|
&.#{$name} {
|
111
|
-
tbody {
|
112
|
-
tr {
|
113
|
-
td {
|
111
|
+
tbody, .pb_table_tbody {
|
112
|
+
tr, .pb_table_tr {
|
113
|
+
td, .pb_table_td {
|
114
114
|
&:first-child,
|
115
115
|
&:last-child {
|
116
116
|
padding: $value $cell-gutter !important;
|
@@ -1,13 +1,12 @@
|
|
1
1
|
[class^=pb_table] {
|
2
2
|
&.vertical-border {
|
3
|
-
td,
|
4
|
-
th {
|
3
|
+
td, th, .pb_table_td, .pb_table_th {
|
5
4
|
border-right: 1px solid $border_light !important;
|
6
5
|
}
|
7
6
|
|
8
7
|
@media screen and (min-width: $screen-xs-min) {
|
9
|
-
tr:hover {
|
10
|
-
td:last-child {
|
8
|
+
tr:hover, .pb_table_tr:hover {
|
9
|
+
td:last-child, .pb_table_td:last-child {
|
11
10
|
border-right-color: darken($border_light, 10%) !important;
|
12
11
|
}
|
13
12
|
}
|
@@ -1,9 +1,19 @@
|
|
1
1
|
<%= content_tag(:div) do %>
|
2
|
-
|
2
|
+
<% if object.tag == "table" %>
|
3
|
+
<%= content_tag(:table,
|
3
4
|
aria: object.aria,
|
4
5
|
class: object.classname,
|
5
6
|
data: object.data,
|
6
7
|
id: object.id) do %>
|
7
|
-
|
8
|
+
<%= content.presence %>
|
9
|
+
<% end %>
|
10
|
+
<% else %>
|
11
|
+
<%= content_tag(:div,
|
12
|
+
aria: object.aria,
|
13
|
+
class: object.classname,
|
14
|
+
data: object.data,
|
15
|
+
id: object.id) do %>
|
16
|
+
<%= content.presence %>
|
17
|
+
<% end %>
|
8
18
|
<% end %>
|
9
19
|
<% end %>
|
@@ -0,0 +1,17 @@
|
|
1
|
+
<% if object.tag == "table" %>
|
2
|
+
<%= content_tag(:tbody,
|
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 %>
|
@@ -0,0 +1,15 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module PbTable
|
5
|
+
class TableBody < Playbook::KitBase
|
6
|
+
prop :tag, type: Playbook::Props::Enum,
|
7
|
+
values: %w[table div],
|
8
|
+
default: "table"
|
9
|
+
|
10
|
+
def classname
|
11
|
+
generate_classname("pb_table_tbody")
|
12
|
+
end
|
13
|
+
end
|
14
|
+
end
|
15
|
+
end
|
@@ -0,0 +1,17 @@
|
|
1
|
+
<% if object.tag == "table" %>
|
2
|
+
<%= content_tag(:td,
|
3
|
+
aria: object.aria,
|
4
|
+
class: object.classname,
|
5
|
+
data: object.data,
|
6
|
+
id: object.id) do %>
|
7
|
+
<%= content.presence || object.text %>
|
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 || object.text %>
|
16
|
+
<% end %>
|
17
|
+
<% end %>
|
@@ -0,0 +1,17 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module PbTable
|
5
|
+
class TableCell < Playbook::KitBase
|
6
|
+
prop :tag, type: Playbook::Props::Enum,
|
7
|
+
values: %w[table div],
|
8
|
+
default: "table"
|
9
|
+
prop :text, type: Playbook::Props::String,
|
10
|
+
default: ""
|
11
|
+
|
12
|
+
def classname
|
13
|
+
generate_classname("pb_table_td")
|
14
|
+
end
|
15
|
+
end
|
16
|
+
end
|
17
|
+
end
|
@@ -0,0 +1,17 @@
|
|
1
|
+
<% if object.tag == "table" %>
|
2
|
+
<%= content_tag(:thead,
|
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 %>
|
@@ -0,0 +1,15 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module PbTable
|
5
|
+
class TableHead < Playbook::KitBase
|
6
|
+
prop :tag, type: Playbook::Props::Enum,
|
7
|
+
values: %w[table div],
|
8
|
+
default: "table"
|
9
|
+
|
10
|
+
def classname
|
11
|
+
generate_classname("pb_table_thead")
|
12
|
+
end
|
13
|
+
end
|
14
|
+
end
|
15
|
+
end
|
@@ -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` |
|