primer_view_components 0.0.86 → 0.0.89

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f85b7d98dc85b59a5312ea5c3c5cfe35c966a1ad495263837032249bc7782d89
-  data.tar.gz: d4829969cc3672f7e3e492e3179d48f75fe9cd2299fa03b2153b5d2892ed04b4
+  metadata.gz: 549fdec61b2c1c8c5ae3632f2cc567939f00e7679c7b350e86198e6c50db00fe
+  data.tar.gz: e2ea2f9570dbb93b53c5cddc6d4e98f1ed7b6918b4c7f1a879179b48ccfda0b3
 SHA512:
-  metadata.gz: 7270b517ed8032991f97b9369975704fb8596efaf5867f73987b8a0993ef9809df91a4e3673ceb17e29699cb975143ce5644c677ac68149b54e28ada734d2df8
-  data.tar.gz: e512281e87914e23b3dd7b24c1bd5b1bd89d531e97f733687f872dc8d2bff56079810f5017686af4b84ee7cd05e56e1231d56058a67ccbaca1b0b0ea0c210928
+  metadata.gz: cd33068d7ba46698d4e31afff8bf2edbb51472d04fdddd3a776835721ee80bf56e2fe2c398fd8545a66cdf1250b65b55f567ce488e14791737a6ccc955e54e90
+  data.tar.gz: 7bc316d92551cd6cfd15108fd864ad39a9322f3988936dc8d6aab73583d1ece0f8be035cadd637d2a352ea96ac2722b752926ee6e6136f6c61bdb70b4388f9e5

data/CHANGELOG.md

@@ -1,5 +1,39 @@
 # CHANGELOG
 
+## 0.0.89
+
+### Patch Changes
+
+- [#1284](https://github.com/primer/view_components/pull/1284) [`401dac2a`](https://github.com/primer/view_components/commit/401dac2a1ab2e026b231399ddb03cfb51bc7742f) Thanks [@jonrohan](https://github.com/jonrohan)! - Don't render tooltip on IconButton when tag is a summary element
+
+* [#1283](https://github.com/primer/view_components/pull/1283) [`ea1c29d7`](https://github.com/primer/view_components/commit/ea1c29d7fa0d917a729cba684bf5f8ae039bb228) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating label component to not always have large
+
+## 0.0.88
+
+### Patch Changes
+
+- [#1275](https://github.com/primer/view_components/pull/1275) [`1e9ce95c`](https://github.com/primer/view_components/commit/1e9ce95cdc942acdb51807839b2924731a1ab295) Thanks [@mxriverlynn](https://github.com/mxriverlynn)! - move Primer::ButtonGroup to Primer::Beta::ButtonGroup, update all references, and add deprecated Primer::ButtonGroup for backwards compatibility
+
+* [#1266](https://github.com/primer/view_components/pull/1266) [`7d2949de`](https://github.com/primer/view_components/commit/7d2949de758b97aa940287a1ceabd5d16209cae2) Thanks [@mxriverlynn](https://github.com/mxriverlynn)! - moving Primer::BoxComponent to Primer::Box and creating deprecated Primer::BoxComponent for backward compatibility
+
+- [#1281](https://github.com/primer/view_components/pull/1281) [`843061de`](https://github.com/primer/view_components/commit/843061de168a1927a80fd22e7da795c1a9ddaacd) Thanks [@jonrohan](https://github.com/jonrohan)! - Always set `:absolute` position on Primer::Alpha::Tooltip
+
+* [#934](https://github.com/primer/view_components/pull/934) [`d638fefb`](https://github.com/primer/view_components/commit/d638fefbb55ce9802e91b374903bcde9cc6ab612) Thanks [@pouretrebelle](https://github.com/pouretrebelle)! - Refactor the LabelComponent API
+
+## 0.0.87
+
+### Patch Changes
+
+- [#1274](https://github.com/primer/view_components/pull/1274) [`c153f734`](https://github.com/primer/view_components/commit/c153f734a891fc3bc7dfc3bed34630ff38ab39d7) Thanks [@jonrohan](https://github.com/jonrohan)! - Fixing whitespace in rendered LinkComponent
+
+* [#1273](https://github.com/primer/view_components/pull/1273) [`f38517ac`](https://github.com/primer/view_components/commit/f38517acf1aed43b27f2c6b94634d70b124883e6) Thanks [@camertron](https://github.com/camertron)! - Revert removal of BlankslateComponent
+
+- [#1270](https://github.com/primer/view_components/pull/1270) [`44919308`](https://github.com/primer/view_components/commit/4491930812d16a9bcb5d8f05b4d94e49e469afa5) Thanks [@camertron](https://github.com/camertron)! - Use a custom form builder; introduce primer_form_for
+
+* [#1269](https://github.com/primer/view_components/pull/1269) [`9ae9615f`](https://github.com/primer/view_components/commit/9ae9615f31acf43875feb89661cac6311527f9fd) Thanks [@mxriverlynn](https://github.com/mxriverlynn)! - updating component migrator script with improvements in component reference updates, deprecations, etc.
+
+- [#1276](https://github.com/primer/view_components/pull/1276) [`759ea56f`](https://github.com/primer/view_components/commit/759ea56f00cbe3e536f4e558a9fb9a3e1b89bf7b) Thanks [@mxriverlynn](https://github.com/mxriverlynn)! - correcting the updates to nav.yml in the component status migrator
+
 ## 0.0.86
 
 ### Patch Changes

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

@@ -6,7 +6,7 @@ module Primer
 
     # A text field suitable for use outside a form. For a text field input suitable for use
     # within an HTML form, see the `Primer::Forms` namespace.
-    class TextField
+    class TextField < Primer::Component
       status :alpha
 
       # @!method initialize

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

@@ -91,6 +91,7 @@ module Primer
         @system_arguments[:tag] = :"tool-tip"
         @system_arguments[:style] = join_style_arguments(@system_arguments[:style], "visibility: hidden")
         @system_arguments[:for] = for_id
+        @system_arguments[:position] = :absolute
         @system_arguments[:"data-direction"] = fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT).to_s
         @system_arguments[:"data-type"] = fetch_or_fallback(TYPE_OPTIONS, type, TYPE_FALLBACK).to_s
       end

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

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `ButtonGroup` to render a series of buttons.
+    class ButtonGroup < Primer::Component
+      status :beta
+
+      # Required list of buttons to be rendered.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::ButtonComponent) %> except for `size` and `group_item`.
+      renders_many :buttons, lambda { |**kwargs|
+        kwargs[:group_item] = true
+        kwargs[:size] = @size
+
+        Primer::ButtonComponent.new(**kwargs)
+      }
+
+      # @example Default
+      #
+      #   <%= render(Primer::Beta::ButtonGroup.new) do |component| %>
+      #     <% component.button { "Default" } %>
+      #     <% component.button(scheme: :primary) { "Primary" } %>
+      #     <% component.button(scheme: :danger) { "Danger" } %>
+      #     <% component.button(scheme: :outline) { "Outline" } %>
+      #     <% component.button(classes: "custom-class") { "Custom class" } %>
+      #   <% end %>
+      #
+      # @example Sizes
+      #
+      #   <%= render(Primer::Beta::ButtonGroup.new(size: :small)) do |component| %>
+      #     <% component.button { "Default" } %>
+      #     <% component.button(scheme: :primary) { "Primary" } %>
+      #     <% component.button(scheme: :danger) { "Danger" } %>
+      #     <% component.button(scheme: :outline) { "Outline" } %>
+      #   <% end %>
+      #
+      # @param variant [Symbol] DEPRECATED. <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
+      # @param size [Symbol] <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(variant: nil, size: Primer::ButtonComponent::DEFAULT_SIZE, **system_arguments)
+        @size = variant || size
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+
+        @system_arguments[:classes] = class_names(
+          "BtnGroup",
+          system_arguments[:classes]
+        )
+      end
+
+      def render?
+        buttons.any?
+      end
+    end
+  end
+end

data/app/components/primer/blankslate_component.html.erb

@@ -0,0 +1,25 @@
+<%# erblint:counter ButtonComponentMigrationCounter 1 %>
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% if spinner.present? %>
+    <%= spinner %>
+  <% elsif @icon.present? %>
+    <%= primer_octicon @icon, size: @icon_size, classes: "blankslate-icon" %>
+  <% elsif @image_src.present? && @image_alt.present? %>
+    <%= image_tag @image_src.to_s, class: "mb-3", size: "56x56", alt: @image_alt.to_s %>
+  <% end %>
+  <% if @title.present? %>
+    <%= render Primer::BaseComponent.new(tag: @title_tag, mb: 1) do %><%= @title %><% end %>
+  <% end %>
+  <% if @description.present? %>
+    <p><%= @description %></p>
+  <% end %>
+  <%= content %>
+  <% if @button_text.present? && @button_url.present? %>
+    <a class="btn <%= @button_classes %>" href="<%= @button_url %>"><%= @button_text %></a>
+  <% end %>
+  <% if @link_text.present? && @link_url.present? %>
+    <p>
+      <%= link_to @link_url.to_s do %><%= @link_text %><% end %>
+    </p>
+  <% end %>
+<% end %>

data/app/components/primer/blankslate_component.rb

@@ -1,8 +1,156 @@
 # frozen_string_literal: true
 
 module Primer
-  # BlankslateComponent is deprecated. Please use `Primer::Beta::Blankslate` instead.
-  class BlankslateComponent < Primer::Beta::Blankslate
+  # Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.
+  # @accessibility
+  #   `Blankslate` renders an `<h3>` element for the title by default. Update the heading level based on what is appropriate for your page hierarchy by setting `title_tag`.
+  #   <%= link_to_heading_practices %>
+  class BlankslateComponent < Primer::Component
     status :deprecated
+
+    # Optional Spinner.
+    #
+    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::SpinnerComponent) %>.
+    renders_one :spinner, lambda { |**system_arguments|
+      system_arguments[:mb] ||= 3
+      Primer::SpinnerComponent.new(**system_arguments)
+    }
+
+    #
+    # @example Basic
+    #   <%= render Primer::BlankslateComponent.new(
+    #     title: "Title",
+    #     description: "Description",
+    #   ) %>
+    #
+    # @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::BlankslateComponent.new(
+    #       icon: :globe,
+    #       title: "Title",
+    #       description: "Description",
+    #     ) %>
+    #
+    # @example Loading
+    #   @description
+    #     Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       title: "Title",
+    #       description: "Description",
+    #     ) do |component| %>
+    #       <% component.spinner(size: :large) %>
+    #     <% end %>
+    #
+    # @example Custom content
+    #   @description
+    #     Pass custom content as a block in place of `description`.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       title: "Title",
+    #     ) do %>
+    #       <em>Your custom content here</em>
+    #     <% end %>
+    #
+    # @example Action button
+    #   @description
+    #     Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       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.",
+    #
+    #       button_text: "Create the first page",
+    #       button_url: "https://github.com/monalisa/mona/wiki/_new",
+    #     ) %>
+    #
+    # @example Link
+    #   @description
+    #     Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       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.",
+    #       link_text: "Learn more about wikis",
+    #       link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
+    #     ) %>
+    #
+    # @example Variations
+    #   @description
+    #     There are a few variations of how the Blankslate appears: `narrow` adds a maximum width, `large` increases the font size, and `spacious` adds extra padding.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       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.",
+    #       narrow: true,
+    #       large: true,
+    #       spacious: true,
+    #     ) %>
+    #
+    # @param title [String] Text that appears in a larger bold font.
+    # @param title_tag [Symbol] HTML tag to use for title.
+    # @param icon [Symbol] Octicon icon to use at top of component.
+    # @param icon_size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS, sort: false) %>
+    # @param image_src [String] Image to display.
+    # @param image_alt [String] Alt text for image.
+    # @param description [String] Text that appears below the title. Typically a whole sentence.
+    # @param button_text [String] The text of the button.
+    # @param button_url [String] The URL where the user will be taken after clicking the button.
+    # @param button_classes [String] Classes to apply to action button
+    # @param link_text [String] The text of the link.
+    # @param link_url [String] The URL where the user will be taken after clicking the link.
+    # @param narrow [Boolean] Adds a maximum width.
+    # @param large [Boolean] Increases the font size.
+    # @param spacious [Boolean] Adds extra padding.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(
+      title: "",
+      title_tag: :h3,
+      icon: "",
+      icon_size: :medium,
+      image_src: "",
+      image_alt: " ",
+      description: "",
+      button_text: "",
+      button_url: "",
+      button_classes: "btn-primary my-3",
+      link_text: "",
+      link_url: "",
+
+      # variations
+      narrow: false,
+      large: false,
+      spacious: false,
+
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = :div
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "blankslate",
+        "blankslate-narrow": narrow,
+        "blankslate-large": large,
+        "blankslate-spacious": spacious
+      )
+
+      @title_tag = title_tag
+      @icon = icon
+      @icon_size = icon_size
+      @image_src = image_src
+      @image_alt = image_alt
+      @title = title
+      @description = description
+      @button_text = button_text
+      @button_url = button_url
+      @button_classes = button_classes
+      @link_text = link_text
+      @link_url = link_url
+    end
   end
 end

data/app/components/primer/box.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Primer
+  # `Box` is a basic wrapper component for most layout related needs.
+  class Box < Primer::Component
+    status :stable
+
+    # @example Default
+    #   <%= render(Primer::Box.new) { "Your content here" } %>
+    #
+    # @example Color and padding
+    #   <%= render(Primer::Box.new(bg: :subtle, p: 3)) { "Hello world" } %>
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(**system_arguments)
+      @system_arguments = deny_tag_argument(**system_arguments)
+
+      @system_arguments[:tag] = :div
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/primer/box_component.rb

@@ -1,25 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # `Box` is a basic wrapper component for most layout related needs.
-  class BoxComponent < Primer::Component
-    status :stable
-
-    # @example Default
-    #   <%= render(Primer::BoxComponent.new) { "Your content here" } %>
-    #
-    # @example Color and padding
-    #   <%= render(Primer::BoxComponent.new(bg: :subtle, p: 3)) { "Hello world" } %>
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(**system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-
-      @system_arguments[:tag] = :div
-    end
-
-    def call
-      render(Primer::BaseComponent.new(**@system_arguments)) { content }
-    end
+  class BoxComponent < Primer::Box
+    status :deprecated
   end
 end

data/app/components/primer/button_group.rb

@@ -1,55 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `ButtonGroup` to render a series of buttons.
-  class ButtonGroup < Primer::Component
-    status :beta
-
-    # Required list of buttons to be rendered.
-    #
-    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::ButtonComponent) %> except for `size` and `group_item`.
-    renders_many :buttons, lambda { |**kwargs|
-      kwargs[:group_item] = true
-      kwargs[:size] = @size
-
-      Primer::ButtonComponent.new(**kwargs)
-    }
-
-    # @example Default
-    #
-    #   <%= render(Primer::ButtonGroup.new) do |component| %>
-    #     <% component.button { "Default" } %>
-    #     <% component.button(scheme: :primary) { "Primary" } %>
-    #     <% component.button(scheme: :danger) { "Danger" } %>
-    #     <% component.button(scheme: :outline) { "Outline" } %>
-    #     <% component.button(classes: "custom-class") { "Custom class" } %>
-    #   <% end %>
-    #
-    # @example Sizes
-    #
-    #   <%= render(Primer::ButtonGroup.new(size: :small)) do |component| %>
-    #     <% component.button { "Default" } %>
-    #     <% component.button(scheme: :primary) { "Primary" } %>
-    #     <% component.button(scheme: :danger) { "Danger" } %>
-    #     <% component.button(scheme: :outline) { "Outline" } %>
-    #   <% end %>
-    #
-    # @param variant [Symbol] DEPRECATED. <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
-    # @param size [Symbol] <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(variant: nil, size: Primer::ButtonComponent::DEFAULT_SIZE, **system_arguments)
-      @size = variant || size
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:tag] = :div
-
-      @system_arguments[:classes] = class_names(
-        "BtnGroup",
-        system_arguments[:classes]
-      )
-    end
-
-    def render?
-      buttons.any?
-    end
+  class ButtonGroup < Primer::Beta::ButtonGroup
+    status :deprecated
   end
 end

data/app/components/primer/flex_component.rb

@@ -7,7 +7,7 @@ module Primer
   # Boxes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).
   #
   # @deprecated
-  #   Use <%= link_to_component(Primer::BoxComponent) %> instead.
+  #   Use <%= link_to_component(Primer::Box) %> instead.
   #
   #   **Before**:
   #
@@ -22,11 +22,11 @@ module Primer
   #   **After**:
   #
   #   ```erb
-  #   <%%= render Primer::BoxComponent.new(display: :flex, justify_content: :center) %>
-  #   <%%= render Primer::BoxComponent.new(display: :inline_flex) %>
-  #   <%%= render Primer::BoxComponent.new(display: :flex, flex_wrap: :wrap) %>
-  #   <%%= render Primer::BoxComponent.new(display: :flex, align_items: :start) %>
-  #   <%%= render Primer::BoxComponent.new(display: :flex, direction: :column) %>
+  #   <%%= render Primer::Box.new(display: :flex, justify_content: :center) %>
+  #   <%%= render Primer::Box.new(display: :inline_flex) %>
+  #   <%%= render Primer::Box.new(display: :flex, flex_wrap: :wrap) %>
+  #   <%%= render Primer::Box.new(display: :flex, align_items: :start) %>
+  #   <%%= render Primer::Box.new(display: :flex, direction: :column) %>
   #   ```
   class FlexComponent < Primer::Component
     status :deprecated
@@ -62,30 +62,30 @@ module Primer
 
     # @example Default
     #   <%= render(Primer::FlexComponent.new(bg: :subtle)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @example Justify center
     #   <%= render(Primer::FlexComponent.new(justify_content: :center, bg: :subtle)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @example Align end
     #   <%= render(Primer::FlexComponent.new(align_items: :end, bg: :subtle)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @example Direction column
     #   <%= render(Primer::FlexComponent.new(direction: :column, bg: :subtle)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @param justify_content [Symbol] Use this param to distribute space between and around flex items along the main axis of the container. <%= one_of(Primer::FlexComponent::JUSTIFY_CONTENT_OPTIONS) %>
@@ -102,7 +102,7 @@ module Primer
       direction: nil,
       **system_arguments
     )
-      deprecated_component_warning(new_class: Primer::BoxComponent, version: "0.0.40")
+      deprecated_component_warning(new_class: Primer::Box, version: "0.0.40")
 
       @align_items = fetch_or_fallback(ALIGN_ITEMS_OPTIONS, align_items, ALIGN_ITEMS_DEFAULT)
       @justify_content = fetch_or_fallback(JUSTIFY_CONTENT_OPTIONS, justify_content, JUSTIFY_CONTENT_DEFAULT)
@@ -122,7 +122,7 @@ module Primer
     end
 
     def call
-      render(Primer::BoxComponent.new(**@system_arguments)) { content }
+      render(Primer::Box.new(**@system_arguments)) { content }
     end
 
     private

data/app/components/primer/flex_item_component.rb

@@ -5,7 +5,7 @@ module Primer
   # dimensions to fill available space.
   #
   # @deprecated
-  #   Use <%= link_to_component(Primer::BoxComponent) %> instead.
+  #   Use <%= link_to_component(Primer::Box) %> instead.
   #
   #   **Before**:
   #
@@ -16,7 +16,7 @@ module Primer
   #   **After**:
   #
   #   ```erb
-  #   <%%= render Primer::BoxComponent.new(flex: :auto) %>
+  #   <%%= render Primer::Box.new(flex: :auto) %>
   #   ```
   class FlexItemComponent < Primer::Component
     status :deprecated
@@ -38,7 +38,7 @@ module Primer
     # @param flex_auto [Boolean] Fills available space and auto-sizes based on the content. Defaults to <%= Primer::FlexItemComponent::FLEX_AUTO_DEFAULT %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(flex_auto: FLEX_AUTO_DEFAULT, **system_arguments)
-      deprecated_component_warning(new_class: Primer::BoxComponent, version: "0.0.40")
+      deprecated_component_warning(new_class: Primer::Box, version: "0.0.40")
 
       @system_arguments = system_arguments
       @system_arguments[:classes] =
@@ -49,7 +49,7 @@ module Primer
     end
 
     def call
-      render(Primer::BoxComponent.new(**@system_arguments)) { content }
+      render(Primer::Box.new(**@system_arguments)) { content }
     end
   end
 end

data/app/components/primer/icon_button.html.erb

@@ -1,6 +1,12 @@
-<%= render Primer::BaseComponent.new(tag: :div, position: :relative, display: :inline_block) do %>
+<% if render_tooltip? %>
+  <%= render Primer::BaseComponent.new(tag: :div, position: :relative, display: :inline_block) do %>
+    <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
+      <%= render Primer::OcticonComponent.new(icon: @icon) %>
+    <% end -%>
+    <%= render Primer::Alpha::Tooltip.new(**@tooltip_arguments) %>
+  <% end %>
+<% else %>
   <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
     <%= render Primer::OcticonComponent.new(icon: @icon) %>
   <% end -%>
-  <%= render Primer::Alpha::Tooltip.new(**@tooltip_arguments) %>
 <% end %>

data/app/components/primer/icon_button.rb

@@ -97,5 +97,11 @@ module Primer
         @tooltip_arguments[:type] = :label
       end
     end
+
+    private
+
+    def render_tooltip?
+      @system_arguments[:tag] != :summary
+    end
   end
 end

data/app/components/primer/label_component.rb

@@ -32,11 +32,18 @@ module Primer
     DEPRECATED_SCHEME_OPTIONS = [:info, :warning, :orange, :purple].freeze
     SCHEME_OPTIONS = (SCHEME_MAPPINGS.keys - DEPRECATED_SCHEME_OPTIONS).freeze
 
-    VARIANT_MAPPINGS = {
-      large: "Label--large",
-      inline: "Label--inline"
+    DEFAULT_SIZE = :medium
+    SIZE_MAPPINGS = {
+      DEFAULT_SIZE => nil,
+      :large => "Label--large"
     }.freeze
-    VARIANT_OPTIONS = VARIANT_MAPPINGS.keys << nil
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    DEFAULT_VARIANT = :none
+    VARIANT_OPTIONS = [DEFAULT_VARIANT].freeze
+    DEPRECATED_VARIANT_OPTIONS = [:large, :inline].freeze
+
+    INLINE_CLASS = "Label--inline"
 
     # @example Schemes
     #   <%= render(Primer::LabelComponent.new) { "Default" } %>
@@ -50,22 +57,37 @@ module Primer
     #   <%= render(Primer::LabelComponent.new(scheme: :done)) { "Done" } %>
     #   <%= render(Primer::LabelComponent.new(scheme: :sponsors)) { "Sponsors" } %>
     #
-    # @example Variants
+    # @example Sizes
+    #   <%= render(Primer::LabelComponent.new) { "Medium" } %>
+    #   <%= render(Primer::LabelComponent.new(size: :large)) { "Large" } %>
+    #
+    # @example Inline
     #   <%= render(Primer::LabelComponent.new) { "Default" } %>
-    #   <%= render(Primer::LabelComponent.new(variant: :large)) { "Large" } %>
+    #   <%= render(Primer::LabelComponent.new(inline: true)) { "Inline" } %>
     #
     # @param tag [Symbol] <%= one_of(Primer::LabelComponent::TAG_OPTIONS) %>
     # @param scheme [Symbol] <%= one_of(Primer::LabelComponent::SCHEME_MAPPINGS.keys) %>
-    # @param variant [Symbol] <%= one_of(Primer::LabelComponent::VARIANT_OPTIONS) %>
+    # @param size [Symbol] <%= one_of(Primer::LabelComponent::SIZE_OPTIONS) %>
+    # @param inline [Boolean] Whether or not to render this label inline.
+    # @param variant [Symbol] <%= one_of(Primer::LabelComponent::VARIANT_OPTIONS + Primer::LabelComponent::DEPRECATED_VARIANT_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(tag: DEFAULT_TAG, scheme: DEFAULT_SCHEME, variant: nil, **system_arguments)
+
+    def initialize(tag: DEFAULT_TAG, scheme: DEFAULT_SCHEME, size: DEFAULT_SIZE, inline: false, variant: DEFAULT_VARIANT, **system_arguments)
       @system_arguments = system_arguments
+
+      @variant = fetch_or_fallback(VARIANT_OPTIONS, variant, nil, deprecated_values: DEPRECATED_VARIANT_OPTIONS)
+      @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME, deprecated_values: DEPRECATED_SCHEME_OPTIONS)
+      @size = fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)
+      @size = :large if @variant == :large
+      @inline = inline || @variant == :inline
+
       @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
       @system_arguments[:classes] = class_names(
         "Label",
         system_arguments[:classes],
-        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, deprecated_values: DEPRECATED_SCHEME_OPTIONS)],
-        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant)]
+        SCHEME_MAPPINGS[@scheme],
+        SIZE_MAPPINGS[@size],
+        @inline ? INLINE_CLASS : nil
       )
     end