Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[PBNTR-212] Table Kit Sub Components for Rails #3198

Merged
merged 12 commits into from
Mar 11, 2024
Merged

[PBNTR-212] Table Kit Sub Components for Rails #3198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7c10ab3
Adding div support for Table
carloslimasd Feb 28, 2024
c5f0b43
Adding div support for Rails Table
carloslimasd Feb 28, 2024
adfd321
Adding div support to structure css
carloslimasd Feb 29, 2024
74825b0
Merge branch 'master' into PBNTR-207-table-div-support
carloslimasd Feb 29, 2024
86c19a3
Sub components for table elements
nidaqg Mar 1, 2024
1f02606
Spec text fixes, doc for divs table
nidaqg Mar 4, 2024
0464957
Spec tests
nidaqg Mar 4, 2024
de59712
Fixes for striped + data table props not working
nidaqg Mar 4, 2024
ee2c279
Spec test fixes
nidaqg Mar 4, 2024
2f1ed88
Merge conflicts
nidaqg Mar 4, 2024
e7224d4
Moved doc example + added copy
nidaqg Mar 6, 2024
9dae9c6
Doc fixes
nidaqg Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<%= pb_rails("table", props: { size: "sm" }) do %>
<%= pb_rails("table/table_head") do %>
<%= pb_rails("table/table_row") do %>
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
<% end %>
<% end %>
<%= pb_rails("table/table_body") do %>
<%= pb_rails("table/table_row") do %>
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
<% end %>
<%= pb_rails("table/table_row") do %>
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
<% end %>
<%= pb_rails("table/table_row") do %>
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
<% end %>
<% end %>
<% end %>
7 changes: 7 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
You can optionally build your table using our sub-components, which map to their respective html table elements:

`table_head` = `thead`
`table_body` = `tbody`
`table_row` = `tr`
`table_header` = `th`
`table_cell` = `td`
34 changes: 34 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<%= pb_rails("table", props: { size: "sm", tag:"div" }) do %>
<%= pb_rails("table/table_head", props: {tag:"div"}) do %>
<%= pb_rails("table/table_row", props: {tag:"div"}) do %>
<%= pb_rails("table/table_header", props: { text: "Column 1", tag:"div"}) %>
<%= pb_rails("table/table_header", props: { text: "Column 2", tag:"div"}) %>
<%= pb_rails("table/table_header", props: { text: "Column 3", tag:"div"}) %>
<%= pb_rails("table/table_header", props: { text: "Column 4", tag:"div"}) %>
<%= pb_rails("table/table_header", props: { text: "Column 5", tag:"div"}) %>
<% end %>
<% end %>
<%= pb_rails("table/table_body", props: {tag:"div"}) do %>
<%= pb_rails("table/table_row", props: {tag:"div"}) do %>
<%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
<% end %>
<%= pb_rails("table/table_row", props: {tag:"div"}) do %>
<%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
<% end %>
<%= pb_rails("table/table_row", props: {tag:"div"}) do %>
<%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
<% end %>
<% end %>
<% end %>
3 changes: 3 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
Optionally build your table with divs by passing `div` to the `tag` prop of all* your sub-components.

*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.
3 changes: 3 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/docs/example.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ examples:
- table_with_background_kit: Table With Background Kit
- table_vertical_border: Vertical Borders
- table_striped: Striped Table
- table_with_subcomponents: Table with Sub Components (Table Elements)
- table_with_subcomponents_as_divs: Table with Sub Components (Divs)


react:
# - table_div: Div
Expand Down
4 changes: 2 additions & 2 deletions playbook/app/pb_kits/playbook/pb_table/styles/_striped.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
[class^=pb_table] {
&.striped {
tbody, .pb_table_tbody {
tr:nth-child(odd), .tr:nth-child(odd) {
tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
background-color: $bg_light;
}
}
Expand All @@ -10,7 +10,7 @@
&.dark {
&.striped {
tbody, .pb_table_tbody {
tr:nth-child(odd), .tr:nth-child(odd) {
tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
background-color: $bg_dark;
}
}
Expand Down
6 changes: 4 additions & 2 deletions playbook/app/pb_kits/playbook/pb_table/styles/_structure.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@
}
}
&.data_table {
thead tr th {
thead tr th,
.pb_table_thead .pb_table_tr .pb_table_th {
padding-top: $cell-pad-sm;
padding-bottom: $cell-pad-sm;
&:first-child {
Expand All @@ -58,7 +59,8 @@
padding-right: $cell-pad-sm;
}
}
tbody tr td {
tbody tr td,
.pb_table_tbody .pb_table_tr .pb_table_td {
padding-top: $cell-pad-sm;
padding-bottom: $cell-pad-sm;
&:first-child {
Expand Down
17 changes: 17 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/table_body.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<% if object.tag == "table" %>
<%= content_tag(:tbody,
aria: object.aria,
class: object.classname,
data: object.data,
id: object.id) do %>
<%= content.presence %>
<% end %>
<% else %>
<%= content_tag(:div,
aria: object.aria,
class: object.classname,
data: object.data,
id: object.id) do %>
<%= content.presence %>
<% end %>
<% end %>
15 changes: 15 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/table_body.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# frozen_string_literal: true

module Playbook
module PbTable
class TableBody < Playbook::KitBase
prop :tag, type: Playbook::Props::Enum,
values: %w[table div],
default: "table"

def classname
generate_classname("pb_table_tbody")
end
end
end
end
17 changes: 17 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/table_cell.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<% if object.tag == "table" %>
<%= content_tag(:td,
aria: object.aria,
class: object.classname,
data: object.data,
id: object.id) do %>
<%= content.presence || object.text %>
<% end %>
<% else %>
<%= content_tag(:div,
aria: object.aria,
class: object.classname,
data: object.data,
id: object.id) do %>
<%= content.presence || object.text %>
<% end %>
<% end %>
17 changes: 17 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/table_cell.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# frozen_string_literal: true

module Playbook
module PbTable
class TableCell < Playbook::KitBase
prop :tag, type: Playbook::Props::Enum,
values: %w[table div],
default: "table"
prop :text, type: Playbook::Props::String,
default: ""

def classname
generate_classname("pb_table_td")
end
end
end
end
17 changes: 17 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/table_head.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<% if object.tag == "table" %>
<%= content_tag(:thead,
aria: object.aria,
class: object.classname,
data: object.data,
id: object.id) do %>
<%= content.presence %>
<% end %>
<% else %>
<%= content_tag(:div,
aria: object.aria,
class: object.classname,
data: object.data,
id: object.id) do %>
<%= content.presence %>
<% end %>
<% end %>
15 changes: 15 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/table_head.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# frozen_string_literal: true

module Playbook
module PbTable
class TableHead < Playbook::KitBase
prop :tag, type: Playbook::Props::Enum,
values: %w[table div],
default: "table"

def classname
generate_classname("pb_table_thead")
end
end
end
end
88 changes: 49 additions & 39 deletions playbook/app/pb_kits/playbook/pb_table/table_header.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,57 @@
<%= content_tag(:th,
colspan: object.colspan,
aria: object.aria,
class: object.classname,
data: object.data,
id: "pb-th#{object.id}" ) do %>
<% unless sorting_style? %>
<%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
<%= content.presence || object.text %>
<% end %>
<% else %>
<%= link_to next_link, style: link_style do %>
<%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>
<% if object.tag == "table" %>
<%= content_tag(:th,
colspan: object.colspan,
aria: object.aria,
class: object.classname,
data: object.data,
id: "pb-th#{object.id}" ) do %>
<% unless sorting_style? %>
<%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
<%= content.presence || object.text %>
<% if sorting_style? %>
<%= pb_rails("icon", props: { icon: object.sort_icon(active_item[:direction], active_item[:active]),
fixed_width: true,
classname: active_item.any? ? "pb_th_active" : "",
padding_left: "xs" }) %>
<% end %>
<% else %>
<%= link_to next_link, style: link_style do %>
<%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>
<%= content.presence || object.text %>
<% if sorting_style? %>
<%= pb_rails("icon", props: { icon: object.sort_icon(active_item[:direction], active_item[:active]),
fixed_width: true,
classname: active_item.any? ? "pb_th_active" : "",
padding_left: "xs" }) %>
<% end %>
<% end %>
<% end %>
<% end %>
<% if use_dropdown_select %>
<%= pb_rails("popover", props: { classname: "pb_filter_sort_menu",
close_on_click: "outside",
trigger_element_id: "pb-th#{object.id}",
tooltip_id: "sort-filter-btn-tooltip#{object.id}",
position: object.placement ,
padding: 'none'}) do %>
<%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
<% object.sort_items.each do |sort_item| %>
<% item = active_or_first_item(sort_items_for(sort_item)) %>
<%= pb_rails("nav/item", props: {
text: item[:item],
link: next_link(sort_item: sort_item),
highlighted_border: false,
padding: "xs",
icon_right: sort_icon(item[:direction], item[:active]),
active: item[:active],
classname: "header_nav_item"
}) %>
<% if use_dropdown_select %>
<%= pb_rails("popover", props: { classname: "pb_filter_sort_menu",
close_on_click: "outside",
trigger_element_id: "pb-th#{object.id}",
tooltip_id: "sort-filter-btn-tooltip#{object.id}",
position: object.placement ,
padding: 'none'}) do %>
<%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
<% object.sort_items.each do |sort_item| %>
<% item = active_or_first_item(sort_items_for(sort_item)) %>
<%= pb_rails("nav/item", props: {
text: item[:item],
link: next_link(sort_item: sort_item),
highlighted_border: false,
padding: "xs",
icon_right: sort_icon(item[:direction], item[:active]),
active: item[:active],
classname: "header_nav_item"
}) %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% else %>
<%= content_tag(:div,
aria: object.aria,
class: object.classname,
data: object.data,
id: object.id) do %>
<%= content.presence || object.text %>
<% end %>
<% end %>
9 changes: 8 additions & 1 deletion playbook/app/pb_kits/playbook/pb_table/table_header.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,16 @@ class TableHeader < Playbook::KitBase
default: ""
prop :sort_dropdown, type: Playbook::Props::Boolean,
default: false
prop :tag, type: Playbook::Props::Enum,
values: %w[table div],
default: "table"

def classname
generate_classname("pb_table_header_kit", align_class)
generate_classname("pb_table_header_kit", align_class) + tag_class
end

def tag_class
" pb_table_th"
end

def align_class
Expand Down
24 changes: 17 additions & 7 deletions playbook/app/pb_kits/playbook/pb_table/table_row.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,17 @@
<%= content_tag(:tr,
aria: object.aria,
class: object.classname,
data: object.data,
id: object.id) do %>
<%= content.presence %>
<% end %>
<% if object.tag == "table" %>
<%= content_tag(:tr,
aria: object.aria,
class: object.classname,
data: object.data,
id: object.id) do %>
<%= content.presence %>
<% end %>
<% else %>
<%= content_tag(:div,
aria: object.aria,
class: object.classname,
data: object.data,
id: object.id) do %>
<%= content.presence %>
<% end %>
<% end %>
Loading