playbook_ui_docs 13.19.0.pre.alpha.play1186collapsiblenaviconcolorbug2321 → 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 (25) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +7 -7
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +7 -7
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +7 -7
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +7 -7
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +1 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +7 -7
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +7 -7
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +7 -7
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +7 -7
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +7 -7
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +7 -7
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +1 -1
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +1 -1
  15. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.html.erb +34 -0
  16. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md +7 -0
  17. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +34 -0
  18. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md +3 -0
  19. data/app/pb_kits/playbook/pb_table/docs/example.yml +3 -0
  20. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx +20 -0
  21. data/app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md +30 -0
  22. data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +2 -1
  23. data/app/pb_kits/playbook/pb_user/docs/example.yml +1 -0
  24. data/dist/playbook-doc.js +5 -5
  25. metadata +7 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 02f58fc8d21d61aa6839a71c560fe60fdd187f0b2cecfe9b115221fe3b757633
4
- data.tar.gz: c3bbb67da585d399d3aebf243b27b9626c8eadced7ecd53e3ad3e6cb460a1f41
3
+ metadata.gz: b84452b4ed1a1c862c1d16e533840f89ee2f0496a9e0461661e49b7cd6a1061f
4
+ data.tar.gz: 3abd4e3ff97055d5b1334c014da6941c0b9d3f5d41210d0c8fa4dde6da8c771a
5
5
  SHA512:
6
- metadata.gz: 5b93e3d20a4081a3ad88022827c1a8d8b5041dfb5dbad3ee69b303e5a97df1b37161d9b6c246f0ae1c7c1bbc4db420a6235a35297492e51fc67b726eea7cce6d
7
- data.tar.gz: ff550cdce2b9ac1909629653fd472d795e33ed67de040dc5d28905c06eae4e00024ace67f3da6ce87ac9a691e199542b5b770f623ee6e2168f6168559d24fc16
6
+ metadata.gz: 568e7f5d4e19e480e2c21cfc6aec3f492bb5ee04dae61d85d974194c5856e6a0b651c5faa12939d2387b21d4bcbc5463cc45d889b7f976e670e09e502a70a208
7
+ data.tar.gz: 13bc1643b8e52060cce796cae50e55c29c94f3bf9f002edbbbd3906721c5fdf7c2ca7f9e69dbb14a04ae5bb7b47e8c3a70f497a2d38dcd31ce86bfb6320ddaed
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx CHANGED
@@ -1,6 +1,6 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../../";
3
- import { MOCK_DATA } from "./_mock_data";
1
+ import React from "react"
2
+ import { AdvancedTable } from "../../"
3
+ import { MOCK_DATA } from "./_mock_data"
4
4
 
5
5
  const AdvancedTableCollapsibleTrail = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableCollapsibleTrail = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  return (
39
39
  <div>
@@ -46,7 +46,7 @@ const AdvancedTableCollapsibleTrail = (props) => {
46
46
  <AdvancedTable.Body collapsibleTrail={false} />
47
47
  </AdvancedTable>
48
48
  </div>
49
- );
50
- };
49
+ )
50
+ }
51
51
 
52
- export default AdvancedTableCollapsibleTrail;
52
+ export default AdvancedTableCollapsibleTrail
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx CHANGED
@@ -1,6 +1,6 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../../";
3
- import { MOCK_DATA } from "./_mock_data";
1
+ import React from "react"
2
+ import { AdvancedTable } from "../../"
3
+ import { MOCK_DATA } from "./_mock_data"
4
4
 
5
5
  const AdvancedTableDefault = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableDefault = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  return (
39
39
  <div>
@@ -43,7 +43,7 @@ const AdvancedTableDefault = (props) => {
43
43
  {...props}
44
44
  />
45
45
  </div>
46
- );
47
- };
46
+ )
47
+ }
48
48
 
49
- export default AdvancedTableDefault;
49
+ export default AdvancedTableDefault
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx CHANGED
@@ -1,6 +1,6 @@
1
- import React, { useState } from "react";
2
- import { AdvancedTable } from "../../";
3
- import { MOCK_DATA } from "./_mock_data";
1
+ import React, { useState } from "react"
2
+ import { AdvancedTable } from "../../"
3
+ import { MOCK_DATA } from "./_mock_data"
4
4
 
5
5
  const AdvancedTableExpandedControl = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableExpandedControl = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  //State for manually effecting what is expanded
39
39
  const [expanded, setExpanded] = useState({'0': true, '0.0': true, '0.0.1': true})
@@ -53,7 +53,7 @@ const AdvancedTableExpandedControl = (props) => {
53
53
  {...props}
54
54
  />
55
55
  </div>
56
- );
57
- };
56
+ )
57
+ }
58
58
 
59
- export default AdvancedTableExpandedControl;
59
+ export default AdvancedTableExpandedControl
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx CHANGED
@@ -1,6 +1,6 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../..";
3
- import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading";
1
+ import React from "react"
2
+ import { AdvancedTable } from "../.."
3
+ import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
4
4
 
5
5
  const AdvancedTableInlineRowLoading = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableInlineRowLoading = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  //Render the subRow header rows
39
39
  const subRowHeaders = ["Quarter", "Month", "Day"]
@@ -52,7 +52,7 @@ const AdvancedTableInlineRowLoading = (props) => {
52
52
  <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
53
53
  </AdvancedTable>
54
54
  </div>
55
- );
56
- };
55
+ )
56
+ }
57
57
 
58
- export default AdvancedTableInlineRowLoading;
58
+ export default AdvancedTableInlineRowLoading
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md CHANGED
@@ -1,4 +1,4 @@
1
- As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the `inlineRowLoading` prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty `children` array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty `children` arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic].
1
+ As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the `inlineRowLoading` prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty `children` array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty `children` arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic].
2
2
 
3
3
  In this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows.
4
4
 
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx CHANGED
@@ -1,7 +1,7 @@
1
- import React, { useState } from "react";
2
- import { AdvancedTable } from "../../";
1
+ import React, { useState } from "react"
2
+ import { AdvancedTable } from "../../"
3
3
  import { Button } from "../../"
4
- import { MOCK_DATA } from "./_mock_data";
4
+ import { MOCK_DATA } from "./_mock_data"
5
5
 
6
6
  const AdvancedTableLoading = (props) => {
7
7
 
@@ -37,7 +37,7 @@ const [isloading, setIsLoading] = useState(true)
37
37
  accessor: "graduatedStudents",
38
38
  label: "Graduated Students",
39
39
  },
40
- ];
40
+ ]
41
41
 
42
42
  return (
43
43
  <div>
@@ -54,7 +54,7 @@ const [isloading, setIsLoading] = useState(true)
54
54
  {...props}
55
55
  />
56
56
  </div>
57
- );
58
- };
57
+ )
58
+ }
59
59
 
60
- export default AdvancedTableLoading;
60
+ export default AdvancedTableLoading
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx CHANGED
@@ -1,6 +1,6 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../..";
3
- import { MOCK_DATA } from "./_mock_data";
1
+ import React from "react"
2
+ import { AdvancedTable } from "../.."
3
+ import { MOCK_DATA } from "./_mock_data"
4
4
 
5
5
  const AdvancedTableSort = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableSort = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  return (
39
39
  <div>
@@ -46,7 +46,7 @@ const AdvancedTableSort = (props) => {
46
46
  <AdvancedTable.Body />
47
47
  </AdvancedTable>
48
48
  </div>
49
- );
50
- };
49
+ )
50
+ }
51
51
 
52
- export default AdvancedTableSort;
52
+ export default AdvancedTableSort
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx CHANGED
@@ -1,6 +1,6 @@
1
- import React, { useState } from "react";
2
- import { AdvancedTable } from "../..";
3
- import { MOCK_DATA } from "./_mock_data";
1
+ import React, { useState } from "react"
2
+ import { AdvancedTable } from "../.."
3
+ import { MOCK_DATA } from "./_mock_data"
4
4
 
5
5
  const AdvancedTableSortControl = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableSortControl = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  //State for sort direction
39
39
  const [isSortDesc, setIsSortDesc] = useState({desc: false})
@@ -57,7 +57,7 @@ const AdvancedTableSortControl = (props) => {
57
57
  <AdvancedTable.Body />
58
58
  </AdvancedTable>
59
59
  </div>
60
- );
61
- };
60
+ )
61
+ }
62
62
 
63
- export default AdvancedTableSortControl;
63
+ export default AdvancedTableSortControl
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx CHANGED
@@ -1,6 +1,6 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../..";
3
- import { MOCK_DATA } from "./_mock_data";
1
+ import React from "react"
2
+ import { AdvancedTable } from "../.."
3
+ import { MOCK_DATA } from "./_mock_data"
4
4
 
5
5
  const AdvancedTableSubrowHeaders = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableSubrowHeaders = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  //Render the subRow header rows
39
39
  const subRowHeaders = ["Quarter", "Month", "Day"]
@@ -51,7 +51,7 @@ const AdvancedTableSubrowHeaders = (props) => {
51
51
  <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
52
52
  </AdvancedTable>
53
53
  </div>
54
- );
55
- };
54
+ )
55
+ }
56
56
 
57
- export default AdvancedTableSubrowHeaders;
57
+ export default AdvancedTableSubrowHeaders
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx CHANGED
@@ -1,6 +1,6 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../../";
3
- import { MOCK_DATA } from "./_mock_data";
1
+ import React from "react"
2
+ import { AdvancedTable } from "../../"
3
+ import { MOCK_DATA } from "./_mock_data"
4
4
 
5
5
  const AdvancedTableTableOptions = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableTableOptions = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  const tableOptions = {
39
39
  initialState: {
@@ -55,7 +55,7 @@ const AdvancedTableTableOptions = (props) => {
55
55
  {...props}
56
56
  />
57
57
  </div>
58
- );
59
- };
58
+ )
59
+ }
60
60
 
61
- export default AdvancedTableTableOptions;
61
+ export default AdvancedTableTableOptions
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx CHANGED
@@ -1,6 +1,6 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../../";
3
- import { MOCK_DATA } from "./_mock_data";
1
+ import React from "react"
2
+ import { AdvancedTable } from "../../"
3
+ import { MOCK_DATA } from "./_mock_data"
4
4
 
5
5
  const AdvancedTableTableProps = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableTableProps = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  const tableProps = {
39
39
  container: false,
@@ -49,7 +49,7 @@ const AdvancedTableTableProps = (props) => {
49
49
  {...props}
50
50
  />
51
51
  </div>
52
- );
53
- };
52
+ )
53
+ }
54
54
 
55
- export default AdvancedTableTableProps;
55
+ export default AdvancedTableTableProps
data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js CHANGED
@@ -275,4 +275,4 @@ export const MOCK_DATA = [
275
275
  },
276
276
  ],
277
277
  },
278
- ];
278
+ ]
data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js CHANGED
@@ -196,5 +196,5 @@ export const MOCK_DATA_INLINE_LOADING = [
196
196
  },
197
197
  ],
198
198
  },
199
- ];
199
+ ]
200
200
 
data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.html.erb ADDED
@@ -0,0 +1,34 @@
1
+ <%= pb_rails("table", props: { size: "sm" }) do %>
2
+ <%= pb_rails("table/table_head") do %>
3
+ <%= pb_rails("table/table_row") do %>
4
+ <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
5
+ <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
6
+ <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
7
+ <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
8
+ <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
9
+ <% end %>
10
+ <% end %>
11
+ <%= pb_rails("table/table_body") do %>
12
+ <%= pb_rails("table/table_row") do %>
13
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
14
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
15
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
16
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
17
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
18
+ <% end %>
19
+ <%= pb_rails("table/table_row") 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
+ <% end %>
26
+ <%= pb_rails("table/table_row") do %>
27
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
28
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
29
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
30
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
31
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
32
+ <% end %>
33
+ <% end %>
34
+ <% end %>
data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md ADDED
@@ -0,0 +1,7 @@
1
+ You can optionally build your table using our sub-components, which map to their respective html table elements:
2
+
3
+ `table_head` = `thead`
4
+ `table_body` = `tbody`
5
+ `table_row` = `tr`
6
+ `table_header` = `th`
7
+ `table_cell` = `td`
data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb ADDED
@@ -0,0 +1,34 @@
1
+ <%= pb_rails("table", props: { size: "sm", tag:"div" }) do %>
2
+ <%= pb_rails("table/table_head", props: {tag:"div"}) do %>
3
+ <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
4
+ <%= pb_rails("table/table_header", props: { text: "Column 1", tag:"div"}) %>
5
+ <%= pb_rails("table/table_header", props: { text: "Column 2", tag:"div"}) %>
6
+ <%= pb_rails("table/table_header", props: { text: "Column 3", tag:"div"}) %>
7
+ <%= pb_rails("table/table_header", props: { text: "Column 4", tag:"div"}) %>
8
+ <%= pb_rails("table/table_header", props: { text: "Column 5", tag:"div"}) %>
9
+ <% end %>
10
+ <% end %>
11
+ <%= pb_rails("table/table_body", props: {tag:"div"}) do %>
12
+ <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
13
+ <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
14
+ <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
15
+ <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
16
+ <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
17
+ <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
18
+ <% end %>
19
+ <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
20
+ <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
21
+ <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
22
+ <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
23
+ <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
24
+ <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
25
+ <% end %>
26
+ <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
27
+ <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
28
+ <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
29
+ <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
30
+ <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
31
+ <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
32
+ <% end %>
33
+ <% end %>
34
+ <% end %>
data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md ADDED
@@ -0,0 +1,3 @@
1
+ Optionally build your table with divs by passing `div` to the `tag` prop of all* your sub-components.
2
+
3
+ *NOTE: The `tag` prop defaults to `table`, which returns html elements. If divs are desired, sub-components must be used and all table elements, including the initial kit call, must use `div` as their `tag` in order for the table to render properly.
data/app/pb_kits/playbook/pb_table/docs/example.yml CHANGED
@@ -25,6 +25,9 @@ examples:
25
25
  - table_with_background_kit: Table With Background Kit
26
26
  - table_vertical_border: Vertical Borders
27
27
  - table_striped: Striped Table
28
+ - table_with_subcomponents: Table with Sub Components (Table Elements)
29
+ - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
30
+
28
31
 
29
32
  react:
30
33
  # - table_div: Div
data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx CHANGED
@@ -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
  }
data/app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md ADDED
@@ -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
+ ```
data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md CHANGED
@@ -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` |
data/app/pb_kits/playbook/pb_user/docs/example.yml CHANGED
@@ -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: ""