primer_view_components 0.0.89 → 0.0.90

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

@@ -94,12 +94,12 @@ module Primer
       #
       # @example With custom classes for the input
       #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
-      #     <% c.input(classes: "custom-class") %>
+      #     <% c.with_input(classes: "custom-class") %>
       #   <% end %>
       #
       # @example With custom classes for the results
       #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
-      #     <% c.results(classes: "custom-class") do %>
+      #     <% c.with_results(classes: "custom-class") do %>
       #       <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
       #         Apple
       #       <% end %>

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

@@ -14,6 +14,8 @@ module Primer
     #   Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether
     #   `main` or `sidebar` comes first in code. The code order won’t affect the visual position.
     class Layout < Primer::Component
+      status :alpha
+
       FIRST_IN_SOURCE_DEFAULT = :sidebar
       FIRST_IN_SOURCE_OPTIONS = [FIRST_IN_SOURCE_DEFAULT, :main].freeze
 
@@ -80,8 +82,8 @@ module Primer
       # @example Default
       #
       #   <%= render(Primer::Alpha::Layout.new) do |c| %>
-      #     <% c.main(border: true) { "Main" } %>
-      #     <% c.sidebar(border: true) { "Sidebar" } %>
+      #     <% c.with_main(border: true) { "Main" } %>
+      #     <% c.with_sidebar(border: true) { "Sidebar" } %>
       #   <% end %>
       #
       # @example Main widths
@@ -96,20 +98,20 @@ module Primer
       #
       #   @code
       #     <%= render(Primer::Alpha::Layout.new) do |c| %>
-      #       <% c.main(width: :full, border: true) { "Main" } %>
-      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #       <% c.with_main(width: :full, border: true) { "Main" } %>
+      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.main(width: :md, border: true) { "Main" } %>
-      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #       <% c.with_main(width: :md, border: true) { "Main" } %>
+      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.main(width: :lg, border: true) { "Main" } %>
-      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #       <% c.with_main(width: :lg, border: true) { "Main" } %>
+      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.main(width: :xl, border: true) { "Main" } %>
-      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #       <% c.with_main(width: :xl, border: true) { "Main" } %>
+      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
       #
       # @example Sidebar widths
@@ -125,16 +127,16 @@ module Primer
       #
       #   @code
       #     <%= render(Primer::Alpha::Layout.new) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(width: :default, border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(width: :default, border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(width: :narrow, border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(width: :narrow, border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(width: :wide, border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(width: :wide, border: true) { "Sidebar" } %>
       #     <% end %>
       #
       # @example Sidebar placement
@@ -144,12 +146,12 @@ module Primer
       #
       #   @code
       #     <%= render(Primer::Alpha::Layout.new) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(col_placement: :start, border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(col_placement: :start, border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new( mt: 5)) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(col_placement: :end, border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(col_placement: :end, border: true) { "Sidebar" } %>
       #     <% end %>
       #
       # @example Sidebar placement as row
@@ -163,16 +165,16 @@ module Primer
       #
       #   @code
       #     <%= render(Primer::Alpha::Layout.new) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(row_placement: :start, border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(row_placement: :start, border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(row_placement: :end, border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(row_placement: :end, border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(row_placement: :none, border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(row_placement: :none, border: true) { "Sidebar" } %>
       #     <% end %>
       #
       # @example Changing when to render `Layout` as columns
@@ -183,16 +185,16 @@ module Primer
       #
       #   @code
       #     <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :sm)) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :md, mt: 5)) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
       #     <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :lg, mt: 5)) do |c| %>
-      #       <% c.main(border: true) { "Main" } %>
-      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #       <% c.with_main(border: true) { "Main" } %>
+      #       <% c.with_sidebar(border: true) { "Sidebar" } %>
       #     <% end %>
       #
       # @param stacking_breakpoint [Symbol] When the `Layout` should change from rows into columns. <%= one_of(Primer::Alpha::Layout::STACKING_BREAKPOINT_OPTIONS) %>

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

@@ -49,30 +49,30 @@ module Primer
       #     `<nav>` is a landmark and should be reserved for main navigation links. See <%= link_to_accessibility %>.
       #   @code
       #     <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |c| %>
-      #       <% c.tab(selected: true, href: "#") { "Tab 1" } %>
-      #       <% c.tab(href: "#") { "Tab 2" } %>
-      #       <% c.tab(href: "#") { "Tab 3" } %>
+      #       <% c.with_tab(selected: true, href: "#") { "Tab 1" } %>
+      #       <% c.with_tab(href: "#") { "Tab 2" } %>
+      #       <% c.with_tab(href: "#") { "Tab 3" } %>
       #     <% end %>
       #
       # @example Default with `<div>`
       #   <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |c| %>
-      #     <% c.tab(selected: true, href: "#") { "Tab 1" } %>
-      #     <% c.tab(href: "#") { "Tab 2" } %>
-      #     <% c.tab(href: "#") { "Tab 3" } %>
+      #     <% c.with_tab(selected: true, href: "#") { "Tab 1" } %>
+      #     <% c.with_tab(href: "#") { "Tab 2" } %>
+      #     <% c.with_tab(href: "#") { "Tab 3" } %>
       #   <% end %>
       #
       # @example With icons and counters
       #   <%= render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |component| %>
-      #     <% component.tab(href: "#", selected: true) do |t| %>
+      #     <% component.with_tab(href: "#", selected: true) do |t| %>
       #       <% t.icon(icon: :star) %>
       #       <% t.text { "Item 1" } %>
       #     <% end %>
-      #     <% component.tab(href: "#") do |t| %>
+      #     <% component.with_tab(href: "#") do |t| %>
       #       <% t.icon(icon: :star) %>
       #       <% t.text { "Item 2" } %>
       #       <% t.counter(count: 10) %>
       #     <% end %>
-      #     <% component.tab(href: "#") do |t| %>
+      #     <% component.with_tab(href: "#") do |t| %>
       #       <% t.text { "Item 3" } %>
       #       <% t.counter(count: 10) %>
       #     <% end %>
@@ -80,20 +80,20 @@ module Primer
       #
       # @example With extra content
       #   <%= render(Primer::Alpha::TabNav.new(label: "With extra content")) do |c| %>
-      #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-      #     <% c.tab(href: "#") { "Tab 2" } %>
-      #     <% c.tab(href: "#") { "Tab 3" } %>
-      #     <% c.extra do %>
+      #     <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% c.with_tab(href: "#") { "Tab 2" } %>
+      #     <% c.with_tab(href: "#") { "Tab 3" } %>
+      #     <% c.with_extra do %>
       #       <%= render(Primer::ButtonComponent.new(float: :right)) { "Button" } %>
       #     <% end %>
       #   <% end %>
       #
       # @example Adding extra content after the tabs
       #   <%= render(Primer::Alpha::TabNav.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |c| %>
-      #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-      #     <% c.tab(href: "#") { "Tab 2" } %>
-      #     <% c.tab(href: "#") { "Tab 3" } %>
-      #     <% c.extra(align: :right) do %>
+      #     <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% c.with_tab(href: "#") { "Tab 2" } %>
+      #     <% c.with_tab(href: "#") { "Tab 3" } %>
+      #     <% c.with_extra(align: :right) do %>
       #       <div>
       #         <%= render(Primer::ButtonComponent.new) { "Button" } %>
       #       </div>
@@ -102,9 +102,9 @@ module Primer
       #
       # @example Customizing the body
       #   <%= render(Primer::Alpha::TabNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |c| %>
-      #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-      #     <% c.tab(href: "#") { "Tab 2" } %>
-      #     <% c.tab(href: "#") { "Tab 3" } %>
+      #     <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% c.with_tab(href: "#") { "Tab 2" } %>
+      #     <% c.with_tab(href: "#") { "Tab 3" } %>
       #   <% end %>
       #
       # @param tag [Symbol] <%= one_of(Primer::Alpha::TabNav::TAG_OPTIONS) %>

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

@@ -43,13 +43,13 @@ module Primer
 
       # @example Default
       #   <%= render(Primer::Alpha::TabPanels.new(label: "With panels")) do |component| %>
-      #     <% component.tab(id: "tab-1", selected: true) do |t| %>
+      #     <% component.with_tab(id: "tab-1", selected: true) do |t| %>
       #       <% t.text { "Tab 1" } %>
       #       <% t.panel do %>
       #         Panel 1
       #       <% end %>
       #     <% end %>
-      #     <% component.tab(id: "tab-2") do |t| %>
+      #     <% component.with_tab(id: "tab-2") do |t| %>
       #       <% t.text { "Tab 2" } %>
       #       <% t.panel do %>
       #         Panel 2

data/app/components/primer/alpha/tool-tip-element.d.ts

@@ -9,13 +9,11 @@ declare class ToolTipElement extends HTMLElement {
     get direction(): Direction;
     set direction(value: Direction);
     get control(): HTMLElement | null;
-    set visibilityHidden(value: true | false);
-    get visibilityHidden(): true | false;
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleEvent(event: Event): void;
     static observedAttributes: string[];
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string): void;
 }
 declare global {
     interface Window {

data/app/components/primer/alpha/tool-tip-element.js

@@ -176,12 +176,6 @@ class ToolTipElement extends HTMLElement {
     get control() {
         return this.ownerDocument.getElementById(this.htmlFor);
     }
-    set visibilityHidden(value) {
-        this.style.visibility = value ? 'hidden' : '';
-    }
-    get visibilityHidden() {
-        return this.style.visibility === 'hidden';
-    }
     connectedCallback() {
         var _a;
         if (!this.shadowRoot) {
@@ -194,7 +188,7 @@ class ToolTipElement extends HTMLElement {
         <slot></slot>
       `;
         }
-        this.visibilityHidden = true;
+        this.hidden = true;
         __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
         if (!this.id) {
             this.id = `tooltip-${Date.now()}-${(Math.random() * 10000).toFixed(0)}`;
@@ -222,22 +216,22 @@ class ToolTipElement extends HTMLElement {
             return;
         // Ensures that tooltip stays open when hovering between tooltip and element
         // WCAG Success Criterion 1.4.13 Hoverable
-        if ((event.type === 'mouseenter' || event.type === 'focus') && this.visibilityHidden) {
-            this.visibilityHidden = false;
+        if ((event.type === 'mouseenter' || event.type === 'focus') && this.hidden) {
+            this.hidden = false;
         }
         else if (event.type === 'blur') {
-            this.visibilityHidden = true;
+            this.hidden = true;
         }
         else if (event.type === 'mouseleave' &&
             event.relatedTarget !== this.control &&
             event.relatedTarget !== this) {
-            this.visibilityHidden = true;
+            this.hidden = true;
         }
-        else if (event.type === 'keydown' && event.key === 'Escape' && !this.visibilityHidden) {
-            this.visibilityHidden = true;
+        else if (event.type === 'keydown' && event.key === 'Escape' && !this.hidden) {
+            this.hidden = true;
         }
     }
-    attributeChangedCallback(name, oldValue, newValue) {
+    attributeChangedCallback(name) {
         if (name === 'id' || name === 'data-type') {
             if (!this.id || !this.control)
                 return;
@@ -251,7 +245,7 @@ class ToolTipElement extends HTMLElement {
                 this.control.setAttribute('aria-describedby', describedBy);
             }
         }
-        else if (this.isConnected && name === 'style' && (oldValue && oldValue.includes('visibility')) || (newValue && newValue.includes('visibility'))) {
+        else if (this.isConnected && name === 'hidden') {
             __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
         }
         else if (name === 'data-direction') {
@@ -293,21 +287,21 @@ class ToolTipElement extends HTMLElement {
     }
 }
 _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update() {
-    if (this.visibilityHidden) {
+    if (this.hidden) {
         this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES);
     }
     else {
         this.classList.add(TOOLTIP_OPEN_CLASS);
         for (const tooltip of this.ownerDocument.querySelectorAll(this.tagName)) {
             if (tooltip !== this)
-                tooltip.visibilityHidden = true;
+                tooltip.hidden = true;
         }
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
     }
 }, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
     if (!this.control)
         return;
-    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.visibilityHidden)
+    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.hidden)
         return;
     const TOOLTIP_OFFSET = 10;
     this.style.left = `0px`; // Ensures we have reliable tooltip width in `getAnchoredPosition`
@@ -351,7 +345,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
     }
     this.classList.add(`tooltip-${direction}`);
 };
-ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id', 'style'];
+ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id', 'hidden'];
 if (!window.customElements.get('tool-tip')) {
     window.ToolTipElement = ToolTipElement;
     window.customElements.define('tool-tip', ToolTipElement);

data/app/components/primer/alpha/tool-tip-element.ts

@@ -176,14 +176,6 @@ class ToolTipElement extends HTMLElement {
     return this.ownerDocument.getElementById(this.htmlFor)
   }
 
-  set visibilityHidden(value: true | false) {
-    this.style.visibility = value ? 'hidden' : ''
-  }
-
-  get visibilityHidden() {
-    return this.style.visibility === 'hidden'
-  }
-
   connectedCallback() {
     if (!this.shadowRoot) {
       const shadow = this.attachShadow({mode: 'open'})
@@ -195,7 +187,7 @@ class ToolTipElement extends HTMLElement {
         <slot></slot>
       `
     }
-    this.visibilityHidden = true
+    this.hidden = true
     this.#allowUpdatePosition = true
 
     if (!this.id) {
@@ -228,36 +220,36 @@ class ToolTipElement extends HTMLElement {
 
     // Ensures that tooltip stays open when hovering between tooltip and element
     // WCAG Success Criterion 1.4.13 Hoverable
-    if ((event.type === 'mouseenter' || event.type === 'focus') && this.visibilityHidden) {
-      this.visibilityHidden = false
+    if ((event.type === 'mouseenter' || event.type === 'focus') && this.hidden) {
+      this.hidden = false
     } else if (event.type === 'blur') {
-      this.visibilityHidden = true
+      this.hidden = true
     } else if (
       event.type === 'mouseleave' &&
       (event as MouseEvent).relatedTarget !== this.control &&
       (event as MouseEvent).relatedTarget !== this
     ) {
-      this.visibilityHidden = true
-    } else if (event.type === 'keydown' && (event as KeyboardEvent).key === 'Escape' && !this.visibilityHidden) {
-      this.visibilityHidden = true
+      this.hidden = true
+    } else if (event.type === 'keydown' && (event as KeyboardEvent).key === 'Escape' && !this.hidden) {
+      this.hidden = true
     }
   }
 
-  static observedAttributes = ['data-type', 'data-direction', 'id', 'style']
+  static observedAttributes = ['data-type', 'data-direction', 'id', 'hidden']
 
   #update() {
-    if (this.visibilityHidden) {
+    if (this.hidden) {
       this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES)
     } else {
       this.classList.add(TOOLTIP_OPEN_CLASS)
-      for (const tooltip of this.ownerDocument.querySelectorAll<ToolTipElement>(this.tagName)) {
-        if (tooltip !== this) tooltip.visibilityHidden = true
+      for (const tooltip of this.ownerDocument.querySelectorAll<HTMLElement>(this.tagName)) {
+        if (tooltip !== this) tooltip.hidden = true
       }
       this.#updatePosition()
     }
   }
 
-  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+  attributeChangedCallback(name: string) {
     if (name === 'id' || name === 'data-type') {
       if (!this.id || !this.control) return
       if (this.type === 'label') {
@@ -268,7 +260,7 @@ class ToolTipElement extends HTMLElement {
         describedBy ? (describedBy = `${describedBy} ${this.id}`) : (describedBy = this.id)
         this.control.setAttribute('aria-describedby', describedBy)
       }
-    } else if (this.isConnected && name === 'style' && (oldValue && oldValue.includes('visibility')) || (newValue && newValue.includes('visibility'))) {
+    } else if (this.isConnected && name === 'hidden') {
       this.#update()
     } else if (name === 'data-direction') {
       this.classList.remove(...DIRECTION_CLASSES)
@@ -303,7 +295,7 @@ class ToolTipElement extends HTMLElement {
 
   #updatePosition() {
     if (!this.control) return
-    if (!this.#allowUpdatePosition || this.visibilityHidden) return
+    if (!this.#allowUpdatePosition || this.hidden) return
 
     const TOOLTIP_OFFSET = 10
 

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

@@ -88,8 +88,8 @@ module Primer
 
         @text = text
         @system_arguments = system_arguments
+        @system_arguments[:hidden] = true
         @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

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

@@ -53,60 +53,60 @@ module Primer
       #     `<nav>` is a landmark and should be reserved for main navigation links. See <%= link_to_accessibility %>.
       #   @code
       #     <%= render(Primer::Alpha::UnderlineNav.new(label: "Default with nav element")) do |component| %>
-      #       <% component.tab(href: "#", selected: true) { "Item 1" } %>
-      #       <% component.tab(href: "#") { "Item 2" } %>
-      #       <% component.actions do %>
+      #       <% component.with_tab(href: "#", selected: true) { "Item 1" } %>
+      #       <% component.with_tab(href: "#") { "Item 2" } %>
+      #       <% component.with_actions do %>
       #         <%= render(Primer::ButtonComponent.new) { "Button!" } %>
       #       <% end %>
       #     <% end %>
       #
       # @example With `<div>`
       #   <%= render(Primer::Alpha::UnderlineNav.new(tag: :div, label: "With div element")) do |component| %>
-      #     <% component.tab(href: "#", selected: true) { "Item 1" } %>
-      #     <% component.tab(href: "#") { "Item 2" } %>
-      #     <% component.actions do %>
+      #     <% component.with_tab(href: "#", selected: true) { "Item 1" } %>
+      #     <% component.with_tab(href: "#") { "Item 2" } %>
+      #     <% component.with_actions do %>
       #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
       #     <% end %>
       #   <% end %>
       #
       # @example With icons and counters
       #   <%= render(Primer::Alpha::UnderlineNav.new(label: "With icons and counters")) do |component| %>
-      #     <% component.tab(href: "#", selected: true) do |t| %>
+      #     <% component.with_tab(href: "#", selected: true) do |t| %>
       #       <% t.icon(icon: :star) %>
       #       <% t.text { "Item 1" } %>
       #     <% end %>
-      #     <% component.tab(href: "#") do |t| %>
+      #     <% component.with_tab(href: "#") do |t| %>
       #       <% t.icon(icon: :star) %>
       #       <% t.text { "Item 2" } %>
       #       <% t.counter(count: 10) %>
       #     <% end %>
-      #     <% component.tab(href: "#") do |t| %>
+      #     <% component.with_tab(href: "#") do |t| %>
       #       <% t.text { "Item 3" } %>
       #       <% t.counter(count: 10) %>
       #     <% end %>
-      #     <% component.actions do %>
+      #     <% component.with_actions do %>
       #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
       #     <% end %>
       #   <% end %>
       #
       # @example Align right
       #   <%= render(Primer::Alpha::UnderlineNav.new(label: "Align right", align: :right)) do |component| %>
-      #     <% component.tab(href: "#", selected: true) do |t| %>
+      #     <% component.with_tab(href: "#", selected: true) do |t| %>
       #       <% t.text { "Item 1" } %>
       #     <% end %>
-      #     <% component.tab(href: "#") do |t| %>
+      #     <% component.with_tab(href: "#") do |t| %>
       #       <% t.text { "Item 2" } %>
       #     <% end %>
-      #     <% component.actions do %>
+      #     <% component.with_actions do %>
       #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
       #     <% end %>
       #   <% end %>
       #
       # @example Customizing the body
       #   <%= render(Primer::Alpha::UnderlineNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |c| %>
-      #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-      #     <% c.tab(href: "#") { "Tab 2" } %>
-      #     <% c.tab(href: "#") { "Tab 3" } %>
+      #     <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% c.with_tab(href: "#") { "Tab 2" } %>
+      #     <% c.with_tab(href: "#") { "Tab 3" } %>
       #   <% end %>
       #
       # @param tag [Symbol] <%= one_of(Primer::Alpha::UnderlineNav::TAG_OPTIONS) %>

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

@@ -38,19 +38,19 @@ module Primer
 
       # @example Default
       #   <%= render(Primer::Alpha::UnderlinePanels.new(label: "With panels")) do |component| %>
-      #     <% component.tab(id: "tab-1", selected: true) do |t| %>
+      #     <% component.with_tab(id: "tab-1", selected: true) do |t| %>
       #       <% t.text { "Tab 1" } %>
       #       <% t.panel do %>
       #         Panel 1
       #       <% end %>
       #     <% end %>
-      #     <% component.tab(id: "tab-2") do |t| %>
+      #     <% component.with_tab(id: "tab-2") do |t| %>
       #       <% t.text { "Tab 2" } %>
       #       <% t.panel do %>
       #         Panel 2
       #       <% end %>
       #     <% end %>
-      #     <% component.actions do %>
+      #     <% component.with_actions do %>
       #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
       #     <% end %>
       #   <% end %>

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

@@ -22,11 +22,11 @@ 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::LabelComponent) %>, or <%= link_to_component(Primer::CounterComponent) %>
+        # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::OcticonComponent) %>, <%= link_to_component(Primer::LabelComponent) %>, or <%= link_to_component(Primer::Beta::Counter) %>
         renders_one :trailing_visual, types: {
           icon: Primer::OcticonComponent,
           label: Primer::LabelComponent,
-          counter: Primer::CounterComponent
+          counter: Primer::Beta::Counter
         }
 
         # Optional description

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

@@ -138,12 +138,12 @@ module Primer
       #
       # @example With custom classes for the input
       #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
-      #     <% c.input(classes: "custom-class") %>
+      #     <% c.with_input(classes: "custom-class") %>
       #   <% end %>
       #
       # @example With custom classes for the results
       #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
-      #     <% c.results(classes: "custom-class") %>
+      #     <% c.with_results(classes: "custom-class") %>
       #   <% end %>
       #
       # @param label_text [String] The label of the input.

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

@@ -21,23 +21,23 @@ module Primer
 
       # @example Default
       #   <%= render(Primer::Beta::AvatarStack.new) do |c| %>
-      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
       #   <% end  %>
       #
       # @example Align right
       #   <%= render(Primer::Beta::AvatarStack.new(align: :right)) do |c| %>
-      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
       #   <% end  %>
       #
       # @example With tooltip
       #   <%= render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |c| %>
-      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
       #   <% end  %>
       #
       # @param tag [Symbol] <%= one_of(Primer::Beta::AvatarStack::TAG_OPTIONS) %>