ActionBar component

.changeset/cold-coins-tease.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Primer::Experimental::ActionBar component

app/components/primer/alpha/tab_nav.rb

@@ -38,8 +38,8 @@ class TabNav < Primer::Component
       # Renders extra content to the `TabNav`. This will be rendered after the tabs.
       #
       # @param align [Symbol] <%= one_of(Primer::Alpha::TabNav::EXTRA_ALIGN_OPTIONS) %>
-      renders_one :extra, lambda { |align: EXTRA_ALIGN_DEFAULT, &block|
-        @align = fetch_or_fallback(EXTRA_ALIGN_OPTIONS, align, EXTRA_ALIGN_DEFAULT)
+      renders_one :extra, lambda { |align: Primer::TabNavHelper::EXTRA_ALIGN_DEFAULT, &block|
+        @align = fetch_or_fallback(Primer::TabNavHelper::EXTRA_ALIGN_OPTIONS, align, Primer::TabNavHelper::EXTRA_ALIGN_DEFAULT)
 
         view_context.capture { block&.call }
       }

app/components/primer/alpha/tab_panels.html.erb

@@ -1,12 +1,13 @@
 <%= tab_container_wrapper(with_panel: true, **@wrapper_arguments) do %>
+  <% align = @align %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-    <%= extra if @align == :left %>
+    <%= extra if align == :left %>
     <%= render Primer::BaseComponent.new(**@body_arguments) do %>
       <% tabs.each do |tab| %>
         <%= tab %>
       <% end %>
     <% end %>
-    <%= extra if @align == :right %>
+    <%= extra if align == :right %>
   <% end %>
   <% tabs.each do |tab| %>
     <%= tab.panel %>

app/components/primer/alpha/tab_panels.rb

@@ -35,8 +35,8 @@ class TabPanels < Primer::Component
       # Renders extra content to the `TabPanels`. This will be rendered after the tabs.
       #
       # @param align [Symbol] <%= one_of(Primer::Alpha::TabNav::EXTRA_ALIGN_OPTIONS) %>
-      renders_one :extra, lambda { |align: EXTRA_ALIGN_DEFAULT, &block|
-        @align = fetch_or_fallback(EXTRA_ALIGN_OPTIONS, align, EXTRA_ALIGN_DEFAULT)
+      renders_one :extra, lambda { |align: Primer::TabNavHelper::EXTRA_ALIGN_DEFAULT, &block|
+        @align = fetch_or_fallback(Primer::TabNavHelper::EXTRA_ALIGN_OPTIONS, align, Primer::TabNavHelper::EXTRA_ALIGN_DEFAULT)
 
         view_context.capture { block&.call }
       }

app/components/primer/beta/base_button.rb

@@ -27,7 +27,7 @@ def initialize(
         **system_arguments
       )
         @system_arguments = system_arguments
-        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+        @system_arguments[:tag] = tag
 
         @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE) if @system_arguments[:tag] == :button
 

app/components/primer/beta/button.pcss

@@ -337,4 +337,13 @@ summary.Button {
   &.Button--large {
     width: var(--primer-control-large-size, 40px);
   }
+
+  /* Increase touch target */
+  @media (pointer: coarse) {
+    position: relative;
+
+    &::before {
+      @mixin minTouchTarget 44px, 44px;
+    }
+  }
 }

app/components/primer/beta/icon_button.rb

@@ -49,6 +49,7 @@ class IconButton < Primer::Component
       # @param icon [String] Name of <%= link_to_octicons %> to use.
       # @param wrapper_arguments [Hash] Optional keyword arguments to be passed to the wrapper `<div>` tag.
       # @param scheme [Symbol] <%= one_of(Primer::Beta::IconButton::SCHEME_OPTIONS) %>
+      # @param wrapper_arguments [Hash] Optional keyword arguments to be passed to the wrapper `<div>` tag.
       # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
       # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
       # @param type [Symbol] <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
@@ -63,6 +64,8 @@ def initialize(icon:, scheme: DEFAULT_SCHEME, wrapper_arguments: {}, tooltip_dir
         @system_arguments = system_arguments
         @system_arguments[:id] ||= "icon-button-#{SecureRandom.hex(4)}"
 
+        @wrapper_arguments = wrapper_arguments
+
         @system_arguments[:classes] = class_names(
           "Button",
           "Button--iconOnly",

app/components/primer/experimental/action_bar.html.erb

@@ -0,0 +1,37 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= render Primer::BaseComponent.new(tag: :div, classes: "ActionBar-item-container", "data-target": "action-bar.itemContainer") do %>
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  <% end %>
+  <%# Replace with ActionMenu %>
+  <%= render Primer::BaseComponent.new(tag: :"action-menu", "data-anchor-align": "end", "data-target": "action-bar.moreMenu", hidden: true, classes: "ActionBar-more-menu") do %>
+    <%= render Primer::Beta::IconButton.new(size: @size, scheme: :invisible, icon: :"kebab-horizontal", "aria-label": "Menu", "aria-haspopup": true, "aria-expanded": false, "aria-controls": "#{@menu_id}-list", id: @menu_id) %>
+    <div class="Overlay-backdrop--anchor" data-menu-overlay>
+      <div class="Overlay Overlay-whenNarrow Overlay--height-auto Overlay--width-auto" hidden>
+        <div class="Overlay-body Overlay-body--paddingNone">
+          <ul class="ActionList" id="<%= @menu_id %>-list" role="menu" aria-labelledby="<%= @menu_id %>-text">
+            <% items.each do |item| %>
+              <% if item.slot_type?(:divider) %>
+                <li class="ActionList-sectionDivider" role="presentation" aria-hidden data-targets="action-bar.menuItems" hidden></li>
+              <% else %>
+                <%= render(Primer::BaseComponent.new(tag: :li, role: :none, classes: "ActionList-item", "data-targets": "action-bar.menuItems", hidden: true)) do %>
+                  <%= render(Primer::BaseComponent.new(**item.menu_arguments)) do %>
+                    <% if item.slot_type?(:icon_button) %>
+                      <%= render Primer::BaseComponent.new(tag: :span, classes: "ActionList-item-visual ActionList-item-visual--leading") do %>
+                        <%= render Primer::OcticonComponent.new(icon: item.icon) %>
+                      <% end %>
+                    <% end %>
+                    <span class="ActionList-item-label">
+                      <%= item.label %>
+                    </span>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
+          </ul>
+        </div>
+      </div>
+    </div>
+  <% end %>
+<% end %>

app/components/primer/experimental/action_bar.pcss

@@ -0,0 +1,52 @@
+/* CSS for ActionBar  */
+
+.ActionBar {
+  display: flex !important;
+  align-items: center;
+  overflow: hidden;
+  min-width: 0;
+  justify-content: space-between;
+  position: relative;
+  flex: 1 1 auto;
+}
+
+.ActionBar-item-container {
+  display: flex;
+  align-items: center;
+}
+
+.ActionBar-more-menu {
+  flex-shrink: 0;
+}
+
+/* Divider */
+
+.ActionBar-divider {
+  margin: 0 var(--primer-controlStack-medium-gap-condensed, 8px);
+  height: calc(var(--primer-control-medium-size, 32px) / 2);
+  border-left: var(--primer-borderWidth-thin, 1px) solid var(--color-border-subtle);
+}
+
+.ActionBar--small .ActionBar-divider {
+  margin: 0 var(--primer-controlStack-small-gap-condensed, 8px);
+}
+
+.ActionBar--large .ActionBar-divider {
+  margin: 0 var(--primer-controlStack-large-gap-condensed, 8px);
+}
+
+/* Increase spacing so touch targets don't overlap */
+
+@media (pointer: coarse) {
+  .ActionBar .ActionBar-item-container {
+    gap: calc(var(--primer-control-minTarget-coarse, 44px) - var(--primer-control-medium-size, 32px)); /* 12px */
+  }
+
+  .ActionBar--small .ActionBar-item-container {
+    gap: calc(var(--primer-control-minTarget-coarse, 44px) - var(--primer-control-small-size, 28px));  /* 16px */
+  }
+
+  .ActionBar--large .ActionBar-item-container {
+    gap: calc(var(--primer-control-minTarget-coarse, 44px) - var(--primer-control-large-size, 40px));  /* 4px */
+  }
+}

app/components/primer/experimental/action_bar.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+module Primer
+  module Experimental
+    # Add a general description of component here
+    # Add additional usage considerations or best practices that may aid the user to use the component correctly.
+    # @accessibility Add any accessibility considerations
+    class ActionBar < Primer::Component
+      status :experimental
+
+      SIZE_DEFAULT = :medium
+      SIZE_MAPPINGS = {
+        SIZE_DEFAULT => nil,
+        :small => "ActionBar--small",
+        :large => "ActionBar--large"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys.freeze
+
+      renders_many :items, types: {
+        icon_button: lambda { |**system_arguments|
+          Primer::Experimental::ActionBar::Item.new(slot_type: :icon_button, size: @size, **system_arguments)
+        },
+        divider: lambda { |**system_arguments|
+          Primer::Experimental::ActionBar::Item.new(
+            slot_type: :divider,
+            tag: :hr,
+            classes: class_names(
+              system_arguments[:classes],
+              "ActionBar-divider"
+            ),
+            **system_arguments
+          )
+        }
+      }
+
+      # @example Example goes here
+      #
+      #   <%= render(Primer::Experimental::ActionBar.new) { "Example" } %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(size: Primer::Beta::Button::DEFAULT_SIZE, **system_arguments)
+        @menu_id = "action-bar-overflow-menu-#{SecureRandom.hex(4)}"
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :"action-bar"
+
+        @size = fetch_or_fallback(Primer::Beta::Button::SIZE_OPTIONS, size, Primer::Beta::Button::DEFAULT_SIZE)
+
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "ActionBar",
+          SIZE_MAPPINGS[@size]
+        )
+        @system_arguments[:role] = "toolbar"
+      end
+
+      def render?
+        items.any?
+      end
+
+      # :no_doc:
+      class Item < Primer::Component
+        status :experimental
+
+        SLOT_TYPES = [:icon_button, :divider].freeze
+        SLOT_TYPE_DEFAULT = :icon_button
+
+        attr_reader :icon, :label, :menu_arguments
+
+        def initialize(slot_type:, **system_arguments)
+          @item_type = fetch_or_fallback(SLOT_TYPES, slot_type, SLOT_TYPE_DEFAULT)
+          @system_arguments = system_arguments
+          @menu_arguments = system_arguments.dup
+          @menu_arguments.delete(:icon)
+          @menu_arguments.delete(:"aria-label")
+
+          return unless slot_type?(:icon_button)
+
+          @menu_arguments[:tag] = system_arguments[:tag] || :button
+          @menu_arguments[:classes] = "ActionList-content"
+          @icon = system_arguments[:icon]
+          @label = system_arguments[:"aria-label"]
+        end
+
+        def slot_type?(type)
+          @item_type == type
+        end
+
+        def call
+          if slot_type?(:icon_button)
+            render Primer::Beta::IconButton.new(wrapper_arguments: { "data-targets": "action-bar.items" }, scheme: :invisible, **@system_arguments)
+          else
+            render Primer::BaseComponent.new("data-targets": "action-bar.items", **@system_arguments)
+          end
+        end
+      end
+    end
+  end
+end