openproject-primer_view_components 0.11.0 → 0.13.0

data/app/components/primer/alpha/nav_list/group.rb

@@ -3,104 +3,8 @@
 module Primer
   module Alpha
     class NavList
-      # A logical grouping of navigation links with an optional heading.
-      #
-      # See <%= link_to_component(Primer::Alpha::NavList) %> for usage examples.
-      class Group < ActionList
-        # A special "show more" list item that appears at the bottom of the group. Clicking
-        # the item will fetch the next page of results from the URL passed in the `src` argument
-        # and append the resulting chunk of HTML to the group.
-        #
-        # @param src [String] The URL to query for additional pages of list items.
-        # @param pages [Integer] The total number of pages in the result set.
-        # @param component_klass [Class] A component class to use instead of the default `Primer::Alpha::NavList::Item` class.
-        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::NavList::Item) %>.
-        renders_one :show_more_item, lambda { |src:, pages:, component_klass: NavList::Item, **system_arguments|
-          system_arguments[:classes] = class_names(
-            @item_classes,
-            system_arguments[:classes]
-          )
-          system_arguments[:tag] = :div
-          system_arguments[:id] ||= self.class.generate_id(base_name: "item")
-          system_arguments[:hidden] = true
-          system_arguments[:href] = "#"
-          system_arguments[:data] ||= {}
-          system_arguments[:data][:target] = "nav-list.showMoreItem"
-          system_arguments[:data][:action] = "click:nav-list#showMore"
-          system_arguments[:data][:current_page] = "1"
-          system_arguments[:data][:total_pages] = pages.to_s
-          system_arguments[:label_arguments] = {
-            **system_arguments[:label_arguments] || {},
-            color: :accent
-          }
-
-          system_arguments[:content_arguments] = {
-            **system_arguments[:content_arguments] || {},
-            tag: :button
-          }
-
-          system_arguments[:content_arguments][:data] = merge_data(
-            system_arguments[:content_arguments],
-            data: { list_id: id }
-          )
-
-          component_klass.new(list: self, src: src, **system_arguments)
-        }
-
-        # @private
-        def self.custom_element_name
-          Primer::Alpha::NavList.custom_element_name
-        end
-
-        # @param selected_item_id [Symbol] The ID of the currently selected item. Used internally.
-        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-        def initialize(selected_item_id: nil, **system_arguments)
-          @system_arguments = system_arguments
-          @selected_item_id = selected_item_id
-
-          super(**@system_arguments)
-        end
-
-        # Cause this group to show its list of sub items when rendered.
-        # :nocov:
-        def expand!
-          @expanded = true
-        end
-        # :nocov:
-
-        # @!parse
-        #   # Items.
-        #   #
-        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::NavList::Item) %>.
-        #   renders_many :items
-
-        # @private
-        def build_item(component_klass: NavList::Item, **system_arguments)
-          super(
-            component_klass: component_klass,
-            selected_item_id: @selected_item_id,
-            **system_arguments
-          )
-        end
-
-        # @private
-        def build_avatar_item(component_klass: NavList::Item, **system_arguments)
-          super(
-            component_klass: component_klass,
-            selected_item_id: @selected_item_id,
-            **system_arguments
-          )
-        end
-
-        def kind
-          :group
-        end
-
-        def before_render
-          super
-
-          raise ArgumentError, "NavList groups are required to have headings" unless heading?
-        end
+      class Group < Beta::NavList::Group
+        status :deprecated
       end
     end
   end

data/app/components/primer/alpha/nav_list/heading.rb

@@ -3,33 +3,8 @@
 module Primer
   module Alpha
     class NavList
-      # The heading placed above a `NavList`'s items.
-      #
-      # See <%= link_to_component(Primer::Alpha::NavList) %> for usage examples.
-      class Heading < Primer::Component
-        attr_reader :title, :id, :heading_level, :system_arguments
-
-        # @param title [String] The text content of the heading.
-        # @param id [String] The value of the ID HTML attribute. Auto-generated by default.
-        # @param heading_level [Integer] The heading level, i.e. 2 for an `<h2>`, 3 for an `<h3>`, etc.
-        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-        def initialize(title:, id: self.class.generate_id, heading_level: 2, **system_arguments)
-          @title = title
-          @id = id
-          @heading_level = heading_level
-          @system_arguments = system_arguments
-        end
-
-        def call
-          render(
-            Primer::BaseComponent.new(
-              tag: :"h#{heading_level}",
-              id: id,
-              classes: "ActionListHeader",
-              **system_arguments
-            ).with_content(title)
-          )
-        end
+      class Heading < Beta::NavList::Heading
+        status :deprecated
       end
     end
   end

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

@@ -3,153 +3,8 @@
 module Primer
   module Alpha
     class NavList
-      # Items are rendered as styled links. They can optionally include leading and/or trailing visuals,
-      # such as icons, avatars, and counters. Items are selected by ID. IDs can be specified via the
-      # `selected_item_ids` argument, which accepts a list of valid IDs for the item. Items can also
-      # themselves contain sub items. Sub items are rendered collapsed by default.
-      class Item < Primer::Alpha::ActionList::Item
-        attr_reader :selected_by_ids, :sub_item
-
-        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
-        renders_many :items, lambda { |**system_arguments|
-          raise "Items can only be nested 2 levels deep" if sub_item?
-
-          @list.build_item(parent: self, sub_item: true, **system_arguments).tap do |item|
-            @list.will_add_item(item)
-          end
-        }
-
-        # Whether or not this item is nested under a parent item.
-        #
-        # @return [Boolean]
-        alias sub_item? sub_item
-
-        # @param selected_item_id [Symbol] The ID of the currently selected list item. Used internally.
-        # @param selected_by_ids [Array<Symbol>] The list of IDs that select this item. In other words, if the `selected_item_id` attribute on the parent `NavList` is set to one of these IDs, the item will appear selected.
-        # @param expanded [Boolean] Whether this item shows (expands) or hides (collapses) its list of sub items.
-        # @param sub_item [Boolean] Whether or not this item is nested under a parent item. Used internally.
-        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-        def initialize(selected_item_id: nil, selected_by_ids: [], sub_item: false, expanded: false, **system_arguments)
-          @selected_item_id = selected_item_id
-          @selected_by_ids = Array(selected_by_ids)
-          @expanded = expanded
-          @sub_item = sub_item
-
-          system_arguments[:classes] = class_names(
-            system_arguments[:classes],
-            "ActionListItem--subItem" => @sub_item
-          )
-
-          @sub_list_arguments = {
-            classes: class_names(
-              "ActionList",
-              "ActionList--subGroup"
-            )
-          }
-
-          @list = system_arguments[:list]
-
-          @sub_list_arguments["data-action"] = "keydown:#{@list.custom_element_name}#handleItemWithSubItemKeydown" if @list
-
-          overrides = { "data-item-id": @selected_by_ids.join(" ") }
-
-          super(**system_arguments, **overrides)
-        end
-
-        def active?
-          item_active?(self) && items.empty?
-        end
-
-        # Cause this item to show its list of sub items when rendered.
-        def expand!
-          @expanded = true
-        end
-
-        def before_render
-          if active_sub_item?
-            expand!
-
-            @content_arguments[:classes] = class_names(
-              @content_arguments[:classes],
-              "ActionListContent--hasActiveSubItem"
-            )
-          else
-            @system_arguments[:classes] = class_names(
-              @system_arguments[:classes],
-              "ActionListItem--navActive" => active?
-            )
-          end
-
-          @content_arguments[:"aria-current"] = "page" if active?
-
-          super
-
-          raise "Cannot render a trailing action for an item with subitems" if items.present? && trailing_action.present?
-
-          raise "Cannot pass `selected_by_ids:` for an item with subitems, since parent items cannot be selected" if items.present? && @selected_by_ids.present?
-
-          return if items.blank?
-
-          @sub_list_arguments[:aria] = merge_aria(
-            @sub_list_arguments,
-            { aria: { labelledby: id } }
-          )
-
-          raise ArgumentError, "Items with sub-items cannot have hrefs" if href.present?
-
-          @content_arguments[:tag] = :button
-          @content_arguments[:"aria-expanded"] = @expanded.to_s
-          @content_arguments[:"data-action"] = "
-            click:#{@list.custom_element_name}#handleItemWithSubItemClick
-            keydown:#{@list.custom_element_name}#handleItemWithSubItemKeydown
-          "
-
-          with_private_trailing_action_icon(:"chevron-down", classes: "ActionListItem-collapseIcon")
-
-          @system_arguments[:classes] = class_names(
-            @system_arguments[:classes],
-            "ActionListItem--hasSubItem"
-          )
-        end
-
-        def kind
-          :item
-        end
-
-        private
-
-        # Normally it would be easier to simply ask each item for its active status, eg.
-        # items.any?(&:active?), but unfortunately the view context is not set on each
-        # item until _after_ the parent's before_render, etc methods have been called.
-        # This means helper methods like current_page? will blow up with an error, since
-        # `helpers` is simply an alias for the view context (i.e. an instance of
-        # ActionView::Base). Since we know the view context for the parent object must
-        # be set before `before_render` is invoked, we can call helper methods here in
-        # the parent and bypass the problem entirely. Maybe not the most OO approach,
-        # but it works.
-        def item_active?(item)
-          if item.selected_by_ids.present?
-            item.selected_by_ids.include?(@selected_item_id)
-          elsif item.href
-            current_page?(item.href)
-          else
-            # :nocov:
-            false
-            # :nocov:
-          end
-        end
-
-        def active_sub_item?
-          items.any? { |subitem| item_active?(subitem) }
-        end
-
-        def current_page?(url)
-          helpers.current_page?(url)
-        end
-
-        def list_class
-          Primer::Alpha::NavList
-        end
+      class Item < Beta::NavList::Item
+        status :deprecated
       end
     end
   end

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

@@ -2,211 +2,8 @@
 
 module Primer
   module Alpha
-    # `NavList` provides a simple way to render side navigation, i.e. navigation
-    # that appears to the left or right side of some main content. Each group in a
-    # nav list is a list of links.
-    #
-    # Nav list groups can contain sub items. Rather than navigating to a URL, groups
-    # with sub items expand and collapse on click. To indicate this functionality, the
-    # group will automatically render with a trailing chevron icon that changes direction
-    # when the group expands and collapses.
-    #
-    # Nav list items appear visually active when selected. Each nav item must have one
-    # or more ID values that determine which item will appear selected. Use the
-    # `selected_item_id` argument to select the appropriate item.
-    class NavList < Primer::Component
-      status :alpha
-      audited_at "2023-07-10"
-
-      # @private
-      def self.custom_element_name
-        "nav-list"
-      end
-
-      # The heading for the list at large. Accepts the arguments accepted by <%= link_to_component(Primer::Alpha::NavList::Heading) %>.
-      #
-      renders_one :heading, Primer::Alpha::NavList::Heading
-
-      # @!parse
-      #   # Adds an item to the list.
-      #   #
-      #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Alpha::NavList::Item) %>
-      #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::NavList::Item) %>, or whatever class is passed as the `component_klass` argument.
-      #   def with_item(component_klass: Primer::Alpha::NavList::Item, **system_arguments, &block)
-      #   end
-
-      # @!parse
-      #   # Adds an avatar item to the list. Avatar items are a convenient way to accessibly add an item with a leading avatar image.
-      #   #
-      #   # @param src [String] The source url of the avatar image.
-      #   # @param username [String] The username associated with the avatar.
-      #   # @param full_name [String] Optional. The user's full name.
-      #   # @param full_name_scheme [Symbol] Optional. How to display the user's full name. <%= one_of(Primer::Alpha::ActionList::Item::DESCRIPTION_SCHEME_OPTIONS) %>
-      #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Alpha::NavList::Item) %>
-      #   # @param avatar_arguments [Hash] Optional. The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %>
-      #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::NavList::Item) %>, or whatever class is passed as the `component_klass` argument.
-      #   def with_avatar_item(src:, username:, full_name: nil, full_name_scheme: Primer::Alpha::ActionList::Item::DEFAULT_DESCRIPTION_SCHEME, component_klass: Primer::Alpha::NavList::Item, avatar_arguments: {}, **system_arguments, &block)
-      #   end
-
-      # @!parse
-      #   # Adds a group to the list. A group is a list of links and a (required) heading.
-      #   #
-      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::NavList::Group) %>.
-      #   def with_group(**system_arguments, &block)
-      #   end
-
-      # @!parse
-      #   # Adds a divider to the list. Dividers visually separate items and groups.
-      #   #
-      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::NavList::Divider) %>.
-      #   def with_divider(**system_arguments, &block)
-      #   end
-
-      # Items. Items can be individual items, dividers, or groups. See the documentation for `#with_item`, `#with_divider`, and `#with_group` respectively for more information.
-      #
-      renders_many :items, types: {
-        item: {
-          renders: lambda { |**system_arguments, &block|
-            build_item(**system_arguments, &block)
-          },
-
-          as: :item
-        },
-
-        avatar_item: {
-          renders: lambda { |**system_arguments|
-            build_avatar_item(**system_arguments)
-          },
-
-          as: :avatar_item
-        },
-
-        divider: {
-          renders: Primer::Alpha::NavList::Divider,
-          as: :divider
-        },
-
-        group: {
-          renders: lambda { |**system_arguments, &block|
-            Primer::Alpha::NavList::Group.new(
-              selected_item_id: @selected_item_id,
-              **system_arguments,
-              &block
-            )
-          },
-
-          as: :group
-        }
-      }
-
-      # @param selected_item_id [Symbol] The ID of the currently selected item. The default is `nil`, meaning no item is selected.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(selected_item_id: nil, **system_arguments)
-        @system_arguments = system_arguments
-        @selected_item_id = selected_item_id
-      end
-
-      # Builds a new item but does not add it to the list. Use this method
-      # instead of the `#with_item` slot if you need to render an item outside
-      # the context of a list, eg. if rendering additional items to append to
-      # an existing list, perhaps via a separate HTTP request.
-      #
-      # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Alpha::NavList::Item) %>
-      # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::NavList::Item) %>, or whatever class is passed as the `component_klass` argument.
-      def build_item(component_klass: Primer::Alpha::NavList::Item, **system_arguments, &block)
-        component_klass.new(
-          list: top_level_group,
-          selected_item_id: @selected_item_id,
-          **system_arguments,
-          &block
-        )
-      end
-
-      # Builds a new avatar item but does not add it to the list. Avatar items
-      # are a convenient way to accessibly add an item with a leading avatar
-      # image. Use this method instead of the `#with_avatar_item` slot if you
-      # need to render an avatar item outside the context of a list, eg. if
-      # rendering additional items to append to an existing list, perhaps via
-      # a separate HTTP request.
-      #
-      # @param src [String] The source url of the avatar image.
-      # @param username [String] The username associated with the avatar.
-      # @param full_name [String] Optional. The user's full name.
-      # @param full_name_scheme [Symbol] Optional. How to display the user's full name. <%= one_of(Primer::Alpha::ActionList::Item::DESCRIPTION_SCHEME_OPTIONS) %>
-      # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Alpha::NavList::Item) %>
-      # @param avatar_arguments [Hash] Optional. The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %>
-      # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::NavList::Item) %>, or whatever class is passed as the `component_klass` argument.
-      def build_avatar_item(src:, username:, full_name: nil, full_name_scheme: Primer::Alpha::ActionList::Item::DEFAULT_DESCRIPTION_SCHEME, component_klass: Primer::Alpha::NavList::Item, avatar_arguments: {}, **system_arguments)
-        component_klass.new(
-          list: top_level_group,
-          selected_item_id: @selected_item_id,
-          label: username,
-          description_scheme: full_name_scheme,
-          **system_arguments
-        ).tap do |item|
-          item.with_leading_visual_raw_content do
-            # no alt text necessary
-            item.render(Primer::Beta::Avatar.new(src: src, **avatar_arguments, role: :presentation, size: 16))
-          end
-
-          item.with_description_content(full_name) if full_name
-        end
-      end
-
-      private
-
-      def before_render
-        if heading?
-          raise ArgumentError, "Please don't set an aria-label if a heading is provided" if aria(:label, @system_arguments)
-
-          @system_arguments[:aria] = merge_aria(
-            @system_arguments,
-            { aria: { labelledby: heading.id } }
-          )
-        else
-          raise ArgumentError, "When no heading is provided, an aria-label must be given" unless aria(:label, @system_arguments)
-        end
-      end
-
-      # Lists that contain top-level items (i.e. items outside of a group) should be wrapped in a <ul>
-      def render_outer_list?
-        items.any? { |item| !group?(item) }
-      end
-
-      def render_divider_between?(item1, item2)
-        return false if either_is_divider?(item1, item2)
-
-        both_are_groups?(item1, item2) || heterogeneous?(item1, item2)
-      end
-
-      def both_are_groups?(item1, item2)
-        group?(item1) && group?(item2)
-      end
-
-      def heterogeneous?(item1, item2)
-        kind(item1) != kind(item2)
-      end
-
-      def either_is_divider?(item1, item2)
-        divider?(item1) || divider?(item2)
-      end
-
-      def group?(item)
-        kind(item) == :group
-      end
-
-      def divider?(item)
-        kind(item) == :divider
-      end
-
-      def kind(item)
-        item.respond_to?(:kind) ? item.kind : :item
-      end
-
-      def top_level_group
-        # dummy group for the list: argument in the item slot above
-        @top_level_group ||= Primer::Alpha::NavList::Group.new(selected_item_id: @selected_item_id)
-      end
+    class NavList < Beta::NavList
+      status :deprecated
     end
   end
 end

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

@@ -1 +1 @@
-anchored-position[popover]{border-width:0;inset:auto;min-width:192px;overflow:visible;padding:0;position:absolute}.Overlay{display:flex}anchored-position[popover]:not(.\:popover-open){display:none}anchored-position.not-anchored::-webkit-backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}anchored-position.not-anchored::backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}@supports selector(:popover-open){anchored-position[popover]:not(.\:popover-open){display:revert}}@supports selector(:open){anchored-position[popover]:not(.\:popover-open){display:revert}}
+anchored-position[popover]{background:none;border-width:0;inset:auto;min-width:192px;overflow:visible;padding:0;position:absolute}.Overlay{display:flex}anchored-position[popover]:not(.\:popover-open){display:none}anchored-position.not-anchored::-webkit-backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}anchored-position.not-anchored::backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}@supports selector(:popover-open){anchored-position[popover]:not(.\:popover-open){display:revert}}

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

@@ -1 +1 @@
-{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AAAA,2BACE,cAAe,CAIf,UAAW,CADX,eAAgB,CAEhB,gBAAiB,CAJjB,SAAU,CACV,iBAIF,CAEA,SACE,YACF,CAEA,gDACE,YACF,CAEA,iDACE,2EACF,CAFA,yCACE,2EACF,CAGA,kCACE,gDACE,cACF,CACF,CAGA,0BACE,gDACI,cACJ,CACF","file":"overlay.css","sourcesContent":["anchored-position[popover] {\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n  min-width: 192px;\n  inset: auto;\n  overflow: visible;\n}\n\n.Overlay {\n  display: flex;\n}\n\nanchored-position[popover]:not(.\\:popover-open) {\n  display: none;\n}\n\nanchored-position.not-anchored::backdrop {\n  background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));\n}\n\n/* This reverts the declaration above for native popover, where `:popover-open` is supported */\n@supports selector(:popover-open) {\n  anchored-position[popover]:not(.\\:popover-open) {\n    display: revert;\n  }\n}\n\n/* This reverts the declaration above for native popover, where `:open` is supported (Chrome 113, Safari TP) */\n@supports selector(:open) {\n  anchored-position[popover]:not(.\\:popover-open) {\n      display: revert;\n  }\n}\n"]}
+{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AAAA,2BAOE,eAAgB,CANhB,cAAe,CAIf,UAAW,CADX,eAAgB,CAEhB,gBAAiB,CAJjB,SAAU,CACV,iBAKF,CAEA,SACE,YACF,CAEA,gDACE,YACF,CAEA,iDACE,2EACF,CAFA,yCACE,2EACF,CAGA,kCACE,gDACE,cACF,CACF","file":"overlay.css","sourcesContent":["anchored-position[popover] {\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n  min-width: 192px;\n  inset: auto;\n  overflow: visible;\n  background: none;\n}\n\n.Overlay {\n  display: flex;\n}\n\nanchored-position[popover]:not(.\\:popover-open) {\n  display: none;\n}\n\nanchored-position.not-anchored::backdrop {\n  background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));\n}\n\n/* This reverts the declaration above for native popover, where `:popover-open` is supported */\n@supports selector(:popover-open) {\n  anchored-position[popover]:not(.\\:popover-open) {\n    display: revert;\n  }\n}\n"]}

data/app/components/primer/alpha/overlay.pcss

@@ -5,6 +5,7 @@ anchored-position[popover] {
   min-width: 192px;
   inset: auto;
   overflow: visible;
+  background: none;
 }
 
 .Overlay {
@@ -25,10 +26,3 @@ anchored-position.not-anchored::backdrop {
     display: revert;
   }
 }
-
-/* This reverts the declaration above for native popover, where `:open` is supported (Chrome 113, Safari TP) */
-@supports selector(:open) {
-  anchored-position[popover]:not(.\:popover-open) {
-      display: revert;
-  }
-}

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

@@ -178,10 +178,12 @@ module Primer
       end
 
       def before_render
-        if header?
-          @system_arguments[:aria][:labelledby] ||= title_id
-        else
-          @system_arguments[:aria][:label] = @title
+        if @system_arguments[:role].present?
+          if header?
+            @system_arguments[:aria][:labelledby] ||= title_id
+          else
+            @system_arguments[:aria][:label] = @title
+          end
         end
         with_body unless body?
       end

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

@@ -23,6 +23,8 @@ module Primer
       # @param label [String] Label text displayed above the input.
       # @param hidden [Boolean] When set to `true`, visually hides the group.
       # @param caption [String] A string describing the field and what sorts of input it expects. Displayed below the group.
+      # @param invalid [Boolean] If set to `true`, the input will be marked as invalid. Implied if `validation_message` is truthy. This option is set to `true` automatically if the model object associated with the form reports that the input is invalid via Rails validations. It is provided for cases where the form does not have an associated model. If the input is invalid as determined by Rails validations, setting `invalid` to `false` will have no effect.
+      # @param validation_message [String] A string displayed between the caption and the input indicating the input's contents are invalid. This option is, by default, set to the first Rails validation message for the input (assuming the form is associated with a model object). Use `validation_message` to override the default or to provide a validation message in case there is no associated model object.
       # @param label_arguments [Hash] Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `<label>` tag.
 
       # @!method radio_button

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}