playbook_ui 13.19.0.pre.alpha.play1174fixconfimationtoastmobilebug2306 → 13.19.0.pre.alpha.play1174fixconfimationtoastmobilebug2345

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +3 -10
  3. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +1 -0
  4. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +15 -2
  5. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +62 -45
  6. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +2 -2
  7. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +4 -0
  8. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.html.erb +34 -0
  9. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md +7 -0
  10. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +34 -0
  11. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md +3 -0
  12. data/app/pb_kits/playbook/pb_table/docs/example.yml +3 -0
  13. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +2 -2
  14. data/app/pb_kits/playbook/pb_table/styles/_structure.scss +4 -2
  15. data/app/pb_kits/playbook/pb_table/table_body.html.erb +17 -0
  16. data/app/pb_kits/playbook/pb_table/table_body.rb +15 -0
  17. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +17 -0
  18. data/app/pb_kits/playbook/pb_table/table_cell.rb +17 -0
  19. data/app/pb_kits/playbook/pb_table/table_head.html.erb +17 -0
  20. data/app/pb_kits/playbook/pb_table/table_head.rb +15 -0
  21. data/app/pb_kits/playbook/pb_table/table_header.html.erb +49 -39
  22. data/app/pb_kits/playbook/pb_table/table_header.rb +8 -1
  23. data/app/pb_kits/playbook/pb_table/table_row.html.erb +17 -7
  24. data/app/pb_kits/playbook/pb_table/table_row.rb +8 -1
  25. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +9 -5
  26. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx +20 -0
  27. data/app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md +30 -0
  28. data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +2 -1
  29. data/app/pb_kits/playbook/pb_user/docs/example.yml +1 -0
  30. data/dist/playbook-rails.js +3 -3
  31. data/lib/playbook/version.rb +1 -1
  32. metadata +13 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 10050594b83a89e2dd77aa948fb31cd71c1bc292dc5ccbda469728d89ede9747
4
- data.tar.gz: e74efd0e2d006ef868d070109c3f099ecf86068e59bd8d9fb55c2b9db8bc91ff
3
+ metadata.gz: 4e693dc32399817f16b4a1774d85d5bfea28e1a97a1ccaa95ac539484d798b31
4
+ data.tar.gz: f8f6fd1ea3569b64af9587f09e8d7f9becdbdf5d0ee0b1f390b4655d83e3f70b
5
5
  SHA512:
6
- metadata.gz: 412c6be317738582dec9a87b3c16a1278292c71f23e23441f8f81f9857ffae29ccd30ade66ddc910e4d5f8d4ba99bbde5946e822bbf35280aff771d229ed4530
7
- data.tar.gz: 214b373b93c39b439ba7a335b8928daecb56a6c377d7f9ea0f7ac92c0082cdb5b8fde80287ad43015f21b9e40b690f60cb1bec2fbaeae3fa03bcdef629e832cc
6
+ metadata.gz: 84eb81e1905e206b4a847090f7aa6a548a850efb67db9dd25242639a1938db75396272ab2a71971b2152b61ff3ecc73a77a1b483501dd94119246e577fa19589
7
+ data.tar.gz: 243bf284c7f512bdbb494c0d1aa05ecfe9bee70fc2aa6897eb050b5967a0d6133a0b74449b737ed8c66a151d5d019602bed6cb51a07785f0e7a728efd0be1be7
data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss CHANGED
@@ -36,6 +36,8 @@ $confirmation_toast_colors: (
36
36
  z-index: $z_9;
37
37
  display: flex;
38
38
  justify-content: space-around;
39
+ max-width: max-content;
40
+ width: 90%;
39
41
 
40
42
  &.top {
41
43
  top: $space_md;
@@ -56,14 +58,6 @@ $confirmation_toast_colors: (
56
58
  transform: translateX(-50%);
57
59
  }
58
60
 
59
- @media only screen and (max-width: 600px) {
60
- &.center {
61
- left: 5%;
62
- right: 5%;
63
- transform: translateX(-0%);
64
- }
65
- }
66
-
67
61
  &.right {
68
62
  left: auto;
69
63
  right: $space_md;
@@ -90,10 +84,9 @@ $confirmation_toast_colors: (
90
84
 
91
85
  &[class*=_multi_line] .pb_fixed_confirmation_toast_text {
92
86
  color: $white;
93
- margin: 0 $space_md 0 $space_md;
94
87
  overflow: hidden;
95
88
  display: -webkit-box;
96
- -webkit-line-clamp: 2;
89
+ -webkit-line-clamp: 3;
97
90
  -webkit-box-orient: vertical;
98
91
  white-space: normal;
99
92
  }
data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx CHANGED
@@ -98,6 +98,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
98
98
  (text && (
99
99
  <Title
100
100
  className="pb_fixed_confirmation_toast_text"
101
+ flex="1"
101
102
  size={4}
102
103
  text={text}
103
104
  />
data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb CHANGED
@@ -1,9 +1,22 @@
1
- <%= pb_rails("button", props: { text: "Multiline Example", variant: "primary", data: { toast: "#toast-top-center-multi" } }) %>
1
+ <%= pb_rails("button", props: { text: "Short Multiline", variant: "secondary", data: { toast: "#toast-top-center-multi-short" } }) %>
2
2
 
3
3
  <%= pb_rails("fixed_confirmation_toast", props: {
4
4
  classname: "toast-to-hide",
5
5
  closeable: true,
6
- id: "toast-top-center-multi",
6
+ id: "toast-top-center-multi-short",
7
+ multi_line: true,
8
+ text: "Multi-line is used when the given text will not fit on one line.",
9
+ status: "tip",
10
+ vertical: "top",
11
+ horizontal: "center"
12
+ }) %>
13
+
14
+ <%= pb_rails("button", props: { text: "Long Multiline", variant: "secondary", data: { toast: "#toast-top-center-multi-long" } }) %>
15
+
16
+ <%= pb_rails("fixed_confirmation_toast", props: {
17
+ classname: "toast-to-hide",
18
+ closeable: true,
19
+ id: "toast-top-center-multi-long",
7
20
  multi_line: true,
8
21
  text: "Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.",
9
22
  status: "tip",
data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx CHANGED
@@ -1,52 +1,69 @@
1
-
2
1
  import React, { useState } from 'react'
3
2
 
4
3
  import Button from '../../pb_button/_button'
5
4
  import FixedConfirmationToast from '../_fixed_confirmation_toast'
6
5
 
7
- const FixedConfirmationToastPositions = (props) => {
8
- const [state, setState] = useState({
9
- open: false,
10
- vertical: 'top',
11
- horizontal: 'center',
12
- })
13
-
14
- const { vertical, horizontal, open } = state
15
-
16
- const handleClick = (newState) => () => {
17
- setState({ open: true, ...newState })
18
- }
19
-
20
- const handleClose = () => {
21
- setState({ ...state, open: false })
22
- }
23
-
24
- return (
25
- <div>
26
- <Button
27
- onClick={handleClick({
28
- horizontal: 'center',
29
- open: true,
30
- vertical: 'top',
31
- })}
32
- text="Multiline Example"
33
- variant="primary"
34
- {...props}
35
- />
36
- {' '}
37
- <FixedConfirmationToast
38
- closeable
39
- horizontal={horizontal}
40
- multiLine
41
- onClose={handleClose}
42
- open={open}
43
- status="tip"
44
- text={`Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.`}
45
- vertical={vertical}
46
- {...props}
47
- />
48
- </div>
49
- )
6
+ const FixedConfirmationToastMultiLine = (props) => {
7
+
8
+ const [openShort, setOpenShort] = useState(false)
9
+ const [openLong, setOpenLong] = useState(false)
10
+
11
+ const handleClickShort = () => {
12
+ setOpenShort(true)
13
+ }
14
+ const handleClickLong= () => {
15
+ setOpenLong(true)
16
+ }
17
+
18
+ const handleCloseShort = () => {
19
+ setOpenShort(false)
20
+ }
21
+
22
+ const handleCloseLong= () => {
23
+ setOpenLong(false)
24
+ }
25
+
26
+ return (
27
+ <>
28
+ <Button
29
+ onClick={handleClickShort}
30
+ text="Short Multiline"
31
+ variant="secondary"
32
+ {...props}
33
+ />
34
+ {' '}
35
+ <Button
36
+ onClick={handleClickLong}
37
+ text="Long Multiline"
38
+ variant="secondary"
39
+ {...props}
40
+ />
41
+
42
+ <FixedConfirmationToast
43
+ closeable
44
+ horizontal='center'
45
+ multiLine
46
+ onClose={handleCloseShort}
47
+ open={openShort}
48
+ status='tip'
49
+ text='Multi-line is used when the given text will not fit on one line.'
50
+ vertical='top'
51
+ {...props}
52
+ />
53
+
54
+ <FixedConfirmationToast
55
+ closeable
56
+ horizontal='center'
57
+ multiLine
58
+ onClose={handleCloseLong}
59
+ open={openLong}
60
+ status='tip'
61
+ text='Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.'
62
+ vertical='top'
63
+ {...props}
64
+ />
65
+ </>
66
+ )
50
67
  }
51
68
 
52
- export default FixedConfirmationToastPositions
69
+ export default FixedConfirmationToastMultiLine
data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb CHANGED
@@ -8,8 +8,8 @@
8
8
  <% if content %>
9
9
  <%= content %>
10
10
  <% elsif object.show_text? %>
11
- <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_fixed_confirmation_toast_text" }) %>
11
+ <%= pb_rails("title", props: { text: object.text, size: 4, flex: "1", classname: "pb_fixed_confirmation_toast_text" }) %>
12
12
  <% end %>
13
13
 
14
- <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer" }) if object.closeable %>
14
+ <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true }) if object.closeable %>
15
15
  <% end %>
data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss CHANGED
@@ -40,6 +40,10 @@
40
40
  &[class*="_active"] {
41
41
  color: $primary;
42
42
  letter-spacing: normal;
43
+
44
+ [class*="_icon_right"] {
45
+ color: $white;
46
+ }
43
47
  }
44
48
  &[class*="dark"] {
45
49
  [class*="_item_text"],
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_table/styles/_striped.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  [class^=pb_table] {
2
2
  &.striped {
3
3
  tbody, .pb_table_tbody {
4
- tr:nth-child(odd), .tr:nth-child(odd) {
4
+ tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
5
5
  background-color: $bg_light;
6
6
  }
7
7
  }
@@ -10,7 +10,7 @@
10
10
  &.dark {
11
11
  &.striped {
12
12
  tbody, .pb_table_tbody {
13
- tr:nth-child(odd), .tr:nth-child(odd) {
13
+ tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
14
14
  background-color: $bg_dark;
15
15
  }
16
16
  }
data/app/pb_kits/playbook/pb_table/styles/_structure.scss CHANGED
@@ -48,7 +48,8 @@
48
48
  }
49
49
  }
50
50
  &.data_table {
51
- thead tr th {
51
+ thead tr th,
52
+ .pb_table_thead .pb_table_tr .pb_table_th {
52
53
  padding-top: $cell-pad-sm;
53
54
  padding-bottom: $cell-pad-sm;
54
55
  &:first-child {
@@ -58,7 +59,8 @@
58
59
  padding-right: $cell-pad-sm;
59
60
  }
60
61
  }
61
- tbody tr td {
62
+ tbody tr td,
63
+ .pb_table_tbody .pb_table_tr .pb_table_td {
62
64
  padding-top: $cell-pad-sm;
63
65
  padding-bottom: $cell-pad-sm;
64
66
  &:first-child {
data/app/pb_kits/playbook/pb_table/table_body.html.erb ADDED
@@ -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 %>
data/app/pb_kits/playbook/pb_table/table_body.rb ADDED
@@ -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
data/app/pb_kits/playbook/pb_table/table_cell.html.erb ADDED
@@ -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 %>
data/app/pb_kits/playbook/pb_table/table_cell.rb ADDED
@@ -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
data/app/pb_kits/playbook/pb_table/table_head.html.erb ADDED
@@ -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 %>
data/app/pb_kits/playbook/pb_table/table_head.rb ADDED
@@ -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
data/app/pb_kits/playbook/pb_table/table_header.html.erb CHANGED
@@ -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 %>
data/app/pb_kits/playbook/pb_table/table_header.rb CHANGED
@@ -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
data/app/pb_kits/playbook/pb_table/table_row.html.erb CHANGED
@@ -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 %>
data/app/pb_kits/playbook/pb_table/table_row.rb CHANGED
@@ -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