feat(table): update rails examples,

refactor JS & css

Author: teenwolfblitzer

docs/app/views/examples/components/table/_preview.html.erb

@@ -110,6 +110,51 @@ sample_table = {
     }
   ]
 }
+
+table_dropdown_menu_items = [
+  {
+    attributes: { "href": "#" },
+    icon: "pen",
+    value: "Edit",
+  },
+  {
+    attributes: {
+      "href": "https://kajabi.com",
+      "data-js-tooltip": "Tooltip",
+      "data-js-tooltip-position": "right",
+    },
+    icon: "pen",
+    modifiers: ["disabled"],
+    value: "Disabled link w/ tooltip",
+  },
+  {
+    attributes: { "href": "#" },
+    icon: "add",
+    style: "primary",
+    value: "New",
+  },
+  {
+    attributes: { "href": "#" },
+    icon: "url",
+    modifiers: ["border-before"],
+    value: "Share Element",
+  },
+  {
+    attributes: { "href": "#" },
+    icon: "remove-circle",
+    style: "danger",
+    value: "Take A Dangerous Action",
+  },
+  {
+    attributes: {
+      "data-js-tooltip": "Tooltip",
+      "data-js-tooltip-position": "right",
+    },
+    icon: "users",
+    modifiers: ["disabled"],
+    value: "Disabled w/ Tooltip",
+  }
+]
 %>
 
 <%= sage_component SageTable, {
@@ -435,7 +480,12 @@ This involves calling `sage_table_for` with a collection, and then using `t.colu
 **NOTE:** This is an MVP implementation based on a helper written earlier for `kajabi-products` and may not be fully aligned with SageTable. It is safe to use, but should be tracked against future updates.
 ") %>
 
-<%= sage_table_for people_data, selectable: true, sortable: true, responsive: true, caption: "Caption positioned above using `caption_side`".html_safe, caption_side: "top" do |t| %>
+<%= sage_table_for people_data,
+    selectable: true,
+    sortable: true,
+    responsive: true,
+    responsive_stack: true,
+    caption: "Caption positioned above using `caption_side`".html_safe, caption_side: "top" do |t| %>
   <% t.column :initials, label: "", data_type: "checkbox" do |c| %>
     <%= sage_component SageCheckbox, {
       label_text: 'Select row',
@@ -467,15 +517,15 @@ This involves calling `sage_table_for` with a collection, and then using `t.colu
     </span>
   <% end %>
 
-  <% t.column :price, label: "Price", style: "width: 140px", hide: { md: true } do |c| %>
+  <% t.column :price, label: "Price", hide: { md: true } do |c| %>
     <%= c[:price] %>
   <% end %>
 
-  <% t.column :amount, label: "Amount", style: "width: 100px", hide: { md: true } do |c| %>
+  <% t.column :amount, label: "Amount", hide: { md: true } do |c| %>
     <%= c[:amount] %>
   <% end %>
 
-  <% t.column :labels, label: "Labels", style: "width: 150px", hide: { sm: true } do |c| %>
+  <% t.column :labels, label: "Labels", hide: { sm: true } do |c| %>
     <% c[:labels].each do |label| %>
       <%= sage_component SageBadge, {
         value: label,
@@ -484,14 +534,14 @@ This involves calling `sage_table_for` with a collection, and then using `t.colu
     <% end %>
   <% end %>
 
-  <% t.column :status, label: "Status", style: "width: 100px", hide: { sm: true } do |c| %>
+  <% t.column :status, label: "Status", hide: { sm: true } do |c| %>
     <%= sage_component SageBadge, {
       value: c[:status].titlecase,
       color: c[:status],
       } %>
   <% end %>
 
-  <% t.column :actions, label: "Actions", style: "width: 100px" do |c| %>
+  <% t.column :actions, label: "Actions" do |c| %>
     <%= sage_component SageButtonGroup, { gap: :xs } do %>
       <%= sage_component SageButton, {
         subtle: true,

docs/lib/sage_rails/app/helpers/sage_table_helper.rb

@@ -80,7 +80,7 @@ def sortable_title
   end
 
   class SageTableFor
-    attr_reader :caption, :caption_side, :columns, :condensed, :template, :id, :class_name, :collection, :has_borders, :row_proc, :sortable, :responsive, :skip_headers, :reset_above, :reset_below
+    attr_reader :caption, :caption_side, :columns, :condensed, :template, :id, :class_name, :collection, :has_borders, :row_proc, :sortable, :responsive, :responsive_stack, :skip_headers, :reset_above, :reset_below
     delegate :content_tag, :tag, to: :template
 
     def initialize(template, collection, opts={})
@@ -94,6 +94,7 @@ def initialize(template, collection, opts={})
       @reset_above = opts[:reset_above]
       @reset_below = opts[:reset_below]
       @responsive = opts[:responsive]
+      @responsive_stack = opts[:responsive_stack]
       @skip_headers = opts[:skip_headers]
       @sortable = opts[:sortable]
       @id = opts[:id]
@@ -132,6 +133,7 @@ def table_contents
       table_classes = "sage-table"
       table_classes << " sage-table--condensed" if condensed
       table_classes << " sage-table--sortable" if sortable
+      table_classes << " sage-table--stack" if responsive_stack
       table_classes << " #{class_name}" if class_name
 
       content_tag "table", id: id, class: table_classes do

packages/sage-assets/lib/stylesheets/components/_table.scss

@@ -35,6 +35,11 @@ $-table-overflow-indicator-gradient: linear-gradient(
   100%
 );
 
+// Responsive stacked table
+$-table-stack-row-padding-block: rem(18px);
+$-table-stack-row-padding-inline: rem(20px);
+$-table-stack-cell-max-children: 4;
+
 // Other
 $-table-row-color-hover: sage-color(grey, 100);
 $-table-cell-focus: sage-color(charcoal, 300);
@@ -367,15 +372,15 @@ $-table-avatar-width: rem(32px);
     }
 
     .sage-table-cell__heading--responsive {
-      display: inline-block;
+      display: inline-flex;
       align-items: center;
     }
 
     &.sage-table--has-menu-options {
       td:last-of-type {
         position: absolute;
-        top: 1rem;
-        right: 1rem;
+        top: #{$-table-stack-row-padding-block};
+        right: #{$-table-stack-row-padding-inline};
       }
     }
 
@@ -394,27 +399,27 @@ $-table-avatar-width: rem(32px);
     }
 
     tr {
-      padding: rem(16px) rem(18px);
+      padding: #{$-table-stack-row-padding-block} #{$-table-stack-row-padding-inline};
       border: sage-border(default);
       border-radius: sage-border(radius);
 
       & + & {
-        margin-top: sage-spacing(sm);
+        margin-top: #{$-table-stack-row-padding-block};
       }
     }
 
     td {
       display: grid;
-      grid-template-columns: auto auto;
-      grid-gap: 1em 0.5em;
-      justify-content: space-between;
+      grid-template-columns: 1fr repeat(#{$-table-stack-cell-max-children}, auto);
     }
 
-    // td:nth-of-type(4)::before,
-    // td:nth-of-type(5)::before {
-    //   text-align: left;
-    // }
+    // table cell overrides
+    .sage-table-cell--truncate,
+    .sage-table-cell__truncated-content {
+      max-width: none;
+    }
 
+    .sage-table-cell--avatar,
     .sage-table--has-menu-options td:last-child::before {
       display: none;
     }

packages/sage-system/lib/table.js

@@ -70,19 +70,25 @@ Sage.table = (function() {
           cell.prepend(newHeader);
         });
 
-        // look for cells with positioned content
+        // find cells with special cases (positioned content, multiple children)
         cells.forEach((cell) => {
           const checkboxes = cell.querySelectorAll(".sage-checkbox");
+          const badges = cell.querySelectorAll(".sage-badge");
+          const containers = cell.querySelectorAll("div");
 
           if (checkboxes.length) {
             cell.classList.add('sage-table-cell--checkbox');
           }
+
+          if (badges.length || containers.length) {
+            cell.classList.add('sage-table-cell--group');
+          }
         })
       })
     })
   }
 
-  function applyAriaRoles(args) {
+  function setAriaRole(args) {
     // expects an object of the form { items: "<selector(s)>", role: "<role to represent>" }
     // based on:
     // https://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html
@@ -104,7 +110,7 @@ Sage.table = (function() {
       { items: 'th[scope=row]', role: 'rowheader' },
     ];
 
-    tableItems.map((item) => applyAriaRoles(item));
+    tableItems.map((item) => setAriaRole(item));
   }
 
   // reset classes on elements