primer_view_components 0.11.0 → 0.13.0

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

@@ -15,7 +15,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _ActionBarElement_instances, _ActionBarElement_initialBarWidth, _ActionBarElement_previousBarWidth, _ActionBarElement_focusZoneAbortController, _ActionBarElement_itemGap, _ActionBarElement_availableSpace, _ActionBarElement_menuSpace, _ActionBarElement_shrink, _ActionBarElement_grow, _ActionBarElement_showItem, _ActionBarElement_hideItem, _ActionBarElement_menuItems_get;
+var _ActionBarElement_instances, _ActionBarElement_initialBarWidth, _ActionBarElement_previousBarWidth, _ActionBarElement_focusZoneAbortController, _ActionBarElement_isVisible, _ActionBarElement_itemGap, _ActionBarElement_availableSpace, _ActionBarElement_menuSpace, _ActionBarElement_shrink, _ActionBarElement_grow, _ActionBarElement_showItem, _ActionBarElement_hideItem, _ActionBarElement_menuItems_get;
 import { controller, targets, target } from '@github/catalyst';
 import { focusZone, FocusKeys } from '@primer/behaviors';
 const instersectionObserver = new IntersectionObserver(entries => {
@@ -94,12 +94,17 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
             bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
             focusOutBehavior: 'wrap',
             focusableElementFilter: element => {
-                return !element.closest('.ActionBar-item[hidden]') && !element.closest('li.ActionListItem');
+                return __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_isVisible).call(this, element);
             }
         }), "f");
     }
 };
-_ActionBarElement_initialBarWidth = new WeakMap(), _ActionBarElement_previousBarWidth = new WeakMap(), _ActionBarElement_focusZoneAbortController = new WeakMap(), _ActionBarElement_instances = new WeakSet(), _ActionBarElement_itemGap = function _ActionBarElement_itemGap() {
+_ActionBarElement_initialBarWidth = new WeakMap(), _ActionBarElement_previousBarWidth = new WeakMap(), _ActionBarElement_focusZoneAbortController = new WeakMap(), _ActionBarElement_instances = new WeakSet(), _ActionBarElement_isVisible = function _ActionBarElement_isVisible(element) {
+    // Safari doesn't support `checkVisibility` yet.
+    if (typeof element.checkVisibility === 'function')
+        return element.checkVisibility();
+    return Boolean(element.offsetParent || element.offsetWidth || element.offsetHeight);
+}, _ActionBarElement_itemGap = function _ActionBarElement_itemGap() {
     var _a;
     return parseInt((_a = window.getComputedStyle(this.itemContainer)) === null || _a === void 0 ? void 0 : _a.columnGap, 10) || 0;
 }, _ActionBarElement_availableSpace = function _ActionBarElement_availableSpace() {

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

@@ -86,11 +86,18 @@ class ActionBarElement extends HTMLElement {
       bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
       focusOutBehavior: 'wrap',
       focusableElementFilter: element => {
-        return !element.closest('.ActionBar-item[hidden]') && !element.closest('li.ActionListItem')
+        return this.#isVisible(element)
       }
     })
   }
 
+  #isVisible(element: HTMLElement): boolean {
+    // Safari doesn't support `checkVisibility` yet.
+    if (typeof element.checkVisibility === 'function') return element.checkVisibility()
+
+    return Boolean(element.offsetParent || element.offsetWidth || element.offsetHeight)
+  }
+
   #itemGap(): number {
     return parseInt(window.getComputedStyle(this.itemContainer)?.columnGap, 10) || 0
   }

data/app/components/primer/alpha/action_list/form_wrapper.html.erb

@@ -1,7 +1,9 @@
 <% if form_required? %>
   <%= form_with(url: @action, method: @http_method, **@form_arguments) do %>
-    <% if render_input? %>
-      <%= render(Primer::BaseComponent.new(tag: :input, **@input_arguments)) %>
+    <% if render_inputs? %>
+      <% @inputs.each do |input_arguments| %>
+        <%= render(Primer::BaseComponent.new(tag: :input, **input_arguments)) %>
+      <% end %>
     <% end %>
     <%= content %>
   <% end %>

data/app/components/primer/alpha/action_list/form_wrapper.rb

@@ -24,14 +24,25 @@ module Primer
 
           name = @form_arguments.delete(:name)
           value = @form_arguments.delete(:value) || name
+          inputs = @form_arguments.delete(:inputs) || []
 
-          @input_arguments = {
-            type: :hidden,
-            name: name,
-            value: value,
-            data: { list_item_input: true },
-            **(@form_arguments.delete(:input_arguments) || {})
-          }
+          # For the older version of this component that only allowed you to
+          # specify a single input
+          if inputs.empty?
+            inputs << {
+              name: name,
+              value: value,
+              **(@form_arguments.delete(:input_arguments) || {})
+            }
+          end
+
+          @inputs = inputs.map do |input_data|
+            input_data = input_data.dup
+            input_data[:type] ||= :hidden
+            input_data[:data] ||= {}
+            input_data[:data][:list_item_input] = true
+            input_data
+          end
         end
 
         def get?
@@ -42,8 +53,8 @@ module Primer
           @action && !get?
         end
 
-        def render_input?
-          @input_arguments[:name].present?
+        def render_inputs?
+          @inputs.present?
         end
 
         private

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

@@ -109,7 +109,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
     }
     handleEvent(event) {
-        var _a, _b, _c;
+        var _a;
         const targetIsInvoker = (_a = this.invokerElement) === null || _a === void 0 ? void 0 : _a.contains(event.target);
         const eventIsActivation = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivation).call(this, event);
         if (targetIsInvoker && event.type === 'mousedown') {
@@ -127,10 +127,6 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
             __classPrivateFieldSet(this, _ActionMenuElement_invokerBeingClicked, false, "f");
             return;
         }
-        // Ignore events within dialogs within menus
-        if (((_b = event.target) === null || _b === void 0 ? void 0 : _b.closest('dialog')) || ((_c = event.target) === null || _c === void 0 ? void 0 : _c.closest('modal-dialog'))) {
-            return;
-        }
         if (event.type === 'focusout') {
             if (__classPrivateFieldGet(this, _ActionMenuElement_invokerBeingClicked, "f"))
                 return;
@@ -249,11 +245,6 @@ _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalL
         item.setAttribute('aria-checked', `${checked}`);
     }
     __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
-    if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
-        // prevent buttons from being clicked twice
-        event.preventDefault();
-        return;
-    }
 }, _ActionMenuElement_activateItem = function _ActionMenuElement_activateItem(event, item) {
     const eventWillActivateByDefault = (event instanceof MouseEvent && event.type === 'click') ||
         (event instanceof KeyboardEvent &&

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

@@ -172,11 +172,6 @@ export class ActionMenuElement extends HTMLElement {
       return
     }
 
-    // Ignore events within dialogs within menus
-    if ((event.target as Element)?.closest('dialog') || (event.target as Element)?.closest('modal-dialog')) {
-      return
-    }
-
     if (event.type === 'focusout') {
       if (this.#invokerBeingClicked) return
 
@@ -283,12 +278,6 @@ export class ActionMenuElement extends HTMLElement {
     }
 
     this.#updateInput()
-
-    if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
-      // prevent buttons from being clicked twice
-      event.preventDefault()
-      return
-    }
   }
 
   #activateItem(event: Event, item: Element) {

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}

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

@@ -2,7 +2,20 @@
   "name": "alpha/segmented_control",
   "selectors": [
     ".SegmentedControl",
+    ".SegmentedControl--iconOnly .Button--iconOnly.Button--large",
+    ".SegmentedControl--iconOnly .Button--iconOnly.Button--medium",
+    ".SegmentedControl--iconOnly .Button--iconOnly.Button--small",
+    ".SegmentedControl--small",
+    ".SegmentedControl--small .SegmentedControl-item",
+    ".SegmentedControl--small .SegmentedControl-item .Button",
+    ".SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item",
+    ".SegmentedControl--medium .SegmentedControl-item",
+    ".SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item",
+    ".SegmentedControl--large .SegmentedControl-item",
+    ".SegmentedControl--large .SegmentedControl-item .Button",
+    ".SegmentedControl--large.SegmentedControl--iconOnly .SegmentedControl-item",
     ".SegmentedControl-item",
+    ".SegmentedControl-item .Button-withTooltip",
     ".SegmentedControl-item .Button--invisible:hover:not(:disabled)",
     ".SegmentedControl-item .Button--invisible:active:not(:disabled)",
     ".SegmentedControl-item.SegmentedControl-item--selected",
@@ -14,20 +27,8 @@
     ".SegmentedControl-item:not(:first-child):before",
     ".SegmentedControl-item .Button",
     ".SegmentedControl-item .Button:focus-visible",
-    ".SegmentedControl-item .Button--small",
-    ".SegmentedControl-item .Button--small.Button--iconOnly",
-    ".SegmentedControl-item .Button--small.Button--iconOnly:before",
-    ".SegmentedControl-item .Button--medium",
-    ".SegmentedControl-item .Button--medium.Button--iconOnly",
-    ".SegmentedControl-item .Button--medium.Button--iconOnly:before",
-    ".SegmentedControl-item .Button--large",
-    ".SegmentedControl-item .Button--large.Button--iconOnly",
-    ".SegmentedControl-item .Button--large.Button--iconOnly:before",
-    ".SegmentedControl-item .Button--iconOnly",
     ".SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label",
     ".SegmentedControl--fullWidth",
-    ".SegmentedControl--fullWidth .SegmentedControl-item",
-    ".SegmentedControl--fullWidth .Button--iconOnly",
-    ".SegmentedControl--fullWidth .Button-withTooltip"
+    ".SegmentedControl--fullWidth .SegmentedControl-item"
   ]
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["segmented_control.pcss","<no source>"],"names":[],"mappings":"AAEA,kBAGE,mFAAqF,CACrF,gDAAyC,CAHzC,mBAAoB,CACpB,eAGF,CAEA,uBAGE,4DAAiD,CACjD,gDAAyC,CAFzC,mBAAoB,CAGpB,4DAAsD,CAJtD,iBAkIF,CA3HI,+DACE,iGACF,CAEA,gEACE,mGACF,CAIF,uDACE,yFAA2F,CAC3F,sGAiBF,CAfE,+DACE,gDAKF,CAHE,qEACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,gDAME,kHAAqE,CADrE,UAAW,CAHX,gBAAiB,CAEjB,wDAAiD,CADjD,qDAA8C,CAF9C,iBAMF,CAIF,+BACE,QAAS,CAGT,8DAAyC,CAFzC,8CAA2C,CAC3C,eAOF,CAJE,6CAEE,4DAAqD,CADrD,sHAEF,CAGF,sCACE,sJAEC,CACD,yHAWF,CATE,uDACE,mJAOF,CAFI,8DC9FR,WAAA,YAAA,SAAA,2CAAA,0CAAA,kBAAA,QAAA,4CAAA,UD8FoF,CAKlF,uCACE,oJAEC,CACD,wHAWF,CATE,wDACE,mJAOF,CAFI,+DC/GR,WAAA,YAAA,SAAA,2CAAA,0CAAA,kBAAA,QAAA,4CAAA,UD+GoF,CAKlF,sCACE,qJAEC,CACD,uHAWF,CATE,uDACE,oJAOF,CAFI,8DChIR,WAAA,YAAA,SAAA,4CAAA,2CAAA,kBAAA,QAAA,4CAAA,UDgIkF,CAKhF,yCACE,eACF,CAEA,oFACE,8DACF,CAIF,6BACE,YAYF,CAVE,oDACE,MAAO,CACP,sBACF,CAGA,gGAEE,UACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n  display: inline-flex;\n  list-style: none;\n  background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));\n  border-radius: var(--borderRadius-medium);\n}\n\n.SegmentedControl-item {\n  position: relative;\n  display: inline-flex;\n  border: var(--borderWidth-thin) solid transparent;\n  border-radius: var(--borderRadius-medium);\n  padding: var(--control-xsmall-paddingInline-condensed);\n\n  & .Button--invisible {\n    &:hover:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));\n    }\n  }\n\n  /* Selected ---------------------------------------- */\n  &.SegmentedControl-item--selected {\n    background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));\n    border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));\n\n    & .Button {\n      font-weight: var(--base-text-weight-semibold);\n\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    &::before {\n      border-color: transparent !important;\n    }\n\n    & + .SegmentedControl-item::before {\n      border-color: transparent;\n    }\n  }\n\n  /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n  & .Button-label[data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* Separator lines */\n  &:not(:first-child) {\n    &::before {\n      position: absolute;\n      inset: 0 0 0 -1px;\n      margin-top: var(--control-medium-paddingBlock);\n      margin-bottom: var(--control-medium-paddingBlock);\n      content: '';\n      border-left: var(--borderWidth-thin) solid var(--borderColor-default);\n    }\n  }\n\n  /* Button ----------------------------------------- */\n  & .Button {\n    border: 0;\n    font-weight: var(--base-text-weight-normal);\n    transition: none;\n    color: var(--button-default-fgColor-rest);\n\n    &:focus-visible {\n      outline-offset: calc(var(--control-xsmall-paddingInline-condensed) - var(--borderWidth-thin));\n      border-radius: calc(var(--borderRadius-medium) - 5px);\n    }\n  }\n\n  & .Button--small {\n    height: calc(\n      var(--control-small-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n    );\n    padding: 0 calc(var(--control-small-paddingInline-condensed) - var(--control-xsmall-paddingInline-condensed));\n\n    &.Button--iconOnly {\n      width: calc(\n        var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n      );\n\n      &::before {\n        @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);\n      }\n    }\n  }\n\n  & .Button--medium {\n    height: calc(\n      var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n    );\n    padding: 0 calc(var(--control-medium-paddingInline-normal) - var(--control-xsmall-paddingInline-condensed));\n\n    &.Button--iconOnly {\n      width: calc(\n        var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n      );\n\n      &::before {\n        @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);\n      }\n    }\n  }\n\n  & .Button--large {\n    height: calc(\n      var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n    );\n    padding: 0 calc(var(--control-large-paddingInline-spacious) - var(--control-xsmall-paddingInline-condensed));\n\n    &.Button--iconOnly {\n      width: calc(\n        var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n      );\n\n      &::before {\n        @mixin minTouchTarget var(--control-large-size), var(--control-large-size);\n      }\n    }\n  }\n\n  & .Button--iconOnly {\n    padding: initial;\n  }\n\n  & .Button--invisible.Button--invisible-noVisuals .Button-label {\n    color: var(--button-default-fgColor-rest);\n  }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n  display: flex;\n\n  & .SegmentedControl-item {\n    flex: 1;\n    justify-content: center;\n  }\n\n  /* is .Button-withTooltip used anywhere? can't find use of it */\n  & .Button--iconOnly,\n  & .Button-withTooltip {\n    width: 100%;\n  }\n}\n",null]}
+{"version":3,"sources":["segmented_control.pcss"],"names":[],"mappings":"AAEA,kBACE,yEAAkE,CAIlE,mFAAqF,CACrF,gDAAyC,CAHzC,mBAAoB,CACpB,eAGF,CAGE,qLAIE,0BAA4B,CAD5B,UAEF,CAKF,yBACE,2EAeF,CAbE,gDACE,wCAKF,CAHE,wDACE,4GACF,CAIA,2EACE,uCACF,CAKF,iDACE,sCACF,CAGE,4EACE,qCACF,CAKF,gDACE,uCAKF,CAHE,wDACE,4GACF,CAIA,2EACE,sCACF,CAMJ,uBAIE,4DAAiD,CACjD,gDAAyC,CAHzC,mBAAoB,CAIpB,sCAAkC,CAHlC,sBAAuB,CAIvB,4CAA6C,CAN7C,iBAoFF,CA5EE,2CACE,UACF,CAIE,+DACE,iGACF,CAEA,gEACE,mGACF,CAIF,uDACE,yFAA2F,CAC3F,sGAiBF,CAfE,+DACE,gDAKF,CAHE,qEACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,gDAME,kHAAqE,CADrE,UAAW,CAHX,gBAAiB,CAEjB,wDAAiD,CADjD,qDAA8C,CAF9C,iBAMF,CAIF,+BAGE,QAAS,CAET,+FAA0F,CAD1F,8CAA2C,CAH3C,WAAY,CAKZ,6GAAuG,CAJvG,UAUF,CAJE,6CAEE,+FAA0F,CAD1F,sGAEF,CAGF,oFACE,8DACF,CAIF,6BACE,YAMF,CAJE,oDACE,MAAO,CACP,sBACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n  --segmentedControl-item-padding: var(--control-small-paddingBlock);\n\n  display: inline-flex;\n  list-style: none;\n  background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));\n  border-radius: var(--borderRadius-medium);\n}\n\n.SegmentedControl--iconOnly {\n  & .Button--iconOnly.Button--small,\n  & .Button--iconOnly.Button--medium,\n  & .Button--iconOnly.Button--large {\n    width: 100%;\n    padding-inline: 0 !important;\n  }\n}\n\n/* sizes */\n\n.SegmentedControl--small {\n  --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);\n\n  & .SegmentedControl-item {\n    height: var(--control-small-size);\n\n    & .Button {\n      padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));\n    }\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-small-size);\n    }\n  }\n}\n\n.SegmentedControl--medium {\n  & .SegmentedControl-item {\n    height: var(--control-medium-size);\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-medium-size);\n    }\n  }\n}\n\n.SegmentedControl--large {\n  & .SegmentedControl-item {\n    height: var(--control-large-size);\n\n    & .Button {\n      padding-inline: calc(var(--control-large-paddingInline-normal) - var(--segmentedControl-item-padding));\n    }\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-large-size);\n    }\n  }\n}\n\n/* item */\n\n.SegmentedControl-item {\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  border: var(--borderWidth-thin) solid transparent;\n  border-radius: var(--borderRadius-medium);\n  height: var(--control-medium-size);\n  padding: var(--segmentedControl-item-padding);\n\n  & .Button-withTooltip {\n    width: 100%;\n  }\n\n  /* button color overrides */\n  & .Button--invisible {\n    &:hover:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));\n    }\n  }\n\n  /* Selected ---------------------------------------- */\n  &.SegmentedControl-item--selected {\n    background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));\n    border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));\n\n    & .Button {\n      font-weight: var(--base-text-weight-semibold);\n\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    &::before {\n      border-color: transparent !important;\n    }\n\n    & + .SegmentedControl-item::before {\n      border-color: transparent;\n    }\n  }\n\n  /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n  & .Button-label[data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* Separator lines */\n  &:not(:first-child) {\n    &::before {\n      position: absolute;\n      inset: 0 0 0 -1px;\n      margin-top: var(--control-medium-paddingBlock);\n      margin-bottom: var(--control-medium-paddingBlock);\n      content: '';\n      border-left: var(--borderWidth-thin) solid var(--borderColor-default);\n    }\n  }\n\n  /* Button ----------------------------------------- */\n  & .Button {\n    height: 100%;\n    width: 100%;\n    border: 0;\n    font-weight: var(--base-text-weight-normal);\n    border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);\n    padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));\n\n    &:focus-visible {\n      outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));\n      border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);\n    }\n  }\n\n  & .Button--invisible.Button--invisible-noVisuals .Button-label {\n    color: var(--button-default-fgColor-rest);\n  }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n  display: flex;\n\n  & .SegmentedControl-item {\n    flex: 1;\n    justify-content: center;\n  }\n}\n"]}