Skip to content

Commit

Permalink
refactor(table): css cleanup, update helper logic
Browse files Browse the repository at this point in the history
  • Loading branch information
teenwolfblitzer committed Dec 13, 2022
1 parent c2c9246 commit dca9bd0
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 27 deletions.
9 changes: 8 additions & 1 deletion docs/app/views/examples/components/table/_props.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,12 @@
<td><%= md('Boolean') %></td>
<td><%= md('`nil`') %></td>
</tr>
<tr>
<td><%= md('`responsive_stack`') %></td>
<td><%= md('Rearranges table content on small screen devices. Requires the use of table headers`.') %></td>
<td><%= md('Boolean') %></td>
<td><%= md('`nil`') %></td>
</tr>
<tr>
<td><%= md('`rows`') %></td>
<td><%= md('Array of items to populate the table. These items are key/value pairs.') %></td>
Expand Down Expand Up @@ -83,12 +89,13 @@
- `reset_above`
- `reset_below`
- `responsive`
- `responsive_stack`
The following properties are **unique to `sage_table_for`**:
- `sortable` (Boolean): enables sorting links and direction indicators on sorted columns
- `skip_headers` (Boolean): table column headings are not rendered
- `skip_headers` (Boolean): table column headings are not rendered. This cannot be used when `responsive_stack` is enabled
') %></td>
<td><%= md('See properties above') %></td>
<td><%= md('Varies') %></td>
Expand Down
3 changes: 2 additions & 1 deletion docs/lib/sage_rails/app/helpers/sage_table_helper.rb
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,8 @@ def caption
end

def head
if skip_headers
# responsive_stack enforces use of headers
if skip_headers && !responsive_stack
""
else
content_tag "thead" do
Expand Down
44 changes: 19 additions & 25 deletions packages/sage-assets/lib/stylesheets/components/_table.scss
Original file line number Diff line number Diff line change
Expand Up @@ -360,35 +360,14 @@ $-table-avatar-width: rem(32px);

@media screen and (max-width: sage-breakpoint(sm-max)) {
.sage-table--stack {
thead {
tr,
&::after {
@include visually-hidden;
}
}

tbody tr {
position: relative;
}

.sage-table-cell__heading--responsive {
display: inline-flex;
align-items: center;
}

&.sage-table--has-menu-options {
td:last-of-type {
position: absolute;
top: #{$-table-stack-row-padding-block};
right: #{$-table-stack-row-padding-inline};
}
thead tr {
@include visually-hidden;
}

td {
padding: rem(6px) 0;
thead::after {
display: none;
}

// table,
tbody,
tbody td,
tbody tr {
Expand All @@ -397,6 +376,7 @@ $-table-avatar-width: rem(32px);

tbody tr {
padding: #{$-table-stack-row-padding-block} #{$-table-stack-row-padding-inline};
position: relative;
border: sage-border(default);
border-radius: sage-border(radius);

Expand All @@ -408,6 +388,20 @@ $-table-avatar-width: rem(32px);
tbody td {
display: grid;
grid-template-columns: 1fr repeat(#{$-table-stack-cell-max-children}, auto);
padding: rem(6px) 0;
}

.sage-table-cell__heading--responsive {
display: inline-flex;
align-items: center;
}

&.sage-table--has-menu-options {
td:last-of-type {
position: absolute;
top: #{$-table-stack-row-padding-block};
right: #{$-table-stack-row-padding-inline};
}
}

// table cell overrides
Expand Down

0 comments on commit dca9bd0

Please sign in to comment.