playbook_ui_docs 14.13.0.pre.alpha.play1834depupdatesass6024 → 14.13.0.pre.alpha.play1884progresspill6064

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 8959f4e044f98f997bc00e892515f32a53293b4578af27d1df70f614cf5b109c
4
- data.tar.gz: 390a4a4db074cf370c7077e44d28da7464e65c2b3f45589895b504122abf7cd6
3
+ metadata.gz: 3c83f0eacac679528c2c2b5b8d0ad2d4d6eb2582a2ec60d33256bd3874d2eb26
4
+ data.tar.gz: 29c3865d4cf0e46f7ab0e48ea00c5657aa1c1358caef530dccad9d810d63bfc7
5
5
  SHA512:
6
- metadata.gz: 479ab080372c8cf57722ed9ed5560a07a5f7dcae9fba16ce4caa75822a3d264fc79d946a01e3e1965665409f039eb744644e1ba52aa958c0e791fa21d0f1fd9d
7
- data.tar.gz: 67202e0e401242fc4fcecee47f6a328d2ff1c8c1555d06cc75860c2e562cab49f221eddfce0064889221f3292518171ad20732c374d483f12e0fd582e0e2bb83
6
+ metadata.gz: 3b7b52717bc8fbdc2cff62d3f936c2c73d6d5f94c8577674eecaf53f14a449a8ddc160367c7e925110191e0d36526052ec13319d31f2debb75b069e848268cb6
7
+ data.tar.gz: 75b97ba73ec196d36ddb7a1ea38311618d630ecb829c23702d2c8a02148162c378ca44009dce3cfdd493f1e1e1885b6bb61fcf714eabc7096aa4045998dd2dab
@@ -1,3 +1,2 @@
1
1
  <%= pb_rails("icon_button") %>
2
- </br>
3
- <%= pb_rails("icon_button", props: {variant: "link"}) %>
2
+ <%= pb_rails("icon_button", props: {variant: "link", margin_top: "md" }) %>
@@ -0,0 +1,27 @@
1
+ <%= pb_rails("flex", props: { align: "center"}) do %>
2
+ <%= pb_rails("icon_button", props: {size: "lg"}) %> <span>Large</span>
3
+ <% end %>
4
+
5
+ <%= pb_rails("flex", props: { align: "center" }) do %>
6
+ <%= pb_rails("icon_button", props: {size: "sm"}) %> <span>Small</span>
7
+ <% end %>
8
+
9
+ <%= pb_rails("flex", props: { align: "center" }) do %>
10
+ <%= pb_rails("icon_button", props: {size: "xs"}) %> <span>XSmall</span>
11
+ <% end %>
12
+
13
+ <%= pb_rails("flex", props: { align: "center", margin_top: "md" }) do %>
14
+ <%= pb_rails("icon_button", props: {size: "1x"}) %> <span>1x</span>
15
+ <% end %>
16
+
17
+ <%= pb_rails("flex", props: { align: "center" }) do %>
18
+ <%= pb_rails("icon_button", props: {size: "2x"}) %> <span>2x</span>
19
+ <% end %>
20
+
21
+ <%= pb_rails("flex", props: { align: "center" }) do %>
22
+ <%= pb_rails("icon_button", props: {size: "3x"}) %> <span>3x</span>
23
+ <% end %>
24
+
25
+ <%= pb_rails("flex", props: { align: "center" }) do %>
26
+ <%= pb_rails("icon_button", props: {size: "4x"}) %> <span>4x</span>
27
+ <% end %>
@@ -2,6 +2,4 @@ examples:
2
2
 
3
3
  rails:
4
4
  - icon_button_default: Default
5
-
6
-
7
-
5
+ - icon_button_sizes: Sizes
@@ -1 +1,2 @@
1
1
  <%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2 }) %>
2
+ <%= pb_rails("progress_pills", props: { aria: { label: "9 out of 18 steps complete" }, steps: 18, active: 9, margin_top: "md" }) %>
@@ -10,6 +10,13 @@ const ProgressPillsDefault = (props) => {
10
10
  steps={3}
11
11
  {...props}
12
12
  />
13
+ <ProgressPills
14
+ active={9}
15
+ aria={{ label: '9 out of 18 steps complete' }}
16
+ marginTop="md"
17
+ steps={18}
18
+ {...props}
19
+ />
13
20
  </>
14
21
  )
15
22
  }
@@ -0,0 +1 @@
1
+ Progress pills start at `45px` wide if the container allows, but will shrink down to `1px` as the container gets smaller. Resize this window to see each pill shrink.
@@ -0,0 +1,47 @@
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
+ <%= pb_rails("table/table_header", props: { text: "" }) %>
10
+ <% end %>
11
+ <% end %>
12
+ <%= pb_rails("table/table_body") do %>
13
+ <%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 1 clicked')" } }) do %>
14
+ <%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
15
+ <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
16
+ <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
17
+ <%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
18
+ <%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
19
+ <%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
20
+ <%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
21
+ <% end %>
22
+ <% end %>
23
+
24
+ <%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 2 clicked')" } }) do %>
25
+ <%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
26
+ <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
27
+ <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
28
+ <%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
29
+ <%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
30
+ <%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
31
+ <%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
32
+ <% end %>
33
+ <% end %>
34
+
35
+ <%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 3 clicked')" } }) do %>
36
+ <%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
37
+ <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
38
+ <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
39
+ <%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
40
+ <%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
41
+ <%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
42
+ <%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
43
+ <% end %>
44
+ <% end %>
45
+ <% end %>
46
+ <% end %>
47
+
@@ -0,0 +1,88 @@
1
+ import React from 'react'
2
+ import { Table, Icon } from 'playbook-ui'
3
+
4
+ const TableWithClickableRows = (props) => {
5
+
6
+
7
+ return (
8
+ <Table
9
+ size="sm"
10
+ {...props}
11
+ >
12
+ <Table.Head>
13
+ <Table.Row>
14
+ <Table.Header>{"Column 1"}</Table.Header>
15
+ <Table.Header>{"Column 2"}</Table.Header>
16
+ <Table.Header>{"Column 3"}</Table.Header>
17
+ <Table.Header>{"Column 4"}</Table.Header>
18
+ <Table.Header>{"Column 5"}</Table.Header>
19
+ <Table.Header>{""}</Table.Header>
20
+ </Table.Row>
21
+ </Table.Head>
22
+ <Table.Body>
23
+ <Table.Row
24
+ cursor="pointer"
25
+ htmlOptions={{ onClick: () => alert("Row 1 clicked") }}
26
+ {...props}
27
+ >
28
+ <Table.Cell>{"Value 1"}</Table.Cell>
29
+ <Table.Cell>{"Value 2"}</Table.Cell>
30
+ <Table.Cell>{"Value 3"}</Table.Cell>
31
+ <Table.Cell>{"Value 4"}</Table.Cell>
32
+ <Table.Cell>{"Value 5"}</Table.Cell>
33
+ <Table.Cell textAlign="right">
34
+ <Icon
35
+ color="primary_action"
36
+ fixedWidth
37
+ icon="chevron-right"
38
+ size="xs"
39
+ {...props}
40
+ />
41
+ </Table.Cell>
42
+ </Table.Row>
43
+ <Table.Row
44
+ cursor="pointer"
45
+ htmlOptions={{ onClick: () => alert("Row 2 clicked") }}
46
+ {...props}
47
+ >
48
+ <Table.Cell>{"Value 1"}</Table.Cell>
49
+ <Table.Cell>{"Value 2"}</Table.Cell>
50
+ <Table.Cell>{"Value 3"}</Table.Cell>
51
+ <Table.Cell>{"Value 4"}</Table.Cell>
52
+ <Table.Cell>{"Value 5"}</Table.Cell>
53
+ <Table.Cell textAlign="right">
54
+ <Icon
55
+ color="primary_action"
56
+ fixedWidth
57
+ icon="chevron-right"
58
+ size="xs"
59
+ {...props}
60
+ />
61
+ </Table.Cell>
62
+ </Table.Row>
63
+ <Table.Row
64
+ cursor="pointer"
65
+ htmlOptions={{ onClick: () => alert("Row 3 clicked") }}
66
+ {...props}
67
+ >
68
+ <Table.Cell>{"Value 1"}</Table.Cell>
69
+ <Table.Cell>{"Value 2"}</Table.Cell>
70
+ <Table.Cell>{"Value 3"}</Table.Cell>
71
+ <Table.Cell>{"Value 4"}</Table.Cell>
72
+ <Table.Cell>{"Value 5"}</Table.Cell>
73
+ <Table.Cell textAlign="right">
74
+ <Icon
75
+ color="primary_action"
76
+ fixedWidth
77
+ icon="chevron-right"
78
+ size="xs"
79
+ {...props}
80
+ />
81
+ </Table.Cell>
82
+ </Table.Row>
83
+ </Table.Body>
84
+ </Table>
85
+ )
86
+ }
87
+
88
+ export default TableWithClickableRows
@@ -0,0 +1 @@
1
+ Clickable table rows do not require any additional props. This doc example showcases how to set them up using `html_options`/`htmlOptions` and click events. Using the global prop for cursor to set it to "pointer" is also recommended for better UX.
@@ -34,6 +34,7 @@ examples:
34
34
  - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
35
35
  - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
36
36
  - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
37
+ - table_with_clickable_rows: Table with Clickable Rows
37
38
 
38
39
  react:
39
40
  - table_sm: Small
@@ -70,3 +71,4 @@ examples:
70
71
  - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
71
72
  - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
72
73
  - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
74
+ - table_with_clickable_rows: Table with Clickable Rows
@@ -32,4 +32,5 @@ export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
32
32
  export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
33
33
  export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
34
34
  export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
35
- export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
35
+ export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
36
+ export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'