primer_view_components 0.5.1 → 0.7.0

data/app/components/primer/beta/blankslate.css.map

@@ -1 +1 @@
-{"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,YAEE,gCAA4B,CAD5B,iBAAkB,CAElB,iBAkBF,CAhBE,cACE,gDACF,CAEA,iBAGE,6DAAkC,CAClC,yGAA8D,CAC9D,4CAAyC,CAHzC,8CAAuC,CADvC,mBAKF,CAEA,gBAEE,WAAY,CADZ,UAEF,CAGF,iBAIE,gDAA2B,CAF3B,8CAAyC,CACzC,2CAAqC,CAFrC,4CAIF,CAEA,kBACE,0CACF,CAEA,oBACE,uCACF,CAEA,mBACE,uCASF,CAPE,iCACE,2CACF,CAEA,gCACE,8CACF,CAGF,mBACE,+EACF,CAEA,qBACE,2DACF,CAEA,mBAEE,aAAc,CADd,eAEF,CAKE,sBAEE,WAAY,CADZ,UAEF,CAEA,qBAIE,cAAe,CAHf,qCAIF,CAEA,oBACE,0CACF,CAKF,6BACE,QACF","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate {\n  position: relative;\n  padding: var(--base-size-32);\n  text-align: center;\n\n  & p {\n    color: var(--fgColor-muted);\n  }\n\n  & code {\n    padding: 2px 5px 3px;\n    font-size: var(--text-body-size-medium);\n    background: var(--bgColor-default);\n    border: var(--borderWidth-thin) solid var(--borderColor-muted);\n    border-radius: var(--borderRadius-medium);\n  }\n\n  & img {\n    width: 56px;\n    height: 56px;\n  }\n}\n\n.blankslate-icon {\n  margin-right: var(--control-small-gap);\n  margin-bottom: var(--stack-gap-condensed);\n  margin-left: var(--control-small-gap);\n  color: var(--fgColor-muted);\n}\n\n.blankslate-image {\n  margin-bottom: var(--stack-gap-normal);\n}\n\n.blankslate-heading {\n  margin-bottom: var(--base-size-4);\n}\n\n.blankslate-action {\n  margin-top: var(--stack-gap-normal);\n\n  &:first-of-type {\n    margin-top: var(--stack-gap-spacious);\n  }\n\n  &:last-of-type {\n    margin-bottom: var(--stack-gap-condensed);\n  }\n}\n\n.blankslate-capped {\n  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n.blankslate-spacious {\n  padding: var(--base-size-80) var(--base-size-40);\n}\n\n.blankslate-narrow {\n  max-width: 485px;\n  margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n  & img {\n    width: 80px;\n    height: 80px;\n  }\n\n  & h3 {\n    margin: var(--stack-gap-normal) 0;\n\n    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n    font-size: 24px;\n  }\n\n  & p {\n    font-size: var(--text-body-size-large);\n  }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n  border: 0;\n}\n"]}
+{"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,YAEE,gCAA4B,CAD5B,iBAAkB,CAElB,iBAkBF,CAhBE,cACE,gDACF,CAEA,iBAGE,6DAAkC,CAClC,yGAA8D,CAC9D,gDAAyC,CAHzC,8CAAuC,CADvC,mBAKF,CAEA,gBAEE,WAAY,CADZ,UAEF,CAGF,iBAIE,gDAA2B,CAF3B,8CAAyC,CACzC,2CAAqC,CAFrC,4CAIF,CAEA,kBACE,0CACF,CAEA,oBACE,uCACF,CAEA,mBACE,uCASF,CAPE,iCACE,2CACF,CAEA,gCACE,8CACF,CAGF,mBACE,uFACF,CAEA,qBACE,2DACF,CAEA,mBAEE,aAAc,CADd,eAEF,CAKE,sBAEE,WAAY,CADZ,UAEF,CAEA,qBAIE,cAAe,CAHf,qCAIF,CAEA,oBACE,0CACF,CAKF,6BACE,QACF","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate {\n  position: relative;\n  padding: var(--base-size-32);\n  text-align: center;\n\n  & p {\n    color: var(--fgColor-muted);\n  }\n\n  & code {\n    padding: 2px 5px 3px;\n    font-size: var(--text-body-size-medium);\n    background: var(--bgColor-default);\n    border: var(--borderWidth-thin) solid var(--borderColor-muted);\n    border-radius: var(--borderRadius-medium);\n  }\n\n  & img {\n    width: 56px;\n    height: 56px;\n  }\n}\n\n.blankslate-icon {\n  margin-right: var(--control-small-gap);\n  margin-bottom: var(--stack-gap-condensed);\n  margin-left: var(--control-small-gap);\n  color: var(--fgColor-muted);\n}\n\n.blankslate-image {\n  margin-bottom: var(--stack-gap-normal);\n}\n\n.blankslate-heading {\n  margin-bottom: var(--base-size-4);\n}\n\n.blankslate-action {\n  margin-top: var(--stack-gap-normal);\n\n  &:first-of-type {\n    margin-top: var(--stack-gap-spacious);\n  }\n\n  &:last-of-type {\n    margin-bottom: var(--stack-gap-condensed);\n  }\n}\n\n.blankslate-capped {\n  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n.blankslate-spacious {\n  padding: var(--base-size-80) var(--base-size-40);\n}\n\n.blankslate-narrow {\n  max-width: 485px;\n  margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n  & img {\n    width: 80px;\n    height: 80px;\n  }\n\n  & h3 {\n    margin: var(--stack-gap-normal) 0;\n\n    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n    font-size: 24px;\n  }\n\n  & p {\n    font-size: var(--text-body-size-large);\n  }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n  border: 0;\n}\n"]}

data/app/components/primer/beta/blankslate.rb

@@ -99,110 +99,6 @@ module Primer
         Primer::Beta::Link.new(**system_arguments)
       }
 
-      # @example Basic
-      #   <%= render Primer::Beta::Blankslate.new do |component| %>
-      #     <% component.with_heading(tag: :h2).with_content("Title") %>
-      #     <% component.with_description { "Description"} %>
-      #   <% end %>
-      #
-      # @example Icon
-      #   @description
-      #     Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
-      #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |component| %>
-      #       <% component.with_visual_icon(icon: :globe) %>
-      #       <% component.with_heading(tag: :h2).with_content("Title") %>
-      #       <% component.with_description { "Description"} %>
-      #     <% end %>
-      #
-      # @example Loading
-      #   @description
-      #     Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
-      #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |component| %>
-      #       <% component.with_visual_spinner(size: :large) %>
-      #       <% component.with_heading(tag: :h2).with_content("Title") %>
-      #       <% component.with_description { "Description"} %>
-      #     <% end %>
-      #
-      # @example Using an image
-      #   @description
-      #     Add an `image` to give context that an Octicon couldn't.
-      #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |component| %>
-      #       <% component.with_visual_image(src: Primer::ExampleImage::BASE64_SRC, alt: "Security - secure vault") %>
-      #       <% component.with_heading(tag: :h2).with_content("Title") %>
-      #       <% component.with_description { "Description"} %>
-      #     <% end %>
-      #
-      # @example Custom content
-      #   @description
-      #     Pass custom content to `description`.
-      #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |component| %>
-      #       <% component.with_heading(tag: :h2).with_content("Title") %>
-      #       <% component.with_description do %>
-      #         <em>Your custom content here</em>
-      #       <% end %>
-      #     <% end %>
-      #
-      # @example Primary action
-      #   @description
-      #     Provide a `primary_action` to guide users to take action from the blankslate. The `primary_action` appears below the description and custom content.
-      #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |component| %>
-      #       <% component.with_visual_icon(icon: :book) %>
-      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
-      #       <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
-      #       <% component.with_primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
-      #     <% end %>
-      #
-      # @example Secondary action
-      #   @description
-      #     Add an additional `secondary_action` to help users learn more about a feature. See <%= link_to_accessibility %>. `secondary_action` will be shown at the very bottom:
-      #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |component| %>
-      #       <% component.with_visual_icon(icon: :book) %>
-      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
-      #       <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
-      #       <% component.with_secondary_action(href: "https://docs.github.com/en/github/building-a-strong-community/about-wikis").with_content("Learn more about wikis") %>
-      #     <% end %>
-      #
-      # @example Primary and secondary actions
-      #   @description
-      #     `primary_action` and `secondary_action` can also be used together. The `primary_action` will always be rendered before the `secondary_action`:
-      #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |component| %>
-      #       <% component.with_visual_icon(icon: :book) %>
-      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
-      #       <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
-      #       <% component.with_primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
-      #       <% component.with_secondary_action(href: "https://docs.github.com/en/github/building-a-strong-community/about-wikis").with_content("Learn more about wikis") %>
-      #     <% end %>
-      #
-      # @example Variations
-      #   @description
-      #     There are a few variations of how the Blankslate appears: `narrow` adds a maximum width of `485px`, and `spacious` increases the padding from `32px` to `80px 40px`.
-      #   @code
-      #     <%= render Primer::Beta::Blankslate.new(
-      #       narrow: true,
-      #       spacious: true,
-      #     ) do |component| %>
-      #       <% component.with_visual_icon(icon: :book) %>
-      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
-      #       <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
-      #     <% end %>
-      #
-      # @example With border
-      #   @description
-      #     It's possible to add a border around the Blankslate. This will wrap the Blankslate in a BorderBox.
-      #   @code
-      #     <%= render Primer::Beta::Blankslate.new(border: true) do |component| %>
-      #       <% component.with_visual_icon(icon: :book) %>
-      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
-      #       <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
-      #     <% end %>
-      #
       # @param narrow [Boolean] Adds a maximum width of `485px` to the Blankslate.
       # @param spacious [Boolean] Increases the padding from `32px` to `80px 40px`.
       # @param border [Boolean] Adds a border around the Blankslate.

data/app/components/primer/beta/border_box/header.rb

@@ -7,6 +7,8 @@ module Primer
       #
       # @accessibility When using `header.with_title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %>
       class Header < Primer::Component
+        attr_reader :id
+
         status :beta
 
         TITLE_TAG_FALLBACK = :h2
@@ -26,25 +28,16 @@ module Primer
           Primer::BaseComponent.new(**system_arguments)
         }
 
-        # @example Default
-        #
-        #   <%= render(Primer::Beta::BorderBox::Header.new) do %>
-        #     Header
-        #   <% end %>
-        #
-        # @example with title
-        #   <%= render(Primer::Beta::BorderBox::Header.new) do |h| %>
-        #     <% h.with_title(tag: :h3) do %>I am a title<% end %>
-        #   <% end %>
-        #
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         def initialize(**system_arguments)
           @system_arguments = system_arguments
+          @system_arguments[:id] ||= self.class.generate_id
           @system_arguments[:tag] = :div
           @system_arguments[:classes] = class_names(
             "Box-header",
             system_arguments[:classes]
           )
+          @id = @system_arguments[:id]
         end
       end
     end

data/app/components/primer/beta/border_box.css

@@ -1 +1 @@
-.Box{background-color:var(--bgColor-default,var(--color-canvas-default));border-color:var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem))}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--condensed .Box-btn-octicon.btn-octicon{line-height:1.25;margin:calc(var(--controlStack-medium-gap-condensed,.5rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem)}.Box--condensed .Box-row{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--spacious .Box-header{line-height:1.25;padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-title{font-size:var(--text-title-size-medium,1.25rem)}.Box--spacious .Box-body,.Box--spacious .Box-btn-octicon.btn-octicon,.Box--spacious .Box-footer{padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-btn-octicon.btn-octicon{margin:calc(var(--stack-gap-spacious,1.5rem)*-1) calc(var(--stack-gap-spacious,1.5rem)*-1)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious,1.5rem)}.Box-header{background-color:var(--bgColor-muted,var(--color-canvas-subtle));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px);border-width:var(--borderWidth-thin,max(1px,.0625rem));margin:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) 0;padding:var(--stack-padding-normal,1rem)}.Box-title{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.Box-body{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));padding:var(--stack-padding-normal,1rem)}.Box-body:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px);margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.Box-row{border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));list-style-type:none;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box-row:first-of-type{border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px)}.Box-row:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--borderColor-accent-emphasis,var(--color-accent-fg))}.Box-row.navigation-focus .Box-row--drag-button{color:var(--fgColor-accent,var(--color-accent-fg));cursor:grab;opacity:1}.Box-row.navigation-focus.is-dragging .Box-row--drag-button{cursor:grabbing}.Box-row.navigation-focus.sortable-chosen,.Box-row.navigation-focus.sortable-ghost{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-row--focus-blue.navigation-focus{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}.Box-row--hover-gray:hover{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-row--hover-blue:hover{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}@media (min-width:768px){.Box-row-link{color:var(--fgColor-default,var(--color-fg-default));text-decoration:none}.Box-row-link:hover{color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none}}.Box-row--drag-button{opacity:0}.Box-footer{border-radius:0 0 var(--borderRadius-medium,6px) var(--borderRadius-medium,6px);border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box--blue .Box-header{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box--danger,.Box--danger .Box-body:last-of-type,.Box--danger .Box-row:first-of-type{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis))}.Box-header--blue{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle));border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box-row--yellow{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle))}.Box-row--blue{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}.Box-row--gray{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-btn-octicon.btn-octicon{line-height:1.5;margin:calc(var(--controlStack-small-gap-spacious,1rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem) var(--control-medium-paddingInline-spacious,1rem)}
+.Box{background-color:var(--bgColor-default,var(--color-canvas-default));border-color:var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem))}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--condensed .Box-btn-octicon.btn-octicon{line-height:1.25;margin:calc(var(--controlStack-medium-gap-condensed,.5rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem)}.Box--condensed .Box-row{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--spacious .Box-header{line-height:1.25;padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-title{font-size:var(--text-title-size-medium,1.25rem)}.Box--spacious .Box-body,.Box--spacious .Box-btn-octicon.btn-octicon,.Box--spacious .Box-footer{padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-btn-octicon.btn-octicon{margin:calc(var(--stack-gap-spacious,1.5rem)*-1) calc(var(--stack-gap-spacious,1.5rem)*-1)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious,1.5rem)}.Box-header{background-color:var(--bgColor-muted,var(--color-canvas-subtle));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-top-left-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem);border-width:var(--borderWidth-thin,max(1px,.0625rem));margin:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) 0;padding:var(--stack-padding-normal,1rem)}.Box-title{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.Box-body{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));padding:var(--stack-padding-normal,1rem)}.Box-body:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-bottom-right-radius:var(--borderRadius-medium,.375rem);margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.Box-row{border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));list-style-type:none;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box-row:first-of-type{border-top-left-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}.Box-row:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-bottom-right-radius:var(--borderRadius-medium,.375rem)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--borderColor-accent-emphasis,var(--color-accent-emphasis))}.Box-row.navigation-focus .Box-row--drag-button{color:var(--fgColor-accent,var(--color-accent-fg));cursor:grab;opacity:1}.Box-row.navigation-focus.is-dragging .Box-row--drag-button{cursor:grabbing}.Box-row.navigation-focus.sortable-chosen,.Box-row.navigation-focus.sortable-ghost{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-row--focus-blue.navigation-focus{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}.Box-row--hover-gray:hover{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-row--hover-blue:hover{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}@media (min-width:768px){.Box-row-link{color:var(--fgColor-default,var(--color-fg-default));text-decoration:none}.Box-row-link:hover{color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none}}.Box-row--drag-button{opacity:0}.Box-footer{border-radius:0 0 var(--borderRadius-medium,.375rem) var(--borderRadius-medium,.375rem);border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box--blue .Box-header{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box--danger,.Box--danger .Box-body:last-of-type,.Box--danger .Box-row:first-of-type{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis))}.Box-header--blue{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle));border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box-row--yellow{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle))}.Box-row--blue{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}.Box-row--gray{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-btn-octicon.btn-octicon{line-height:1.5;margin:calc(var(--controlStack-small-gap-spacious,1rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem) var(--control-medium-paddingInline-spacious,1rem)}

data/app/components/primer/beta/border_box.css.map

@@ -1 +1 @@
-{"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAGA,KACE,mEAAwC,CACxC,mEAAwC,CAGxC,4CAAyC,CAFzC,kBAAmB,CACnB,sDAEF,CAGA,gBACE,gBAyBF,CAfE,kFACE,6EACF,CAGE,6CAGE,gBAAiB,CADjB,mHAA6G,CAD7G,6GAGF,CAGF,yBACE,6EACF,CAIA,2BAEE,gBAAiB,CADjB,4CAEF,CAEA,0BACE,+CACF,CAWE,gGAJA,4CAOA,CAHA,4CAEE,0FACF,CAGF,wBACE,4CACF,CAGF,YAGE,gEAAsC,CACtC,mEAAwC,CACxC,kBAAmB,CAEnB,qDAAkD,CAClD,sDAAmD,CAFnD,sDAAqC,CAJrC,gHAA+E,CAD/E,wCAQF,CAEA,WACE,8CAAuC,CACvC,gDACF,CAEA,UAEE,oHAAuE,CADvE,wCASF,CALE,uBAGE,wDAAqD,CADrD,yDAAsD,CADtD,iEAGF,CAIF,SAME,6GAAyC,CAHzC,oBAAqB,CADrB,8DAA8C,CAD9C,wCAqDF,CA9CE,uBACE,qDAAkD,CAClD,sDACF,CAEA,sBAEE,wDAAqD,CADrD,yDAEF,CAIA,yCAGE,kFACF,CAIE,gDACE,kDAA4B,CAC5B,WAAY,CACZ,SACF,CAGA,4DACE,eACF,CAQA,mFACE,gEAMF,CAHE,6DACE,SACF,CAMJ,sCACE,gEACF,CAIA,sCACE,uEACF,CAIA,2BACE,gEACF,CAIA,2BACE,uEACF,CAOA,yBADF,cAEI,oDAA6B,CAC7B,oBAOJ,CALI,oBACE,kDAA4B,CAC5B,oBACF,CACF,CAKF,sBACE,SACF,CAEA,YAME,+EAAwE,CADxE,iHAAyC,CAHzC,8DAA8C,CAD9C,wCAMF,CAGA,iBACE,gBAAiB,CACjB,eACF,CAOE,kCAFA,sEAKA,CAHA,uBACE,uEAEF,CAUA,gEACE,sEACF,CAeE,qFACE,4EACF,CAIJ,kBACE,uEAA6C,CAC7C,sEACF,CAIA,iBACE,6EACF,CAEA,eACE,uEACF,CAEA,eACE,gEACF,CAKE,6BAGE,eAAgB,CADhB,gHAA2G,CAD3G,2GAGF","file":"border_box.css","sourcesContent":["/* BorderBox */\n\n/* TODO: Rename to BorderBox to match PVC */\n.Box {\n  background-color: var(--bgColor-default);\n  border-color: var(--borderColor-default);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-radius: var(--borderRadius-medium);\n}\n\n/* Box padding density options */\n.Box--condensed {\n  line-height: 1.25;\n\n  & .Box-header {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n\n  & .Box-body {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n\n  & .Box-footer {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n      margin: calc(var(--controlStack-medium-gap-condensed) * -1) calc(var(--controlStack-small-gap-spacious) * -1);\n      line-height: 1.25;\n    }\n  }\n\n  & .Box-row {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n}\n\n.Box--spacious {\n  & .Box-header {\n    padding: var(--stack-padding-spacious);\n    line-height: 1.25;\n  }\n\n  & .Box-title {\n    font-size: var(--text-title-size-medium);\n  }\n\n  & .Box-body {\n    padding: var(--stack-padding-spacious);\n  }\n\n  & .Box-footer {\n    padding: var(--stack-padding-spacious);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--stack-padding-spacious);\n      margin: calc(var(--stack-gap-spacious) * -1) calc(var(--stack-gap-spacious) * -1);\n    }\n  }\n\n  & .Box-row {\n    padding: var(--stack-padding-spacious);\n  }\n}\n\n.Box-header {\n  padding: var(--stack-padding-normal);\n  margin: calc(var(--borderWidth-thin) * -1) calc(var(--borderWidth-thin) * -1) 0;\n  background-color: var(--bgColor-muted);\n  border-color: var(--borderColor-default);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-top-left-radius: var(--borderRadius-medium);\n  border-top-right-radius: var(--borderRadius-medium);\n}\n\n.Box-title {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.Box-body {\n  padding: var(--stack-padding-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */\n  &:last-of-type {\n    margin-bottom: calc(var(--borderWidth-thin) * -1);\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n}\n\n/* Box rows */\n.Box-row {\n  padding: var(--stack-padding-normal);\n  margin-top: calc(var(--borderWidth-thin) * -1);\n  list-style-type: none; /* To account for applying Box component to a list */\n  border-top-color: var(--borderColor-muted);\n  border-top-style: solid;\n  border-top-width: var(--borderWidth-thin);\n\n  &:first-of-type {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-top-right-radius: var(--borderRadius-medium);\n  }\n\n  &:last-of-type {\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  /* Adds a blue vertical line to the left of the row\n  ** For indicating a row item is unread */\n  &.Box-row--unread,\n  /* .unread to be deprecated with .Box-row-unread */\n  &.unread {\n    box-shadow: inset 2px 0 0 var(--borderColor-accent-emphasis);\n  }\n\n  &.navigation-focus {\n    /* Focus styles for when drag icon */\n    & .Box-row--drag-button {\n      color: var(--fgColor-accent);\n      cursor: grab;\n      opacity: 100;\n    }\n\n    /* Grabbing while row is dragged */\n    &.is-dragging .Box-row--drag-button {\n      cursor: grabbing;\n    }\n\n    /* Row dragging styles */\n    &.sortable-chosen {\n      background-color: var(--bgColor-muted);\n    }\n\n    /* Makes dragging row background gray */\n    &.sortable-ghost {\n      background-color: var(--bgColor-muted);\n\n      /* Hides contents of row while dragging so row looks solid gray */\n      & .Box-row--drag-hide {\n        opacity: 0;\n      }\n    }\n  }\n}\n\n.Box-row--focus-gray {\n  &.navigation-focus {\n    background-color: var(--bgColor-muted);\n  }\n}\n\n.Box-row--focus-blue {\n  &.navigation-focus {\n    background-color: var(--bgColor-accent-muted);\n  }\n}\n\n.Box-row--hover-gray {\n  &:hover {\n    background-color: var(--bgColor-muted);\n  }\n}\n\n.Box-row--hover-blue {\n  &:hover {\n    background-color: var(--bgColor-accent-muted);\n  }\n}\n\n/* Optional link style\n** Makes links on mobile blue since they don't have hover state,\n** and links are dark-gray with blue hover on desktop. */\n.Box-row-link {\n  @media (min-width: 768px) {\n    color: var(--fgColor-default);\n    text-decoration: none;\n\n    &:hover {\n      color: var(--fgColor-accent);\n      text-decoration: none;\n    }\n  }\n}\n\n/* Optional drag icon styles for reordering items\n** Focus styles included in .Box-row above */\n.Box-row--drag-button {\n  opacity: 0;\n}\n\n.Box-footer {\n  padding: var(--stack-padding-normal);\n  margin-top: calc(var(--borderWidth-thin) * -1); /* prevents double border when used with .Box-body */\n  border-top-color: var(--borderColor-default);\n  border-top-style: solid;\n  border-top-width: var(--borderWidth-thin);\n  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n/* Option for a box with scrolling content */\n.Box--scrollable {\n  max-height: 324px;\n  overflow: scroll;\n}\n\n/* Box themes */\n\n.Box--blue {\n  border-color: var(--borderColor-accent-muted);\n\n  & .Box-header {\n    background-color: var(--bgColor-accent-muted);\n    border-color: var(--borderColor-accent-muted);\n  }\n\n  & .Box-body {\n    border-color: var(--borderColor-accent-muted);\n  }\n\n  & .Box-row {\n    border-color: var(--borderColor-accent-muted);\n  }\n\n  & .Box-footer {\n    border-color: var(--borderColor-accent-muted);\n  }\n}\n\n/* Applies and red border to the outside of the box,\n** but not to the border separating rows. */\n.Box--danger {\n  border-color: var(--borderColor-danger-emphasis);\n\n  & .Box-row {\n    &:first-of-type {\n      border-color: var(--borderColor-danger-emphasis);\n    }\n  }\n\n  & .Box-body {\n    &:last-of-type {\n      border-color: var(--borderColor-danger-emphasis);\n    }\n  }\n}\n\n.Box-header--blue {\n  background-color: var(--bgColor-accent-muted);\n  border-color: var(--borderColor-accent-muted);\n}\n\n/* Box row highlight themes */\n\n.Box-row--yellow {\n  background-color: var(--bgColor-attention-muted);\n}\n\n.Box-row--blue {\n  background-color: var(--bgColor-accent-muted);\n}\n\n.Box-row--gray {\n  background-color: var(--bgColor-muted);\n}\n\n/* Box with btn-octicon */\n.Box-btn-octicon {\n  /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */\n  &.btn-octicon {\n    padding: var(--control-medium-paddingInline-spacious) var(--control-medium-paddingInline-spacious);\n    margin: calc(var(--controlStack-small-gap-spacious) * -1) calc(var(--controlStack-small-gap-spacious) * -1);\n    line-height: 1.5; /* override btn-octicon line-height */\n  }\n}\n"]}
+{"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAGA,KACE,mEAAwC,CACxC,mEAAwC,CAGxC,gDAAyC,CAFzC,kBAAmB,CACnB,sDAEF,CAGA,gBACE,gBAyBF,CAfE,kFACE,6EACF,CAGE,6CAGE,gBAAiB,CADjB,mHAA6G,CAD7G,6GAGF,CAGF,yBACE,6EACF,CAIA,2BAEE,gBAAiB,CADjB,4CAEF,CAEA,0BACE,+CACF,CAWE,gGAJA,4CAOA,CAHA,4CAEE,0FACF,CAGF,wBACE,4CACF,CAGF,YAGE,gEAAsC,CACtC,mEAAwC,CACxC,kBAAmB,CAEnB,yDAAkD,CAClD,0DAAmD,CAFnD,sDAAqC,CAJrC,gHAA+E,CAD/E,wCAQF,CAEA,WACE,8CAAuC,CACvC,gDACF,CAEA,UAEE,oHAAuE,CADvE,wCASF,CALE,uBAGE,4DAAqD,CADrD,6DAAsD,CADtD,iEAGF,CAIF,SAME,6GAAyC,CAHzC,oBAAqB,CADrB,8DAA8C,CAD9C,wCAqDF,CA9CE,uBACE,yDAAkD,CAClD,0DACF,CAEA,sBAEE,4DAAqD,CADrD,6DAEF,CAIA,yCAGE,wFACF,CAIE,gDACE,kDAA4B,CAC5B,WAAY,CACZ,SACF,CAGA,4DACE,eACF,CAQA,mFACE,gEAMF,CAHE,6DACE,SACF,CAMJ,sCACE,gEACF,CAIA,sCACE,uEACF,CAIA,2BACE,gEACF,CAIA,2BACE,uEACF,CAOA,yBADF,cAEI,oDAA6B,CAC7B,oBAOJ,CALI,oBACE,kDAA4B,CAC5B,oBACF,CACF,CAKF,sBACE,SACF,CAEA,YAME,uFAAwE,CADxE,iHAAyC,CAHzC,8DAA8C,CAD9C,wCAMF,CAGA,iBACE,gBAAiB,CACjB,eACF,CAOE,kCAFA,sEAKA,CAHA,uBACE,uEAEF,CAUA,gEACE,sEACF,CAeE,qFACE,4EACF,CAIJ,kBACE,uEAA6C,CAC7C,sEACF,CAIA,iBACE,6EACF,CAEA,eACE,uEACF,CAEA,eACE,gEACF,CAKE,6BAGE,eAAgB,CADhB,gHAA2G,CAD3G,2GAGF","file":"border_box.css","sourcesContent":["/* BorderBox */\n\n/* TODO: Rename to BorderBox to match PVC */\n.Box {\n  background-color: var(--bgColor-default);\n  border-color: var(--borderColor-default);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-radius: var(--borderRadius-medium);\n}\n\n/* Box padding density options */\n.Box--condensed {\n  line-height: 1.25;\n\n  & .Box-header {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n\n  & .Box-body {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n\n  & .Box-footer {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n      margin: calc(var(--controlStack-medium-gap-condensed) * -1) calc(var(--controlStack-small-gap-spacious) * -1);\n      line-height: 1.25;\n    }\n  }\n\n  & .Box-row {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n}\n\n.Box--spacious {\n  & .Box-header {\n    padding: var(--stack-padding-spacious);\n    line-height: 1.25;\n  }\n\n  & .Box-title {\n    font-size: var(--text-title-size-medium);\n  }\n\n  & .Box-body {\n    padding: var(--stack-padding-spacious);\n  }\n\n  & .Box-footer {\n    padding: var(--stack-padding-spacious);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--stack-padding-spacious);\n      margin: calc(var(--stack-gap-spacious) * -1) calc(var(--stack-gap-spacious) * -1);\n    }\n  }\n\n  & .Box-row {\n    padding: var(--stack-padding-spacious);\n  }\n}\n\n.Box-header {\n  padding: var(--stack-padding-normal);\n  margin: calc(var(--borderWidth-thin) * -1) calc(var(--borderWidth-thin) * -1) 0;\n  background-color: var(--bgColor-muted);\n  border-color: var(--borderColor-default);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-top-left-radius: var(--borderRadius-medium);\n  border-top-right-radius: var(--borderRadius-medium);\n}\n\n.Box-title {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.Box-body {\n  padding: var(--stack-padding-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */\n  &:last-of-type {\n    margin-bottom: calc(var(--borderWidth-thin) * -1);\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n}\n\n/* Box rows */\n.Box-row {\n  padding: var(--stack-padding-normal);\n  margin-top: calc(var(--borderWidth-thin) * -1);\n  list-style-type: none; /* To account for applying Box component to a list */\n  border-top-color: var(--borderColor-muted);\n  border-top-style: solid;\n  border-top-width: var(--borderWidth-thin);\n\n  &:first-of-type {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-top-right-radius: var(--borderRadius-medium);\n  }\n\n  &:last-of-type {\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  /* Adds a blue vertical line to the left of the row\n  ** For indicating a row item is unread */\n  &.Box-row--unread,\n  /* .unread to be deprecated with .Box-row-unread */\n  &.unread {\n    box-shadow: inset 2px 0 0 var(--borderColor-accent-emphasis);\n  }\n\n  &.navigation-focus {\n    /* Focus styles for when drag icon */\n    & .Box-row--drag-button {\n      color: var(--fgColor-accent);\n      cursor: grab;\n      opacity: 100;\n    }\n\n    /* Grabbing while row is dragged */\n    &.is-dragging .Box-row--drag-button {\n      cursor: grabbing;\n    }\n\n    /* Row dragging styles */\n    &.sortable-chosen {\n      background-color: var(--bgColor-muted);\n    }\n\n    /* Makes dragging row background gray */\n    &.sortable-ghost {\n      background-color: var(--bgColor-muted);\n\n      /* Hides contents of row while dragging so row looks solid gray */\n      & .Box-row--drag-hide {\n        opacity: 0;\n      }\n    }\n  }\n}\n\n.Box-row--focus-gray {\n  &.navigation-focus {\n    background-color: var(--bgColor-muted);\n  }\n}\n\n.Box-row--focus-blue {\n  &.navigation-focus {\n    background-color: var(--bgColor-accent-muted);\n  }\n}\n\n.Box-row--hover-gray {\n  &:hover {\n    background-color: var(--bgColor-muted);\n  }\n}\n\n.Box-row--hover-blue {\n  &:hover {\n    background-color: var(--bgColor-accent-muted);\n  }\n}\n\n/* Optional link style\n** Makes links on mobile blue since they don't have hover state,\n** and links are dark-gray with blue hover on desktop. */\n.Box-row-link {\n  @media (min-width: 768px) {\n    color: var(--fgColor-default);\n    text-decoration: none;\n\n    &:hover {\n      color: var(--fgColor-accent);\n      text-decoration: none;\n    }\n  }\n}\n\n/* Optional drag icon styles for reordering items\n** Focus styles included in .Box-row above */\n.Box-row--drag-button {\n  opacity: 0;\n}\n\n.Box-footer {\n  padding: var(--stack-padding-normal);\n  margin-top: calc(var(--borderWidth-thin) * -1); /* prevents double border when used with .Box-body */\n  border-top-color: var(--borderColor-default);\n  border-top-style: solid;\n  border-top-width: var(--borderWidth-thin);\n  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n/* Option for a box with scrolling content */\n.Box--scrollable {\n  max-height: 324px;\n  overflow: scroll;\n}\n\n/* Box themes */\n\n.Box--blue {\n  border-color: var(--borderColor-accent-muted);\n\n  & .Box-header {\n    background-color: var(--bgColor-accent-muted);\n    border-color: var(--borderColor-accent-muted);\n  }\n\n  & .Box-body {\n    border-color: var(--borderColor-accent-muted);\n  }\n\n  & .Box-row {\n    border-color: var(--borderColor-accent-muted);\n  }\n\n  & .Box-footer {\n    border-color: var(--borderColor-accent-muted);\n  }\n}\n\n/* Applies and red border to the outside of the box,\n** but not to the border separating rows. */\n.Box--danger {\n  border-color: var(--borderColor-danger-emphasis);\n\n  & .Box-row {\n    &:first-of-type {\n      border-color: var(--borderColor-danger-emphasis);\n    }\n  }\n\n  & .Box-body {\n    &:last-of-type {\n      border-color: var(--borderColor-danger-emphasis);\n    }\n  }\n}\n\n.Box-header--blue {\n  background-color: var(--bgColor-accent-muted);\n  border-color: var(--borderColor-accent-muted);\n}\n\n/* Box row highlight themes */\n\n.Box-row--yellow {\n  background-color: var(--bgColor-attention-muted);\n}\n\n.Box-row--blue {\n  background-color: var(--bgColor-accent-muted);\n}\n\n.Box-row--gray {\n  background-color: var(--bgColor-muted);\n}\n\n/* Box with btn-octicon */\n.Box-btn-octicon {\n  /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */\n  &.btn-octicon {\n    padding: var(--control-medium-paddingInline-spacious) var(--control-medium-paddingInline-spacious);\n    margin: calc(var(--controlStack-small-gap-spacious) * -1) calc(var(--controlStack-small-gap-spacious) * -1);\n    line-height: 1.5; /* override btn-octicon line-height */\n  }\n}\n"]}

data/app/components/primer/beta/border_box.html.erb

@@ -2,11 +2,11 @@
   <%= header %>
   <%= body %>
   <% if rows.any? %>
-    <ul>
+    <%= render Primer::BaseComponent.new(**@list_arguments) do %>
       <% rows.each do |row| %>
         <%= row %>
       <% end %>
-    </ul>
+    <% end %>
   <% end %>
   <%= footer %>
 <% end %>

data/app/components/primer/beta/border_box.rb

@@ -70,61 +70,6 @@ module Primer
         Primer::BaseComponent.new(**system_arguments)
       }
 
-      # @example Header with title, body, rows, and footer
-      #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
-      #     <% component.with_header do |header| %>
-      #       <% header.with_title(tag: :h2) do %>
-      #         Header
-      #       <% end %>
-      #     <% end %>
-      #     <% component.with_body do %>
-      #       Body
-      #     <% end %>
-      #     <% component.with_row do %>
-      #       <% if true %>
-      #         Row one
-      #       <% end %>
-      #     <% end %>
-      #     <% component.with_row do %>
-      #       Row two
-      #     <% end %>
-      #     <% component.with_footer do %>
-      #       Footer
-      #     <% end %>
-      #   <% end %>
-      #
-      # @example Padding density
-      #   <%= render(Primer::Beta::BorderBox.new(padding: :condensed)) do |component| %>
-      #     <% component.with_header do %>
-      #       Header
-      #     <% end %>
-      #     <% component.with_body do %>
-      #       Body
-      #     <% end %>
-      #     <% component.with_row do %>
-      #       Row two
-      #     <% end %>
-      #     <% component.with_footer do %>
-      #       Footer
-      #     <% end %>
-      #   <% end %>
-      #
-      # @example Row colors
-      #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
-      #     <% component.with_row do %>
-      #       Default
-      #     <% end %>
-      #     <% component.with_row(scheme: :neutral) do %>
-      #       Neutral
-      #     <% end %>
-      #     <% component.with_row(scheme: :info) do %>
-      #       Info
-      #     <% end %>
-      #     <% component.with_row(scheme: :warning) do %>
-      #       Warning
-      #     <% end %>
-      #   <% end %>
-      #
       # @param padding [Symbol] <%= one_of(Primer::Beta::BorderBox::PADDING_MAPPINGS.keys) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(padding: DEFAULT_PADDING, **system_arguments)
@@ -137,11 +82,22 @@ module Primer
         )
 
         @system_arguments[:system_arguments_denylist] = { [:p, :pt, :pb, :pr, :pl] => PADDING_SUGGESTION }
+        @list_arguments = { tag: :ul }
       end
 
       def render?
         rows.any? || header.present? || body.present? || footer.present?
       end
+
+      private
+
+      def before_render
+        return unless header
+
+        @list_arguments[:aria] = {
+          labelledby: header.id
+        }
+      end
     end
   end
 end

data/app/components/primer/beta/breadcrumbs.rb

@@ -31,13 +31,6 @@ module Primer
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_many :items, "Item"
 
-      # @example Basic
-      #   <%= render(Primer::Beta::Breadcrumbs.new) do |component| %>
-      #     <% component.with_item(href: "/") do %>Home<% end %>
-      #     <% component.with_item(href: "/about") do %>About<% end %>
-      #     <% component.with_item(href: "/about/team") do %>Team<% end %>
-      #   <% end %>
-      #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(**system_arguments)
         @system_arguments = deny_tag_argument(**system_arguments)

data/app/components/primer/beta/button.css

@@ -1 +1 @@
-:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,6px);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small)),var(--shadow-highlight,var(--color-primer-shadow-highlight));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled);border-color:var(--button-default-borderColor-disabled);color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible:hover:not(:disabled){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled);color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--fgColor-muted,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link-rest,var(--color-accent-fg));border:none;color:var(--fgColor-link-rest,var(--color-accent-fg));display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small)),var(--shadow-highlight,var(--color-primer-shadow-highlight));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled);color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}
+:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow)),var(--shadow-highlight,var(--color-btn-primary-inset-shadow));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled);border-color:var(--button-default-borderColor-disabled);color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible:hover:not(:disabled){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled);color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--fgColor-muted,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link,var(--color-accent-fg));border:none;color:var(--fgColor-link,var(--color-accent-fg));display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small)),var(--shadow-highlight,var(--color-primer-shadow-highlight));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled);color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}

data/app/components/primer/beta/button.css.map

@@ -1 +1 @@
-{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button  */\n\n/* temporary, pre primitives release */\n:root {\n  --duration-fast: 80ms;\n  --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n  position: relative;\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) solid;\n  border-color: transparent;\n  border-radius: var(--borderRadius-medium);\n  color: var(--button-default-fgColor-rest);\n  transition: var(--duration-fast) var(--easing-easeInOut);\n  transition-property: color, fill, background-color, border-color;\n  text-align: center;\n  height: var(--control-medium-size);\n  padding: 0 var(--control-medium-paddingInline-normal);\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--base-size-4);\n  min-width: max-content;\n\n  /* mobile friendly sizing */\n  @media (pointer: coarse) {\n    &::before {\n      @mixin minTouchTarget 48px, 48px;\n    }\n  }\n\n  /* base states */\n\n  &:hover {\n    transition-duration: var(--duration-fast);\n  }\n\n  &:active {\n    transition: none;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n}\n\n.Button-withTooltip {\n  position: relative;\n  display: inline-block;\n}\n\na.Button,\nsummary.Button {\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n  flex: 1 0 auto;\n  display: grid;\n  grid-template-areas: 'leadingVisual text trailingVisual';\n  grid-template-columns: min-content minmax(0, auto) min-content;\n  align-items: center;\n  place-content: center;\n\n  /* padding-bottom: 1px; optical alignment for firefox */\n\n  & > :not(:last-child) {\n    margin-right: var(--control-medium-gap);\n  }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n  justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n  display: flex;\n  pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--buttonCounter-default-bgColor-rest);\n  }\n}\n\n.Button-label {\n  grid-area: text;\n  white-space: nowrap;\n  line-height: var(--text-body-lineHeight-medium);\n}\n\n.Button-leadingVisual {\n  grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n  grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n  margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n  font-size: var(--text-body-size-small);\n  height: var(--control-small-size);\n  padding: 0 var(--control-small-paddingInline-condensed);\n  gap: var(--control-small-gap);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-small);\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-small-gap);\n    }\n  }\n}\n\n.Button--large {\n  height: var(--control-large-size);\n  padding: 0 var(--control-large-paddingInline-spacious);\n  gap: var(--control-large-gap);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-large);\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-large-gap);\n    }\n  }\n}\n\n.Button--fullWidth {\n  width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n  color: var(--button-primary-fgColor-rest);\n  fill: var(--button-primary-iconColor-rest);\n  background-color: var(--button-primary-bgColor-rest);\n  border-color: var(--button-primary-borderColor-rest);\n  box-shadow: var(--shadow-resting-small), var(--shadow-highlight);\n\n  &:hover:not(:disabled) {\n    background-color: var(--button-primary-bgColor-hover);\n    border-color: var(--button-primary-borderColor-hover);\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutlineOnEmphasis;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutlineOnEmphasis;\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    background-color: var(--button-primary-bgColor-active);\n    box-shadow: var(--button-primary-shadow-selected);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-primary-fgColor-disabled);\n    background-color: var(--button-primary-bgColor-disabled);\n    border-color: var(--button-primary-borderColor-disabled);\n    fill: var(--button-primary-fgColor-disabled);\n  }\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--buttonCounter-primary-bgColor-rest);\n  }\n}\n\n/* default (secondary) */\n.Button--secondary {\n  color: var(--button-default-fgColor-rest);\n  fill: var(--fgColor-muted); /* help this */\n  background-color: var(--button-default-bgColor-rest);\n  border-color: var(--button-default-borderColor-rest);\n  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n  &:hover:not(:disabled) {\n    background-color: var(--button-default-bgColor-hover);\n    border-color: var(--button-default-borderColor-hover);\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--button-default-bgColor-active);\n    border-color: var(--button-default-borderColor-active);\n  }\n\n  &[aria-pressed='true'] {\n    background-color: var(--button-default-bgColor-selected);\n    box-shadow: var(--shadow-inset);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--control-fgColor-disabled);\n    background-color: var(--button-default-bgColor-disabled);\n    border-color: var(--button-default-borderColor-disabled);\n    fill: var(--control-fgColor-disabled);\n  }\n}\n\n.Button--invisible {\n  color: var(--button-default-fgColor-rest);\n\n  &:hover:not(:disabled) {\n    background-color: var(--button-invisible-bgColor-hover);\n  }\n\n  &[aria-pressed='true'],\n  &:active:not(:disabled) {\n    background-color: var(--button-invisible-bgColor-active);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-invisible-fgColor-disabled);\n    background-color: var(--button-invisible-bgColor-disabled);\n    border-color: var(--button-invisible-borderColor-disabled);\n    fill: var(--button-invisible-fgColor-disabled);\n  }\n\n  /* if button has no visuals, use link blue for text */\n  &.Button--invisible-noVisuals .Button-label {\n    color: var(--button-invisible-fgColor-rest);\n  }\n\n  & .Button-visual {\n    color: var(--fgColor-muted);\n\n    & .Counter {\n      color: var(--fgColor-default);\n    }\n  }\n}\n\n.Button--link {\n  color: var(--fgColor-link-rest);\n  fill: var(--fgColor-link-rest);\n  display: inline-block;\n  font-size: inherit;\n  border: none;\n  height: unset;\n  padding: 0;\n\n  &:hover:not(:disabled) {\n    text-decoration: underline;\n  }\n\n  &:focus-visible,\n  &:focus {\n    outline-offset: 2px;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--control-fgColor-disabled);\n    background-color: transparent;\n    border-color: transparent;\n    fill: var(--control-fgColor-disabled);\n  }\n}\n\n/* danger */\n.Button--danger {\n  color: var(--button-danger-fgColor-rest);\n  fill: var(--button-danger-iconColor-rest);\n  background-color: var(--button-danger-bgColor-rest);\n  border-color: var(--button-danger-borderColor-rest);\n  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n  &:hover:not(:disabled) {\n    color: var(--button-danger-fgColor-hover);\n    fill: var(--button-danger-fgColor-hover);\n    background-color: var(--button-danger-bgColor-hover);\n    border-color: var(--button-danger-borderColor-hover);\n    box-shadow: var(--shadow-resting-small), var(--shadow-highlight);\n\n    & .Counter {\n      color: var(--buttonCounter-danger-fgColor-hover);\n      background-color: var(--buttonCounter-danger-bgColor-hover);\n    }\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    color: var(--button-danger-fgColor-active);\n    fill: var(--button-danger-fgColor-active);\n    background-color: var(--button-danger-bgColor-active);\n    border-color: var(--button-danger-borderColor-active);\n    box-shadow: var(--button-danger-shadow-selected);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-danger-fgColor-disabled);\n    fill: var(--button-danger-fgColor-disabled);\n    background-color: var(--button-danger-bgColor-disabled);\n    border-color: var(--button-default-borderColor-disabled);\n\n    & .Counter {\n      color: var(--buttonCounter-danger-fgColor-disabled);\n      background-color: var(--buttonCounter-danger-bgColor-disabled);\n    }\n  }\n\n  & .Counter {\n    color: var(--buttonCounter-danger-fgColor-rest);\n    background-color: var(--buttonCounter-danger-bgColor-rest);\n  }\n}\n\n.Button--iconOnly {\n  display: inline-grid;\n  place-content: center;\n  padding: unset;\n  width: var(--control-medium-size);\n\n  &.Button--small {\n    width: var(--control-small-size);\n  }\n\n  &.Button--large {\n    width: var(--control-large-size);\n  }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}
+{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button  */\n\n/* temporary, pre primitives release */\n:root {\n  --duration-fast: 80ms;\n  --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n  position: relative;\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) solid;\n  border-color: transparent;\n  border-radius: var(--borderRadius-medium);\n  color: var(--button-default-fgColor-rest);\n  transition: var(--duration-fast) var(--easing-easeInOut);\n  transition-property: color, fill, background-color, border-color;\n  text-align: center;\n  height: var(--control-medium-size);\n  padding: 0 var(--control-medium-paddingInline-normal);\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--base-size-4);\n  min-width: max-content;\n\n  /* mobile friendly sizing */\n  @media (pointer: coarse) {\n    &::before {\n      @mixin minTouchTarget 48px, 48px;\n    }\n  }\n\n  /* base states */\n\n  &:hover {\n    transition-duration: var(--duration-fast);\n  }\n\n  &:active {\n    transition: none;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n}\n\n.Button-withTooltip {\n  position: relative;\n  display: inline-block;\n}\n\na.Button,\nsummary.Button {\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n  flex: 1 0 auto;\n  display: grid;\n  grid-template-areas: 'leadingVisual text trailingVisual';\n  grid-template-columns: min-content minmax(0, auto) min-content;\n  align-items: center;\n  place-content: center;\n\n  /* padding-bottom: 1px; optical alignment for firefox */\n\n  & > :not(:last-child) {\n    margin-right: var(--control-medium-gap);\n  }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n  justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n  display: flex;\n  pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--buttonCounter-default-bgColor-rest);\n  }\n}\n\n.Button-label {\n  grid-area: text;\n  white-space: nowrap;\n  line-height: var(--text-body-lineHeight-medium);\n}\n\n.Button-leadingVisual {\n  grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n  grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n  margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n  font-size: var(--text-body-size-small);\n  height: var(--control-small-size);\n  padding: 0 var(--control-small-paddingInline-condensed);\n  gap: var(--control-small-gap);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-small);\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-small-gap);\n    }\n  }\n}\n\n.Button--large {\n  height: var(--control-large-size);\n  padding: 0 var(--control-large-paddingInline-spacious);\n  gap: var(--control-large-gap);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-large);\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-large-gap);\n    }\n  }\n}\n\n.Button--fullWidth {\n  width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n  color: var(--button-primary-fgColor-rest);\n  fill: var(--button-primary-iconColor-rest);\n  background-color: var(--button-primary-bgColor-rest);\n  border-color: var(--button-primary-borderColor-rest);\n  box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow)), var(--shadow-highlight, var(--color-btn-primary-inset-shadow));\n\n  &:hover:not(:disabled) {\n    background-color: var(--button-primary-bgColor-hover);\n    border-color: var(--button-primary-borderColor-hover);\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutlineOnEmphasis;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutlineOnEmphasis;\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    background-color: var(--button-primary-bgColor-active);\n    box-shadow: var(--button-primary-shadow-selected);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-primary-fgColor-disabled);\n    background-color: var(--button-primary-bgColor-disabled);\n    border-color: var(--button-primary-borderColor-disabled);\n    fill: var(--button-primary-fgColor-disabled);\n  }\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--buttonCounter-primary-bgColor-rest);\n  }\n}\n\n/* default (secondary) */\n.Button--secondary {\n  color: var(--button-default-fgColor-rest);\n  fill: var(--fgColor-muted); /* help this */\n  background-color: var(--button-default-bgColor-rest);\n  border-color: var(--button-default-borderColor-rest);\n  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n  &:hover:not(:disabled) {\n    background-color: var(--button-default-bgColor-hover);\n    border-color: var(--button-default-borderColor-hover);\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--button-default-bgColor-active);\n    border-color: var(--button-default-borderColor-active);\n  }\n\n  &[aria-pressed='true'] {\n    background-color: var(--button-default-bgColor-selected);\n    box-shadow: var(--shadow-inset);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--control-fgColor-disabled);\n    background-color: var(--button-default-bgColor-disabled);\n    border-color: var(--button-default-borderColor-disabled);\n    fill: var(--control-fgColor-disabled);\n  }\n}\n\n.Button--invisible {\n  color: var(--button-default-fgColor-rest);\n\n  &:hover:not(:disabled) {\n    background-color: var(--button-invisible-bgColor-hover);\n  }\n\n  &[aria-pressed='true'],\n  &:active:not(:disabled) {\n    background-color: var(--button-invisible-bgColor-active);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-invisible-fgColor-disabled);\n    background-color: var(--button-invisible-bgColor-disabled);\n    border-color: var(--button-invisible-borderColor-disabled);\n    fill: var(--button-invisible-fgColor-disabled);\n  }\n\n  /* if button has no visuals, use link blue for text */\n  &.Button--invisible-noVisuals .Button-label {\n    color: var(--button-invisible-fgColor-rest);\n  }\n\n  & .Button-visual {\n    color: var(--fgColor-muted);\n\n    & .Counter {\n      color: var(--fgColor-default);\n    }\n  }\n}\n\n.Button--link {\n  color: var(--fgColor-link);\n  fill: var(--fgColor-link);\n  display: inline-block;\n  font-size: inherit;\n  border: none;\n  height: unset;\n  padding: 0;\n\n  &:hover:not(:disabled) {\n    text-decoration: underline;\n  }\n\n  &:focus-visible,\n  &:focus {\n    outline-offset: 2px;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--control-fgColor-disabled);\n    background-color: transparent;\n    border-color: transparent;\n    fill: var(--control-fgColor-disabled);\n  }\n}\n\n/* danger */\n.Button--danger {\n  color: var(--button-danger-fgColor-rest);\n  fill: var(--button-danger-iconColor-rest);\n  background-color: var(--button-danger-bgColor-rest);\n  border-color: var(--button-danger-borderColor-rest);\n  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n  &:hover:not(:disabled) {\n    color: var(--button-danger-fgColor-hover);\n    fill: var(--button-danger-fgColor-hover);\n    background-color: var(--button-danger-bgColor-hover);\n    border-color: var(--button-danger-borderColor-hover);\n    box-shadow: var(--shadow-resting-small), var(--shadow-highlight);\n\n    & .Counter {\n      color: var(--buttonCounter-danger-fgColor-hover);\n      background-color: var(--buttonCounter-danger-bgColor-hover);\n    }\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    color: var(--button-danger-fgColor-active);\n    fill: var(--button-danger-fgColor-active);\n    background-color: var(--button-danger-bgColor-active);\n    border-color: var(--button-danger-borderColor-active);\n    box-shadow: var(--button-danger-shadow-selected);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-danger-fgColor-disabled);\n    fill: var(--button-danger-fgColor-disabled);\n    background-color: var(--button-danger-bgColor-disabled);\n    border-color: var(--button-default-borderColor-disabled);\n\n    & .Counter {\n      color: var(--buttonCounter-danger-fgColor-disabled);\n      background-color: var(--buttonCounter-danger-bgColor-disabled);\n    }\n  }\n\n  & .Counter {\n    color: var(--buttonCounter-danger-fgColor-rest);\n    background-color: var(--buttonCounter-danger-bgColor-rest);\n  }\n}\n\n.Button--iconOnly {\n  display: inline-grid;\n  place-content: center;\n  padding: unset;\n  width: var(--control-medium-size);\n\n  &.Button--small {\n    width: var(--control-small-size);\n  }\n\n  &.Button--large {\n    width: var(--control-large-size);\n  }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}

data/app/components/primer/beta/button.pcss

@@ -165,7 +165,7 @@ summary.Button {
   fill: var(--button-primary-iconColor-rest);
   background-color: var(--button-primary-bgColor-rest);
   border-color: var(--button-primary-borderColor-rest);
-  box-shadow: var(--shadow-resting-small), var(--shadow-highlight);
+  box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow)), var(--shadow-highlight, var(--color-btn-primary-inset-shadow));
 
   &:hover:not(:disabled) {
     background-color: var(--button-primary-bgColor-hover);
@@ -275,8 +275,8 @@ summary.Button {
 }
 
 .Button--link {
-  color: var(--fgColor-link-rest);
-  fill: var(--fgColor-link-rest);
+  color: var(--fgColor-link);
+  fill: var(--fgColor-link);
   display: inline-block;
   font-size: inherit;
   border: none;

data/app/components/primer/beta/button.rb

@@ -81,54 +81,13 @@ module Primer
       renders_one :tooltip, lambda { |**system_arguments|
         raise ArgumentError, "Buttons with a tooltip must have a unique `id` set on the `Button`." if @id.blank? && !Rails.env.production?
 
+        ActiveSupport::Deprecation.warn("Buttons with visible text should not use a `label` tooltip. Consider using Primer::Beta::IconButton instead.") if system_arguments[:type] == :label
         system_arguments[:for_id] = @id
-        system_arguments[:type] ||= :description
+        system_arguments[:type] = :description
 
         Primer::Alpha::Tooltip.new(**system_arguments)
       }
 
-      # @example Schemes
-      #   <%= render(Primer::Beta::Button.new) { "Default" } %>
-      #   <%= render(Primer::Beta::Button.new(scheme: :primary)) { "Primary" } %>
-      #   <%= render(Primer::Beta::Button.new(scheme: :danger)) { "Danger" } %>
-      #   <%= render(Primer::Beta::Button.new(scheme: :invisible)) { "Invisible" } %>
-      #
-      # @example Sizes
-      #   <%= render(Primer::Beta::Button.new(size: :small)) { "Small" } %>
-      #   <%= render(Primer::Beta::Button.new(size: :medium)) { "Medium" } %>
-      #
-      # @example Full width
-      #   <%= render(Primer::Beta::Button.new(block: :true)) { "Full width" } %>
-      #   <%= render(Primer::Beta::Button.new(block: :true, scheme: :primary)) { "Primary full width" } %>
-      #
-      # @example With leading visual
-      #   <%= render(Primer::Beta::Button.new) do |component| %>
-      #     <% component.with_leading_visual_icon(icon: :star) %>
-      #     Button
-      #   <% end %>
-      #
-      # @example With trailing visual
-      #   <%= render(Primer::Beta::Button.new) do |component| %>
-      #     <% component.with_trailing_visual_counter(count: 15) %>
-      #     Button
-      #   <% end %>
-      #
-      # @example With leading and trailing visuals
-      #   <%= render(Primer::Beta::Button.new) do |component| %>
-      #     <% component.with_leading_visual_icon(icon: :star) %>
-      #     <% component.with_trailing_visual_counter(count: 15) %>
-      #     Button
-      #   <% end %>
-      #
-      # @example With tooltip
-      #   @description
-      #     Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
-      #   @code
-      #     <%= render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component| %>
-      #       <% component.with_tooltip(text: "Tooltip text") %>
-      #       Button
-      #     <% end %>
-      #
       # @param scheme [Symbol] <%= one_of(Primer::Beta::Button::SCHEME_OPTIONS) %>
       # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
       # @param block [Boolean] Whether button is full-width with `display: block`.

data/app/components/primer/beta/button_group.css

@@ -1 +1 @@
-.ButtonGroup{display:inline-flex}.ButtonGroup .Button{border-radius:0;margin-inline-end:-1px;position:relative}.ButtonGroup .Button:active,.ButtonGroup .Button:focus,.ButtonGroup .Button:hover{z-index:1}.ButtonGroup>.Button-withTooltip:first-child .Button,.ButtonGroup>:first-child{border-bottom-left-radius:var(--borderRadius-medium,6px);border-top-left-radius:var(--borderRadius-medium,6px)}.ButtonGroup>.Button-withTooltip:last-child .Button,.ButtonGroup>:last-child{border-bottom-right-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px)}
+.ButtonGroup{display:inline-flex}.ButtonGroup .Button{border-radius:0;margin-inline-end:-1px;position:relative}.ButtonGroup .Button:active,.ButtonGroup .Button:focus,.ButtonGroup .Button:hover{z-index:1}.ButtonGroup>.Button-withTooltip:first-child .Button,.ButtonGroup>:first-child{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}.ButtonGroup>.Button-withTooltip:last-child .Button,.ButtonGroup>:last-child{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}

data/app/components/primer/beta/button_group.css.map

@@ -1 +1 @@
-{"version":3,"sources":["button_group.pcss"],"names":[],"mappings":"AAAA,aACE,mBAyBF,CAvBE,qBAGE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,kFAGE,SACF,CAGF,+EAGE,wDAAqD,CADrD,qDAEF,CAEA,6EAGE,yDAAsD,CADtD,sDAEF","file":"button_group.css","sourcesContent":[".ButtonGroup {\n  display: inline-flex;\n\n  & .Button {\n    margin-inline-end: -1px;\n    position: relative;\n    border-radius: 0;\n\n    &:focus,\n    &:active,\n    &:hover {\n      z-index: 1;\n    }\n  }\n\n  & > :first-child,\n  & > :first-child.Button-withTooltip .Button {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  & > :last-child,\n  & > :last-child.Button-withTooltip .Button {\n    border-top-right-radius: var(--borderRadius-medium);\n    border-bottom-right-radius: var(--borderRadius-medium);\n  }\n}\n"]}
+{"version":3,"sources":["button_group.pcss"],"names":[],"mappings":"AAAA,aACE,mBAyBF,CAvBE,qBAGE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,kFAGE,SACF,CAGF,+EAGE,4DAAqD,CADrD,yDAEF,CAEA,6EAGE,6DAAsD,CADtD,0DAEF","file":"button_group.css","sourcesContent":[".ButtonGroup {\n  display: inline-flex;\n\n  & .Button {\n    margin-inline-end: -1px;\n    position: relative;\n    border-radius: 0;\n\n    &:focus,\n    &:active,\n    &:hover {\n      z-index: 1;\n    }\n  }\n\n  & > :first-child,\n  & > :first-child.Button-withTooltip .Button {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  & > :last-child,\n  & > :last-child.Button-withTooltip .Button {\n    border-top-right-radius: var(--borderRadius-medium);\n    border-bottom-right-radius: var(--borderRadius-medium);\n  }\n}\n"]}

data/app/components/primer/beta/button_group.rb

@@ -20,22 +20,6 @@ module Primer
         end
       }
 
-      # @example Default
-      #
-      #   <%= render(Primer::Beta::ButtonGroup.new) do |component| %>
-      #     <% component.with_button { "Button 1" } %>
-      #     <% component.with_button { "Button 2" } %>
-      #     <% component.with_button { "Button 3" } %>
-      #   <% end %>
-      #
-      # @example Sizes
-      #
-      #   <%= render(Primer::Beta::ButtonGroup.new(size: :small)) do |component| %>
-      #     <% component.with_button { "Button 1" } %>
-      #     <% component.with_button { "Button 2" } %>
-      #     <% component.with_button { "Button 3" } %>
-      #   <% end %>
-      #
       # @param scheme [Symbol] DEPRECATED. <%= one_of(Primer::Beta::Button::SCHEME_OPTIONS) %>
       # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

data/app/components/primer/beta/clipboard_copy.rb

@@ -9,18 +9,6 @@ module Primer
     class ClipboardCopy < Primer::Component
       status :beta
 
-      # @example Default
-      #   <%= render(Primer::Beta::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) %>
-      #
-      # @example With text instead of icons
-      #   <%= render(Primer::Beta::ClipboardCopy.new(value: "Text to copy")) do %>
-      #     Click to copy!
-      #   <% end %>
-      #
-      # @example Copying from an element
-      #   <%= render(Primer::Beta::ClipboardCopy.new(for: "blob-path", "aria-label": "Copy text to the system clipboard")) %>
-      #   <div id="blob-path">src/index.js</div>
-      #
       # @param aria-label [String] String that will be read to screenreaders when the component is focused
       # @param value [String] Text to copy into the users clipboard when they click the component.
       # @param for [String] Element id from where to get the copied value.

data/app/components/primer/beta/close_button.rb

@@ -14,9 +14,6 @@ module Primer
       DEFAULT_TYPE = :button
       TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
 
-      # @example Default
-      #   <%= render(Primer::Beta::CloseButton.new) %>
-      #
       # @param type [Symbol] <%= one_of(Primer::Beta::CloseButton::TYPE_OPTIONS) %>
       # @param disabled [Boolean] Whether or not the button is disabled.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

data/app/components/primer/beta/counter.rb

@@ -23,14 +23,6 @@ module Primer
       DEPRECATED_SCHEME_OPTIONS = [:gray, :light_gray].freeze
       SCHEME_OPTIONS = (SCHEME_MAPPINGS.keys - DEPRECATED_SCHEME_OPTIONS).freeze
 
-      #
-      # @example Default
-      #   <%= render(Primer::Beta::Counter.new(count: 25)) %>
-      #
-      # @example Schemes
-      #   <%= render(Primer::Beta::Counter.new(count: 25, scheme: :primary)) %>
-      #   <%= render(Primer::Beta::Counter.new(count: 25, scheme: :secondary)) %>
-      #
       # @param count [Integer, Float::INFINITY, nil] The number to be displayed (e.x. # of issues, pull requests)
       # @param scheme [Symbol] Color scheme. <%= one_of(Primer::Beta::Counter::SCHEME_OPTIONS) %>
       # @param limit [Integer, nil] Maximum value to display. Pass `nil` for no limit. (e.x. if `count` == 6,000 and `limit` == 5000, counter will display "5,000+")