primer_view_components 0.0.87 → 0.0.88

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e6bfe00066208f8c4762d50b5df12895b564ef39da4202b625f2250974f8854c
-  data.tar.gz: b5ccfedef5c538d1491eca81db4273c67fd549f5737574174074cf89e219c92e
+  metadata.gz: b26233820f7e3fd5f92dbfe2b73b8ee9d4a59804bd93902bd98ab0cb2896d828
+  data.tar.gz: 114d47251ebb0c4633a0d2b1e59bdddcd85a0c8aba2d2942d52598ef5e62f732
 SHA512:
-  metadata.gz: 1e3f89321a8c13325ef873074d0ea4e2d880dacd1e06185e3b87af6a2a6ad2a363115e6c85ba4888e134b8f532e1983a8b7c1fe355df139fcd6a93dc0337770d
-  data.tar.gz: 70045302ca011ea9c1cd009f7a31a1ea0e41f027198bdb99989f656d2ccd2dfe4d654faad729bbbf60652151fa2e8bfa779492e4f5f72c3b6bc2a5c0d2a8103b
+  metadata.gz: b6c4cff16a390f08f54d246a6e195862fa3572091f955ce74c85e47df31516deec98beb93ad8c4a526d51eb41b8ec1f5ef3c2e934d497fb81e6974e5df781aca
+  data.tar.gz: 1943282801abaaa921514cf116286ad274b7f71ad8e41c8cda9456a9d57364a67039dd9ad53ca2f0108bdefc6e23bbdf56c749e911829a6a4981d1619e9b4167

data/CHANGELOG.md

@@ -1,5 +1,17 @@
 # CHANGELOG
 
+## 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

data/app/components/primer/alpha/segmented-control-element.d.ts

@@ -0,0 +1,8 @@
+export default class SegmentedControlElement extends HTMLElement {
+    constructor();
+}
+declare global {
+    interface Window {
+        SegmentedControlElement: typeof SegmentedControlElement;
+    }
+}

data/app/components/primer/alpha/segmented-control-element.js

@@ -0,0 +1,27 @@
+/* eslint-disable custom-elements/no-constructor */
+export default class SegmentedControlElement extends HTMLElement {
+    constructor() {
+        super();
+        this.addEventListener('click', (event) => {
+            const controls = Array.from(this.querySelectorAll('[role="toolbar"] button')).filter(tab => tab instanceof HTMLElement && tab.closest(this.tagName) === this);
+            if (!(event.target instanceof Element))
+                return;
+            if (event.target.closest(this.tagName) !== this)
+                return;
+            const selectedControl = event.target.closest('button');
+            if (!(selectedControl instanceof HTMLElement) || !selectedControl.closest('[role="toolbar"]'))
+                return;
+            for (const control of controls) {
+                control.classList.remove('SegmentedControl-button--selected');
+                control.setAttribute('aria-current', 'false');
+            }
+            selectedControl.classList.add('SegmentedControl-button--selected');
+            selectedControl.setAttribute('aria-current', 'true');
+            selectedControl.focus();
+        });
+    }
+}
+if (!window.customElements.get('segmented-control')) {
+    window.SegmentedControlElement = SegmentedControlElement;
+    window.customElements.define('segmented-control', SegmentedControlElement);
+}

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/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/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,36 @@ 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) || @variant == :large ? :large : nil || DEFAULT_SIZE
+      @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
 

data/app/components/primer/popover_component.rb

@@ -119,7 +119,7 @@ module Primer
     end
 
     def body_component
-      Primer::BoxComponent.new(**@body_arguments)
+      Primer::Box.new(**@body_arguments)
     end
   end
 end

data/app/components/primer/primer.d.ts

@@ -6,3 +6,4 @@ import './local_time';
 import './image_crop';
 import './dropdown';
 import './alpha/tool-tip-element';
+import './alpha/segmented-control-element';

data/app/components/primer/primer.js

@@ -6,3 +6,4 @@ import './local_time';
 import './image_crop';
 import './dropdown';
 import './alpha/tool-tip-element';
+import './alpha/segmented-control-element';

data/lib/primer/view_components/linters/argument_mappers/label.rb

@@ -13,9 +13,9 @@ module ERBLint
           symbolize: true
         ).freeze
 
-        VARIANT_MAPPINGS = Primer::ViewComponents::Constants.get(
+        SIZE_MAPPINGS = Primer::ViewComponents::Constants.get(
           component: "Primer::LabelComponent",
-          constant: "VARIANT_MAPPINGS",
+          constant: "SIZE_MAPPINGS",
           symbolize: true
         ).freeze
 
@@ -24,6 +24,11 @@ module ERBLint
           constant: "DEFAULT_TAG"
         ).freeze
 
+        INLINE_CLASS = Primer::ViewComponents::Constants.get(
+          component: "Primer::LabelComponent",
+          constant: "INLINE_CLASS"
+        ).freeze
+
         ATTRIBUTES = %w[title].freeze
 
         def attribute_to_args(attribute)
@@ -36,8 +41,10 @@ module ERBLint
 
             if SCHEME_MAPPINGS[class_name] && acc[:scheme].nil?
               acc[:scheme] = SCHEME_MAPPINGS[class_name]
-            elsif VARIANT_MAPPINGS[class_name] && acc[:variant].nil?
-              acc[:variant] = VARIANT_MAPPINGS[class_name]
+            elsif SIZE_MAPPINGS[class_name] && acc[:size].nil?
+              acc[:size] = SIZE_MAPPINGS[class_name]
+            elsif class_name == INLINE_CLASS && acc[:inline].nil?
+              acc[:inline] = true
             else
               acc[:classes] << class_name
             end

data/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb

@@ -7,10 +7,12 @@ module ERBLint
       module DeprecatedComponentsHelpers
         # If there is no alternative to suggest, set the value to nil
         COMPONENT_TO_USE_INSTEAD = {
+          "Primer::ButtonGroup" => "Primer::Beta::ButtonGroup",
           "Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item",
           "Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete",
           "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
           "Primer::BorderBoxComponent" => "Primer::Beta::BorderBox",
+          "Primer::BoxComponent" => "Primer::Box",
           "Primer::DropdownMenuComponent" => nil,
           "Primer::Tooltip" => "Primer::Alpha::Tooltip",
           "Primer::FlexComponent" => nil,

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 87
+      PATCH = 88
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/rubocop/cop/primer/component_name_migration.rb

@@ -15,6 +15,8 @@ module RuboCop
       # Primer::Beta::ComponentName.new()
       class ComponentNameMigration < BaseCop
         DEPRECATIONS = {
+          "Primer::BoxComponent" => "Primer::Box",
+          "Primer::ButtonGroup" => "Primer::Beta::ButtonGroup",
           "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
           "Primer::BorderBoxComponent" => "Primer::Beta::BorderBox",
           "Primer::BaseButton" => "Primer::Beta::BaseButton",

data/lib/rubocop/cop/primer/deprecated_label_variants.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+require "rubocop"
+
+# :nocov:
+module RuboCop
+  module Cop
+    module Primer
+      # This cop ensures that `LabelComponent`s don't use the old `variant` argument.
+      #
+      # bad
+      # Primer::LabelComponent.new(variant: :large)
+      #
+      # good
+      # Primer::LabelComponent.new(size: :large)
+      #
+      # bad
+      # Primer::LabelComponent.new(variant: :inline)
+      #
+      # good
+      # Primer::LabelComponent.new(inline: true)
+      class DeprecatedLabelVariants < BaseCop
+        def on_send(node)
+          return unless label_node?(node)
+          return unless node.arguments?
+
+          # we are looking for hash arguments and they are always last
+          kwargs = node.arguments.last
+
+          return unless kwargs.type == :hash
+
+          kwargs.pairs.each do |pair|
+            # skip if we're not dealing with a symbol or string
+            next if pair.key.type != :sym
+            next unless pair.value.type == :sym || pair.value.type == :str
+            next if pair.key.value != :variant
+
+            case pair.value.value
+            when :large, "large"
+              add_offense(pair, message: "Avoid using `variant: :large` with `LabelComponent`. Use `size: :large` instead.")
+            when :inline, "inline"
+              add_offense(pair, message: "Avoid using `variant: :inline` with `LabelComponent`. Use `inline: true` instead.")
+            end
+          end
+        end
+
+        def autocorrect(node)
+          lambda do |corrector|
+            replacement =
+              case node.value.value
+              when :large, "large"
+                "size: :large"
+              when :inline, "inline"
+                "inline: true"
+              end
+
+            corrector.replace(node, replacement)
+          end
+        end
+
+        private
+
+        def label_node?(node)
+          return if node.nil?
+
+          node.method_name == :new && !node.receiver.nil? && node.receiver.const_name == "Primer::LabelComponent"
+        end
+      end
+    end
+  end
+end

data/lib/tasks/docs.rake

@@ -44,10 +44,10 @@ namespace :docs do
       Primer::Beta::Blankslate,
       Primer::Beta::BorderBox,
       Primer::Beta::BorderBox::Header,
-      Primer::BoxComponent,
+      Primer::Box,
       Primer::Beta::Breadcrumbs,
       Primer::ButtonComponent,
-      Primer::ButtonGroup,
+      Primer::Beta::ButtonGroup,
       Primer::Alpha::ButtonMarketing,
       Primer::ClipboardCopy,
       Primer::CloseButton,

data/lib/yard/docs_helper.rb

@@ -28,7 +28,7 @@ module YARD
       prefix = "One of"
       prefix = prefix.downcase if lower
 
-      "#{prefix} #{values.to_sentence(last_word_connector: ', or ')}."
+      "#{prefix} #{values.to_sentence(two_words_connector: ' or ', last_word_connector: ', or ')}."
     end
 
     def link_to_accessibility

data/static/arguments.yml

@@ -9,15 +9,15 @@
   - name: variant
     type: Symbol
     default: "`:default`"
-    description: One of `:default` and `:large`.
+    description: One of `:default` or `:large`.
   - name: tag
     type: Symbol
     default: "`:button`"
-    description: One of `:a` and `:button`.
+    description: One of `:a` or `:button`.
   - name: type
     type: Symbol
     default: "`:button`"
-    description: One of `:button` and `:submit`.
+    description: One of `:button` or `:submit`.
   - name: system_arguments
     type: Hash
     default: N/A
@@ -34,7 +34,7 @@
     type: Symbol
     default: "`:sidebar`"
     description: Which element to render first in the HTML. This will change the keyboard
-      navigation order. One of `:main` and `:sidebar`.
+      navigation order. One of `:main` or `:sidebar`.
   - name: gutter
     type: Symbol
     default: "`:default`"
@@ -50,7 +50,7 @@
   - name: tag
     type: Symbol
     default: "`:nav`"
-    description: One of `:div` and `:nav`.
+    description: One of `:div` or `:nav`.
   - name: label
     type: String
     default: N/A
@@ -75,7 +75,7 @@
   - name: align
     type: Symbol
     default: N/A
-    description: One of `:left` and `:right`. - Defaults to left
+    description: One of `:left` or `:right`. - Defaults to left
   - name: body_arguments
     type: Hash
     default: "`{}`"
@@ -192,7 +192,7 @@
   - name: type
     type: Symbol
     default: N/A
-    description: One of `:description` and `:label`.
+    description: One of `:description` or `:label`.
   - name: direction
     type: Symbol
     default: "`:s`"
@@ -212,7 +212,7 @@
   - name: tag
     type: Symbol
     default: "`:nav`"
-    description: One of `:div` and `:nav`.
+    description: One of `:div` or `:nav`.
   - name: label
     type: String
     default: N/A
@@ -221,7 +221,7 @@
   - name: align
     type: Symbol
     default: "`:left`"
-    description: One of `:left` and `:right`. - Defaults to left
+    description: One of `:left` or `:right`. - Defaults to left
   - name: body_arguments
     type: Hash
     default: "`{}`"
@@ -241,7 +241,7 @@
   - name: align
     type: Symbol
     default: "`:left`"
-    description: One of `:left` and `:right`. - Defaults to left
+    description: One of `:left` or `:right`. - Defaults to left
   - name: body_arguments
     type: Hash
     default: "`{}`"
@@ -364,7 +364,7 @@
   - name: shape
     type: Symbol
     default: "`:circle`"
-    description: Shape of the avatar. One of `:circle` and `:square`.
+    description: Shape of the avatar. One of `:circle` or `:square`.
   - name: href
     type: String
     default: "`nil`"
@@ -380,11 +380,11 @@
   - name: tag
     type: Symbol
     default: "`:div`"
-    description: One of `:div` and `:span`.
+    description: One of `:div` or `:span`.
   - name: align
     type: Symbol
     default: "`:left`"
-    description: One of `:left` and `:right`.
+    description: One of `:left` or `:right`.
   - name: tooltipped
     type: Boolean
     default: "`false`"
@@ -394,7 +394,7 @@
     default: "`{}`"
     description: Parameters to add to the Body. If `tooltipped` is set, has the same
       arguments as [Tooltip](/components/tooltip). The default tag is `:div` but can
-      be changed using `tag:` to one of `:div` and `:span`.
+      be changed using `tag:` to one of `:div` or `:span`.
   - name: system_arguments
     type: Hash
     default: N/A
@@ -462,6 +462,21 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
+- component: ButtonGroup
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/button_group.rb
+  parameters:
+  - name: variant
+    type: Symbol
+    default: "`nil`"
+    description: DEPRECATED. One of `:medium` or `:small`.
+  - name: size
+    type: Symbol
+    default: "`:medium`"
+    description: One of `:medium` or `:small`.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
 - component: Flash
   source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/flash.rb
   parameters:
@@ -508,7 +523,7 @@
     default: N/A
     description: "[System arguments](/system-arguments)"
 - component: Box
-  source: https://github.com/primer/view_components/tree/main/app/components/primer/box_component.rb
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/box.rb
   parameters:
   - name: system_arguments
     type: Hash
@@ -525,11 +540,11 @@
   - name: variant
     type: Symbol
     default: "`nil`"
-    description: DEPRECATED. One of `:medium` and `:small`.
+    description: DEPRECATED. One of `:medium` or `:small`.
   - name: size
     type: Symbol
     default: "`:medium`"
-    description: One of `:medium` and `:small`.
+    description: One of `:medium` or `:small`.
   - name: tag
     type: Symbol
     default: "`:button`"
@@ -554,21 +569,6 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
-- component: ButtonGroup
-  source: https://github.com/primer/view_components/tree/main/app/components/primer/button_group.rb
-  parameters:
-  - name: variant
-    type: Symbol
-    default: "`nil`"
-    description: DEPRECATED. One of `:medium` and `:small`.
-  - name: size
-    type: Symbol
-    default: "`:medium`"
-    description: One of `:medium` and `:small`.
-  - name: system_arguments
-    type: Hash
-    default: N/A
-    description: "[System arguments](/system-arguments)"
 - component: ClipboardCopy
   source: https://github.com/primer/view_components/tree/main/app/components/primer/clipboard_copy.rb
   parameters:
@@ -594,7 +594,7 @@
   - name: type
     type: Symbol
     default: "`:button`"
-    description: One of `:button` and `:submit`.
+    description: One of `:button` or `:submit`.
   - name: system_arguments
     type: Hash
     default: N/A
@@ -770,7 +770,7 @@
   - name: scheme
     type: Symbol
     default: "`:default`"
-    description: One of `:danger` and `:default`.
+    description: One of `:danger` or `:default`.
   - name: icon
     type: String
     default: N/A
@@ -854,10 +854,18 @@
     description: One of `:accent`, `:attention`, `:danger`, `:default`, `:done`, `:info`,
       `:orange`, `:primary`, `:purple`, `:secondary`, `:severe`, `:sponsors`, `:success`,
       or `:warning`.
+  - name: size
+    type: Symbol
+    default: "`:medium`"
+    description: One of `:large` or `:medium`.
+  - name: inline
+    type: Boolean
+    default: "`false`"
+    description: Whether or not to render this label inline.
   - name: variant
     type: Symbol
-    default: "`nil`"
-    description: One of `nil`, `:inline`, or `:large`.
+    default: "`:none`"
+    description: One of `:inline`, `:large`, or `:none`.
   - name: system_arguments
     type: Hash
     default: N/A
@@ -872,7 +880,7 @@
   - name: side
     type: Symbol
     default: "`:right`"
-    description: Which side to display the sidebar on. One of `:left` and `:right`.
+    description: Which side to display the sidebar on. One of `:left` or `:right`.
   - name: sidebar_col
     type: Integer
     default: "`3`"
@@ -887,7 +895,7 @@
   - name: tag
     type: String
     default: "`:a`"
-    description: One of `:a` and `:span`.
+    description: One of `:a` or `:span`.
   - name: href
     type: String
     default: "`nil`"
@@ -924,35 +932,35 @@
   - name: weekday
     type: Symbol
     default: "`:short`"
-    description: One of `:long` and `:short`.
+    description: One of `:long` or `:short`.
   - name: year
     type: Symbol
     default: "`:numeric`"
-    description: One of `:2-digit` and `:numeric`.
+    description: One of `:2-digit` or `:numeric`.
   - name: month
     type: Symbol
     default: "`:short`"
-    description: One of `:long` and `:short`.
+    description: One of `:long` or `:short`.
   - name: day
     type: Symbol
     default: "`:numeric`"
-    description: One of `:2-digit` and `:numeric`.
+    description: One of `:2-digit` or `:numeric`.
   - name: hour
     type: Symbol
     default: "`:numeric`"
-    description: One of `:2-digit` and `:numeric`.
+    description: One of `:2-digit` or `:numeric`.
   - name: minute
     type: Symbol
     default: "`:numeric`"
-    description: One of `:2-digit` and `:numeric`.
+    description: One of `:2-digit` or `:numeric`.
   - name: second
     type: Symbol
     default: "`:numeric`"
-    description: One of `:2-digit` and `:numeric`.
+    description: One of `:2-digit` or `:numeric`.
   - name: time_zone_name
     type: Symbol
     default: "`:short`"
-    description: One of `:long` and `:short`.
+    description: One of `:long` or `:short`.
   - name: system_arguments
     type: Hash
     default: N/A
@@ -1087,11 +1095,11 @@
   - name: tag
     type: Symbol
     default: "`:span`"
-    description: HTML tag for element. One of `:div` and `:span`.
+    description: HTML tag for element. One of `:div` or `:span`.
   - name: size
     type: Symbol
     default: "`:default`"
-    description: One of `:default` and `:small`.
+    description: One of `:default` or `:small`.
   - name: system_arguments
     type: Hash
     default: N/A

data/static/audited_at.json

@@ -22,12 +22,14 @@
   "Primer::Beta::BorderBox::Header": "",
   "Primer::Beta::Breadcrumbs": "",
   "Primer::Beta::Breadcrumbs::Item": "",
+  "Primer::Beta::ButtonGroup": "",
   "Primer::Beta::Flash": "",
   "Primer::Beta::Text": "",
   "Primer::Beta::Truncate": "",
   "Primer::Beta::Truncate::TruncateText": "",
   "Primer::BlankslateComponent": "",
   "Primer::BorderBoxComponent": "",
+  "Primer::Box": "",
   "Primer::BoxComponent": "",
   "Primer::ButtonComponent": "",
   "Primer::ButtonGroup": "",

data/static/classes.yml

@@ -43,6 +43,7 @@
 - ".Label--attention"
 - ".Label--danger"
 - ".Label--done"
+- ".Label--inline"
 - ".Label--large"
 - ".Label--primary"
 - ".Label--secondary"
@@ -211,6 +212,7 @@
 - ".p-3"
 - ".p-4"
 - ".p-5"
+- ".position-absolute"
 - ".position-relative"
 - ".pr-2"
 - ".pt-5"

data/static/constants.json

@@ -298,6 +298,8 @@
   },
   "Primer::Beta::Breadcrumbs::Item": {
   },
+  "Primer::Beta::ButtonGroup": {
+  },
   "Primer::Beta::Flash": {
     "DEFAULT_SCHEME": "default",
     "SCHEME_MAPPINGS": {
@@ -319,6 +321,8 @@
   },
   "Primer::BorderBoxComponent": {
   },
+  "Primer::Box": {
+  },
   "Primer::BoxComponent": {
   },
   "Primer::ButtonComponent": {
@@ -544,13 +548,20 @@
   },
   "Primer::LabelComponent": {
     "DEFAULT_SCHEME": "default",
+    "DEFAULT_SIZE": "medium",
     "DEFAULT_TAG": "span",
+    "DEFAULT_VARIANT": "none",
     "DEPRECATED_SCHEME_OPTIONS": [
       "info",
       "warning",
       "orange",
       "purple"
     ],
+    "DEPRECATED_VARIANT_OPTIONS": [
+      "large",
+      "inline"
+    ],
+    "INLINE_CLASS": "Label--inline",
     "SCHEME_MAPPINGS": {
       "default": "",
       "primary": "Label--primary",
@@ -579,20 +590,22 @@
       "done",
       "sponsors"
     ],
+    "SIZE_MAPPINGS": {
+      "medium": null,
+      "large": "Label--large"
+    },
+    "SIZE_OPTIONS": [
+      "medium",
+      "large"
+    ],
     "TAG_OPTIONS": [
       "span",
       "summary",
       "a",
       "div"
     ],
-    "VARIANT_MAPPINGS": {
-      "large": "Label--large",
-      "inline": "Label--inline"
-    },
     "VARIANT_OPTIONS": [
-      "large",
-      "inline",
-      null
+      "none"
     ]
   },
   "Primer::LayoutComponent": {

data/static/statuses.json

@@ -22,15 +22,17 @@
   "Primer::Beta::BorderBox::Header": "alpha",
   "Primer::Beta::Breadcrumbs": "beta",
   "Primer::Beta::Breadcrumbs::Item": "alpha",
+  "Primer::Beta::ButtonGroup": "beta",
   "Primer::Beta::Flash": "beta",
   "Primer::Beta::Text": "beta",
   "Primer::Beta::Truncate": "beta",
   "Primer::Beta::Truncate::TruncateText": "alpha",
   "Primer::BlankslateComponent": "deprecated",
   "Primer::BorderBoxComponent": "deprecated",
-  "Primer::BoxComponent": "stable",
+  "Primer::Box": "stable",
+  "Primer::BoxComponent": "deprecated",
   "Primer::ButtonComponent": "beta",
-  "Primer::ButtonGroup": "beta",
+  "Primer::ButtonGroup": "deprecated",
   "Primer::ClipboardCopy": "beta",
   "Primer::CloseButton": "beta",
   "Primer::ConditionalWrapper": "alpha",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.87
+  version: 0.0.88
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-08-05 00:00:00.000000000 Z
+date: 2022-08-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -412,6 +412,8 @@ files:
 - app/components/primer/alpha/button_marketing.rb
 - app/components/primer/alpha/layout.html.erb
 - app/components/primer/alpha/layout.rb
+- app/components/primer/alpha/segmented-control-element.d.ts
+- app/components/primer/alpha/segmented-control-element.js
 - app/components/primer/alpha/tab_nav.html.erb
 - app/components/primer/alpha/tab_nav.rb
 - app/components/primer/alpha/tab_panels.html.erb
@@ -445,6 +447,8 @@ files:
 - app/components/primer/beta/border_box/header.rb
 - app/components/primer/beta/breadcrumbs.html.erb
 - app/components/primer/beta/breadcrumbs.rb
+- app/components/primer/beta/button_group.html.erb
+- app/components/primer/beta/button_group.rb
 - app/components/primer/beta/flash.html.erb
 - app/components/primer/beta/flash.rb
 - app/components/primer/beta/text.rb
@@ -453,10 +457,10 @@ files:
 - app/components/primer/blankslate_component.html.erb
 - app/components/primer/blankslate_component.rb
 - app/components/primer/border_box_component.rb
+- app/components/primer/box.rb
 - app/components/primer/box_component.rb
 - app/components/primer/button_component.html.erb
 - app/components/primer/button_component.rb
-- app/components/primer/button_group.html.erb
 - app/components/primer/button_group.rb
 - app/components/primer/clipboard_copy.html.erb
 - app/components/primer/clipboard_copy.rb
@@ -649,6 +653,7 @@ files:
 - lib/rubocop/cop/primer/deprecated_button_arguments.rb
 - lib/rubocop/cop/primer/deprecated_components.rb
 - lib/rubocop/cop/primer/deprecated_label_schemes.rb
+- lib/rubocop/cop/primer/deprecated_label_variants.rb
 - lib/rubocop/cop/primer/deprecated_layout_component.rb
 - lib/rubocop/cop/primer/no_tag_memoize.rb
 - lib/rubocop/cop/primer/primer_octicon.rb