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.
Files changed (85) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +21 -19
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +6 -3
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +12 -8
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +14 -9
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +9 -5
  7. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +14 -10
  8. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +12 -8
  9. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +3 -2
  10. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +0 -2
  11. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +2 -9
  12. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +82 -78
  13. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +54 -54
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +7 -7
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +1 -1
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +7 -7
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +1 -1
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +7 -7
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +7 -7
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +1 -1
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +7 -7
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +1 -1
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +7 -7
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +7 -7
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +7 -7
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +1 -1
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +7 -7
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +1 -1
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +7 -7
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +1 -1
  31. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +1 -1
  32. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_chrome_styles.scss +13 -0
  33. data/app/pb_kits/playbook/pb_icon/_icon.tsx +28 -16
  34. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
  35. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
  36. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +4 -8
  37. data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -4
  38. data/app/pb_kits/playbook/pb_icon/icon.rb +27 -10
  39. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +4 -0
  40. data/app/pb_kits/playbook/pb_table/_table.tsx +86 -67
  41. data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +34 -0
  42. data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +47 -0
  43. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.html.erb +34 -0
  44. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md +7 -0
  45. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +34 -0
  46. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md +3 -0
  47. data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
  48. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  49. data/app/pb_kits/playbook/pb_table/styles/_content.scss +3 -3
  50. data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +15 -15
  51. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +3 -3
  52. data/app/pb_kits/playbook/pb_table/styles/_hover.scss +11 -11
  53. data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +15 -15
  54. data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +15 -15
  55. data/app/pb_kits/playbook/pb_table/styles/_reset.scss +3 -3
  56. data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +2 -2
  57. data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +4 -4
  58. data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss +2 -2
  59. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +4 -4
  60. data/app/pb_kits/playbook/pb_table/styles/_structure.scss +22 -8
  61. data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +7 -7
  62. data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +14 -14
  63. data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +2 -2
  64. data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +15 -15
  65. data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +3 -4
  66. data/app/pb_kits/playbook/pb_table/table.html.erb +12 -2
  67. data/app/pb_kits/playbook/pb_table/table.rb +3 -0
  68. data/app/pb_kits/playbook/pb_table/table_body.html.erb +17 -0
  69. data/app/pb_kits/playbook/pb_table/table_body.rb +15 -0
  70. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +17 -0
  71. data/app/pb_kits/playbook/pb_table/table_cell.rb +17 -0
  72. data/app/pb_kits/playbook/pb_table/table_head.html.erb +17 -0
  73. data/app/pb_kits/playbook/pb_table/table_head.rb +15 -0
  74. data/app/pb_kits/playbook/pb_table/table_header.html.erb +49 -39
  75. data/app/pb_kits/playbook/pb_table/table_header.rb +8 -1
  76. data/app/pb_kits/playbook/pb_table/table_row.html.erb +17 -7
  77. data/app/pb_kits/playbook/pb_table/table_row.rb +8 -1
  78. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +9 -5
  79. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx +20 -0
  80. data/app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md +30 -0
  81. data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +2 -1
  82. data/app/pb_kits/playbook/pb_user/docs/example.yml +1 -0
  83. data/dist/playbook-rails.js +2 -2
  84. data/lib/playbook/version.rb +2 -2
  85. 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
- <%= content_tag(:table,
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
- <%= content.presence %>
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 %>
@@ -27,6 +27,9 @@ module Playbook
27
27
  default: false
28
28
  prop :striped, type: Playbook::Props::Boolean,
29
29
  default: false
30
+ prop :tag, type: Playbook::Props::Enum,
31
+ values: %w[table div],
32
+ default: "table"
30
33
 
31
34
  def classname
32
35
  generate_classname(
@@ -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
- <%= content_tag(:th,
2
- colspan: object.colspan,
3
- aria: object.aria,
4
- class: object.classname,
5
- data: object.data,
6
- id: "pb-th#{object.id}" ) do %>
7
- <% unless sorting_style? %>
8
- <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
9
- <%= content.presence || object.text %>
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
- <% if sorting_style? %>
16
- <%= pb_rails("icon", props: { icon: object.sort_icon(active_item[:direction], active_item[:active]),
17
- fixed_width: true,
18
- classname: active_item.any? ? "pb_th_active" : "",
19
- padding_left: "xs" }) %>
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
- <% end %>
23
- <% if use_dropdown_select %>
24
- <%= pb_rails("popover", props: { classname: "pb_filter_sort_menu",
25
- close_on_click: "outside",
26
- trigger_element_id: "pb-th#{object.id}",
27
- tooltip_id: "sort-filter-btn-tooltip#{object.id}",
28
- position: object.placement ,
29
- padding: 'none'}) do %>
30
- <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
31
- <% object.sort_items.each do |sort_item| %>
32
- <% item = active_or_first_item(sort_items_for(sort_item)) %>
33
- <%= pb_rails("nav/item", props: {
34
- text: item[:item],
35
- link: next_link(sort_item: sort_item),
36
- highlighted_border: false,
37
- padding: "xs",
38
- icon_right: sort_icon(item[:direction], item[:active]),
39
- active: item[:active],
40
- classname: "header_nav_item"
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
- <% end %>
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
- <%= content_tag(:tr,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id) do %>
6
- <%= content.presence %>
7
- <% end %>
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: Node,
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
- <input
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` |
@@ -23,4 +23,5 @@ examples:
23
23
  - user_vertical_size_swift: Vertical
24
24
  - user_text_only_swift: Text Only
25
25
  - user_size_swift: Horizontal Size
26
+ - user_presence_indicator_swift: Presence Indicator
26
27
  - user_props_table: ""