openproject-primer_view_components 0.12.1 → 0.13.0

data/app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -20,6 +20,7 @@ export class ActionMenuElement extends HTMLElement {
   #abortController: AbortController
   #originalLabel = ''
   #inputName = ''
+  #invokerBeingClicked = false
 
   get selectVariant(): SelectVariant {
     return this.getAttribute('data-select-variant') as SelectVariant
@@ -52,7 +53,7 @@ export class ActionMenuElement extends HTMLElement {
   }
 
   get popoverElement(): HTMLElement | null {
-    return this.invokerElement?.popoverTargetElement || null
+    return (this.invokerElement?.popoverTargetElement as HTMLElement) || null
   }
 
   get invokerElement(): HTMLButtonElement | null {
@@ -94,8 +95,10 @@ export class ActionMenuElement extends HTMLElement {
     this.addEventListener('click', this, {signal})
     this.addEventListener('mouseover', this, {signal})
     this.addEventListener('focusout', this, {signal})
+    this.addEventListener('mousedown', this, {signal})
     this.#setDynamicLabel()
     this.#updateInput()
+    this.#softDisableItems()
 
     if (this.includeFragment) {
       this.includeFragment.addEventListener('include-fragment-replaced', this, {
@@ -104,102 +107,218 @@ export class ActionMenuElement extends HTMLElement {
     }
   }
 
+  #softDisableItems() {
+    const {signal} = this.#abortController
+
+    for (const item of this.#items) {
+      item.addEventListener('click', this.#potentiallyDisallowActivation.bind(this), {signal})
+      item.addEventListener('keydown', this.#potentiallyDisallowActivation.bind(this), {signal})
+    }
+  }
+
+  #potentiallyDisallowActivation(event: Event) {
+    if (!this.#isActivation(event)) return
+
+    const item = (event.target as HTMLElement).closest(menuItemSelectors.join(','))
+    if (!item) return
+
+    if (item.getAttribute('aria-disabled')) {
+      event.preventDefault()
+      event.stopPropagation()
+      event.stopImmediatePropagation()
+    }
+  }
+
   disconnectedCallback() {
     this.#abortController.abort()
   }
 
+  #isKeyboardActivation(event: Event): boolean {
+    return (
+      event instanceof KeyboardEvent &&
+      event.type === 'keydown' &&
+      !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+      (event.key === 'Enter' || event.key === ' ')
+    )
+  }
+
+  #isMouseActivation(event: Event): boolean {
+    return event instanceof MouseEvent && event.type === 'click'
+  }
+
+  #isActivation(event: Event): boolean {
+    return this.#isMouseActivation(event) || this.#isKeyboardActivation(event)
+  }
+
   handleEvent(event: Event) {
-    const activation = this.#isActivationKeydown(event)
-    if (event.target === this.invokerElement && activation) {
-      if (this.#firstItem) {
-        event.preventDefault()
-        this.popoverElement?.showPopover()
-        this.#firstItem.focus()
-        return
-      }
+    const targetIsInvoker = this.invokerElement?.contains(event.target as HTMLElement)
+    const eventIsActivation = this.#isActivation(event)
+
+    if (targetIsInvoker && event.type === 'mousedown') {
+      this.#invokerBeingClicked = true
+      return
+    }
+
+    // Prevent safari bug that dismisses menu on mousedown instead of allowing
+    // the click event to propagate to the button
+    if (event.type === 'mousedown') {
+      event.preventDefault()
+      return
     }
 
-    // Ignore events within dialogs within menus
-    if ((event.target as Element)?.closest('dialog') || (event.target as Element)?.closest('modal-dialog')) {
+    if (targetIsInvoker && eventIsActivation) {
+      this.#handleInvokerActivated(event)
+      this.#invokerBeingClicked = false
       return
     }
 
-    // If a dialog has been rendered within the menu, we do not want to hide
-    // the entire menu, as that will also hide the Dialog. Instead we want to
-    // show the Dialog while hiding just the visible part of the menu.
-    if ((activation || event.type === 'click') && (event.target as HTMLElement)?.closest('[data-show-dialog-id]')) {
-      const dialogInvoker = (event.target as HTMLElement)!.closest('[data-show-dialog-id]')
-      const dialog = this.ownerDocument.getElementById(dialogInvoker?.getAttribute('data-show-dialog-id') || '')
-      if (dialogInvoker && dialog && this.contains(dialogInvoker) && this.contains(dialog)) {
-        this.querySelector<HTMLElement>('.ActionListWrap')!.style.display = 'none'
-        const dialog_controller = new AbortController()
-        const {signal} = dialog_controller
-        const handleDialogClose = () => {
-          dialog_controller.abort()
-          this.querySelector<HTMLElement>('.ActionListWrap')!.style.display = ''
-          if (this.popoverElement?.matches(':popover-open')) {
-            this.popoverElement?.hidePopover()
-          }
+    if (event.type === 'focusout') {
+      if (this.#invokerBeingClicked) return
+
+      // Give the browser time to focus the next element
+      requestAnimationFrame(() => {
+        if (!this.contains(document.activeElement) || document.activeElement === this.invokerElement) {
+          this.#handleFocusOut()
         }
-        dialog.addEventListener('close', handleDialogClose, {signal})
-        dialog.addEventListener('cancel', handleDialogClose, {signal})
-        return
-      }
+      })
+
+      return
     }
 
-    if (!this.popoverElement?.matches(':popover-open')) return
+    const item = (event.target as Element).closest(menuItemSelectors.join(','))
+    const targetIsItem = item !== null
 
-    if (event.type === 'include-fragment-replaced') {
-      if (this.#firstItem) this.#firstItem.focus()
-    } else if (activation || (event instanceof MouseEvent && event.type === 'click')) {
-      // Hide popover after current event loop to prevent changes in focus from
-      // altering the target of the event. Not doing this specifically affects
-      // <a> tags. It causes the event to be sent to the currently focused element
-      // instead of the anchor, which effectively prevents navigation, i.e. it
-      // appears as if hitting enter does nothing. Curiously, clicking instead
-      // works fine.
-      if (this.selectVariant !== 'multiple') {
-        setTimeout(() => {
-          if (this.popoverElement?.matches(':popover-open')) {
-            this.popoverElement?.hidePopover()
-          }
-        })
+    if (targetIsItem && eventIsActivation) {
+      const dialogInvoker = item.closest('[data-show-dialog-id]')
+
+      if (dialogInvoker) {
+        const dialog = this.ownerDocument.getElementById(dialogInvoker.getAttribute('data-show-dialog-id') || '')
+
+        if (dialog && this.contains(dialogInvoker) && this.contains(dialog)) {
+          this.#handleDialogItemActivated(event, dialog)
+          return
+        }
       }
 
-      // The rest of the code below deals with single/multiple selection behavior, and should not
-      // interfere with events fired by menu items whose behavior is specified outside the library.
-      if (this.selectVariant !== 'multiple' && this.selectVariant !== 'single') return
+      this.#activateItem(event, item)
+      this.#handleItemActivated(event, item)
+      return
+    }
 
-      const item = (event.target as Element).closest(menuItemSelectors.join(','))
-      if (!item) return
-      const ariaChecked = item.getAttribute('aria-checked')
-      const checked = ariaChecked !== 'true'
+    if (event.type === 'include-fragment-replaced') {
+      this.#handleIncludeFragmentReplaced()
+    }
+  }
 
-      if (this.selectVariant === 'single') {
-        // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
-        if (checked) {
-          item.setAttribute('aria-checked', 'true')
-        }
+  #handleInvokerActivated(event: Event) {
+    event.preventDefault()
+    event.stopPropagation()
 
-        for (const checkedItem of this.querySelectorAll('[aria-checked]')) {
-          if (checkedItem !== item) {
-            checkedItem.setAttribute('aria-checked', 'false')
-          }
-        }
+    if (this.#isOpen()) {
+      this.#hide()
+    } else {
+      this.#show()
+      this.#firstItem?.focus()
+    }
+  }
 
-        this.#setDynamicLabel()
-      } else {
-        // multi-select mode allows unchecking a checked item
-        item.setAttribute('aria-checked', `${checked}`)
+  #handleDialogItemActivated(event: Event, dialog: HTMLElement) {
+    this.querySelector<HTMLElement>('.ActionListWrap')!.style.display = 'none'
+    const dialog_controller = new AbortController()
+    const {signal} = dialog_controller
+    const handleDialogClose = () => {
+      dialog_controller.abort()
+      this.querySelector<HTMLElement>('.ActionListWrap')!.style.display = ''
+      if (this.#isOpen()) {
+        this.#hide()
       }
+    }
+    dialog.addEventListener('close', handleDialogClose, {signal})
+    dialog.addEventListener('cancel', handleDialogClose, {signal})
+  }
+
+  #handleItemActivated(event: Event, item: Element) {
+    // Hide popover after current event loop to prevent changes in focus from
+    // altering the target of the event. Not doing this specifically affects
+    // <a> tags. It causes the event to be sent to the currently focused element
+    // instead of the anchor, which effectively prevents navigation, i.e. it
+    // appears as if hitting enter does nothing. Curiously, clicking instead
+    // works fine.
+    if (this.selectVariant !== 'multiple') {
+      setTimeout(() => {
+        if (this.#isOpen()) {
+          this.#hide()
+        }
+      })
+    }
 
-      this.#updateInput()
+    // The rest of the code below deals with single/multiple selection behavior, and should not
+    // interfere with events fired by menu items whose behavior is specified outside the library.
+    if (this.selectVariant !== 'multiple' && this.selectVariant !== 'single') return
 
-      if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
-        // prevent buttons from being clicked twice
-        event.preventDefault()
+    const ariaChecked = item.getAttribute('aria-checked')
+    const checked = ariaChecked !== 'true'
+
+    if (this.selectVariant === 'single') {
+      // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
+      if (checked) {
+        item.setAttribute('aria-checked', 'true')
+      }
+
+      for (const checkedItem of this.querySelectorAll('[aria-checked]')) {
+        if (checkedItem !== item) {
+          checkedItem.setAttribute('aria-checked', 'false')
+        }
       }
+
+      this.#setDynamicLabel()
+    } else {
+      // multi-select mode allows unchecking a checked item
+      item.setAttribute('aria-checked', `${checked}`)
     }
+
+    this.#updateInput()
+  }
+
+  #activateItem(event: Event, item: Element) {
+    const eventWillActivateByDefault =
+      (event instanceof MouseEvent && event.type === 'click') ||
+      (event instanceof KeyboardEvent &&
+        event.type === 'keydown' &&
+        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+        event.key === 'Enter')
+
+    // if the event will result in activating the current item by default, i.e. is a
+    // mouse click or keyboard enter, bail out
+    if (eventWillActivateByDefault) return
+
+    // otherwise, event will not result in activation by default, so we stop it and
+    // simulate a click
+    event.stopPropagation()
+    const elem = item as HTMLElement
+    elem.click()
+  }
+
+  #handleIncludeFragmentReplaced() {
+    if (this.#firstItem) this.#firstItem.focus()
+    this.#softDisableItems()
+  }
+
+  // Close when focus leaves menu
+  #handleFocusOut() {
+    this.#hide()
+  }
+
+  #show() {
+    this.popoverElement?.showPopover()
+  }
+
+  #hide() {
+    this.popoverElement?.hidePopover()
+  }
+
+  #isOpen() {
+    return this.popoverElement?.matches(':popover-open')
   }
 
   #setDynamicLabel() {
@@ -261,18 +380,13 @@ export class ActionMenuElement extends HTMLElement {
     }
   }
 
-  #isActivationKeydown(event: Event): boolean {
-    return (
-      event instanceof KeyboardEvent &&
-      event.type === 'keydown' &&
-      !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-      (event.key === 'Enter' || event.key === ' ')
-    )
-  }
-
   get #firstItem(): HTMLElement | null {
     return this.querySelector(menuItemSelectors.join(','))
   }
+
+  get #items(): HTMLElement[] {
+    return Array.from(this.querySelectorAll(menuItemSelectors.join(',')))
+  }
 }
 
 if (!window.customElements.get('action-menu')) {

data/app/components/primer/alpha/action_menu/list.rb

@@ -111,8 +111,6 @@ module Primer
               system_arguments,
               { aria: { disabled: true } }
             )
-
-            content_arguments[:disabled] = "" if content_arguments[:tag] == :button
           end
 
           { data: data, **system_arguments, content_arguments: content_arguments }

data/app/components/primer/alpha/action_menu.rb

@@ -3,14 +3,131 @@
 
 module Primer
   module Alpha
-    # ActionMenu is used for actions, navigation, to display secondary options, or single/multi select lists. They appear when users interact with buttons, actions, or other controls.
+    # ActionMenu is used for actions, navigation, to display secondary options, or single/multi select lists. They appear when
+    # users interact with buttons, actions, or other controls.
     #
     # The only allowed elements for the `Item` components are: `:a`, `:button`, and `:clipboard-copy`. The default is `:button`.
     #
+    # ### Select variants
+    #
+    # While `ActionMenu`s default to a list of buttons that can link to other pages, copy text to the clipboard, etc, they also support
+    # `single` and `multiple` select variants. The single select variant allows a single item to be "selected" (i.e. marked "active")
+    # when clicked, which will cause a check mark to appear to the left of the item text. When the `multiple` select variant is chosen,
+    # multiple items may be selected and check marks will appear next to each selected item.
+    #
+    # Use the `select_variant:` option to control which variant the `ActionMenu` uses. For more information, see the documentation on
+    # supported arguments below.
+    #
+    # ### Dynamic labels
+    #
+    # When using the `single` select variant, an optional label indicating the selected item can be displayed inside the menu button.
+    # Dynamic labels can also be prefixed with custom text.
+    #
+    # Pass `dynamic_label: true` to enable dynamic label behavior, and pass `dynamic_label_prefix: "<string>"` to set a custom prefix.
+    # For more information, see the documentation on supported arguments below.
+    #
+    # ### `ActionMenu`s as form inputs
+    #
+    # When using either the `single` or `multiple` select variants, `ActionMenu`s can be used as form inputs. They behave very
+    # similarly to how HTML `<select>` boxes behave, and play nicely with Rails' built-in form mechanisms. Pass arguments via the
+    # `form_arguments:` argument, including the Rails form builder object and the name of the field:
+    #
+    # ```erb
+    # <% form_with(url: update_merge_strategy_path) do |f| %>
+    #   <%= render(Primer::Alpha::ActionMenu.new(form_arguments: { builder: f, name: "merge_strategy" })) do |menu| %>
+    #     <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
+    #     <% menu.with_item(label: "Recursive", data: { value: "recursive" }) %>
+    #     <% menu.with_item(label: "Ours", data: { value: "ours" }) %>
+    #     <% menu.with_item(label: "Theirs", data: { value: "theirs" }) %>
+    #   <% end %>
+    # <% end %>
+    # ```
+    #
+    # The value of the `data: { value: ... }` argument is sent to the server on submit, keyed using the name provided above
+    # (eg. `"merge_strategy"`). If no value is provided for an item, the value of that item is the item's label.  Here's the
+    # corresponding `MergeStrategyController` that might be written to handle the form above:
+    #
+    # ```ruby
+    # class MergeStrategyController < ApplicationController
+    #   def update
+    #     puts "You chose #{merge_strategy_params[:merge_strategy]}"
+    #   end
+    #
+    #   private
+    #
+    #   def merge_strategy_params
+    #     params.permit(:merge_strategy)
+    #   end
+    # end
+    # ```
+    #
+    # ### `ActionMenu` items that submit forms
+    #
+    # Whereas `ActionMenu` items normally permit navigation via `<a>` tags which make HTTP `get` requests, `ActionMenu` items
+    # also permit navigation via `POST` requests. To enable this behavior, include the `href:` argument as normal, but also pass
+    # the `form_arguments:` argument to the appropriate item:
+    #
+    # ```erb
+    # <%= render(Primer::Alpha::ActionMenu.new) do |menu| %>
+    #   <% menu.with_item(
+    #     label: "Repository",
+    #     href: update_repo_grouping_path,
+    #     form_arguments: {
+    #       method: :post,
+    #       name: "group_by",
+    #       value: "repository"
+    #     }
+    #   ) %>
+    # <% end %>
+    # ```
+    #
+    # Make sure to specify `method: :post`, as the default is `:get`. When clicked, the list item will submit a POST request to
+    # the URL passed in the `href:` argument, including a parameter named `"group_by"` with a value of `"repository"`. If no value
+    # is given, the name, eg. `"group_by"`, will be used as the value.
+    #
+    # It is possible to include multiple fields on submit. Instead of passing the `name:` and `value:` arguments, pass an array via
+    # the `inputs:` argument:
+    #
+    # ```erb
+    # <%= render(Primer::Alpha::ActionMenu.new) do |menu| %>
+    #   <% menu.with_show_button { "Group By" } %>
+    #   <% menu.with_item(
+    #     label: "Repository",
+    #     href: update_repo_grouping_path,
+    #     form_arguments: {
+    #       method: :post,
+    #       inputs: [{
+    #         name: "group_by",
+    #         value: "repository"
+    #       }, {
+    #         name: "some_other_field",
+    #         value: "some value",
+    #       }],
+    #     }
+    #   ) %>
+    # <% end %>
+    # ```
+    #
+    # ### Form arguments
+    #
+    # The following table summarizes the arguments allowed in the `form_arguments:` hash mentioned above.
+    #
+    # |Name             |Type          |Default|Description|
+    # |:----------------|:-------------|:------|:----------|
+    # |`method`         |`Symbol`      |`:get` |The HTTP request method to use to submit the form. One of `:get`, `:post`, `:patch`, `:put`, `:delete`, or `:head`|
+    # |`name`           |`String`      |`nil`  |The name of the field that will be sent to the server on submit.|
+    # |`value`          |`String`      |`nil`  |The value of the field that will be sent to the server on submit.|
+    # |`input_arguments`|`Hash`        |`{}`   |Additional key/value pairs to emit as HTML attributes on the `<input type="hidden">` element.|
+    # |`inputs`         |`Array<Hash>` |`[]`   |An array of hashes representing HTML `<input type="hidden">` elements. Must contain at least `name:` and `value:` keys. If additional key/value pairs are provided, they are emitted as HTML attributes on the `<input>` element. This argument supercedes the `name:`, `value:`, and `:input_arguments` arguments listed above.|
+    #
+    # The elements of the `inputs:` array will be emitted as HTML `<input type="hidden">` elements.
+    #
     # @accessibility
-    #   The action for the menu item needs to be on the element with `role="menuitem"`. Semantics are removed for everything nested inside of it. When a menu item is selected, the menu will close immediately.
+    #   The action for the menu item needs to be on the element with `role="menuitem"`. Semantics are removed for everything
+    #   nested inside of it. When a menu item is selected, the menu will close immediately.
     #
-    #   Additional information around the keyboard functionality and implementation can be found on the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#menu).
+    #   Additional information around the keyboard functionality and implementation can be found on the
+    #   [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#menu).
     class ActionMenu < Primer::Component
       status :alpha
 

data/app/components/primer/alpha/modal_dialog.js

@@ -38,19 +38,16 @@ function clickHandler(event) {
             return;
         }
     }
-    // Find the top level dialog that is open.
-    const topLevelDialog = overlayStack[overlayStack.length - 1];
-    if (!topLevelDialog)
+    if (!overlayStack.length)
         return;
-    dialogId = button.getAttribute('data-close-dialog-id');
-    if (dialogId === topLevelDialog.id) {
-        overlayStack.pop();
-        topLevelDialog.close();
-    }
-    dialogId = button.getAttribute('data-submit-dialog-id');
-    if (dialogId === topLevelDialog.id) {
-        overlayStack.pop();
-        topLevelDialog.close(true);
+    dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id');
+    if (dialogId) {
+        const dialog = document.getElementById(dialogId);
+        if (dialog instanceof ModalDialogElement) {
+            const dialogIndex = overlayStack.findIndex(ele => ele.id === dialogId);
+            overlayStack.splice(dialogIndex, 1);
+            dialog.close(button.hasAttribute('data-submit-dialog-id'));
+        }
     }
 }
 function keydownHandler(event) {
@@ -107,7 +104,7 @@ export class ModalDialogElement extends HTMLElement {
             if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
                 __classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
             }
-            focusTrap(this, undefined, __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal);
+            focusTrap(this, this.querySelector('[autofocus]'), __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal);
             overlayStack.push(this);
         }
         else {

data/app/components/primer/alpha/modal_dialog.ts

@@ -30,20 +30,17 @@ function clickHandler(event: Event) {
       return
     }
   }
-  // Find the top level dialog that is open.
-  const topLevelDialog = overlayStack[overlayStack.length - 1]
-  if (!topLevelDialog) return
 
-  dialogId = button.getAttribute('data-close-dialog-id')
-  if (dialogId === topLevelDialog.id) {
-    overlayStack.pop()
-    topLevelDialog.close()
-  }
+  if (!overlayStack.length) return
 
-  dialogId = button.getAttribute('data-submit-dialog-id')
-  if (dialogId === topLevelDialog.id) {
-    overlayStack.pop()
-    topLevelDialog.close(true)
+  dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id')
+  if (dialogId) {
+    const dialog = document.getElementById(dialogId)
+    if (dialog instanceof ModalDialogElement) {
+      const dialogIndex = overlayStack.findIndex(ele => ele.id === dialogId)
+      overlayStack.splice(dialogIndex, 1)
+      dialog.close(button.hasAttribute('data-submit-dialog-id'))
+    }
   }
 }
 
@@ -107,7 +104,7 @@ export class ModalDialogElement extends HTMLElement {
       if (this.#focusAbortController.signal.aborted) {
         this.#focusAbortController = new AbortController()
       }
-      focusTrap(this, undefined, this.#focusAbortController.signal)
+      focusTrap(this, this.querySelector('[autofocus]') as HTMLElement, this.#focusAbortController.signal)
       overlayStack.push(this)
     } else {
       if (!this.open) return

data/app/components/primer/alpha/segmented_control/item.html.erb

@@ -2,12 +2,5 @@
   "SegmentedControl-item",
   "SegmentedControl-item--selected": @selected
   ) %>" role="listitem" data-targets="segmented-control.items">
-  <% if @hide_labels %>
-    <%= render Primer::Beta::IconButton.new(icon: @icon, "aria-label": @label, **@system_arguments) %>
-  <% else %>
-    <%= render Primer::Beta::Button.new(**@system_arguments) do |button| %>
-      <% button.with_leading_visual_icon(icon: @icon) unless @icon.nil? %>
-      <%= @label %>
-    <% end %>
-  <% end %>
+  <%= render @button %>
 </li>

data/app/components/primer/alpha/segmented_control/item.rb

@@ -13,16 +13,50 @@ module Primer
         # @param selected [Boolean] Whether the item is selected
         # @param icon [Symbol] The icon to use
         # @param hide_labels [Symbol] Whether to only show the icon
-        def initialize(label:, selected: false, icon: nil, hide_labels: false, **system_arguments)
-          @icon = icon
-          @hide_labels = hide_labels
-          @label = label
+        def initialize(
+          label:,
+          selected: false,
+          icon: nil,
+          hide_labels: false,
+          **system_arguments
+        )
           @selected = selected
 
           @system_arguments = system_arguments
           @system_arguments[:"data-action"] = "click:segmented-control#select" if system_arguments[:href].nil?
           @system_arguments[:"aria-current"] = selected
           @system_arguments[:scheme] = :invisible
+
+          if hide_labels
+            @button = Primer::Beta::IconButton.new(
+              icon: icon,
+              "aria-label": label,
+              **@system_arguments
+            )
+          else
+            @button = Primer::Beta::Button.new(**@system_arguments)
+            @button.with_leading_visual_icon(icon: icon) if icon
+            @button.with_content(label)
+          end
+        end
+
+        # @!parse
+        #   # Optional trailing Label
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %>'s `with_trailing_visual_label` slot.
+        #   renders_one(:trailing_visual_label)
+
+        # Optional trailing label.
+        #
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %>'s `with_trailing_visual_label` slot.
+        def with_trailing_visual_label(**system_arguments, &block)
+          @button.with_trailing_visual_label(**system_arguments, &block)
+        end
+
+        private
+
+        def before_render
+          content
         end
       end
     end

data/app/components/primer/alpha/segmented_control.css

@@ -1 +1 @@
-.SegmentedControl{background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;list-style:none}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;padding:var(--control-xsmall-paddingInline-condensed,.25rem);position:relative}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock,.375rem);margin-top:var(--control-medium-paddingBlock,.375rem);position:absolute}.SegmentedControl-item .Button{border:0;color:var(--button-default-fgColor-rest,var(--color-btn-text));font-weight:var(--base-text-weight-normal,400);transition:none}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium,.375rem) - 5px);outline-offset:calc(var(--control-xsmall-paddingInline-condensed,.25rem) - var(--borderWidth-thin,max(1px, .0625rem)))}.SegmentedControl-item .Button--small{height:calc(var(--control-small-size,1.75rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-small-paddingInline-condensed,.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--small.Button--iconOnly{width:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--small.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem);min-width:var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--medium{height:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-medium-paddingInline-normal,.75rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--medium.Button--iconOnly{width:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--medium.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem);min-width:var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--large{height:calc(var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-large-paddingInline-spacious,1rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--large.Button--iconOnly{width:calc(var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--large.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-large-size,2.5rem);min-width:var(--control-large-size,2.5rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--iconOnly{padding:initial}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}.SegmentedControl--fullWidth .Button--iconOnly,.SegmentedControl--fullWidth .Button-withTooltip{width:100%}
+.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock,0.25rem);background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--large,.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock,0.125rem)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size,1.75rem)}.SegmentedControl--small .SegmentedControl-item .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal,.5rem) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size,1.75rem)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size,2rem)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size,2rem)}.SegmentedControl--large .SegmentedControl-item{height:var(--control-large-size,2.5rem)}.SegmentedControl--large .SegmentedControl-item .Button{padding-inline:calc(var(--control-large-paddingInline-normal,.75rem) - var(--segmentedControl-item-padding))}.SegmentedControl--large.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-large-size,2.5rem)}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;height:var(--control-medium-size,2rem);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}.SegmentedControl-item .Button-withTooltip{width:100%}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock,.375rem);margin-top:var(--control-medium-paddingBlock,.375rem);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium,.375rem) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal,400);height:100%;padding-inline:calc(var(--control-medium-paddingInline-normal,.75rem) - var(--segmentedControl-item-padding));width:100%}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium,.375rem) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin,max(1px, .0625rem)))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}