primer_view_components 0.1.4 → 0.1.5

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

@@ -0,0 +1,322 @@
+# typed: false
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # The ActionMenu should be used when a user can select a single option triggering an action from a list of items. Primer will automatically nest an `Item` within a presentational `<li>` tag.
+    #
+    # The only allowed elements for the `Item` components are: `:a`, `:button`, and `:clipboard-copy`. If one isn't selected, a fallback `:span` will be used. To add functionality, use a `.js` class to create the functionality, or an `onclick` handler.
+    #
+    # @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.
+    #
+    #   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
+
+      DEFAULT_PRELOAD = false
+
+      DEFAULT_SELECT_VARIANT = :none
+      SELECT_VARIANT_OPTIONS = [
+        :single,
+        :multiple,
+        DEFAULT_SELECT_VARIANT
+      ].freeze
+
+      attr_reader :list, :preload
+
+      alias preload? preload
+
+      # @example Default
+      #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-0") do |c| %>
+      #    <% c.with_show_button { "Menu" } %>
+      #    <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
+      #      Primer Design
+      #    <% end %>
+      #    <% c.with_item(tag: :button, type: "button", onclick: "() => {}") do %>
+      #      Quote Reply
+      #    <% end %>
+      #    <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
+      #      Copy Text
+      #    <% end %>
+      #  <% end %>
+      #
+      # @example With caret
+      #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-1") do |c| %>
+      #    <% c.with_show_button(with_caret: true) { "Menu" } %>
+      #    <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
+      #      Primer Design
+      #    <% end %>
+      #    <% c.with_item(tag: :button, type: "button") do %>
+      #      Quote Reply
+      #    <% end %>
+      #    <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
+      #      Copy Text
+      #    <% end %>
+      #  <% end %>
+      #
+      # @example With `IconButton` trigger
+      #   @description
+      #     Set `icon:` to the octicon you want to use. Always provide an accessible name for the menu by setting `aria-label`.
+      #   @code
+      #    <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-2") do |c| %>
+      #      <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
+      #      <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
+      #        Primer Design Link
+      #      <% end %>
+      #      <% c.with_item(tag: :button, type: "button") do %>
+      #        Quote Reply
+      #      <% end %>
+      #      <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
+      #        Copy Text
+      #      <% end %>
+      #    <% end %>
+      #
+      # @example With divider
+      #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-3") do |c| %>
+      #    <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
+      #    <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
+      #      Primer Design Link
+      #    <% end %>
+      #    <% c.with_item(tag: :button, type: "button") do %>
+      #      Quote Reply
+      #    <% end %>
+      #    <% c.with_item(is_divider: true) %>
+      #    <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
+      #      Copy Text
+      #    <% end %>
+      #  <% end %>
+      #
+      # @example With danger item
+      #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-4") do |c| %>
+      #    <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
+      #    <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
+      #      Primer Design Link
+      #    <% end %>
+      #    <% c.with_item(tag: :button, type: "button") do %>
+      #      Quote Reply
+      #    <% end %>
+      #    <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
+      #      Copy Text
+      #    <% end %>
+      #    <% c.with_item(tag: :button, type: "button", is_dangerous: true) do %>
+      #      Delete
+      #    <% end %>
+      #  <% end %>
+      #
+      # @example With center align
+      #   @description
+      #     Align the menu to the center of the trigger button
+      #   @code
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-5", anchor_align: :center, anchor_side: :outside_top) do |c| %>
+      #       <% c.with_show_button(with_caret: true) { "Outside top" } %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-6", anchor_align: :center, anchor_side: :outside_left) do |c| %>
+      #       <% c.with_show_button(with_caret: true) { "Outside left" } %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-7", anchor_align: :center, anchor_side: :outside_right) do |c| %>
+      #       <% c.with_show_button(with_caret: true) { "Outside right" } %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-8", anchor_align: :center, anchor_side: :outside_bottom) do |c| %>
+      #       <% c.with_show_button(with_caret: true) { "Outside bottom" } %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #
+      # @example With start align
+      #   @description
+      #     Align the menu to the start of the trigger button
+      #   @code
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-9", anchor_align: :start, anchor_side: :outside_top) do |c| %>
+      #       <% c.with_show_button(with_caret: true) { "Outside top" } %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-10", anchor_align: :start, anchor_side: :outside_left) do |c| %>
+      #       <% c.with_show_button(with_caret: true) { "Outside left" } %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-11", anchor_align: :start, anchor_side: :outside_right) do |c| %>
+      #       <% c.with_show_button(with_caret: true) { "Outside right" } %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-12", anchor_align: :start, anchor_side: :outside_bottom) do |c| %>
+      #       <% c.with_show_button(with_caret: true) { "Outside bottom" } %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #
+      # @example With end align
+      #   @description
+      #     Align the menu to the end of the trigger button
+      #   @code
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-13", anchor_align: :end, anchor_side: :outside_top) do |c| %>
+      #       <% c.with_show_button(with_caret: true) { "Outside top" } %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-14", anchor_align: :end, anchor_side: :outside_left) do |c| %>
+      #       <% c.with_show_button(with_caret: true) { "Outside left" } %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-15", anchor_align: :end, anchor_side: :outside_right) do |c| %>
+      #       <% c.with_show_button(with_caret: true) { "Outside right" } %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-16", anchor_align: :end, anchor_side: :outside_bottom) do |c| %>
+      #       <% c.with_show_button(with_caret: true) { "Outside bottom" } %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #
+      # @example With deferred menu content loaded with an `include-fragment`
+      #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-3", src: "/") do |c| %>
+      #    <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
+      #  <% end %>
+      #
+      # @param menu_id [String] Id of the menu.
+      # @param anchor_align [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>.
+      # @param anchor_side [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>.
+      # @param src [String] Used with an `include-fragment` element to load menu content from the given source URL.
+      # @param preload [Boolean] When true, and src is present, loads the `include-fragment` on trigger hover.
+      # @param dynamic_label [Boolean] Whether or not to display the text of the currently selected item in the show button.
+      # @param dynamic_label_prefix [String] If provided, the prefix is prepended to the dynamic label and displayed in the show button.
+      # @param select_variant [Symbol]. <%= one_of(Primer::Alpha::ActionMenu::SELECT_VARIANT_OPTIONS) %>.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>.
+      def initialize(
+        menu_id: self.class.generate_id,
+        anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN,
+        anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
+        src: nil,
+        preload: DEFAULT_PRELOAD,
+        dynamic_label: false,
+        dynamic_label_prefix: nil,
+        select_variant: DEFAULT_SELECT_VARIANT,
+        **system_arguments
+      )
+        @menu_id = menu_id
+        @src = src
+        @preload = fetch_or_fallback_boolean(preload, DEFAULT_PRELOAD)
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        @system_arguments[:preload] = true if @src.present? && preload?
+
+        select_variant = fetch_or_fallback(SELECT_VARIANT_OPTIONS, select_variant, DEFAULT_SELECT_VARIANT)
+
+        @system_arguments[:tag] = :"action-menu"
+        @system_arguments[:"data-select-variant"] = select_variant
+        @system_arguments[:"data-dynamic-label"] = "" if dynamic_label
+        @system_arguments[:"data-dynamic-label-prefix"] = dynamic_label_prefix if dynamic_label_prefix.present?
+
+        @overlay = Primer::Alpha::Overlay.new(
+          id: "#{@menu_id}-overlay",
+          title: "Menu",
+          visually_hide_title: true,
+          anchor_align: anchor_align,
+          anchor_side: anchor_side
+        )
+
+        @list = Primer::Alpha::ActionMenu::List.new(
+          menu_id: @menu_id,
+          select_variant: select_variant
+        )
+      end
+
+      # Button to activate the menu. This may be a <%= link_to_component(Primer::ButtonComponent) %> or <%= link_to_component(Primer::IconButton) %>.
+      #
+      # @param icon [Symbol] Set this to an [Octicon name](https://primer.style/octicons/) when you want to render an `IconButton`. Otherwise, this renders as a <%= link_to_component(Primer::ButtonComponent) %>.
+      def with_show_button(**system_arguments, &block)
+        @overlay.with_show_button(**system_arguments, id: "#{@menu_id}-button", controls: "#{@menu_id}-list", &block)
+      end
+
+      # Adds a new item to the list.
+      #
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
+      def with_item(**system_arguments, &block)
+        @list.with_item(**system_arguments, &block)
+      end
+
+      # Retrieves the list of items.
+      def items
+        @list.items
+      end
+
+      # Adds a divider to the list.
+      #
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>'s `divider` slot.
+      def with_divider(**system_arguments, &block)
+        @list.with_divider(**system_arguments, &block)
+      end
+
+      private
+
+      def before_render
+        content
+
+        raise ArgumentError, "`items` cannot be set when `src` is specified" if @src.present? && items.any?
+      end
+
+      def render?
+        items.any? || @src.present?
+      end
+    end
+  end
+end

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

@@ -19,16 +19,5 @@
     ".autocomplete-item.navigation-focus *",
     ".autocomplete-item.selected *",
     ".autocomplete-item[aria-selected=true] *"
-  ],
-  "classes": [
-    "autocomplete-label-stacked",
-    "autocomplete-label-inline",
-    "autocomplete-body",
-    "autocomplete-embedded-icon-wrap",
-    "form-control",
-    "autocomplete-results",
-    "autocomplete-item",
-    "navigation-focus",
-    "selected"
   ]
 }

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

@@ -20,19 +20,5 @@
     ".Banner.Banner--success .Banner-visual .octicon",
     ".Banner.Banner--full",
     ".Banner.Banner--full-whenNarrow"
-  ],
-  "classes": [
-    "Banner",
-    "Banner-actions",
-    "Banner-visual",
-    "octicon",
-    "Banner-message",
-    "Banner-title",
-    "Banner-close",
-    "Banner--warning",
-    "Banner--error",
-    "Banner--success",
-    "Banner--full",
-    "Banner--full-whenNarrow"
   ]
 }

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

@@ -29,15 +29,5 @@
     ".btn-signup-mktg:focus-visible",
     ".btn-small-mktg",
     ".btn-large-mktg"
-  ],
-  "classes": [
-    "btn-mktg",
-    "focus",
-    "disabled",
-    "btn-muted-mktg",
-    "btn-subtle-mktg",
-    "btn-signup-mktg",
-    "btn-small-mktg",
-    "btn-large-mktg"
   ]
 }

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

@@ -78,68 +78,5 @@
     ".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow",
     ".Overlay-backdrop--full-whenNarrow",
     ".Overlay-backdrop--full-whenNarrow .Overlay"
-  ],
-  "classes": [
-    "Overlay--hidden",
-    "Overlay--visibilityHidden",
-    "Overlay",
-    "Overlay--size-auto",
-    "Overlay--size-full",
-    "Overlay--size-xsmall",
-    "Overlay--size-small",
-    "Overlay--size-small-portrait",
-    "Overlay--size-medium",
-    "Overlay--size-medium-portrait",
-    "Overlay--size-large",
-    "Overlay--size-xlarge",
-    "Overlay--height-auto",
-    "Overlay--height-xsmall",
-    "Overlay--height-small",
-    "Overlay--height-medium",
-    "Overlay--height-large",
-    "Overlay--height-xlarge",
-    "Overlay--width-auto",
-    "Overlay--width-small",
-    "Overlay--width-medium",
-    "Overlay--width-large",
-    "Overlay--width-xlarge",
-    "Overlay--width-xxlarge",
-    "Overlay--motion-scaleFade",
-    "Overlay-form",
-    "Overlay-header",
-    "Overlay-header--divided",
-    "Overlay-body",
-    "Overlay-header--large",
-    "Overlay-headerContentWrap",
-    "Overlay-titleWrap",
-    "Overlay-title",
-    "Overlay-description",
-    "Overlay-actionWrap",
-    "Overlay-body--paddingCondensed",
-    "Overlay-body--paddingNone",
-    "Overlay-footer",
-    "Overlay-footer--divided",
-    "Overlay-footer--alignStart",
-    "Overlay-footer--alignCenter",
-    "Overlay-footer--alignEnd",
-    "Overlay-closeButton",
-    "close-button",
-    "Overlay-backdrop--center",
-    "Overlay-backdrop--anchor",
-    "Overlay-backdrop--side",
-    "Overlay-backdrop--placement-left",
-    "Overlay-backdrop--placement-right",
-    "Overlay-backdrop--placement-bottom",
-    "Overlay-backdrop--placement-top",
-    "Overlay-backdrop--full",
-    "Overlay-backdrop--center-whenNarrow",
-    "Overlay-backdrop--anchor-whenNarrow",
-    "Overlay-backdrop--side-whenNarrow",
-    "Overlay-backdrop--placement-left-whenNarrow",
-    "Overlay-whenNarrow",
-    "Overlay-backdrop--placement-right-whenNarrow",
-    "Overlay-backdrop--placement-bottom-whenNarrow",
-    "Overlay-backdrop--placement-top-whenNarrow",
-    "Overlay-backdrop--full-whenNarrow"
   ]
 }

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

@@ -53,13 +53,17 @@ module Primer
       # Optional button to open the dialog.
       #
       # @param system_arguments [Hash] The same arguments as <%= link_to_component(Primer::Beta::Button) %>.
-      renders_one :show_button, lambda { |**system_arguments|
+      renders_one :show_button, lambda { |icon: nil, **system_arguments|
         system_arguments[:classes] = class_names(
           system_arguments[:classes]
         )
         system_arguments[:id] = "dialog-show-#{@system_arguments[:id]}"
         system_arguments[:data] = (system_arguments[:data] || {}).merge({ "show-dialog-id": @system_arguments[:id] })
-        Primer::Beta::Button.new(**system_arguments)
+        if icon.present?
+          Primer::Beta::IconButton.new(icon: icon, **system_arguments)
+        else
+          Primer::Beta::Button.new(**system_arguments)
+        end
       }
 
       # Header content.

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

@@ -36,26 +36,5 @@
     ".dropdown-menu-sw:after",
     ".dropdown-menu-se:before",
     ".dropdown-menu-se:after"
-  ],
-  "classes": [
-    "dropdown",
-    "dropdown-caret",
-    "dropdown-menu",
-    "dropdown-menu-no-overflow",
-    "dropdown-item",
-    "octicon",
-    "color-fg-",
-    "Label",
-    "btn-link",
-    "dropdown-signout",
-    "dropdown-divider",
-    "dropdown-header",
-    "octicon-check",
-    "dropdown-menu-w",
-    "dropdown-menu-e",
-    "dropdown-menu-ne",
-    "dropdown-menu-s",
-    "dropdown-menu-sw",
-    "dropdown-menu-se"
   ]
 }

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

@@ -76,32 +76,5 @@
     ".Layout-main .Layout-main-centered-xl>.container-lg",
     ".Layout-main .Layout-main-centered-xl>.container-md",
     ".Layout-main .Layout-main-centered-xl>.container-xl"
-  ],
-  "classes": [
-    "Layout",
-    "Layout-divider",
-    "Layout-main",
-    "Layout-sidebar",
-    "Layout--sidebarPosition-flowRow-start",
-    "Layout--sidebarPosition-flowRow-end",
-    "Layout--sidebarPosition-flowRow-none",
-    "Layout--divided",
-    "Layout-divider--flowRow-hidden",
-    "Layout-divider--flowRow-shallow",
-    "Layout--flowRow-until-md",
-    "Layout--flowRow-until-lg",
-    "Layout--gutter-none",
-    "Layout--gutter-condensed",
-    "Layout--gutter-spacious",
-    "Layout--sidebar-narrow",
-    "Layout--sidebar-wide",
-    "Layout--sidebarPosition-start",
-    "Layout--sidebarPosition-end",
-    "Layout-main-centered-lg",
-    "Layout-main-centered-md",
-    "Layout-main-centered-xl",
-    "container-lg",
-    "container-md",
-    "container-xl"
   ]
 }

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

@@ -24,16 +24,5 @@
     ".menu-heading:hover",
     ".menu-heading:first-child",
     ".menu-heading:last-child"
-  ],
-  "classes": [
-    "menu",
-    "menu-item",
-    "selected",
-    "octicon",
-    "Counter",
-    "menu-warning",
-    "avatar",
-    "alert",
-    "menu-heading"
   ]
 }

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

@@ -73,6 +73,11 @@ module Primer
               @content_arguments[:classes],
               "ActionListContent--hasActiveSubItem"
             )
+          else
+            @system_arguments[:classes] = class_names(
+              @system_arguments[:classes],
+              "ActionListItem--navActive" => active?
+            )
           end
 
           super

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

@@ -1 +1 @@
-.Overlay[popover]{border-width:0;padding:0;position:absolute}.Overlay[popover]:not(:open){display:none}anchored-position{display:block}
+.Overlay[popover]{border-width:0;padding:0;position:absolute;width:min(192px,100vw - 2rem)}.Overlay[popover]:not(:open){display:none}anchored-position{display:block}

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

@@ -4,8 +4,5 @@
     ".Overlay[popover]",
     ".Overlay[popover]:not(:open)",
     "anchored-position"
-  ],
-  "classes": [
-    "Overlay"
   ]
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AAAA,kBACE,cAAe,CACf,SAAU,CACV,iBACF,CAGA,6BACE,YACF,CAEA,kBACE,aACF","file":"overlay.css","sourcesContent":[".Overlay[popover] {\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n}\n\n/* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n.Overlay[popover]:not(:open) {\n  display: none;\n}\n\nanchored-position {\n  display: block;\n}\n"]}
+{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AAAA,kBACE,cAAe,CACf,SAAU,CACV,iBAAkB,CAClB,6BACF,CAGA,6BACE,YACF,CAEA,kBACE,aACF","file":"overlay.css","sourcesContent":[".Overlay[popover] {\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n  width: min(192px, 100vw - 2rem);\n}\n\n/* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n.Overlay[popover]:not(:open) {\n  display: none;\n}\n\nanchored-position {\n  display: block;\n}\n"]}

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

@@ -2,6 +2,7 @@
   border-width: 0;
   padding: 0;
   position: absolute;
+  width: min(192px, 100vw - 2rem);
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-no-unknown */

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

@@ -63,22 +63,23 @@ module Primer
       DEFAULT_POPOVER = :auto
       POPOVER_OPTIONS = [DEFAULT_POPOVER, :manual].freeze
 
-      ROLE_OPTIONS = [:dialog, :menu].freeze
+      ROLE_OPTIONS = [:dialog, :menu, nil].freeze
 
       # Optional button to open the Overlay.
       #
       # @param system_arguments [Hash] The same arguments as <%= link_to_component(Primer::ButtonComponent) %>.
-      renders_one :show_button, lambda { |icon: nil, **system_arguments|
-        system_arguments[:classes] = class_names(
-          system_arguments[:classes]
+      renders_one :show_button, lambda { |icon: nil, controls: nil, **button_arguments|
+        button_arguments[:classes] = class_names(
+          button_arguments[:classes]
         )
-        system_arguments[:id] = show_button_id
-        system_arguments["popovertoggletarget"] = overlay_id
-        system_arguments[:aria] = (system_arguments[:aria] || {}).merge({ controls: overlay_id, haspopup: "true" })
+        button_arguments[:id] ||= show_button_id
+        @system_arguments[:anchor] = button_arguments[:id]
+        button_arguments["popovertarget"] = @id
+        button_arguments[:aria] = (button_arguments[:aria] || {}).merge({ controls: controls, haspopup: "true" })
         if icon.present?
-          Primer::Beta::IconButton.new(icon: icon, **system_arguments)
+          Primer::Beta::IconButton.new(icon: icon, **button_arguments)
         else
-          Primer::Beta::Button.new(**system_arguments)
+          Primer::Beta::Button.new(**button_arguments)
         end
       }
 
@@ -134,7 +135,6 @@ module Primer
       # @param title [String] Describes the content of the Overlay.
       # @param subtitle [String] Provides dditional context for the Overlay, also setting the `aria-describedby` attribute.
       # @param popover [Symbol] The popover behaviour. <%= one_of(Primer::Alpha::Overlay::POPOVER_OPTIONS) %>
-      # @param popover [Symbol] The popover behaviour. <%= one_of(Primer::Alpha::Overlay::POPOVER_OPTIONS) %>
       # @param size [Symbol] The size of the Overlay. <%= one_of(Primer::Alpha::Overlay::SIZE_OPTIONS) %>
       # @param padding [Symbol] The padding given to the Overlay body. <%= one_of(Primer::Alpha::Overlay::PADDING_OPTIONS) %>
       # @param anchor [String] An ID of the element to anchor onto. Defaults to the `show_button`.
@@ -147,7 +147,7 @@ module Primer
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         title:,
-        role:,
+        role: nil,
         subtitle: nil,
         popover: DEFAULT_POPOVER,
         size: DEFAULT_SIZE,
@@ -163,7 +163,7 @@ module Primer
       )
         @system_arguments = deny_tag_argument(**system_arguments)
 
-        @system_arguments[:role] = fetch_or_fallback(ROLE_OPTIONS, role)
+        @system_arguments[:role] = fetch_or_fallback(ROLE_OPTIONS, role) if role.present?
 
         @system_arguments[:id] = id.to_s
         @system_arguments[:classes] = class_names(
@@ -198,16 +198,12 @@ module Primer
 
       private
 
-      def overlay_id
-        @system_arguments[:id]
-      end
-
       def title_id
-        "overlay-title-#{overlay_id}"
+        "overlay-title-#{@id}"
       end
 
       def show_button_id
-        "overlay-show-#{overlay_id}"
+        "overlay-show-#{@id}"
       end
     end
   end