primer_view_components 0.0.113 → 0.0.115

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

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+require "octicons"
+
+module Primer
+  module Alpha
+    # OcticonSymbols renders a symbol dictionary using a list of <%= link_to_octicons %>.
+    class OcticonSymbols < Primer::Component
+      warn_on_deprecated_slot_setter
+
+      # @example Symbol dictionary
+      #   <%= render(Primer::Beta::Octicon.new(icon: :check, use_symbol: true, color: :success)) %>
+      #   <%= render(Primer::Beta::Octicon.new(icon: :check, use_symbol: true, color: :danger)) %>
+      #   <%= render(Primer::Beta::Octicon.new(icon: :check, use_symbol: true, size: :medium)) %>
+      #   <%= render(Primer::Alpha::OcticonSymbols.new(icons: [{ symbol: :check }, { symbol: :check, size: :medium }])) %>
+      #
+      # @param icons [Array<Hash>] List of icons to render, in the format { symbol: :icon_name, size: :small }
+      def initialize(icons: [])
+        @icons = {}
+        icons.each do |icon|
+          symbol = icon[:symbol]
+          size = Primer::Beta::Octicon::SIZE_MAPPINGS[
+            fetch_or_fallback(Primer::Beta::Octicon::SIZE_OPTIONS, icon[:size] || Primer::Beta::Octicon::SIZE_DEFAULT, Primer::Beta::Octicon::SIZE_DEFAULT)
+          ]
+
+          cache_key = Primer::Octicon::Cache.get_key(symbol: symbol, size: size)
+
+          if (cache_icon = Primer::Octicon::Cache.read(cache_key))
+            icon_instance = cache_icon
+          else
+            icon_instance = Octicons::Octicon.new(symbol, height: size)
+
+            Primer::Octicon::Cache.set(cache_key, icon_instance)
+          end
+
+          # Don't put the same icon twice
+          @icons[[symbol, icon_instance.height]] = icon_instance if @icons[[symbol, icon_instance.height]].nil?
+        end
+      end
+
+      def render?
+        @icons.any?
+      end
+
+      def symbol_tags
+        safe_join(
+          @icons.values.map do |icon|
+            content_tag(
+              :symbol,
+              icon.path.html_safe, # rubocop:disable Rails/OutputSafety
+              id: "octicon_#{icon.symbol}_#{icon.height}",
+              viewBox: icon.options[:viewBox],
+              width: icon.width,
+              height: icon.height
+            )
+          end
+        )
+      end
+    end
+  end
+end

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

@@ -7,6 +7,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 < Primer::Component
+      warn_on_deprecated_slot_setter
       status :alpha
 
       # @!method initialize

data/app/components/primer/alpha/toggle_switch.html.erb

@@ -1,6 +1,6 @@
 <%= render(Primer::BaseComponent.new(tag: "toggle-switch", **@system_arguments)) do %>
-  <%= render(Primer::OcticonComponent.new(size: :small, color: :danger, icon: :alert, hidden: "true", data: { target: "toggle-switch.errorIcon" })) %>
-  <%= render(Primer::SpinnerComponent.new(size: :small, hidden: "true", data: { target: "toggle-switch.loadingSpinner" })) %>
+  <%= render(Primer::Beta::Octicon.new(size: :small, color: :danger, icon: :alert, hidden: "true", data: { target: "toggle-switch.errorIcon" })) %>
+  <%= render(Primer::Beta::Spinner.new(size: :small, hidden: "true", data: { target: "toggle-switch.loadingSpinner" })) %>
   <%= render(Primer::Beta::Text.new(aria: { hidden: true }, classes: "ToggleSwitch-status")) do %>
     <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOn").with_content("On")) %>
     <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOff").with_content("Off")) %>

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

@@ -6,6 +6,8 @@ module Primer
     # settings that should cause an immediate update. If configured with a "src" attribute, the component will
     # make a POST request containing data of the form "value: 0 | 1".
     class ToggleSwitch < Primer::Component
+      warn_on_deprecated_slot_setter
+
       SIZE_DEFAULT = :medium
       SIZE_MAPPINGS = {
         SIZE_DEFAULT => nil,

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

@@ -9,7 +9,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_update, _ToolTipElement_updatePosition;
+var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_update, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
 import { getAnchoredPosition } from '@primer/behaviors';
 const TOOLTIP_OPEN_CLASS = 'tooltip-open';
 const TOOLTIP_ARROW_EDGE_OFFSET = 6;
@@ -187,6 +187,8 @@ class ToolTipElement extends HTMLElement {
     }
     connectedCallback() {
         var _a;
+        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControlReference).call(this);
+        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateDirection).call(this);
         if (!this.shadowRoot) {
             const shadow = this.attachShadow({ mode: 'open' });
             // eslint-disable-next-line github/no-inner-html
@@ -241,77 +243,13 @@ class ToolTipElement extends HTMLElement {
         }
     }
     attributeChangedCallback(name) {
+        if (!this.isConnected)
+            return;
         if (name === 'id' || name === 'data-type') {
-            if (!this.id || !this.control)
-                return;
-            if (this.type === 'label') {
-                let labelledBy = this.control.getAttribute('aria-labelledby');
-                if (labelledBy) {
-                    if (!labelledBy.split(' ').includes(this.id)) {
-                        labelledBy = `${labelledBy} ${this.id}`;
-                    }
-                    else {
-                        labelledBy = `${labelledBy}`;
-                    }
-                }
-                else {
-                    labelledBy = this.id;
-                }
-                this.control.setAttribute('aria-labelledby', labelledBy);
-                // Prevent duplicate accessible name announcements.
-                this.setAttribute('aria-hidden', 'true');
-            }
-            else {
-                let describedBy = this.control.getAttribute('aria-describedby');
-                if (describedBy) {
-                    if (!describedBy.split(' ').includes(this.id)) {
-                        describedBy = `${describedBy} ${this.id}`;
-                    }
-                    else {
-                        describedBy = `${describedBy}`;
-                    }
-                }
-                else {
-                    describedBy = this.id;
-                }
-                this.control.setAttribute('aria-describedby', describedBy);
-            }
+            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControlReference).call(this);
         }
         else if (name === 'data-direction') {
-            this.classList.remove(...DIRECTION_CLASSES);
-            const direction = this.direction;
-            if (direction === 'n') {
-                __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
-                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
-            }
-            else if (direction === 'ne') {
-                __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
-                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
-            }
-            else if (direction === 'e') {
-                __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
-                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-right', "f");
-            }
-            else if (direction === 'se') {
-                __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
-                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
-            }
-            else if (direction === 's') {
-                __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
-                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
-            }
-            else if (direction === 'sw') {
-                __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
-                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
-            }
-            else if (direction === 'w') {
-                __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
-                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-left', "f");
-            }
-            else if (direction === 'nw') {
-                __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
-                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
-            }
+            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateDirection).call(this);
         }
     }
 }
@@ -327,6 +265,76 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
         }
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
     }
+}, _ToolTipElement_updateControlReference = function _ToolTipElement_updateControlReference() {
+    if (!this.id || !this.control)
+        return;
+    if (this.type === 'label') {
+        let labelledBy = this.control.getAttribute('aria-labelledby');
+        if (labelledBy) {
+            if (!labelledBy.split(' ').includes(this.id)) {
+                labelledBy = `${labelledBy} ${this.id}`;
+            }
+            else {
+                labelledBy = `${labelledBy}`;
+            }
+        }
+        else {
+            labelledBy = this.id;
+        }
+        this.control.setAttribute('aria-labelledby', labelledBy);
+        // Prevent duplicate accessible name announcements.
+        this.setAttribute('aria-hidden', 'true');
+    }
+    else {
+        let describedBy = this.control.getAttribute('aria-describedby');
+        if (describedBy) {
+            if (!describedBy.split(' ').includes(this.id)) {
+                describedBy = `${describedBy} ${this.id}`;
+            }
+            else {
+                describedBy = `${describedBy}`;
+            }
+        }
+        else {
+            describedBy = this.id;
+        }
+        this.control.setAttribute('aria-describedby', describedBy);
+    }
+}, _ToolTipElement_updateDirection = function _ToolTipElement_updateDirection() {
+    this.classList.remove(...DIRECTION_CLASSES);
+    const direction = this.direction;
+    if (direction === 'n') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
+    }
+    else if (direction === 'ne') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
+    }
+    else if (direction === 'e') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-right', "f");
+    }
+    else if (direction === 'se') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
+    }
+    else if (direction === 's') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
+    }
+    else if (direction === 'sw') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
+    }
+    else if (direction === 'w') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-left', "f");
+    }
+    else if (direction === 'nw') {
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
+    }
 }, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
     if (!this.control)
         return;

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

@@ -186,6 +186,8 @@ class ToolTipElement extends HTMLElement {
   }
 
   connectedCallback() {
+    this.#updateControlReference()
+    this.#updateDirection()
     if (!this.shadowRoot) {
       const shadow = this.attachShadow({mode: 'open'})
       // eslint-disable-next-line github/no-inner-html
@@ -259,64 +261,74 @@ class ToolTipElement extends HTMLElement {
   }
 
   attributeChangedCallback(name: string) {
+    if (!this.isConnected) return
+
     if (name === 'id' || name === 'data-type') {
-      if (!this.id || !this.control) return
-      if (this.type === 'label') {
-        let labelledBy = this.control.getAttribute('aria-labelledby')
-        if (labelledBy) {
-          if (!labelledBy.split(' ').includes(this.id)) {
-            labelledBy = `${labelledBy} ${this.id}`
-          } else {
-            labelledBy = `${labelledBy}`
-          }
+      this.#updateControlReference()
+    } else if (name === 'data-direction') {
+      this.#updateDirection()
+    }
+  }
+
+  #updateControlReference() {
+    if (!this.id || !this.control) return
+    if (this.type === 'label') {
+      let labelledBy = this.control.getAttribute('aria-labelledby')
+      if (labelledBy) {
+        if (!labelledBy.split(' ').includes(this.id)) {
+          labelledBy = `${labelledBy} ${this.id}`
         } else {
-          labelledBy = this.id
+          labelledBy = `${labelledBy}`
         }
-        this.control.setAttribute('aria-labelledby', labelledBy)
-
-        // Prevent duplicate accessible name announcements.
-        this.setAttribute('aria-hidden', 'true')
       } else {
-        let describedBy = this.control.getAttribute('aria-describedby')
-        if (describedBy) {
-          if (!describedBy.split(' ').includes(this.id)) {
-            describedBy = `${describedBy} ${this.id}`
-          } else {
-            describedBy = `${describedBy}`
-          }
+        labelledBy = this.id
+      }
+      this.control.setAttribute('aria-labelledby', labelledBy)
+
+      // Prevent duplicate accessible name announcements.
+      this.setAttribute('aria-hidden', 'true')
+    } else {
+      let describedBy = this.control.getAttribute('aria-describedby')
+      if (describedBy) {
+        if (!describedBy.split(' ').includes(this.id)) {
+          describedBy = `${describedBy} ${this.id}`
         } else {
-          describedBy = this.id
+          describedBy = `${describedBy}`
         }
-        this.control.setAttribute('aria-describedby', describedBy)
-      }
-    } else if (name === 'data-direction') {
-      this.classList.remove(...DIRECTION_CLASSES)
-      const direction = this.direction
-      if (direction === 'n') {
-        this.#align = 'center'
-        this.#side = 'outside-top'
-      } else if (direction === 'ne') {
-        this.#align = 'start'
-        this.#side = 'outside-top'
-      } else if (direction === 'e') {
-        this.#align = 'center'
-        this.#side = 'outside-right'
-      } else if (direction === 'se') {
-        this.#align = 'start'
-        this.#side = 'outside-bottom'
-      } else if (direction === 's') {
-        this.#align = 'center'
-        this.#side = 'outside-bottom'
-      } else if (direction === 'sw') {
-        this.#align = 'end'
-        this.#side = 'outside-bottom'
-      } else if (direction === 'w') {
-        this.#align = 'center'
-        this.#side = 'outside-left'
-      } else if (direction === 'nw') {
-        this.#align = 'end'
-        this.#side = 'outside-top'
+      } else {
+        describedBy = this.id
       }
+      this.control.setAttribute('aria-describedby', describedBy)
+    }
+  }
+
+  #updateDirection() {
+    this.classList.remove(...DIRECTION_CLASSES)
+    const direction = this.direction
+    if (direction === 'n') {
+      this.#align = 'center'
+      this.#side = 'outside-top'
+    } else if (direction === 'ne') {
+      this.#align = 'start'
+      this.#side = 'outside-top'
+    } else if (direction === 'e') {
+      this.#align = 'center'
+      this.#side = 'outside-right'
+    } else if (direction === 'se') {
+      this.#align = 'start'
+      this.#side = 'outside-bottom'
+    } else if (direction === 's') {
+      this.#align = 'center'
+      this.#side = 'outside-bottom'
+    } else if (direction === 'sw') {
+      this.#align = 'end'
+      this.#side = 'outside-bottom'
+    } else if (direction === 'w') {
+      this.#align = 'center'
+      this.#side = 'outside-left'
+    } else if (direction === 'nw') {
+      this.#align = 'end'
+      this.#side = 'outside-top'
     }
   }
 

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

@@ -23,6 +23,8 @@ module Primer
     #   - When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.
     #   `label` type is usually only appropriate for an icon-only control.
     class Tooltip < Primer::Component
+      warn_on_deprecated_slot_setter
+
       DIRECTION_DEFAULT = :s
       DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :n, :e, :w, :ne, :nw, :se, :sw].freeze
 

data/app/components/primer/beta/auto_complete/item.rb

@@ -12,9 +12,9 @@ module Primer
 
         # The leading visual rendered before the link.
         #
-        # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %> or <%= link_to_component(Primer::OcticonComponent) %>
+        # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %> or <%= link_to_component(Primer::Beta::Octicon) %>
         renders_one :leading_visual, types: {
-          icon: Primer::OcticonComponent,
+          icon: Primer::Beta::Octicon,
           avatar: lambda { |**kwargs|
             Primer::Beta::Avatar.new(**{ **kwargs, size: 16 })
           }
@@ -22,9 +22,9 @@ module Primer
 
         # The trailing visual rendered after the link.
         #
-        # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::OcticonComponent) %>, <%= link_to_component(Primer::Beta::Label) %>, or <%= link_to_component(Primer::Beta::Counter) %>
+        # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>, <%= link_to_component(Primer::Beta::Label) %>, or <%= link_to_component(Primer::Beta::Counter) %>
         renders_one :trailing_visual, types: {
-          icon: Primer::OcticonComponent,
+          icon: Primer::Beta::Octicon,
           label: Primer::Beta::Label,
           counter: Primer::Beta::Counter
         }

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

@@ -39,13 +39,13 @@ module Primer
 
       # Leading visual.
       #
-      # - `leading_visual_icon` for a <%= link_to_component(Primer::OcticonComponent) %>.
+      # - `leading_visual_icon` for a <%= link_to_component(Primer::Beta::Octicon) %>.
       #
-      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
       renders_one :leading_visual, types: {
         icon: lambda { |**system_arguments|
           system_arguments[:classes] = class_names("FormControl-input-leadingVisual")
-          Primer::OcticonComponent.new(**system_arguments)
+          Primer::Beta::Octicon.new(**system_arguments)
         }
       }
 

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

@@ -17,6 +17,7 @@ module Primer
     #   rather than `@kittenuser`.
     #   [Learn more about best image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/)
     class Avatar < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_SIZE = 20

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

@@ -4,6 +4,7 @@ module Primer
   module Beta
     # Use `BaseButton` to render an unstyled `<button>` tag that can be customized.
     class BaseButton < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_TAG = :button

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

@@ -19,9 +19,9 @@ module Primer
       #
       # Use:
       #
-      # - `visual_icon` for an <%= link_to_component(Primer::OcticonComponent) %>.
+      # - `visual_icon` for an <%= link_to_component(Primer::Beta::Octicon) %>.
       # - `visual_image` for an <%= link_to_component(Primer::Alpha::Image) %>.
-      # - `visual_spinner` for a <%= link_to_component(Primer::SpinnerComponent) %>.
+      # - `visual_spinner` for a <%= link_to_component(Primer::Beta::Spinner) %>.
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :visual, types: {
@@ -29,12 +29,12 @@ module Primer
           system_arguments[:size] ||= :medium
           system_arguments[:classes] = class_names("blankslate-icon", system_arguments[:classes])
 
-          Primer::OcticonComponent.new(**system_arguments)
+          Primer::Beta::Octicon.new(**system_arguments)
         },
         spinner: lambda { |**system_arguments|
           system_arguments[:classes] = class_names("blankslate-image", system_arguments[:classes])
 
-          Primer::SpinnerComponent.new(**system_arguments)
+          Primer::Beta::Spinner.new(**system_arguments)
         },
         image: lambda { |**system_arguments|
           system_arguments[:size] = "56x56"
@@ -83,7 +83,7 @@ module Primer
         system_arguments[:size] = :medium
         system_arguments[:scheme] ||= :primary
 
-        Primer::ButtonComponent.new(**system_arguments)
+        Primer::Beta::Button.new(**system_arguments)
       }
 
       # Optional secondary action

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

@@ -39,12 +39,12 @@ module Primer
       #
       # Use:
       #
-      # - `leading_visual_icon` for a <%= link_to_component(Primer::OcticonComponent) %>.
+      # - `leading_visual_icon` for a <%= link_to_component(Primer::Beta::Octicon) %>.
       #
-      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
       renders_one :leading_visual, types: {
         icon: lambda { |**system_arguments|
-          Primer::OcticonComponent.new(**system_arguments)
+          Primer::Beta::Octicon.new(**system_arguments)
         }
       }
 
@@ -56,7 +56,7 @@ module Primer
       #
       # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Counter) %>.
       renders_one :trailing_visual, types: {
-        icon: Primer::OcticonComponent,
+        icon: Primer::Beta::Octicon,
         label: Primer::Beta::Label,
         counter: Primer::Beta::Counter
       }
@@ -65,11 +65,11 @@ module Primer
       #
       # Use:
       #
-      # - `trailing_action_icon` for a <%= link_to_component(Primer::OcticonComponent) %>.
+      # - `trailing_action_icon` for a <%= link_to_component(Primer::Beta::Octicon) %>.
       #
-      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
       renders_one :trailing_action, types: {
-        icon: Primer::OcticonComponent
+        icon: Primer::Beta::Octicon
       }
 
       # `Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.

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

@@ -2,7 +2,7 @@
   <% if content.present? %>
     <%= content %>
   <% else %>
-    <%= render Primer::OcticonComponent.new(:copy) %>
-    <%= render Primer::OcticonComponent.new(:check, color: :success, style: "display: none;") %>
+    <%= render Primer::Beta::Octicon.new(:copy) %>
+    <%= render Primer::Beta::Octicon.new(:check, color: :success, style: "display: none;") %>
   <% end %>
 <% end %>

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

@@ -7,6 +7,7 @@ module Primer
     # @accessibility
     #   Always set an accessible label to help the user interact with the component.
     class ClipboardCopy < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       # @example Default

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

@@ -9,6 +9,7 @@ module Primer
     #   You may choose to override this label with something more descriptive via [system_arguments][0].
     # [0]: https://primer.style/view-components/system-arguments#html-attributes
     class CloseButton < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_TYPE = :button
@@ -33,7 +34,7 @@ module Primer
 
       def call
         render(Primer::Beta::BaseButton.new(**@system_arguments)) do
-          render(Primer::OcticonComponent.new("x"))
+          render(Primer::Beta::Octicon.new("x"))
         end
       end
     end

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

@@ -9,6 +9,7 @@ module Primer
     #   should be accompanied with text such as `issues` or `pull requests`.
     #
     class Counter < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_SCHEME = :default

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

@@ -18,6 +18,7 @@ module Primer
     #   Headings allow assistive technology users to quickly navigate around a page. Navigation to text that is not meant to be a heading can be a confusing experience.
     #   <%= link_to_heading_practices %>
     class Heading < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       TAG_FALLBACK = :h2

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

@@ -1,6 +1,6 @@
 <%= render Primer::ConditionalWrapper.new(condition: render_tooltip?, tag: :div, classes: "Button-withTooltip", **@wrapper_arguments) do %>
   <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
-    <%= render Primer::OcticonComponent.new(icon: @icon, classes: "Button-visual") %>
+    <%= render Primer::Beta::Octicon.new(icon: @icon, classes: "Button-visual") %>
   <% end -%>
   <%= render Primer::Alpha::Tooltip.new(**@tooltip_arguments) if render_tooltip? %>
 <% end %>

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

@@ -15,6 +15,7 @@ module Primer
     #   Either `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.
     #   [Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)
     class IconButton < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_SCHEME = :default

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

@@ -7,6 +7,7 @@ module Primer
     # @accessibility
     #   Use `aria-label` if the `Label` or the context around it don't explain the label.
     class Label < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_TAG = :span