openproject-primer_view_components 0.6.3 → 0.8.0

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

@@ -41,10 +41,15 @@ module Primer
       #
       # - `leading_visual_icon` for a <%= link_to_component(Primer::Beta::Octicon) %>.
       #
+      # - `leading_visual_svg` to render a SVG.
+      #
       # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
       renders_one :leading_visual, types: {
         icon: lambda { |**system_arguments|
           Primer::Beta::Octicon.new(**system_arguments)
+        },
+        svg: lambda { |**system_arguments|
+          Primer::BaseComponent.new(tag: :svg, width: "16", height: "16", **system_arguments)
         }
       }
 
@@ -81,55 +86,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
+        ::Primer::ViewComponents.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
 
         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+")

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

@@ -45,17 +45,6 @@ module Primer
         Primer::BaseComponent.new(**system_arguments)
       }
 
-      # @example Default
-      #
-      #   <%= render Primer::Beta::Details.new do |component| %>
-      #     <% component.with_summary do %>
-      #       Summary
-      #     <% end %>
-      #     <% component.with_body do %>
-      #       Body
-      #     <% end %>
-      #   <% end %>
-      #
       # @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Primer::Beta::Details::OVERLAY_MAPPINGS.keys) %>
       # @param reset [Boolean] Defaults to false. If set to true, it will remove the default caret and remove style from the summary element
       # @param disabled [Boolean] Whether or not to disable the summary button.

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

@@ -1 +1 @@
-.flash:not(.Banner){background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border-color:var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,6px);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem));color:var(--fgColor-default,var(--color-fg-default));padding:var(--base-size-20,1.25rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent,var(--color-accent-fg));margin-right:var(--base-size-12,.75rem)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious,1.5rem)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin:calc(var(--control-medium-paddingInline-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious,1.5rem);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--fgColor-muted,var(--color-fg-muted));margin-right:var(--control-small-gap,.25rem)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)),var(--bgColor-attention-muted,var(--color-attention-subtle)));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.flash-error:not(.Banner){background-image:linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)),var(--bgColor-danger-muted,var(--color-danger-subtle)));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.flash-success:not(.Banner){background-image:linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)),var(--bgColor-success-muted,var(--color-success-subtle)));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success,var(--color-success-fg))}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--bgColor-default,var(--color-canvas-default))}.warning{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}
+.flash:not(.Banner){background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border-color:var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,.375rem);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem));color:var(--fgColor-default,var(--color-fg-default));padding:var(--base-size-20,1.25rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent,var(--color-accent-fg));margin-right:var(--base-size-12,.75rem)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious,1.5rem)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin-top:calc(var(--base-size-4,.25rem)*-1);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious,1.5rem);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--fgColor-muted,var(--color-fg-muted));margin-right:var(--control-small-gap,.25rem)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)),var(--bgColor-attention-muted,var(--color-attention-subtle)));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.flash-error:not(.Banner){background-image:linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)),var(--bgColor-danger-muted,var(--color-danger-subtle)));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.flash-success:not(.Banner){background-image:linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)),var(--bgColor-success-muted,var(--color-success-subtle)));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success,var(--color-success-fg))}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--bgColor-default,var(--color-canvas-default))}.warning{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}

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

@@ -1 +1 @@
-{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,+IAA2F,CAC3F,sEAA6C,CAL7C,4CAAyC,CAFzC,kBAAmB,CACnB,sDAAqC,CAIrC,oDAA6B,CAN7B,qFAAyE,CADzE,iBAmBF,CARE,6BACE,kDAA4B,CAC5B,uCACF,CAEA,iCACE,eACF,CAIF,gBACE,8CACF,CAGA,gCAUE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAJf,WAAY,CAEZ,iEAA+D,CAD/D,yDAAqD,CAErD,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,4CAAsC,CADtC,eAgBF,CAZE,gDAEE,gDAA2B,CAD3B,4CAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,2JAAiG,CACjG,4EAAgD,CAFhD,oDAOF,CAHE,kCACE,wDACF,CAGF,0BAEE,+IAA2F,CAC3F,sEAA6C,CAF7C,oDAOF,CAHE,mCACE,kDACF,CAGF,4BAEE,mJAA6F,CAC7F,wEAA8C,CAF9C,oDAOF,CAHE,qCACE,oDACF,CAKF,yBAGE,eAAgB,CADhB,wDAAuC,CADvC,8DAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,mEACF,CAGA,SAIE,6EAAgD,CADhD,gDAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n  position: relative;\n  padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-radius: var(--borderRadius-medium);\n\n  /* Default color */\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n  border-color: var(--borderColor-accent-muted);\n\n  & .octicon {\n    color: var(--fgColor-accent);\n    margin-right: var(--base-size-12);\n  }\n\n  & p:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n  margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n  float: right;\n  padding: var(--control-medium-paddingInline-spacious);\n  margin: calc(var(--control-medium-paddingInline-spacious) * -1);\n  text-align: center;\n  cursor: pointer;\n\n  /* Undo `<button>` styles */\n  background: none;\n  border: 0;\n  appearance: none;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &:active {\n    opacity: 0.5;\n  }\n\n  & .octicon {\n    margin-right: 0;\n  }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n  float: right;\n  margin-top: -3px;\n  margin-left: var(--stack-gap-spacious);\n  background-clip: padding-box;\n\n  &.btn .octicon {\n    margin-right: var(--control-small-gap);\n    color: var(--fgColor-muted);\n  }\n\n  &.btn-primary {\n    background-clip: border-box;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n  border-color: var(--borderColor-attention-muted);\n\n  & .octicon {\n    color: var(--fgColor-attention);\n  }\n}\n\n.flash-error:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n  border-color: var(--borderColor-danger-muted);\n\n  & .octicon {\n    color: var(--fgColor-danger);\n  }\n}\n\n.flash-success:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n  border-color: var(--borderColor-success-muted);\n\n  & .octicon {\n    color: var(--fgColor-success);\n  }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n  margin-top: calc(var(--borderWidth-thin) * -1);\n  border-width: var(--borderWidth-thin) 0;\n  border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n  position: fixed;\n  top: 0;\n  z-index: 90;\n  width: 100%;\n  border-top: 0;\n  border-right: 0;\n  border-left: 0;\n  border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n  background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n  padding: 0.5em;\n  margin-bottom: 0.8em;\n  font-weight: var(--base-text-weight-semibold);\n  background-color: var(--bgColor-attention-muted);\n}\n"]}
+{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,+IAA2F,CAC3F,sEAA6C,CAL7C,gDAAyC,CAFzC,kBAAmB,CACnB,sDAAqC,CAIrC,oDAA6B,CAN7B,qFAAyE,CADzE,iBAmBF,CARE,6BACE,kDAA4B,CAC5B,uCACF,CAEA,iCACE,eACF,CAIF,gBACE,8CACF,CAGA,gCASE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAHf,WAAY,CACZ,6CAAyC,CACzC,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,4CAAsC,CADtC,eAgBF,CAZE,gDAEE,gDAA2B,CAD3B,4CAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,2JAAiG,CACjG,4EAAgD,CAFhD,oDAOF,CAHE,kCACE,wDACF,CAGF,0BAEE,+IAA2F,CAC3F,sEAA6C,CAF7C,oDAOF,CAHE,mCACE,kDACF,CAGF,4BAEE,mJAA6F,CAC7F,wEAA8C,CAF9C,oDAOF,CAHE,qCACE,oDACF,CAKF,yBAGE,eAAgB,CADhB,wDAAuC,CADvC,8DAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,mEACF,CAGA,SAIE,6EAAgD,CADhD,gDAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n  position: relative;\n  padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-radius: var(--borderRadius-medium);\n\n  /* Default color */\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n  border-color: var(--borderColor-accent-muted);\n\n  & .octicon {\n    color: var(--fgColor-accent);\n    margin-right: var(--base-size-12);\n  }\n\n  & p:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n  margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n  float: right;\n  margin-top: calc(var(--base-size-4) * -1);\n  text-align: center;\n  cursor: pointer;\n\n  /* Undo `<button>` styles */\n  background: none;\n  border: 0;\n  appearance: none;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &:active {\n    opacity: 0.5;\n  }\n\n  & .octicon {\n    margin-right: 0;\n  }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n  float: right;\n  margin-top: -3px;\n  margin-left: var(--stack-gap-spacious);\n  background-clip: padding-box;\n\n  &.btn .octicon {\n    margin-right: var(--control-small-gap);\n    color: var(--fgColor-muted);\n  }\n\n  &.btn-primary {\n    background-clip: border-box;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n  border-color: var(--borderColor-attention-muted);\n\n  & .octicon {\n    color: var(--fgColor-attention);\n  }\n}\n\n.flash-error:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n  border-color: var(--borderColor-danger-muted);\n\n  & .octicon {\n    color: var(--fgColor-danger);\n  }\n}\n\n.flash-success:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n  border-color: var(--borderColor-success-muted);\n\n  & .octicon {\n    color: var(--fgColor-success);\n  }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n  margin-top: calc(var(--borderWidth-thin) * -1);\n  border-width: var(--borderWidth-thin) 0;\n  border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n  position: fixed;\n  top: 0;\n  z-index: 90;\n  width: 100%;\n  border-top: 0;\n  border-right: 0;\n  border-left: 0;\n  border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n  background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n  padding: 0.5em;\n  margin-bottom: 0.8em;\n  font-weight: var(--base-text-weight-semibold);\n  background-color: var(--bgColor-attention-muted);\n}\n"]}

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

@@ -1,9 +1,7 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <%= primer_octicon @icon if @icon %><%= content %>
   <% if @dismissible %>
-    <button class="flash-close js-flash-close" type="button" aria-label="Close">
-      <%= primer_octicon "x" %>
-    </button>
+    <%= render Primer::Beta::IconButton.new(icon: :x, scheme: :invisible, wrapper_arguments: { classes: "flash-close" }, classes: "js-flash-close", "aria-label": "Dismiss alert") %>
   <% end %>
 
   <%= action %>

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

@@ -31,8 +31,7 @@
 /* Close button */
 .flash-close:not(.Banner-close) {
   float: right;
-  padding: var(--control-medium-paddingInline-spacious);
-  margin: calc(var(--control-medium-paddingInline-spacious) * -1);
+  margin-top: calc(var(--base-size-4) * -1);
   text-align: center;
   cursor: pointer;
 

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

@@ -24,29 +24,7 @@ module Primer
         :danger => "flash-error",
         :success => "flash-success"
       }.freeze
-      # @example Schemes
-      #   <%= render(Primer::Beta::Flash.new) { "This is a flash message!" } %>
-      #   <%= render(Primer::Beta::Flash.new(scheme: :warning)) { "This is a warning flash message!" } %>
-      #   <%= render(Primer::Beta::Flash.new(scheme: :danger)) { "This is a danger flash message!" } %>
-      #   <%= render(Primer::Beta::Flash.new(scheme: :success)) { "This is a success flash message!" } %>
-      #
-      # @example Full width
-      #   <%= render(Primer::Beta::Flash.new(full: true)) { "This is a full width flash message!" } %>
-      #
-      # @example Dismissible
-      #   <%= render(Primer::Beta::Flash.new(dismissible: true)) { "This is a dismissible flash message!" } %>
-      #
-      # @example Icon
-      #   <%= render(Primer::Beta::Flash.new(icon: :people)) { "This is a flash message with an icon!" } %>
-      #
-      # @example With actions
-      #   <%= render(Primer::Beta::Flash.new) do |component| %>
-      #     This is a flash message with actions!
-      #     <% component.with_action do %>
-      #       <%= render(Primer::ButtonComponent.new(size: :small)) { "Take action" } %>
-      #     <% end %>
-      #   <% end %>
-      #
+
       # @param full [Boolean] Whether the component should take up the full width of the screen.
       # @param spacious [Boolean] Whether to add margin to the bottom of the component.
       # @param dismissible [Boolean] Whether the component can be dismissed with an X button.

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

@@ -23,14 +23,6 @@ module Primer
       TAG_FALLBACK = :h2
       TAG_OPTIONS = [:h1, TAG_FALLBACK, :h3, :h4, :h5, :h6].freeze
 
-      # @example Default
-      #   <%= render(Primer::Beta::Heading.new(tag: :h1)) { "H1 Text" } %>
-      #   <%= render(Primer::Beta::Heading.new(tag: :h2)) { "H2 Text" } %>
-      #   <%= render(Primer::Beta::Heading.new(tag: :h3)) { "H3 Text" } %>
-      #   <%= render(Primer::Beta::Heading.new(tag: :h4)) { "H4 Text" } %>
-      #   <%= render(Primer::Beta::Heading.new(tag: :h5)) { "H5 Text" } %>
-      #   <%= render(Primer::Beta::Heading.new(tag: :h6)) { "H6 Text" } %>
-      #
       # @param tag [String]  <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(tag:, **system_arguments)

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

@@ -25,27 +25,6 @@ module Primer
       }.freeze
       SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
 
-      # @example Default
-      #
-      #   <%= render(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search", id: "search-button")) %>
-      #
-      # @example Schemes
-      #
-      #   <%= render(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search")) %>
-      #   <%= render(Primer::Beta::IconButton.new(icon: :trash, "aria-label": "Delete", scheme: :danger)) %>
-      #
-      # @example With an `aria-description`
-      #   @description
-      #     If you need to have a longer description for the icon button, use both the `aria-label` and `aria-description`
-      #     attributes. A label should be short and concise, while the description can be longer as it is intended to provide
-      #     more context and information. See the accessibility section for more information.
-      #   @code
-      #     <%= render(Primer::Beta::IconButton.new(icon: :bold, "aria-label": "Bold", "aria-description": "Add bold text, Cmd+b")) %>
-      #
-      # @example Custom tooltip direction
-      #
-      #   <%= render(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search", tooltip_direction: :e)) %>
-      #
       # @param icon [String] Name of <%= link_to_octicons %> to use.
       # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
       # @param wrapper_arguments [Hash] Optional keyword arguments to be passed to the wrapper `<div>` tag.

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

@@ -1 +1 @@
-.labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:2em;display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:18px;padding:0 7px;white-space:nowrap}.Label:hover,.label:hover{text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-default,var(--color-fg-default))}.Label--secondary{border-color:var(--borderColor-default,var(--color-border-default));color:var(--fgColor-muted,var(--color-fg-muted))}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis,var(--color-accent-fg));color:var(--fgColor-accent,var(--color-accent-fg))}.Label--success{border-color:var(--borderColor-success-emphasis,var(--color-success-emphasis));color:var(--fgColor-success,var(--color-success-fg))}.Label--attention,.Label--warning{border-color:var(--borderColor-attention-emphasis,var(--color-attention-emphasis));color:var(--fgColor-attention,var(--color-attention-fg))}.Label--severe{border-color:var(--borderColor-severe-emphasis,var(--color-severe-emphasis));color:var(--fgColor-severe,var(--color-severe-fg))}.Label--danger{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis));color:var(--fgColor-danger,var(--color-danger-fg))}.Label--open{border-color:var(--borderColor-open-emphasis,var(--color-open-emphasis));color:var(--fgColor-open,var(--color-open-fg))}.Label--closed{border-color:var(--borderColor-closed-emphasis,var(--color-closed-emphasis));color:var(--fgColor-closed,var(--color-closed-fg))}.Label--done{border-color:var(--borderColor-done-emphasis,var(--color-done-emphasis));color:var(--fgColor-done,var(--color-done-fg))}.Label--sponsors{border-color:var(--borderColor-sponsors-emphasis,var(--color-sponsors-emphasis));color:var(--fgColor-sponsors,var(--color-sponsors-fg))}
+.labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:2em;display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:18px;padding:0 7px;white-space:nowrap}.Label:hover,.label:hover{text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-default,var(--color-fg-default))}.Label--secondary{border-color:var(--borderColor-default,var(--color-border-default));color:var(--fgColor-muted,var(--color-fg-muted))}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-accent,var(--color-accent-fg))}.Label--success{border-color:var(--borderColor-success-emphasis,var(--color-success-emphasis));color:var(--fgColor-success,var(--color-success-fg))}.Label--attention,.Label--warning{border-color:var(--borderColor-attention-emphasis,var(--color-attention-emphasis));color:var(--fgColor-attention,var(--color-attention-fg))}.Label--severe{border-color:var(--borderColor-severe-emphasis,var(--color-severe-emphasis));color:var(--fgColor-severe,var(--color-severe-fg))}.Label--danger{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis));color:var(--fgColor-danger,var(--color-danger-fg))}.Label--open{border-color:var(--borderColor-open-emphasis,var(--color-open-emphasis));color:var(--fgColor-open,var(--color-open-fg))}.Label--closed{border-color:var(--borderColor-closed-emphasis,var(--color-closed-emphasis));color:var(--fgColor-closed,var(--color-closed-fg))}.Label--done{border-color:var(--borderColor-done-emphasis,var(--color-done-emphasis));color:var(--fgColor-done,var(--color-done-fg))}.Label--sponsors{border-color:var(--borderColor-sponsors-emphasis,var(--color-sponsors-emphasis));color:var(--fgColor-sponsors,var(--color-sponsors-fg))}

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

@@ -1 +1 @@
-{"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,6GAAgE,CAChE,iBAAkB,CAPlB,oBAAqB,CAErB,4CAAsC,CACtC,8CAA2C,CAC3C,gBAAiB,CAHjB,aAAc,CAId,kBAOF,CAHE,0BACE,oBACF,CAKF,cAGE,gBAAiB,CADjB,iBAAkB,CADlB,kBAGF,CAMA,eACE,cAAe,CAEf,aAAc,CADd,kBAEF,CAIA,gBAEE,uEAAiD,CADjD,oDAEF,CAEA,kBAEE,mEAAwC,CADxC,gDAEF,CAIA,4BAGE,sEAAgD,CADhD,kDAEF,CAEA,gBAEE,8EAAiD,CADjD,oDAEF,CAEA,kCAGE,kFAAmD,CADnD,wDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,iBAEE,gFAAkD,CADlD,sDAEF","file":"label.css","sourcesContent":["/* Labels */\n\n/* Provide a wrapper to ensure labels stick together */\n.labels {\n  position: relative;\n}\n\n/* Default 20px */\n\n.label, /* TODO: Deprecate */\n.Label {\n  display: inline-block;\n  padding: 0 7px;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-medium);\n  line-height: 18px;\n  white-space: nowrap;\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: 2em;\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* Large 24px */\n\n.Label--large {\n  padding-right: 10px;\n  padding-left: 10px;\n  line-height: 22px;\n}\n\n/* Inline */\n\n/* Doesn't increase height of parent element\n** Can be used with different font-sizes */\n.Label--inline {\n  display: inline;\n  padding: 0.12em 0.5em;\n  font-size: 85%;\n}\n\n/* Contrast */\n\n.Label--primary {\n  color: var(--fgColor-default);\n  border-color: var(--borderColor-neutral-emphasis);\n}\n\n.Label--secondary {\n  color: var(--fgColor-muted);\n  border-color: var(--borderColor-default);\n}\n\n/* Colors */\n\n.Label--info, /* TODO: deprecate */\n.Label--accent {\n  color: var(--fgColor-accent);\n  border-color: var(--borderColor-accent-emphasis);\n}\n\n.Label--success {\n  color: var(--fgColor-success);\n  border-color: var(--borderColor-success-emphasis);\n}\n\n.Label--warning, /* TODO: deprecate */\n.Label--attention {\n  color: var(--fgColor-attention);\n  border-color: var(--borderColor-attention-emphasis);\n}\n\n.Label--severe {\n  color: var(--fgColor-severe);\n  border-color: var(--borderColor-severe-emphasis);\n}\n\n.Label--danger {\n  color: var(--fgColor-danger);\n  border-color: var(--borderColor-danger-emphasis);\n}\n\n.Label--open {\n  color: var(--fgColor-open);\n  border-color: var(--borderColor-open-emphasis);\n}\n\n.Label--closed {\n  color: var(--fgColor-closed);\n  border-color: var(--borderColor-closed-emphasis);\n}\n\n.Label--done {\n  color: var(--fgColor-done);\n  border-color: var(--borderColor-done-emphasis);\n}\n\n.Label--sponsors {\n  color: var(--fgColor-sponsors);\n  border-color: var(--borderColor-sponsors-emphasis);\n}\n"]}
+{"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,6GAAgE,CAChE,iBAAkB,CAPlB,oBAAqB,CAErB,4CAAsC,CACtC,8CAA2C,CAC3C,gBAAiB,CAHjB,aAAc,CAId,kBAOF,CAHE,0BACE,oBACF,CAKF,cAGE,gBAAiB,CADjB,iBAAkB,CADlB,kBAGF,CAMA,eACE,cAAe,CAEf,aAAc,CADd,kBAEF,CAIA,gBAEE,uEAAiD,CADjD,oDAEF,CAEA,kBAEE,mEAAwC,CADxC,gDAEF,CAIA,4BAGE,4EAAgD,CADhD,kDAEF,CAEA,gBAEE,8EAAiD,CADjD,oDAEF,CAEA,kCAGE,kFAAmD,CADnD,wDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,iBAEE,gFAAkD,CADlD,sDAEF","file":"label.css","sourcesContent":["/* Labels */\n\n/* Provide a wrapper to ensure labels stick together */\n.labels {\n  position: relative;\n}\n\n/* Default 20px */\n\n.label, /* TODO: Deprecate */\n.Label {\n  display: inline-block;\n  padding: 0 7px;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-medium);\n  line-height: 18px;\n  white-space: nowrap;\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: 2em;\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* Large 24px */\n\n.Label--large {\n  padding-right: 10px;\n  padding-left: 10px;\n  line-height: 22px;\n}\n\n/* Inline */\n\n/* Doesn't increase height of parent element\n** Can be used with different font-sizes */\n.Label--inline {\n  display: inline;\n  padding: 0.12em 0.5em;\n  font-size: 85%;\n}\n\n/* Contrast */\n\n.Label--primary {\n  color: var(--fgColor-default);\n  border-color: var(--borderColor-neutral-emphasis);\n}\n\n.Label--secondary {\n  color: var(--fgColor-muted);\n  border-color: var(--borderColor-default);\n}\n\n/* Colors */\n\n.Label--info, /* TODO: deprecate */\n.Label--accent {\n  color: var(--fgColor-accent);\n  border-color: var(--borderColor-accent-emphasis);\n}\n\n.Label--success {\n  color: var(--fgColor-success);\n  border-color: var(--borderColor-success-emphasis);\n}\n\n.Label--warning, /* TODO: deprecate */\n.Label--attention {\n  color: var(--fgColor-attention);\n  border-color: var(--borderColor-attention-emphasis);\n}\n\n.Label--severe {\n  color: var(--fgColor-severe);\n  border-color: var(--borderColor-severe-emphasis);\n}\n\n.Label--danger {\n  color: var(--fgColor-danger);\n  border-color: var(--borderColor-danger-emphasis);\n}\n\n.Label--open {\n  color: var(--fgColor-open);\n  border-color: var(--borderColor-open-emphasis);\n}\n\n.Label--closed {\n  color: var(--fgColor-closed);\n  border-color: var(--borderColor-closed-emphasis);\n}\n\n.Label--done {\n  color: var(--fgColor-done);\n  border-color: var(--borderColor-done-emphasis);\n}\n\n.Label--sponsors {\n  color: var(--fgColor-sponsors);\n  border-color: var(--borderColor-sponsors-emphasis);\n}\n"]}

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

@@ -46,26 +46,6 @@ module Primer
 
       INLINE_CLASS = "Label--inline"
 
-      # @example Schemes
-      #   <%= render(Primer::Beta::Label.new) { "Default" } %>
-      #   <%= render(Primer::Beta::Label.new(scheme: :primary)) { "Primary" } %>
-      #   <%= render(Primer::Beta::Label.new(scheme: :secondary)) { "Secondary" } %>
-      #   <%= render(Primer::Beta::Label.new(scheme: :accent)) { "Accent" } %>
-      #   <%= render(Primer::Beta::Label.new(scheme: :success)) { "Success" } %>
-      #   <%= render(Primer::Beta::Label.new(scheme: :attention)) { "Attention" } %>
-      #   <%= render(Primer::Beta::Label.new(scheme: :danger)) { "Danger" } %>
-      #   <%= render(Primer::Beta::Label.new(scheme: :severe)) { "Severe" } %>
-      #   <%= render(Primer::Beta::Label.new(scheme: :done)) { "Done" } %>
-      #   <%= render(Primer::Beta::Label.new(scheme: :sponsors)) { "Sponsors" } %>
-      #
-      # @example Sizes
-      #   <%= render(Primer::Beta::Label.new) { "Medium" } %>
-      #   <%= render(Primer::Beta::Label.new(size: :large)) { "Large" } %>
-      #
-      # @example Inline
-      #   <%= render(Primer::Beta::Label.new) { "Default" } %>
-      #   <%= render(Primer::Beta::Label.new(inline: true)) { "Inline" } %>
-      #
       # @param tag [Symbol] <%= one_of(Primer::Beta::Label::TAG_OPTIONS) %>
       # @param scheme [Symbol] <%= one_of(Primer::Beta::Label::SCHEME_MAPPINGS.keys) %>
       # @param size [Symbol] <%= one_of(Primer::Beta::Label::SIZE_OPTIONS) %>

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

@@ -30,28 +30,6 @@ module Primer
         Primer::Alpha::Tooltip.new(**system_arguments)
       }
 
-      # @example Default
-      #   <%= render(Primer::Beta::Link.new(href: "#")) { "Link" } %>
-      #
-      # @example Muted
-      #   <%= render(Primer::Beta::Link.new(href: "#", muted: true)) { "Link" } %>
-      #
-      # @example Schemes
-      #   <%= render(Primer::Beta::Link.new(href: "#", scheme: :primary)) { "Primary" } %>
-      #   <%= render(Primer::Beta::Link.new(href: "#", scheme: :secondary)) { "Secondary" } %>
-      #
-      # @example Without underline
-      #   <%= render(Primer::Beta::Link.new(href: "#", underline: false)) { "Link" } %>
-      #
-      # @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::Link.new(href: "#", id: "link-with-tooltip")) do |component| %>
-      #       <% component.with_tooltip(text: "Tooltip text") %>
-      #       Link
-      #     <% end %>
-      #
       # @param href [String] URL to be used for the Link. Required. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
       # @param scheme [Symbol] <%= one_of(Primer::Beta::Link::SCHEME_MAPPINGS.keys) %>
       # @param muted [Boolean] Uses light gray for Link color, and blue on hover.