Adds DataTable actions slot and divider

Ports Primer React's Table.Actions and Table.Divider. Typed action
slots (button, icon_button, menu) render at the end of the title
row via a new 'actions' grid area; an optional divider kwarg draws
a presentational rule below the title row.

Generalizes the table spacing selector since header elements may
now sit between the subtitle and the overflow wrapper.

Author: myabc

app/components/primer/open_project/data_table.html.erb

@@ -1,5 +1,15 @@
 <%= render(Primer::Box.new(**@container_arguments)) do %>
   <%= title %>
+  <% if actions.any? %>
+    <div class="TableActions">
+      <% actions.each do |action| %>
+        <%= action %>
+      <% end %>
+    </div>
+  <% end %>
+  <% if @divider %>
+    <div class="TableDivider" role="presentation"></div>
+  <% end %>
   <%= subtitle %>
   <%= render(Primer::BaseComponent.new(**@wrapper_arguments)) do %>
     <data-table>

app/components/primer/open_project/data_table.pcss

@@ -21,11 +21,13 @@
 /* Container ---------------------------------------------------------------- */
 .TableContainer {
     display: grid;
+    grid-template-columns: 1fr auto;
     grid-template-areas:
-    'title'
-    'subtitle'
-    'table'
-    'footer';
+    'title actions'
+    'divider divider'
+    'subtitle subtitle'
+    'table table'
+    'footer footer';
 }
 
 /* TableTitle */
@@ -49,9 +51,25 @@
     grid-area: subtitle;
 }
 
+/* TableActions */
+.TableActions {
+    display: flex;
+    align-self: center;
+    justify-self: end;
+    column-gap: var(--base-size-8);
+    grid-area: actions;
+}
+
+/* TableDivider */
+.TableDivider {
+    height: var(--borderWidth-thin);
+    margin-block: var(--base-size-16) var(--base-size-8);
+    background-color: var(--borderColor-default);
+    grid-area: divider;
+}
+
 /* Spacing before the table */
-.TableTitle + .TableOverflowWrapper,
-.TableSubtitle + .TableOverflowWrapper {
+.TableContainer > .TableOverflowWrapper:not(:first-child) {
     margin-block-start: var(--base-size-8);
 }
 

app/components/primer/open_project/data_table.rb

@@ -69,6 +69,20 @@ def sort_data
         column
       }
 
+      # Actions rendered at the end of the table's title row, ported from
+      # Primer React's `Table.Actions`.
+      #
+      # Use:
+      #
+      # - `button` for a labelled <%= link_to_component(Primer::Beta::Button) %>.
+      # - `icon_button` for an icon-only <%= link_to_component(Primer::Beta::IconButton) %>.
+      # - `menu` for a <%= link_to_component(Primer::Alpha::ActionMenu) %>.
+      renders_many :actions, types: {
+        button: Primer::Beta::Button,
+        icon_button: Primer::Beta::IconButton,
+        menu: Primer::Alpha::ActionMenu
+      }
+
       renders_one :pagination, Primer::OpenProject::DataTable::PaginationFooter
 
       # @param data [Array, ActiveRecord::Relation]
@@ -81,6 +95,9 @@ def sort_data
       # @param initial_sort_direction [Symbol, nil]
       #   Sort direction for the initially sorted column.
       #   Options: :ASC, :DESC
+      # @param divider [Boolean]
+      #   Whether to render a presentational divider line below the title row,
+      #   ported from Primer React's `Table.Divider`
       # @param html_data [Hash]
       #   HTML data attributes to be passed to the table
       # @param system_arguments [Hash]
@@ -90,13 +107,15 @@ def initialize(
         cell_padding: CELL_PADDING_DEFAULT,
         initial_sort_column: nil,
         initial_sort_direction: nil,
+        divider: false,
         html_data: {},
         **system_arguments
       )
         @rows = data
         @cell_padding = fetch_or_fallback(CELL_PADDING_OPTIONS, cell_padding, CELL_PADDING_DEFAULT)
         @initial_sort_column = initial_sort_column
         @initial_sort_direction = initial_sort_direction
+        @divider = fetch_or_fallback_boolean(divider, false)
         @id = system_arguments[:id] ||= self.class.generate_id(base_name: "data-table")
 
         @container_arguments = {}

previews/primer/open_project/data_table_preview.rb

@@ -51,6 +51,12 @@ def playground(
         )
       end
 
+      # @label With Actions
+      # @snapshot
+      def with_actions
+        render_with_template(locals: { projects: sample_rows.first(3) })
+      end
+
       # @label With Cell Placeholder
       # @snapshot
       def with_cell_placeholder

previews/primer/open_project/data_table_preview/with_actions.html.erb

@@ -0,0 +1,19 @@
+<%=
+  render(
+    Primer::OpenProject::DataTable.new(projects, divider: true)
+  ) do |data_table|
+    data_table.with_title(tag: :h2) { "Projects" }
+    data_table.with_subtitle { "Actions render at the end of the title row." }
+
+    data_table.with_action_icon_button(icon: :download, "aria-label": "Download")
+    data_table.with_action_button(leading_visual_icon: :plus) { "New project" }
+    data_table.with_action_menu(anchor_align: :end) do |menu|
+      menu.with_show_button(icon: :"kebab-horizontal", "aria-label": "More actions")
+      menu.with_item(label: "Import projects")
+      menu.with_item(label: "Manage columns")
+    end
+
+    data_table.with_column(field: :name, header: "Name", row_header: true)
+    data_table.with_column(field: :status_code, header: "Status")
+  end
+%>

static/arguments.json

@@ -6088,6 +6088,12 @@
         "default": "`nil`",
         "description": "Sort direction for the initially sorted column. Options: :ASC, :DESC"
       },
+      {
+        "name": "divider",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether to render a presentational divider line below the title row, ported from Primer React's `Table.Divider`"
+      },
       {
         "name": "html_data",
         "type": "Hash",

static/info_arch.json

@@ -20005,6 +20005,12 @@
         "default": "`nil`",
         "description": "Sort direction for the initially sorted column. Options: :ASC, :DESC"
       },
+      {
+        "name": "divider",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether to render a presentational divider line below the title row, ported from Primer React's `Table.Divider`"
+      },
       {
         "name": "html_data",
         "type": "Hash",
@@ -20034,6 +20040,11 @@
         "description": null,
         "parameters": []
       },
+      {
+        "name": "actions",
+        "description": "Actions rendered at the end of the table's title row, ported from\nPrimer React's `Table.Actions`.\n\nUse:\n\n- `button` for a labelled {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}.\n- `icon_button` for an icon-only {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}}.\n- `menu` for a {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}}.",
+        "parameters": []
+      },
       {
         "name": "pagination",
         "description": null,
@@ -20094,6 +20105,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/open_project/data_table/with_actions",
+        "name": "with_actions",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/open_project/data_table/with_cell_placeholder",
         "name": "with_cell_placeholder",

static/previews.json

@@ -3666,6 +3666,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/open_project/data_table/with_actions",
+        "name": "with_actions",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/open_project/data_table/with_cell_placeholder",
         "name": "with_cell_placeholder",

test/components/primer/open_project/data_table/data_table_test.rb

@@ -422,6 +422,44 @@ def test_does_not_mutate_caller_html_data
     assert_equal({ test_selector: "my-table" }, html_data)
   end
 
+  def test_renders_actions_in_title_area
+    render_component(@data) do |data_table|
+      data_table.with_column(field: :subject, header: "Subject")
+      data_table.with_title { "Projects" }
+      data_table.with_action_button { "Export" }
+      data_table.with_action_icon_button(icon: :pencil, "aria-label": "Edit")
+    end
+
+    assert_selector(".TableContainer .TableActions button", text: "Export")
+    assert_selector(".TableActions button .octicon-pencil")
+    assert_selector(".TableActions tool-tip", text: "Edit", visible: :all)
+  end
+
+  def test_renders_no_actions_container_without_actions
+    render_component(@data) do |data_table|
+      data_table.with_column(field: :subject, header: "Subject")
+    end
+
+    assert_no_selector(".TableActions")
+  end
+
+  def test_renders_divider_when_enabled
+    render_component(@data, divider: true) do |data_table|
+      data_table.with_column(field: :subject, header: "Subject")
+      data_table.with_title { "Projects" }
+    end
+
+    assert_selector(".TableContainer .TableDivider[role='presentation']")
+  end
+
+  def test_renders_no_divider_by_default
+    render_component(@data) do |data_table|
+      data_table.with_column(field: :subject, header: "Subject")
+    end
+
+    assert_no_selector(".TableDivider")
+  end
+
   def test_renders_placeholder_for_blank_cell_values
     row_klass = Data.define(:subject, :assignee)
     data = [row_klass.new(subject: "First", assignee: nil)]