primer_view_components 0.5.1 → 0.7.0

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

@@ -13,8 +13,69 @@ module Primer
         # Adds a new item to the list.
         #
         # @param data [Hash] When the menu is used as a form input (see the <%= link_to_component(Primer::Alpha::ActionMenu) %> docs), the label is submitted to the server by default. However, if the `data: { value: }` or `"data-value":` attribute is provided, it will be sent to the server instead.
-        # @param system_arguments [Hash] The same arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
+        # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::ActionList::Item) %>, or whatever class is passed as the `component_klass` argument.
         def with_item(data: {}, **system_arguments, &block)
+          system_arguments = organize_arguments(data: data, **system_arguments)
+
+          super(**system_arguments) do |item|
+            evaluate_block(item, &block)
+          end
+        end
+
+        # 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 data [Hash] When the menu is used as a form input (see the <%= link_to_component(Primer::Alpha::ActionMenu) %> docs), the label is submitted to the server by default. However, if the `data: { value: }` or `"data-value":` attribute is provided, it will be sent to the server instead.
+        # @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::ActionList::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, data: {}, avatar_arguments: {}, **system_arguments, &block)
+          system_arguments = organize_arguments(data: data, **system_arguments)
+
+          super(src: src, username: username, full_name: full_name, full_name_scheme: full_name_scheme, avatar_arguments: avatar_arguments, **system_arguments) do |item|
+            evaluate_block(item, &block)
+          end
+        end
+
+        # @param menu_id [String] ID of the parent menu.
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>
+        def initialize(menu_id:, **system_arguments, &block)
+          @menu_id = menu_id
+
+          system_arguments[:aria] = merge_aria(
+            system_arguments,
+            { aria: { labelledby: "#{@menu_id}-button" } }
+          )
+
+          system_arguments[:role] = :menu
+          system_arguments[:scheme] = :inset
+          system_arguments[:id] = "#{@menu_id}-list"
+
+          super(**system_arguments, &block)
+        end
+
+        private
+
+        def evaluate_block(*args, &block)
+          # Prevent double renders by using the capture method on the component
+          # that originally received the block.
+          #
+          # Handle blocks that originate from C code such as `&:method` by checking
+          # source_location. Such blocks don't allow access to their receiver.
+          return unless block&.source_location
+
+          block_context = block.binding.receiver
+
+          if block_context.class < ActionView::Base
+            block_context.capture(*args, &block)
+          else
+            capture(*args, &block)
+          end
+        end
+
+        def organize_arguments(data: {}, **system_arguments)
           content_arguments = system_arguments.delete(:content_arguments) || {}
 
           # rubocop:disable Style/IfUnlessModifier
@@ -54,39 +115,7 @@ module Primer
             content_arguments[:disabled] = "" if content_arguments[:tag] == :button
           end
 
-          super(data: data, **system_arguments, content_arguments: content_arguments) do |item|
-            # Prevent double renders by using the capture method on the component
-            # that originally received the block.
-            #
-            # Handle blocks that originate from C code such as `&:method` by checking
-            # source_location. Such blocks don't allow access to their receiver.
-            if block&.source_location
-              block_context = block.binding.receiver
-
-              if block_context.class < ActionView::Base
-                block_context.capture(item, &block)
-              else
-                capture(item, &block)
-              end
-            end
-          end
-        end
-
-        # @param menu_id [String] ID of the parent menu.
-        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>
-        def initialize(menu_id:, **system_arguments, &block)
-          @menu_id = menu_id
-
-          system_arguments[:aria] = merge_aria(
-            system_arguments,
-            { aria: { labelledby: "#{@menu_id}-button" } }
-          )
-
-          system_arguments[:role] = :menu
-          system_arguments[:scheme] = :inset
-          system_arguments[:id] = "#{@menu_id}-list"
-
-          super(**system_arguments, &block)
+          { data: data, **system_arguments, content_arguments: content_arguments }
         end
       end
     end

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

@@ -27,275 +27,6 @@ module Primer
 
       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 %>
-      #    <% c.with_item(href: "https://google.com", form_arguments: { name: "foo", value: "bar", method: :post }) do %>
-      #      Submit form
-      #    <% end %>
-      #  <% end %>
-      #
-      # @example With caret
-      #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-1") do |c| %>
-      #    <% c.with_show_button do |button| %>
-      #      <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #      Menu
-      #    <% end %>
-      #    <% 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_divider %>
-      #    <% 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", scheme: :danger) 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 do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside top
-      #       <% end %>
-      #       <% 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 do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside left
-      #       <% end %>
-      #       <% 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 do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside right
-      #       <% end %>
-      #       <% 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 do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside bottom
-      #       <% end %>
-      #       <% 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 do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside top
-      #       <% end %>
-      #       <% 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 do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside left
-      #       <% end %>
-      #       <% 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 do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside right
-      #       <% end %>
-      #       <% 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 do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside bottom
-      #       <% end %>
-      #       <% 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 do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside top
-      #       <% end %>
-      #       <% 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 do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside left
-      #       <% end %>
-      #       <% 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 do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside right
-      #       <% end %>
-      #       <% 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 do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside bottom
-      #       <% end %>
-      #       <% 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-17", src: "/") do |c| %>
-      #    <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
-      #  <% end %>
-      #
-      # @example Using a single-select ActionMenu as a form input
-      #   <%= form_with(url: action_menu_form_action_path) do |f| %>
-      #     <%= render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true, dynamic_label_prefix: "Strategy", form_arguments: { builder: f, name: "foo" })) do |menu| %>
-      #       <% menu.with_show_button { "Strategy" } %>
-      #       <% 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: "Resolve", data: { value: "resolve" }) %>
-      #     <% end %>
-      #   <% end %>
-      #
-      # @example Using a multi-select ActionMenu as a form input
-      #   <%= form_with(url: action_menu_form_action_path) do |f| %>
-      #     <%= render(Primer::Alpha::ActionMenu.new(select_variant: :multiple, form_arguments: { builder: f, name: "foo" })) do |menu| %>
-      #       <% menu.with_show_button { "Strategy" } %>
-      #       <% 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: "Resolve", data: { value: "resolve" }) %>
-      #     <% end %>
-      #   <% 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) %>.
@@ -383,6 +114,18 @@ module Primer
         @list.with_divider(**system_arguments, &block)
       end
 
+      # 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.
+      # @param avatar_arguments [Hash] Optional. The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %>.
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
+      def with_avatar_item(**system_arguments, &block)
+        @list.with_avatar_item(**system_arguments, &block)
+      end
+
       private
 
       def before_render

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

@@ -7,18 +7,6 @@ module Primer
       class Item < Primer::Component
         status :deprecated
 
-        # @example Default
-        #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |component| %>
-        #     <% component.results(classes: "custom-class") do %>
-        #       <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do %>
-        #         Apple
-        #       <% end %>
-        #       <%= render(Primer::Alpha::AutoComplete::Item.new(value: "orange")) do %>
-        #         Orange
-        #       <% end %>
-        #     <% end %>
-        #   <% end %>
-        #
         # @param value [String] Value of the item.
         # @param selected [Boolean] Whether the item is selected.
         # @param disabled [Boolean] Whether the item is disabled.

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

@@ -1 +1 @@
-.autocomplete-label-stacked{display:block;margin-bottom:6px}.autocomplete-label-inline{display:inline;margin-right:6px}@media (max-width:543.98px){.autocomplete-label-inline{display:block;margin-bottom:6px}}.autocomplete-body{display:inline;position:relative}.autocomplete-embedded-icon-wrap{align-items:center;display:inline-flex;padding:4px 8px}.autocomplete-embedded-icon-wrap:focus-within{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}.autocomplete-embedded-icon-wrap .form-control{border:none;box-shadow:none;margin-left:8px;padding:0}.autocomplete-embedded-icon-wrap .form-control:focus{box-shadow:none}.autocomplete-embedded-icon-wrap .form-control:focus-visible{box-shadow:none}.autocomplete-results{background:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px);box-shadow:var(--shadow-resting-medium,var(--color-shadow-medium));font-size:13px;left:0;list-style:none;max-height:20em;min-width:100%;overflow-y:auto;position:absolute;width:max-content;z-index:99}.autocomplete-item{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:0;color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:block;font-weight:var(--base-text-weight-semibold,600);overflow:hidden;padding:4px 8px;text-align:left;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;width:100%}.autocomplete-item:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-fg));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));text-decoration:none}.autocomplete-item:hover *{color:inherit!important}.autocomplete-item.navigation-focus,.autocomplete-item.selected,.autocomplete-item[aria-selected=true]{background-color:var(--bgColor-accent-emphasis,var(--color-accent-fg));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));text-decoration:none}.autocomplete-item.navigation-focus *,.autocomplete-item.selected *,.autocomplete-item[aria-selected=true] *{color:inherit!important}
+.autocomplete-label-stacked{display:block;margin-bottom:6px}.autocomplete-label-inline{display:inline;margin-right:6px}@media (max-width:543.98px){.autocomplete-label-inline{display:block;margin-bottom:6px}}.autocomplete-body{display:inline;position:relative}.autocomplete-embedded-icon-wrap{align-items:center;display:inline-flex;padding:4px 8px}.autocomplete-embedded-icon-wrap:focus-within{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}.autocomplete-embedded-icon-wrap .form-control{border:none;box-shadow:none;margin-left:8px;padding:0}.autocomplete-embedded-icon-wrap .form-control:focus{box-shadow:none}.autocomplete-embedded-icon-wrap .form-control:focus-visible{box-shadow:none}.autocomplete-results{background:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);box-shadow:var(--shadow-resting-medium,var(--color-shadow-medium));font-size:13px;left:0;list-style:none;max-height:20em;min-width:100%;overflow-y:auto;position:absolute;width:max-content;z-index:99}.autocomplete-item{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:0;color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:block;font-weight:var(--base-text-weight-semibold,600);overflow:hidden;padding:4px 8px;text-align:left;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;width:100%}.autocomplete-item:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));text-decoration:none}.autocomplete-item:hover *{color:inherit!important}.autocomplete-item.navigation-focus,.autocomplete-item.selected,.autocomplete-item[aria-selected=true]{background-color:var(--bgColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));text-decoration:none}.autocomplete-item.navigation-focus *,.autocomplete-item.selected *,.autocomplete-item[aria-selected=true] *{color:inherit!important}

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

@@ -1 +1 @@
-{"version":3,"sources":["auto_complete.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss"],"names":[],"mappings":"AAMA,4BACE,aAAc,CACd,iBACF,CAGA,2BACE,cAAe,CACf,gBACF,CAGA,4BACE,2BACE,aAAc,CACd,iBACF,CACF,CAGA,mBAEE,cAAe,CADf,iBAEF,CAGA,iCAGE,kBAAmB,CAFnB,mBAAoB,CACpB,eAuBF,CApBE,8CCnCA,6DAAuC,CAEvC,2EAAmD,CADnD,YDsCA,CAEA,+CAGE,WAAY,CACZ,eAAgB,CAFhB,eAAgB,CADhB,SAYF,CAPE,qDACE,eACF,CAEA,6DACE,eACF,CAKJ,sBAUE,6DAAkC,CAClC,6GAAgE,CAChE,4CAAyC,CACzC,kEAAwC,CALxC,cAAe,CANf,MAAO,CAOP,eAAgB,CAHhB,eAAgB,CADhB,cAAe,CAEf,eAAgB,CANhB,iBAAkB,CAGlB,iBAAkB,CADlB,UAWF,CAKA,mBAYE,mEAAwC,CACxC,QAAS,CAPT,oDAA6B,CAK7B,cAAe,CAVf,aAAc,CAId,gDAA6C,CAD7C,eAAgB,CADhB,eAAgB,CAIhB,eAAgB,CAChB,oBAAqB,CACrB,sBAAuB,CACvB,kBAAmB,CARnB,UAoCF,CAvBE,yBAGE,sEAAgD,CAFhD,2DAAgC,CAChC,oBAOF,CAHE,2BACE,uBACF,CAGF,uGAKE,sEAAgD,CAFhD,2DAAgC,CAChC,oBAOF,CAHE,6GACE,uBACF","file":"auto_complete.css","sourcesContent":["/* autocomplete */\n\n/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796\n** AutoComplete relies on FormControl, Overlay and ActionList CSS */\n\n/* Stacked label (default) */\n.autocomplete-label-stacked {\n  display: block;\n  margin-bottom: 6px;\n}\n\n/* Inline label (non-default) */\n.autocomplete-label-inline {\n  display: inline;\n  margin-right: 6px;\n}\n\n/* Switch to stacked at smaller viewport */\n@media (max-width: 543.98px) {\n  .autocomplete-label-inline {\n    display: block;\n    margin-bottom: 6px;\n  }\n}\n\n/* Wrapper for the input and result elements to ensure alignment */\n.autocomplete-body {\n  position: relative;\n  display: inline;\n}\n\n/* Wrapper and conditional styles for when an icon is added */\n.autocomplete-embedded-icon-wrap {\n  display: inline-flex;\n  padding: 4px 8px;\n  align-items: center;\n\n  &:focus-within {\n    border-color: var(--borderColor-accent-emphasis);\n\n    @mixin focusBoxShadowInset;\n  }\n\n  & .form-control {\n    padding: 0;\n    margin-left: 8px;\n    border: none;\n    box-shadow: none;\n\n    &:focus {\n      box-shadow: none;\n    }\n\n    &:focus-visible {\n      box-shadow: none;\n    }\n  }\n}\n\n/* A pop up list of items used to show autocompleted results */\n.autocomplete-results {\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  width: max-content;\n  min-width: 100%;\n  max-height: 20em;\n  overflow-y: auto;\n  font-size: 13px;\n  list-style: none;\n  background: var(--overlay-bgColor);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n  box-shadow: var(--shadow-resting-medium);\n}\n\n/* One of the items that appears within an autocomplete group\n** Bold black text on white background */\n\n.autocomplete-item {\n  display: block;\n  width: 100%;\n  padding: 4px 8px;\n  overflow: hidden;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n  text-align: left;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: var(--overlay-bgColor);\n  border: 0;\n\n  &:hover {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n\n    /* Inherit color on all child elements to ensure enough contrast */\n    & * {\n      color: inherit !important;\n    }\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &.navigation-focus {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n\n    /* Inherit color on all child elements to ensure enough contrast */\n    & * {\n      color: inherit !important;\n    }\n  }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--focus-outlineColor) {\n  border-color: var(--focus-outlineColor);\n  outline: none;\n  box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n"]}
+{"version":3,"sources":["auto_complete.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss"],"names":[],"mappings":"AAMA,4BACE,aAAc,CACd,iBACF,CAGA,2BACE,cAAe,CACf,gBACF,CAGA,4BACE,2BACE,aAAc,CACd,iBACF,CACF,CAGA,mBAEE,cAAe,CADf,iBAEF,CAGA,iCAGE,kBAAmB,CAFnB,mBAAoB,CACpB,eAuBF,CApBE,8CCnCA,6DAAuC,CAEvC,2EAAmD,CADnD,YDsCA,CAEA,+CAGE,WAAY,CACZ,eAAgB,CAFhB,eAAgB,CADhB,SAYF,CAPE,qDACE,eACF,CAEA,6DACE,eACF,CAKJ,sBAUE,6DAAkC,CAClC,6GAAgE,CAChE,gDAAyC,CACzC,kEAAwC,CALxC,cAAe,CANf,MAAO,CAOP,eAAgB,CAHhB,eAAgB,CADhB,cAAe,CAEf,eAAgB,CANhB,iBAAkB,CAGlB,iBAAkB,CADlB,UAWF,CAKA,mBAYE,mEAAwC,CACxC,QAAS,CAPT,oDAA6B,CAK7B,cAAe,CAVf,aAAc,CAId,gDAA6C,CAD7C,eAAgB,CADhB,eAAgB,CAIhB,eAAgB,CAChB,oBAAqB,CACrB,sBAAuB,CACvB,kBAAmB,CARnB,UAoCF,CAvBE,yBAGE,4EAAgD,CAFhD,2DAAgC,CAChC,oBAOF,CAHE,2BACE,uBACF,CAGF,uGAKE,4EAAgD,CAFhD,2DAAgC,CAChC,oBAOF,CAHE,6GACE,uBACF","file":"auto_complete.css","sourcesContent":["/* autocomplete */\n\n/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796\n** AutoComplete relies on FormControl, Overlay and ActionList CSS */\n\n/* Stacked label (default) */\n.autocomplete-label-stacked {\n  display: block;\n  margin-bottom: 6px;\n}\n\n/* Inline label (non-default) */\n.autocomplete-label-inline {\n  display: inline;\n  margin-right: 6px;\n}\n\n/* Switch to stacked at smaller viewport */\n@media (max-width: 543.98px) {\n  .autocomplete-label-inline {\n    display: block;\n    margin-bottom: 6px;\n  }\n}\n\n/* Wrapper for the input and result elements to ensure alignment */\n.autocomplete-body {\n  position: relative;\n  display: inline;\n}\n\n/* Wrapper and conditional styles for when an icon is added */\n.autocomplete-embedded-icon-wrap {\n  display: inline-flex;\n  padding: 4px 8px;\n  align-items: center;\n\n  &:focus-within {\n    border-color: var(--borderColor-accent-emphasis);\n\n    @mixin focusBoxShadowInset;\n  }\n\n  & .form-control {\n    padding: 0;\n    margin-left: 8px;\n    border: none;\n    box-shadow: none;\n\n    &:focus {\n      box-shadow: none;\n    }\n\n    &:focus-visible {\n      box-shadow: none;\n    }\n  }\n}\n\n/* A pop up list of items used to show autocompleted results */\n.autocomplete-results {\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  width: max-content;\n  min-width: 100%;\n  max-height: 20em;\n  overflow-y: auto;\n  font-size: 13px;\n  list-style: none;\n  background: var(--overlay-bgColor);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n  box-shadow: var(--shadow-resting-medium);\n}\n\n/* One of the items that appears within an autocomplete group\n** Bold black text on white background */\n\n.autocomplete-item {\n  display: block;\n  width: 100%;\n  padding: 4px 8px;\n  overflow: hidden;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n  text-align: left;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: var(--overlay-bgColor);\n  border: 0;\n\n  &:hover {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n\n    /* Inherit color on all child elements to ensure enough contrast */\n    & * {\n      color: inherit !important;\n    }\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &.navigation-focus {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n\n    /* Inherit color on all child elements to ensure enough contrast */\n    & * {\n      color: inherit !important;\n    }\n  }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--focus-outlineColor) {\n  border-color: var(--focus-outlineColor);\n  outline: none;\n  box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n"]}

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

@@ -62,53 +62,6 @@ module Primer
         Primer::BaseComponent.new(**sanitized_args)
       }
 
-      # @example Default
-      #   @description
-      #     Labels are stacked by default.
-      #   @code
-      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--default", list_id: "fruits-popup--default")) %>
-      #
-      # @example With inline label
-      #   @description
-      #     Labels can be inline by setting `is_label_inline: true`. However, labels will always become stacked on smaller screen sizes.
-      #   @code
-      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", is_label_inline: true, input_id: "fruits-input--inline-label", list_id: "fruits-popup--inline-label")) %>
-      #
-      # @example With non-visible label
-      #   @description
-      #     A non-visible label may be rendered with `is_label_visible: false`, but it is highly discouraged. See <%= link_to_accessibility %>.
-      #   @code
-      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--non-visible-label", list_id: "fruits-popup--non-visible-label", is_label_visible: false)) %>
-      #
-      # @example With icon
-      #   @description
-      #     To display a search icon, set `with_icon` to `true`.
-      #   @code
-      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", list_id: "fruits-popup--icon", input_id: "fruits-input--icon", with_icon: true)) %>
-      #
-      # @example With icon and non-visible label
-      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", list_id: "fruits-popup--icon-no-label", input_id: "fruits-input--icon-no-label", with_icon: true, is_label_visible: false)) %>
-      #
-      # @example With clear button
-      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--clear", list_id: "fruits-popup--clear", is_clearable: true)) %>
-      #
-      # @example With custom classes for the input
-      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |component| %>
-      #     <% component.with_input(classes: "custom-class") %>
-      #   <% end %>
-      #
-      # @example With custom classes for the results
-      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |component| %>
-      #     <% component.with_results(classes: "custom-class") do %>
-      #       <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do %>
-      #         Apple
-      #       <% end %>
-      #       <%= render(Primer::Alpha::AutoComplete::Item.new(value: "orange")) do %>
-      #         Orange
-      #       <% end %>
-      #     <% end %>
-      #   <% end %>
-      #
       # @param label_text [String] The label of the input.
       # @param src [String] The route to query.
       # @param input_id [String] Id of the input element.

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

@@ -1 +1 @@
-.Banner{background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,6px);color:var(--fgColor-default,var(--color-fg-default));display:grid;grid-auto-flow:column;grid-template-areas:"visual message actions close";grid-template-columns:min-content 1fr minmax(0,auto) min-content;grid-template-rows:min-content;padding:var(--base-size-8,.5rem);position:relative}@media (max-width:543.98px){.Banner{grid-template-areas:"visual message close" ". actions actions";grid-template-columns:min-content 1fr min-content;grid-template-rows:min-content min-content}.Banner .Banner-actions{margin:var(--base-size-8,.5rem) 0 0 var(--base-size-8,.5rem)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:.375rem var(--base-size-8,.5rem)}.Banner .Banner-visual>.octicon{margin-block:calc(var(--base-size-4,.25rem)/2)}.Banner .Banner-visual>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:.375rem var(--base-size-8,.5rem)}.Banner .Banner-message p:last-child{margin-bottom:0}.Banner .Banner-message .Banner-title:not(:only-child){font-weight:var(--base-text-weight-semibold,600);margin-bottom:0}.Banner .Banner-actions{grid-area:actions}.Banner .Banner-actions:last-child{align-self:center}.Banner .Banner-close{grid-area:close;margin-left:var(--controlStack-medium-gap-condensed,.5rem)}.Banner .Banner-visual .octicon{color:var(--fgColor-accent,var(--color-accent-fg))}.Banner.Banner--warning{background-image:linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)),var(--bgColor-attention-muted,var(--color-attention-subtle)));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--warning .Banner-visual .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.Banner.Banner--error{background-image:linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)),var(--bgColor-danger-muted,var(--color-danger-subtle)));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--error .Banner-visual .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.Banner.Banner--success{background-image:linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)),var(--bgColor-success-muted,var(--color-success-subtle)));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--success .Banner-visual .octicon{color:var(--fgColor-success,var(--color-success-fg))}.Banner.Banner--full{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}@media (max-width:767.98px){.Banner.Banner--full-whenNarrow{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}}
+.Banner{background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,var(--color-fg-default));display:grid;grid-auto-flow:column;grid-template-areas:"visual message actions close";grid-template-columns:min-content 1fr minmax(0,auto) min-content;grid-template-rows:min-content;padding:var(--base-size-8,.5rem);position:relative}@media (max-width:543.98px){.Banner{grid-template-areas:"visual message close" ". actions actions";grid-template-columns:min-content 1fr min-content;grid-template-rows:min-content min-content}.Banner .Banner-actions{margin:var(--base-size-8,.5rem) 0 0 var(--base-size-8,.5rem)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:.375rem var(--base-size-8,.5rem)}.Banner .Banner-visual>.octicon{margin-block:calc(var(--base-size-4,.25rem)/2)}.Banner .Banner-visual>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:.375rem var(--base-size-8,.5rem)}.Banner .Banner-message p:last-child{margin-bottom:0}.Banner .Banner-message .Banner-title:not(:only-child){font-weight:var(--base-text-weight-semibold,600);margin-bottom:0}.Banner .Banner-actions{grid-area:actions}.Banner .Banner-actions:last-child{align-self:center}.Banner .Banner-close{grid-area:close;margin-left:var(--controlStack-medium-gap-condensed,.5rem)}.Banner .Banner-visual .octicon{color:var(--fgColor-accent,var(--color-accent-fg))}.Banner.Banner--warning{background-image:linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)),var(--bgColor-attention-muted,var(--color-attention-subtle)));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--warning .Banner-visual .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.Banner.Banner--error{background-image:linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)),var(--bgColor-danger-muted,var(--color-danger-subtle)));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--error .Banner-visual .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.Banner.Banner--success{background-image:linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)),var(--bgColor-success-muted,var(--color-success-subtle)));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--success .Banner-visual .octicon{color:var(--fgColor-success,var(--color-success-fg))}.Banner.Banner--full{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}@media (max-width:767.98px){.Banner.Banner--full-whenNarrow{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}}

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

@@ -1 +1 @@
-{"version":3,"sources":["banner.pcss"],"names":[],"mappings":"AAEA,QAKE,+IAA2F,CAC3F,gHAAqE,CACrE,4CAAyC,CAHzC,oDAA6B,CAF7B,YAAa,CAMb,qBAAsB,CACtB,kDAAmD,CACnD,gEAAkE,CAClE,8BAA+B,CAR/B,gCAA2B,CAF3B,iBA0HF,CA7GE,4BAdF,QAeI,8DAEqB,CACrB,iDAAkD,CAClD,0CAwGJ,CAtGI,wBACE,4DACF,CACF,CAIA,uBAIE,gBAAiB,CAHjB,YAAa,CAEb,gBAAiB,CADjB,wCAWF,CAPE,gCACE,8CACF,CAEA,yBACE,iBACF,CAGF,wBAGE,iBAAkB,CADlB,iBAAkB,CADlB,wCAYF,CARE,qCACE,eACF,CAEA,uDAEE,gDAA6C,CAD7C,eAEF,CAGF,wBACE,iBAKF,CAHE,mCACE,iBACF,CAIF,sBACE,eAAgB,CAChB,0DACF,CAEA,gCACE,kDACF,CAEA,wBAEE,2JAAiG,CACjG,4EAAgD,CAFhD,oDAOF,CAHE,gDACE,wDACF,CAGF,sBAEE,+IAA2F,CAC3F,sEAA6C,CAF7C,oDAOF,CAHE,8CACE,kDACF,CAGF,wBAEE,mJAA6F,CAC7F,wEAA8C,CAF9C,oDAOF,CAHE,gDACE,oDACF,CAKF,qBAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,8DAIF,CAEA,4BACE,gCAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,8DAIF,CACF","file":"banner.css","sourcesContent":["/* Banner alert */\n\n.Banner {\n  position: relative;\n  display: grid;\n  padding: var(--base-size-8);\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n  border: var(--borderWidth-thin) solid var(--borderColor-accent-muted);\n  border-radius: var(--borderRadius-medium);\n  grid-auto-flow: column;\n  grid-template-areas: 'visual message actions close';\n  grid-template-columns: min-content 1fr minmax(0, auto) min-content;\n  grid-template-rows: min-content;\n\n  /* `sm` breakpoint variantion */\n  @media (max-width: 543.98px) {\n    grid-template-areas:\n      'visual message close'\n      '. actions actions';\n    grid-template-columns: min-content 1fr min-content;\n    grid-template-rows: min-content min-content;\n\n    & .Banner-actions {\n      margin: var(--base-size-8) 0 0 var(--base-size-8);\n    }\n  }\n\n  /* Elements */\n\n  & .Banner-visual {\n    display: grid;\n    padding: 0.375rem var(--base-size-8);\n    grid-area: visual;\n    align-self: start;\n\n    & > .octicon {\n      margin-block: calc(var(--base-size-4) / 2);\n    }\n\n    & > * {\n      align-self: center;\n    }\n  }\n\n  & .Banner-message {\n    padding: 0.375rem var(--base-size-8);\n    grid-area: message;\n    align-self: center;\n\n    & p:last-child {\n      margin-bottom: 0;\n    }\n\n    & .Banner-title:not(:only-child) {\n      margin-bottom: 0;\n      font-weight: var(--base-text-weight-semibold);\n    }\n  }\n\n  & .Banner-actions {\n    grid-area: actions;\n\n    &:last-child {\n      align-self: center;\n    }\n  }\n\n  /* is this used anywhere? could not find any use, but unsure */\n  & .Banner-close {\n    grid-area: close;\n    margin-left: var(--controlStack-medium-gap-condensed);\n  }\n\n  & .Banner-visual .octicon {\n    color: var(--fgColor-accent);\n  }\n\n  &.Banner--warning {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n    border-color: var(--borderColor-attention-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-attention);\n    }\n  }\n\n  &.Banner--error {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n    border-color: var(--borderColor-danger-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-danger);\n    }\n  }\n\n  &.Banner--success {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n    border-color: var(--borderColor-success-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-success);\n    }\n  }\n\n  /* Full-width */\n\n  &.Banner--full {\n    margin-top: calc(var(--borderWidth-thin) * -1);\n    border-right: 0;\n    border-left: 0;\n    border-radius: 0;\n  }\n\n  @media (max-width: 767.98px) {\n    &.Banner--full-whenNarrow {\n      margin-top: calc(var(--borderWidth-thin) * -1);\n      border-right: 0;\n      border-left: 0;\n      border-radius: 0;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["banner.pcss"],"names":[],"mappings":"AAEA,QAKE,+IAA2F,CAC3F,gHAAqE,CACrE,gDAAyC,CAHzC,oDAA6B,CAF7B,YAAa,CAMb,qBAAsB,CACtB,kDAAmD,CACnD,gEAAkE,CAClE,8BAA+B,CAR/B,gCAA2B,CAF3B,iBA0HF,CA7GE,4BAdF,QAeI,8DAEqB,CACrB,iDAAkD,CAClD,0CAwGJ,CAtGI,wBACE,4DACF,CACF,CAIA,uBAIE,gBAAiB,CAHjB,YAAa,CAEb,gBAAiB,CADjB,wCAWF,CAPE,gCACE,8CACF,CAEA,yBACE,iBACF,CAGF,wBAGE,iBAAkB,CADlB,iBAAkB,CADlB,wCAYF,CARE,qCACE,eACF,CAEA,uDAEE,gDAA6C,CAD7C,eAEF,CAGF,wBACE,iBAKF,CAHE,mCACE,iBACF,CAIF,sBACE,eAAgB,CAChB,0DACF,CAEA,gCACE,kDACF,CAEA,wBAEE,2JAAiG,CACjG,4EAAgD,CAFhD,oDAOF,CAHE,gDACE,wDACF,CAGF,sBAEE,+IAA2F,CAC3F,sEAA6C,CAF7C,oDAOF,CAHE,8CACE,kDACF,CAGF,wBAEE,mJAA6F,CAC7F,wEAA8C,CAF9C,oDAOF,CAHE,gDACE,oDACF,CAKF,qBAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,8DAIF,CAEA,4BACE,gCAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,8DAIF,CACF","file":"banner.css","sourcesContent":["/* Banner alert */\n\n.Banner {\n  position: relative;\n  display: grid;\n  padding: var(--base-size-8);\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n  border: var(--borderWidth-thin) solid var(--borderColor-accent-muted);\n  border-radius: var(--borderRadius-medium);\n  grid-auto-flow: column;\n  grid-template-areas: 'visual message actions close';\n  grid-template-columns: min-content 1fr minmax(0, auto) min-content;\n  grid-template-rows: min-content;\n\n  /* `sm` breakpoint variantion */\n  @media (max-width: 543.98px) {\n    grid-template-areas:\n      'visual message close'\n      '. actions actions';\n    grid-template-columns: min-content 1fr min-content;\n    grid-template-rows: min-content min-content;\n\n    & .Banner-actions {\n      margin: var(--base-size-8) 0 0 var(--base-size-8);\n    }\n  }\n\n  /* Elements */\n\n  & .Banner-visual {\n    display: grid;\n    padding: 0.375rem var(--base-size-8);\n    grid-area: visual;\n    align-self: start;\n\n    & > .octicon {\n      margin-block: calc(var(--base-size-4) / 2);\n    }\n\n    & > * {\n      align-self: center;\n    }\n  }\n\n  & .Banner-message {\n    padding: 0.375rem var(--base-size-8);\n    grid-area: message;\n    align-self: center;\n\n    & p:last-child {\n      margin-bottom: 0;\n    }\n\n    & .Banner-title:not(:only-child) {\n      margin-bottom: 0;\n      font-weight: var(--base-text-weight-semibold);\n    }\n  }\n\n  & .Banner-actions {\n    grid-area: actions;\n\n    &:last-child {\n      align-self: center;\n    }\n  }\n\n  /* is this used anywhere? could not find any use, but unsure */\n  & .Banner-close {\n    grid-area: close;\n    margin-left: var(--controlStack-medium-gap-condensed);\n  }\n\n  & .Banner-visual .octicon {\n    color: var(--fgColor-accent);\n  }\n\n  &.Banner--warning {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n    border-color: var(--borderColor-attention-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-attention);\n    }\n  }\n\n  &.Banner--error {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n    border-color: var(--borderColor-danger-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-danger);\n    }\n  }\n\n  &.Banner--success {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n    border-color: var(--borderColor-success-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-success);\n    }\n  }\n\n  /* Full-width */\n\n  &.Banner--full {\n    margin-top: calc(var(--borderWidth-thin) * -1);\n    border-right: 0;\n    border-left: 0;\n    border-radius: 0;\n  }\n\n  @media (max-width: 767.98px) {\n    &.Banner--full-whenNarrow {\n      margin-top: calc(var(--borderWidth-thin) * -1);\n      border-right: 0;\n      border-left: 0;\n      border-radius: 0;\n    }\n  }\n}\n"]}

data/app/components/primer/alpha/banner.html.erb

@@ -16,7 +16,7 @@
         <%= action %>
       </div>
     <% end %>
-    <% if @dismissible %>
+    <% if @dismiss_scheme != :none %>
       <div class="flash-close Banner-close">
         <%= render(
           Primer::Beta::IconButton.new(

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

@@ -48,51 +48,25 @@ module Primer
         success: :"check-circle"
       }.freeze
 
-      # @example Schemes
-      #   <div style="display: grid; row-gap: 15px">
-      #     <%= render(Primer::Alpha::Banner.new) { "This is a banner message!" } %>
-      #     <%= render(Primer::Alpha::Banner.new(scheme: :warning)) { "This is a warning banner!" } %>
-      #     <%= render(Primer::Alpha::Banner.new(scheme: :danger)) { "This is a danger banner!" } %>
-      #     <%= render(Primer::Alpha::Banner.new(scheme: :success)) { "This is a success banner!" } %>
-      #   </div>
-      #
-      # @example Full width
-      #   <%= render(Primer::Alpha::Banner.new(full: true)) { "This is a full width banner!" } %>
-      #
-      # @example Dismissible
-      #   <%= render(Primer::Alpha::Banner.new(dismissible: true, reappear: true)) { "This is a dismissible banner!" } %>
-      #
-      # @example Custom icon
-      #   <%= render(Primer::Alpha::Banner.new(icon: :people)) { "This is a banner with a custom icon!" } %>
-      #
-      # @example With action button
-      #   <%= render(Primer::Alpha::Banner.new) do |component| %>
-      #     This is a banner with an action button!
-      #     <% component.with_action_button(size: :small) { "Take action" } %>
-      #   <% end %>
-      #
-      # @example With custom action
-      #   <%= render(Primer::Alpha::Banner.new) do |component| %>
-      #     Comment saved!
-      #     <% component.with_action_content do %>
-      #       <%= render(Primer::IconButton.new(icon: :pencil, mr: 1, "aria-label": "Edit")) %>
-      #     <% end %>
-      #   <% end %>
-      #
+      DEFAULT_DISMISS_SCHEME = :none
+      DISMISS_SCHEMES = [
+        DEFAULT_DISMISS_SCHEME,
+        :remove,
+        :hide
+      ].freeze
+
       # @param full [Boolean] Whether the component should take up the full width of the screen.
       # @param full_when_narrow [Boolean] Whether the component should take up the full width of the screen when rendered inside smaller viewports.
-      # @param dismissible [Boolean] Whether the component can be dismissed with an "x" button.
+      # @param dismiss_scheme [Symbol] Whether the component can be dismissed with an "x" button. <%= one_of(Primer::Alpha::Banner::DISMISS_SCHEMES) %>
       # @param description [String] Description text rendered underneath the message.
       # @param icon [Symbol] The name of an <%= link_to_octicons %> icon to use. If no icon is provided, a default one will be chosen based on the scheme.
       # @param scheme [Symbol] <%= one_of(Primer::Alpha::Banner::SCHEME_MAPPINGS.keys) %>
-      # @param reappear [Boolean] Whether or not the flash banner should reappear after being dismissed. Only for use in test and preview environments.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(full: false, full_when_narrow: false, dismissible: false, description: nil, icon: nil, scheme: DEFAULT_SCHEME, reappear: false, **system_arguments)
+      def initialize(full: false, full_when_narrow: false, dismiss_scheme: DEFAULT_DISMISS_SCHEME, description: nil, icon: nil, scheme: DEFAULT_SCHEME, **system_arguments)
         @scheme = fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)
         @icon = icon || DEFAULT_ICONS[@scheme]
-        @dismissible = dismissible
+        @dismiss_scheme = dismiss_scheme
         @description = description
-        @reappear = reappear
 
         @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = :div
@@ -113,10 +87,9 @@ module Primer
         }
 
         @wrapper_arguments = {
-          tag: custom_element_name
+          tag: custom_element_name,
+          data: { dismiss_scheme: @dismiss_scheme }
         }
-
-        @wrapper_arguments[:data] = { reappear: @reappear } if @reappear
       end
 
       private