playbook_ui_docs 13.18.0.pre.alpha.useexactnodejsversionghactions2183 → 13.19.0.pre.alpha.PBNTR200addadvancedtablekitdarkmodestyles2346

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +1 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +1 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +58 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +5 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +1 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +1 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +1 -1
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +200 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
  12. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.html.erb +49 -0
  13. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +68 -0
  14. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +1 -0
  15. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -0
  16. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
  17. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb +42 -0
  18. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx +83 -0
  19. data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
  20. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  21. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
  22. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
  23. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +4 -8
  24. data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +34 -0
  25. data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +47 -0
  26. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.html.erb +34 -0
  27. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md +7 -0
  28. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +34 -0
  29. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md +3 -0
  30. data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
  31. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  32. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx +20 -0
  33. data/app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md +30 -0
  34. data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +2 -1
  35. data/app/pb_kits/playbook/pb_user/docs/example.yml +1 -0
  36. data/dist/menu.yml +1 -1
  37. data/dist/playbook-doc.js +7 -7
  38. metadata +17 -2
data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx CHANGED
@@ -1,33 +1,59 @@
1
1
  import React from 'react'
2
2
  import { Icon } from '../../'
3
3
 
4
- // import Icons as config from 'power-icons'
5
4
  const config = {
6
- moon: (
7
- <svg
8
- ariaHidden="true"
9
- focusable="false"
10
- role="img"
11
- viewBox="0 0 512 512"
5
+ icon: (
6
+ <svg viewBox="0 -256 1792 1792"
12
7
  xmlns="http://www.w3.org/2000/svg"
13
8
  >
14
- <path
15
- d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
16
- fill="currentColor"
17
- />
9
+ <g transform="matrix(1,0,0,-1,53.152542,1217.0847)">
10
+ <path d="m 384,64 q 0,26 -19,45 -19,19 -45,19 -26,0 -45,-19 -19,-19 -19,-45 0,-26 19,-45 19,-19 45,-19 26,0 45,19 19,19 19,45 z m 644,420 -682,-682 q -37,-37 -90,-37 -52,0 -91,37 L 59,-90 Q 21,-54 21,0 21,53 59,91 L 740,772 Q 779,674 854.5,598.5 930,523 1028,484 z m 634,435 q 0,-39 -23,-106 Q 1592,679 1474.5,595.5 1357,512 1216,512 1031,512 899.5,643.5 768,775 768,960 q 0,185 131.5,316.5 131.5,131.5 316.5,131.5 58,0 121.5,-16.5 63.5,-16.5 107.5,-46.5 16,-11 16,-28 0,-17 -16,-28 L 1152,1120 V 896 l 193,-107 q 5,3 79,48.5 74,45.5 135.5,81 61.5,35.5 70.5,35.5 15,0 23.5,-10 8.5,-10 8.5,-25 z" />
11
+ </g>
18
12
  </svg>
19
13
  ),
20
14
  }
21
15
 
22
16
  const IconCustom = (props) => {
23
17
  return (
24
- <div>
25
- <Icon
26
- customIcon={config.moon}
27
- size="7x"
28
- {...props}
29
- />
30
- </div>
18
+ <React.Fragment>
19
+ <p>
20
+ <Icon
21
+ icon={config.icon}
22
+ {...props}
23
+ />
24
+ </p>
25
+ <p>
26
+ <Icon
27
+ icon={config.icon}
28
+ rotation={90}
29
+ size="2x"
30
+ {...props}
31
+ />
32
+ </p>
33
+ <p>
34
+ <Icon
35
+ icon={config.icon}
36
+ size="3x"
37
+ spin
38
+ {...props}
39
+ />
40
+ </p>
41
+ <p>
42
+ <Icon
43
+ icon={config.icon}
44
+ size="5x"
45
+ {...props}
46
+ />
47
+ </p>
48
+ <p>
49
+ <Icon
50
+ flip="horizontal"
51
+ icon={config.icon}
52
+ size="5x"
53
+ {...props}
54
+ />
55
+ </p>
56
+ </React.Fragment>
31
57
  )
32
58
  }
33
59
 
data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md CHANGED
@@ -4,16 +4,12 @@ When using custom icons it is important to introduce a "clean" SVG. In order to
4
4
 
5
5
  Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
6
6
 
7
- Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
7
+ Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
8
8
 
9
- Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
9
+ Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point **when designing instead of trying to retrofit the viewbox afterwards**!
10
10
 
11
- You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
12
-
13
- ### React
14
-
15
- So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
11
+ You must source _your own SVG into component/view_ you are working on. This can easily be done in programmatic and maintainable ways.
16
12
 
17
13
  ### Rails
18
14
 
19
- Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.
15
+ Sending the absolute path to the `icon` prop results in an `<SVG>` tag within the working view.
data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb ADDED
@@ -0,0 +1,34 @@
1
+ <%= pb_rails("table", props: { size: "sm", tag: "div" }) do %>
2
+ <div class="pb_table_thead">
3
+ <div class="pb_table_tr">
4
+ <div class="pb_table_th">Column 1</div>
5
+ <div class="pb_table_th">Column 2</div>
6
+ <div class="pb_table_th">Column 3</div>
7
+ <div class="pb_table_th">Column 4</div>
8
+ <div class="pb_table_th">Column 5</div>
9
+ </div>
10
+ </div>
11
+ <div class="pb_table_tbody">
12
+ <div class="pb_table_tr">
13
+ <div class="pb_table_td">Value 1</div>
14
+ <div class="pb_table_td">Value 2</div>
15
+ <div class="pb_table_td">Value 3</div>
16
+ <div class="pb_table_td">Value 4</div>
17
+ <div class="pb_table_td">Value 5</div>
18
+ </div>
19
+ <div class="pb_table_tr">
20
+ <div class="pb_table_td">Value 1</div>
21
+ <div class="pb_table_td">Value 2</div>
22
+ <div class="pb_table_td">Value 3</div>
23
+ <div class="pb_table_td">Value 4</div>
24
+ <div class="pb_table_td">Value 5</div>
25
+ </div>
26
+ <div class="pb_table_tr">
27
+ <div class="pb_table_td">Value 1</div>
28
+ <div class="pb_table_td">Value 2</div>
29
+ <div class="pb_table_td">Value 3</div>
30
+ <div class="pb_table_td">Value 4</div>
31
+ <div class="pb_table_td">Value 5</div>
32
+ </div>
33
+ </div>
34
+ <% end %>
data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx ADDED
@@ -0,0 +1,47 @@
1
+ import React from 'react'
2
+ import Table from '../_table'
3
+
4
+ const TableDiv = (props) => {
5
+ return (
6
+ <Table
7
+ size="sm"
8
+ tag="div"
9
+ {...props}
10
+ >
11
+ <div className="pb_table_thead">
12
+ <div className="pb_table_tr">
13
+ <div className="pb_table_th">{'Column 1'}</div>
14
+ <div className="pb_table_th">{'Column 2'}</div>
15
+ <div className="pb_table_th">{'Column 3'}</div>
16
+ <div className="pb_table_th">{'Column 4'}</div>
17
+ <div className="pb_table_th">{'Column 5'}</div>
18
+ </div>
19
+ </div>
20
+ <div className="pb_table_tbody">
21
+ <div className="pb_table_tr">
22
+ <div className="pb_table_td">{'Value 1'}</div>
23
+ <div className="pb_table_td">{'Value 2'}</div>
24
+ <div className="pb_table_td">{'Value 3'}</div>
25
+ <div className="pb_table_td">{'Value 4'}</div>
26
+ <div className="pb_table_td">{'Value 5'}</div>
27
+ </div>
28
+ <div className="pb_table_tr">
29
+ <div className="pb_table_td">{'Value 1'}</div>
30
+ <div className="pb_table_td">{'Value 2'}</div>
31
+ <div className="pb_table_td">{'Value 3'}</div>
32
+ <div className="pb_table_td">{'Value 4'}</div>
33
+ <div className="pb_table_td">{'Value 5'}</div>
34
+ </div>
35
+ <div className="pb_table_tr">
36
+ <div className="pb_table_td">{'Value 1'}</div>
37
+ <div className="pb_table_td">{'Value 2'}</div>
38
+ <div className="pb_table_td">{'Value 3'}</div>
39
+ <div className="pb_table_td">{'Value 4'}</div>
40
+ <div className="pb_table_td">{'Value 5'}</div>
41
+ </div>
42
+ </div>
43
+ </Table>
44
+ )
45
+ }
46
+
47
+ export default TableDiv
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
@@ -1,5 +1,6 @@
1
1
  examples:
2
2
  rails:
3
+ # - table_div: Div
3
4
  - table_sm: Small
4
5
  - table_md: Medium
5
6
  - table_lg: Large
@@ -24,8 +25,12 @@ examples:
24
25
  - table_with_background_kit: Table With Background Kit
25
26
  - table_vertical_border: Vertical Borders
26
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
+
27
31
 
28
32
  react:
33
+ # - table_div: Div
29
34
  - table_sm: Small
30
35
  - table_md: Medium
31
36
  - table_lg: Large
data/app/pb_kits/playbook/pb_table/docs/index.js CHANGED
@@ -21,3 +21,4 @@ export { default as TableAlignmentShiftData } from './_table_alignment_shift_dat
21
21
  export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
22
22
  export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
23
23
  export { default as TableStriped } from './_table_striped.jsx'
24
+ export { default as TableDiv } from './_table_div.jsx'
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: ""
data/dist/menu.yml CHANGED
@@ -55,7 +55,7 @@ kits:
55
55
  - name: "advanced_table"
56
56
  platforms: *react_only
57
57
  description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
58
- status: "beta"
58
+ status: "stable"
59
59
  - name: "list"
60
60
  platforms: *web
61
61
  description: Lists display a vertical set of related content.