primer_view_components 0.43.2 → 0.43.3

data/app/components/primer/alpha/action_list.js

@@ -17,7 +17,6 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _ActionListElement_truncationObserver;
 import { controller } from '@github/catalyst';
-// eslint-disable-next-line custom-elements/no-exports-with-element
 export class ActionListTruncationObserver {
     constructor(el) {
         this.resizeObserver = new ResizeObserver(entries => {
@@ -67,6 +66,5 @@ let ActionListElement = class ActionListElement extends HTMLElement {
 _ActionListElement_truncationObserver = new WeakMap();
 ActionListElement = __decorate([
     controller
-    // eslint-disable-next-line custom-elements/expose-class-on-global
 ], ActionListElement);
 export { ActionListElement };

data/app/components/primer/alpha/action_list.ts

@@ -1,6 +1,5 @@
 import {controller} from '@github/catalyst'
 
-// eslint-disable-next-line custom-elements/no-exports-with-element
 export class ActionListTruncationObserver {
   resizeObserver = new ResizeObserver(entries => {
     for (const entry of entries) {
@@ -41,7 +40,6 @@ export class ActionListTruncationObserver {
 }
 
 @controller
-// eslint-disable-next-line custom-elements/expose-class-on-global
 export class ActionListElement extends HTMLElement {
   #truncationObserver: ActionListTruncationObserver
 

data/app/components/primer/alpha/toggle_switch.js

@@ -144,6 +144,7 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
                 headers: requestHeaders,
                 body,
             });
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
         }
         catch (error) {
             throw new Error('A network error occurred, please try again.');

data/app/components/primer/alpha/toggle_switch.ts

@@ -175,6 +175,7 @@ class ToggleSwitchElement extends HTMLElement {
         headers: requestHeaders,
         body,
       })
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } catch (error) {
       throw new Error('A network error occurred, please try again.')
     }

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

@@ -1 +1 @@
-.breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em}.breadcrumb-item:after{border-right:.1em solid var(--borderColor-neutral-emphasis);content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg) translateY(.0625em)}.breadcrumb-item:first-child{margin-left:0}:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default);cursor:default!important;-webkit-text-decoration:none!important;text-decoration:none!important}
+.breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em;max-width:100%}.breadcrumb-item:after{border-right:.1em solid var(--borderColor-neutral-emphasis);content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg) translateY(.0625em)}.breadcrumb-item:first-child{margin-left:0}:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default);cursor:default!important;-webkit-text-decoration:none!important;text-decoration:none!important}

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

@@ -1 +1 @@
-{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CAGrB,eAAgB,CADhB,kBAiBF,CAdE,uBAOE,2DAA6D,CAF7D,UAAW,CAJX,oBAAqB,CACrB,WAAa,CAEb,aAAe,CAIf,2CACF,CAEA,6BACE,aACF,CAKA,8FACE,YACF,CAIF,4BACE,4BAA6B,CAE7B,wBAA0B,CAD1B,sCAAgC,CAAhC,8BAEF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n  display: inline-block;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: -0.35em;\n  list-style: none;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: 0 0.5em;\n    content: '';\n    /* stylelint-disable-next-line primer/borders */\n    border-right: 0.1em solid var(--borderColor-neutral-emphasis);\n    transform: rotate(15deg) translateY(0.0625em);\n  }\n\n  &:first-child {\n    margin-left: 0;\n  }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n  &::after {\n    content: none;\n  }\n}\n\n/* stylelint-disable-next-line selector-max-type */\n.breadcrumb-item-selected a {\n  color: var(--fgColor-default);\n  text-decoration: none !important;\n  cursor: default !important;\n}\n"]}
+{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CAGrB,eAAgB,CADhB,kBAAoB,CAEpB,cAgBF,CAdE,uBAOE,2DAA6D,CAF7D,UAAW,CAJX,oBAAqB,CACrB,WAAa,CAEb,aAAe,CAIf,2CACF,CAEA,6BACE,aACF,CAKA,8FACE,YACF,CAIF,4BACE,4BAA6B,CAE7B,wBAA0B,CAD1B,sCAAgC,CAAhC,8BAEF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n  display: inline-block;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: -0.35em;\n  list-style: none;\n  max-width: 100%;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: 0 0.5em;\n    content: '';\n    /* stylelint-disable-next-line primer/borders */\n    border-right: 0.1em solid var(--borderColor-neutral-emphasis);\n    transform: rotate(15deg) translateY(0.0625em);\n  }\n\n  &:first-child {\n    margin-left: 0;\n  }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n  &::after {\n    content: none;\n  }\n}\n\n/* stylelint-disable-next-line selector-max-type */\n.breadcrumb-item-selected a {\n  color: var(--fgColor-default);\n  text-decoration: none !important;\n  cursor: default !important;\n}\n"]}

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

@@ -3,6 +3,7 @@
   /* stylelint-disable-next-line primer/spacing */
   margin-left: -0.35em;
   list-style: none;
+  max-width: 100%;
 
   &::after {
     display: inline-block;

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

@@ -32,26 +32,36 @@ module Primer
         system_arguments[:tag] = :summary
         system_arguments[:role] = "button"
 
-        aria_label_closed = system_arguments[:aria_label_closed] || ARIA_LABEL_CLOSED_DEFAULT
-        aria_label_open = system_arguments[:aria_label_open] || ARIA_LABEL_OPEN_DEFAULT
+        aria_label_closed = system_arguments[:aria_label_closed]
+        aria_label_open = system_arguments[:aria_label_open]
+
+        data_attributes = {
+          target: "details-toggle.summaryTarget",
+          action: "click:details-toggle#toggle",
+        }
+
+        # Only add aria-label data attributes if explicitly provided
+        if aria_label_closed || aria_label_open
+          data_attributes[:aria_label_closed] = aria_label_closed || ARIA_LABEL_CLOSED_DEFAULT
+          data_attributes[:aria_label_open] = aria_label_open || ARIA_LABEL_OPEN_DEFAULT
+        end
 
         system_arguments[:data] = merge_data(
           system_arguments, {
-            data: {
-              target: "details-toggle.summaryTarget",
-              action: "click:details-toggle#toggle",
-              aria_label_closed: aria_label_closed,
-              aria_label_open: aria_label_open,
-            }
+            data: data_attributes
           }
         )
 
+        aria_attributes = { expanded: open? }
+        # Only add aria-label if explicitly provided
+        if aria_label_closed || aria_label_open
+          current_label = open? ? (aria_label_open || ARIA_LABEL_OPEN_DEFAULT) : (aria_label_closed || ARIA_LABEL_CLOSED_DEFAULT)
+          aria_attributes[:label] = current_label
+        end
+
         system_arguments[:aria] = merge_aria(
           system_arguments, {
-            aria: {
-              label: open? ? aria_label_open : aria_label_closed,
-              expanded: open?,
-            }
+            aria: aria_attributes
           }
         )
 

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

@@ -3,9 +3,10 @@
  * ensures the <details> and <summary> elements markup is properly accessible by
  * updating the aria-label and aria-expanded attributes on click.
  *
- * aria-label values default to "Expand" and "Collapse". To override those
- * values, use the `data-aria-label-open` and `data-aria-label-closed`
- * attributes on the summary target.
+ * aria-label values are only set if provided via the `data-aria-label-open` and
+ * `data-aria-label-closed` attributes on the summary target. If these attributes
+ * are not present, no aria-label will be set, allowing screen readers to use
+ * the visible text content.
  *
  * @example
  * ```html

data/app/components/primer/beta/details_toggle_element.js

@@ -10,9 +10,10 @@ import { controller, target } from '@github/catalyst';
  * ensures the <details> and <summary> elements markup is properly accessible by
  * updating the aria-label and aria-expanded attributes on click.
  *
- * aria-label values default to "Expand" and "Collapse". To override those
- * values, use the `data-aria-label-open` and `data-aria-label-closed`
- * attributes on the summary target.
+ * aria-label values are only set if provided via the `data-aria-label-open` and
+ * `data-aria-label-closed` attributes on the summary target. If these attributes
+ * are not present, no aria-label will be set, allowing screen readers to use
+ * the visible text content.
  *
  * @example
  * ```html
@@ -37,13 +38,17 @@ let DetailsToggleElement = class DetailsToggleElement extends HTMLElement {
     toggle() {
         const detailsIsOpen = this.detailsTarget.hasAttribute('open');
         if (detailsIsOpen) {
-            const ariaLabelClosed = this.summaryTarget.getAttribute('data-aria-label-closed') || 'Expand';
-            this.summaryTarget.setAttribute('aria-label', ariaLabelClosed);
+            const ariaLabelClosed = this.summaryTarget.getAttribute('data-aria-label-closed');
+            if (ariaLabelClosed) {
+                this.summaryTarget.setAttribute('aria-label', ariaLabelClosed);
+            }
             this.summaryTarget.setAttribute('aria-expanded', 'false');
         }
         else {
-            const ariaLabelOpen = this.summaryTarget.getAttribute('data-aria-label-open') || 'Collapse';
-            this.summaryTarget.setAttribute('aria-label', ariaLabelOpen);
+            const ariaLabelOpen = this.summaryTarget.getAttribute('data-aria-label-open');
+            if (ariaLabelOpen) {
+                this.summaryTarget.setAttribute('aria-label', ariaLabelOpen);
+            }
             this.summaryTarget.setAttribute('aria-expanded', 'true');
         }
     }

data/app/components/primer/beta/details_toggle_element.ts

@@ -5,9 +5,10 @@ import {controller, target} from '@github/catalyst'
  * ensures the <details> and <summary> elements markup is properly accessible by
  * updating the aria-label and aria-expanded attributes on click.
  *
- * aria-label values default to "Expand" and "Collapse". To override those
- * values, use the `data-aria-label-open` and `data-aria-label-closed`
- * attributes on the summary target.
+ * aria-label values are only set if provided via the `data-aria-label-open` and
+ * `data-aria-label-closed` attributes on the summary target. If these attributes
+ * are not present, no aria-label will be set, allowing screen readers to use
+ * the visible text content.
  *
  * @example
  * ```html
@@ -37,12 +38,16 @@ class DetailsToggleElement extends HTMLElement {
   toggle() {
     const detailsIsOpen = this.detailsTarget.hasAttribute('open')
     if (detailsIsOpen) {
-      const ariaLabelClosed = this.summaryTarget.getAttribute('data-aria-label-closed') || 'Expand'
-      this.summaryTarget.setAttribute('aria-label', ariaLabelClosed)
+      const ariaLabelClosed = this.summaryTarget.getAttribute('data-aria-label-closed')
+      if (ariaLabelClosed) {
+        this.summaryTarget.setAttribute('aria-label', ariaLabelClosed)
+      }
       this.summaryTarget.setAttribute('aria-expanded', 'false')
     } else {
-      const ariaLabelOpen = this.summaryTarget.getAttribute('data-aria-label-open') || 'Collapse'
-      this.summaryTarget.setAttribute('aria-label', ariaLabelOpen)
+      const ariaLabelOpen = this.summaryTarget.getAttribute('data-aria-label-open')
+      if (ariaLabelOpen) {
+        this.summaryTarget.setAttribute('aria-label', ariaLabelOpen)
+      }
       this.summaryTarget.setAttribute('aria-expanded', 'true')
     }
   }

data/app/components/primer/beta/nav_list.js

@@ -16,7 +16,6 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _NavListElement_instances, _NavListElement_truncationObserver, _NavListElement_findSelectedNavItemById, _NavListElement_findSelectedNavItemByHref, _NavListElement_findSelectedNavItemByCurrentLocation, _NavListElement_select, _NavListElement_deselect, _NavListElement_findParentMenu;
-/* eslint-disable custom-elements/expose-class-on-global */
 import { controller, target, targets } from '@github/catalyst';
 import { ActionListTruncationObserver } from '../alpha/action_list';
 let NavListElement = class NavListElement extends HTMLElement {

data/app/components/primer/beta/nav_list.ts

@@ -1,4 +1,3 @@
-/* eslint-disable custom-elements/expose-class-on-global */
 import {controller, target, targets} from '@github/catalyst'
 import {ActionListTruncationObserver} from '../alpha/action_list'
 

data/app/components/primer/beta/nav_list_group_element.js

@@ -62,6 +62,7 @@ let NavListGroupElement = class NavListGroupElement extends HTMLElement {
             if (this.currentPage === this.totalPages) {
                 this.showMoreItem.hidden = true;
             }
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
         }
         catch (err) {
             // Ignore network errors

data/app/components/primer/beta/nav_list_group_element.ts

@@ -54,6 +54,7 @@ export class NavListGroupElement extends HTMLElement {
       if (this.currentPage === this.totalPages) {
         this.showMoreItem.hidden = true
       }
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } catch (err) {
       // Ignore network errors
       this.showMoreDisabled = false

data/app/lib/primer/forms/acts_as_component.rb

@@ -71,8 +71,6 @@ module Primer
 
         if base_path
           @base_template_path = File.dirname(base_path)
-        else
-          warn "Could not identify the template for #{self}"
         end
       end
 

data/config/routes.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+Primer::ViewComponents::Engine.routes.draw do
+  get "/auto_complete", to: "auto_complete_test#index", as: :autocomplete_index
+  get "/auto_complete_no_results", to: "auto_complete_test#no_results", as: :autocomplete_no_results
+
+  resources :toggle_switch, only: [:create]
+  resources :nav_list_items, only: [:index]
+  resources :multi, only: [:create]
+  resources :select_panel_items, only: [:index]
+  resources :tree_view_items, only: [:index]
+
+  # generic form submission path
+  post "/form_handler", to: "form_handler#form_action", as: :generic_form_submission
+
+  post "/example_check/accepted", to: "auto_check#accepted", as: :example_check_accepted
+  post "/example_check/ok", to: "auto_check#ok", as: :example_check_ok
+  post "/example_check/error", to: "auto_check#error", as: :example_check_error
+  post "/example_check/random", to: "auto_check#random", as: :example_check_random
+
+  get "/action_menu/landing_page", to: "action_menu#landing", as: :action_menu_landing
+  post "/action_menu/form_action", to: "action_menu#form_action", as: :action_menu_form_action
+  get "/action_menu/deferred", to: "action_menu#deferred", as: :action_menu_deferred
+  get "/action_menu/deferred_preload", to: "action_menu#deferred_preload", as: :action_menu_deferred_preload
+
+  get "/include_fragment/deferred", to: "include_fragment#deferred", as: :include_fragment_deferred
+end

data/lib/primer/accessibility.rb

@@ -37,7 +37,10 @@ module Primer
       }
     }.freeze
 
+    # rubocop:disable Style/ClassMethodsDefinitions
     class << self
+    # rubocop:enable Style/ClassMethodsDefinitions
+
       def ignore_preview?(preview_class)
         IGNORED_PREVIEWS.include?(preview_class)
       end

data/lib/primer/view_components/linters/autocorrectable.rb

@@ -25,7 +25,7 @@ module ERBLint
       def message(args, processed_source)
         return self.class::MESSAGE if args.nil?
 
-        "#{self.class::MESSAGE}\nTry using:\n\n#{correction(args)}\n\nYou can also run erblint in autocorrect mode:\n\nbundle exec erblint -a #{processed_source.filename}\n"
+        "#{self.class::MESSAGE}\nTry using:\n\n#{correction(args)}\n\nYou can also run erb_lint in autocorrect mode:\n\nbundle exec erb_lint -a #{processed_source.filename}\n"
       end
     end
   end

data/lib/primer/view_components/linters/migrations/iconbutton_component.rb

@@ -4,7 +4,8 @@ module RuboCop
   module Cop
     module Migrations
       # Lint and autocorrect deprecated IconButton
-      class IconButtonComponent < RuboCop::Cop::Cop
+      class IconButtonComponent < RuboCop::Cop::Base
+        extend AutoCorrector
         INVALID_MESSAGE = <<~STR
           `Primer::IconButton` is deprecated. Please use `Primer::Beta::IconButton` instead.
         STR
@@ -20,13 +21,9 @@ module RuboCop
         def on_send(node)
           return unless icon_button(node)
 
-          add_offense(node, message: INVALID_MESSAGE)
-        end
-
-        def autocorrect(node)
-          return if hash_with_box_value?(node.arguments.first)
+          add_offense(node, message: INVALID_MESSAGE) do |corrector|
+            next if hash_with_box_value?(node.arguments.first)
 
-          lambda do |corrector|
             corrector.replace(icon_button(node), "Primer::Beta::IconButton")
           end
         end

data/lib/primer/view_components/linters/migrations/truncate_component.rb

@@ -4,7 +4,8 @@ module RuboCop
   module Cop
     module Migrations
       # Lint & autocorrect Truncate components
-      class TruncateComponent < RuboCop::Cop::Cop
+      class TruncateComponent < RuboCop::Cop::Base
+        extend AutoCorrector
         INVALID_MESSAGE = <<~STR
           `Primer::Truncate` is deprecated. Please use `Primer::Beta::Truncate` instead!
         STR
@@ -24,13 +25,9 @@ module RuboCop
         def on_send(node)
           return unless truncate_component(node)
 
-          add_offense(node, message: INVALID_MESSAGE)
-        end
-
-        def autocorrect(node)
-          return if hash_with_inline_value?(node.arguments.first)
+          add_offense(node, message: INVALID_MESSAGE) do |corrector|
+            next if hash_with_inline_value?(node.arguments.first)
 
-          lambda do |corrector|
             if node.arguments.first.nil? == false
               corrector.replace(node.children.first, "Primer::Beta::Truncate")
               corrector.insert_after(node.arguments.first, ", tag: :div") unless truncate_with_tag?(node.arguments.first)

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 43
-      PATCH = 2
+      PATCH = 3
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

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

@@ -8,7 +8,7 @@ module RuboCop
   module Cop
     module Primer
       # :nodoc:
-      class BaseCop < RuboCop::Cop::Cop
+      class BaseCop < RuboCop::Cop::Base
         # We only verify SystemArguments if it's a `.new` call on a component or
         # a ViewHeleper call.
         def valid_node?(node)

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

@@ -15,20 +15,19 @@ module RuboCop
       # good
       # Primer::Beta::ComponentName.new()
       class ComponentNameMigration < BaseCop
+        extend AutoCorrector
+
         def on_send(node)
           return unless node.method_name == :new && !node.receiver.nil? && ::Primer::Deprecations.deprecated?(node.receiver.const_name)
 
           message = ::Primer::Deprecations.deprecation_message(node.receiver.const_name)
-          add_offense(node.receiver, message: message)
-        end
-
-        def autocorrect(node)
-          lambda do |corrector|
-            component_name = node.const_name
-            return unless ::Primer::Deprecations.correctable?(component_name)
+          
+          add_offense(node.receiver, message: message) do |corrector|
+            component_name = node.receiver.const_name
+            next unless ::Primer::Deprecations.correctable?(component_name)
 
             replacement = ::Primer::Deprecations.replacement(component_name)
-            corrector.replace(node, replacement) if replacement.present?
+            corrector.replace(node.receiver, replacement) if replacement.present?
           end
         end
       end

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

@@ -14,6 +14,7 @@ module RuboCop
       # good
       # Component.new(foo: :bar)
       class DeprecatedArguments < BaseCop
+        extend AutoCorrector
         INVALID_MESSAGE = <<~STR
           Avoid using deprecated arguments: https://primer.style/view-components/deprecated.
         STR
@@ -283,17 +284,15 @@ module RuboCop
             key, value = extract_kv_from(pair)
             next unless DEPRECATED.key?(key) && DEPRECATED[key].key?(value)
 
-            add_offense(pair, message: INVALID_MESSAGE)
+            add_offense(pair, message: INVALID_MESSAGE) do |corrector|
+              key, value = extract_kv_from(pair)
+              replacement = DEPRECATED[key][value]
+              corrector.replace(pair, replacement) if replacement.present?
+            end
           end
         end
 
-        def autocorrect(node)
-          lambda do |corrector|
-            key, value = extract_kv_from(node)
-            replacement = DEPRECATED[key][value]
-            corrector.replace(node, replacement) if replacement.present?
-          end
-        end
+
 
         def extract_kv_from(pair)
           key = pair.key.value

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

@@ -14,6 +14,7 @@ module RuboCop
       # good
       # ButtonComponent.new(size: :small)
       class DeprecatedButtonArguments < BaseCop
+        extend AutoCorrector
         INVALID_MESSAGE = <<~STR
           `variant` is deprecated. Use `size` instead.
         STR
@@ -37,14 +38,12 @@ module RuboCop
 
           return if pair.nil?
 
-          add_offense(pair.key, message: INVALID_MESSAGE)
-        end
-
-        def autocorrect(node)
-          lambda do |corrector|
-            corrector.replace(node, DEPRECATIONS[node.value])
+          add_offense(pair.key, message: INVALID_MESSAGE) do |corrector|
+            corrector.replace(pair.key, DEPRECATIONS[pair.key.value])
           end
         end
+
+
       end
     end
   end

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

@@ -14,6 +14,7 @@ module RuboCop
       # good
       # Primer::Beta::Label.new(scheme: :accent)
       class DeprecatedLabelSchemes < BaseCop
+        extend AutoCorrector
         INVALID_MESSAGE = <<~STR
           Avoid using deprecated schemes: https://primer.style/view-components/deprecated#labelcomponent.
         STR
@@ -44,16 +45,14 @@ module RuboCop
 
             next unless DEPRECATIONS.key?(value)
 
-            add_offense(pair.value, message: INVALID_MESSAGE)
+            add_offense(pair.value, message: INVALID_MESSAGE) do |corrector|
+              replacement = DEPRECATIONS[pair.value.value.to_sym]
+              corrector.replace(pair.value, replacement)
+            end
           end
         end
 
-        def autocorrect(node)
-          lambda do |corrector|
-            replacement = DEPRECATIONS[node.value.to_sym]
-            corrector.replace(node, replacement)
-          end
-        end
+
 
         private
 

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

@@ -20,6 +20,7 @@ module RuboCop
       # good
       # Primer::Beta::Label.new(inline: true)
       class DeprecatedLabelVariants < BaseCop
+        extend AutoCorrector
         def on_send(node)
           return unless label_node?(node)
           return unless node.arguments?
@@ -37,26 +38,18 @@ module RuboCop
 
             case pair.value.value
             when :large, "large"
-              add_offense(pair, message: "Avoid using `variant: :large` with `LabelComponent`. Use `size: :large` instead.")
+              add_offense(pair, message: "Avoid using `variant: :large` with `LabelComponent`. Use `size: :large` instead.") do |corrector|
+                corrector.replace(pair, "size: :large")
+              end
             when :inline, "inline"
-              add_offense(pair, message: "Avoid using `variant: :inline` with `LabelComponent`. Use `inline: true` instead.")
+              add_offense(pair, message: "Avoid using `variant: :inline` with `LabelComponent`. Use `inline: true` instead.") do |corrector|
+                corrector.replace(pair, "inline: true")
+              end
             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
 

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

@@ -16,7 +16,7 @@ module RuboCop
       #
       # good
       # @system_arguments[:tag] = :h2
-      class NoTagMemoize < RuboCop::Cop::Cop
+      class NoTagMemoize < RuboCop::Cop::Base
         INVALID_MESSAGE = <<~STR
           Avoid `[:tag] ||=`. Instead, try one of the following:
             - Don't allow consumers to update the tag by having a fixed tag (e.g. `system_arguments[:tag] = :div`)

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

@@ -22,7 +22,8 @@ module RuboCop
       # primer_octicon(:"icon-with-daashes")
       # primer_octicon(@ivar)
       # primer_octicon(condition > "icon" : "other-icon")
-      class PrimerOcticon < RuboCop::Cop::Cop
+      class PrimerOcticon < RuboCop::Cop::Base
+        extend AutoCorrector
         INVALID_MESSAGE = <<~STR
           Replace the octicon helper with primer_octicon. See https://primer.style/view-components/components/octicon for details.
         STR
@@ -65,11 +66,7 @@ module RuboCop
             return if invalid_classes.present?
           end
 
-          add_offense(node, message: INVALID_MESSAGE)
-        end
-
-        def autocorrect(node)
-          lambda do |corrector|
+          add_offense(node, message: INVALID_MESSAGE) do |corrector|
             kwargs = kwargs(node)
 
             # Converting arguments for the component
@@ -86,6 +83,8 @@ module RuboCop
           end
         end
 
+
+
         private
 
         def transform_sizes(kwargs)

data/previews/primer/beta/breadcrumbs_preview/with_long_items.html.erb

@@ -0,0 +1,13 @@
+<% texts = [
+          "Home",
+          "This is a very long breadcrumb item that would normally cause overflow issues by being much longer than expected breadcrumb text should be",
+          "And another extremely long breadcrumb item name that demonstrates the max-width fix working correctly to prevent page overflow"
+        ] %>
+
+<%= render(Primer::Beta::Breadcrumbs.new) do |breadcrumbs| %>
+  <% texts.each_with_index do |text, i| %>
+    <% breadcrumbs.with_item(href: "##{i}") do %>
+      <%= text %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/beta/breadcrumbs_preview.rb

@@ -47,6 +47,12 @@ module Primer
           end
         end
       end
+
+      # @label With long items (no truncation)
+      # @snapshot
+      def with_long_items
+        render_with_template
+      end
     end
   end
 end

data/previews/primer/beta/details_preview.rb

@@ -70,6 +70,22 @@ module Primer
           component.with_body { "Body" }
         end
       end
+
+      # @label With aria labels
+      #
+      # @param overlay [Symbol] select [none, default, dark]
+      # @param reset [Boolean] toggle
+      # @param disabled [Boolean] toggle
+      def with_aria_labels(reset: false, overlay: :default, disabled: false)
+        render Primer::Beta::Details.new(reset: reset, overlay: overlay, disabled: disabled) do |component|
+          component.with_summary(aria_label_closed: "Expand details", aria_label_open: "Collapse details") do
+            "Summary with aria labels"
+          end
+          component.with_body do
+            "Body"
+          end
+        end
+      end
     end
   end
 end