primer_view_components 0.1.8 → 0.2.0

data/lib/primer/forms/form_control.html.erb

@@ -9,11 +9,9 @@
       <% end %>
     <% end %>
     <%= content %>
-    <% if @input.need_validation_element? %>
-      <%= content_tag(:div, **@input.validation_arguments) do %>
-        <%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %>
-        <%= content_tag(:span, @input.validation_messages.first, **@input.validation_message_arguments) %>
-      <% end %>
+    <%= content_tag(:div, **@input.validation_arguments) do %>
+      <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
+      <%= content_tag(:span, @input.invalid? ? @input.validation_messages.first : "", **@input.validation_message_arguments) %>
     <% end %>
     <%= render(Caption.new(input: @input)) %>
   <% end %>

data/lib/primer/forms/primer_base_component_wrapper.html.erb

@@ -0,0 +1,3 @@
+<%= render(Primer::BaseComponent.new(classes: @classes, **@system_arguments)) do %>
+  <%= content %>
+<% end %>

data/lib/primer/forms/primer_base_component_wrapper.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+require "primer/class_name_helper"
+
+module Primer
+  module Forms
+    # Wraps Primer::BaseComponent.
+    class PrimerBaseComponentWrapper < BaseComponent
+      include Primer::ClassNameHelper
+
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+
+        # Extract class and classes so they can be passed to Primer::BaseComponent
+        # as classes:. The class: argument is expected by Rails, but Primer expects
+        # classes:, reminiscent of HashWithIndifferentAccess shenanigans.
+        @classes = class_names(
+          system_arguments.delete(:classes),
+          system_arguments.delete(:class)
+        )
+      end
+    end
+  end
+end

data/lib/primer/forms/toggle_switch.html.erb

@@ -1,6 +1,6 @@
-<%= content_tag("toggle-switch-input", **@input.input_arguments) do %>
+<%= content_tag("toggle-switch-input", class: "FormControl-toggleSwitchInput", hidden: @input.hidden?) do %>
   <span style="flex-grow: 1">
-    <%= builder.label(@input.name, **@input.label_arguments) do %>
+    <%= render(Primer::Forms::PrimerBaseComponentWrapper.new(tag: :span, **@input.label_arguments)) do %>
       <%= @input.label %>
     <% end %>
 
@@ -18,5 +18,5 @@
       }
     )
   %>
-  <%= render(Primer::Alpha::ToggleSwitch.new(src: @input.src, csrf: csrf)) %>
+  <%= render(Primer::Alpha::ToggleSwitch.new(src: @input.src, csrf: csrf, **@input.input_arguments)) %>
 <% end %>

data/lib/primer/forms/toggle_switch.rb

@@ -9,8 +9,12 @@ module Primer
       def initialize(input:)
         @input = input
         @input.add_label_classes("FormControl-label")
-        @input.add_input_classes("FormControl-toggleSwitchInput")
-        @input.input_arguments[:hidden] = "hidden" if @input.hidden?
+        @input.label_arguments[:id] = label_id
+        @input.add_input_aria(:labelledby, label_id)
+      end
+
+      def label_id
+        @label_id ||= "label-#{@input.base_id}"
       end
     end
   end

data/lib/primer/forms/toggle_switch_input.js

@@ -1,3 +1,4 @@
+/* eslint-disable custom-elements/expose-class-on-global */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -8,11 +9,15 @@ import { controller, target } from '@github/catalyst';
 let ToggleSwitchInputElement = class ToggleSwitchInputElement extends HTMLElement {
     connectedCallback() {
         this.addEventListener('toggleSwitchError', (event) => {
-            this.validationMessageElement.innerText = event.detail;
+            this.validationMessageElement.textContent = event.detail;
             this.validationElement.removeAttribute('hidden');
         });
         this.addEventListener('toggleSwitchSuccess', () => {
-            this.validationMessageElement.innerText = '';
+            this.validationMessageElement.textContent = '';
+            this.validationElement.setAttribute('hidden', 'hidden');
+        });
+        this.addEventListener('toggleSwitchLoading', () => {
+            this.validationMessageElement.textContent = '';
             this.validationElement.setAttribute('hidden', 'hidden');
         });
     }

data/lib/primer/forms/toggle_switch_input.ts

@@ -1,3 +1,5 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+
 import {controller, target} from '@github/catalyst'
 
 @controller
@@ -7,12 +9,17 @@ export class ToggleSwitchInputElement extends HTMLElement {
 
   connectedCallback() {
     this.addEventListener('toggleSwitchError', (event: Event) => {
-      this.validationMessageElement.innerText = (event as CustomEvent).detail
+      this.validationMessageElement.textContent = (event as CustomEvent).detail
       this.validationElement.removeAttribute('hidden')
     })
 
     this.addEventListener('toggleSwitchSuccess', () => {
-      this.validationMessageElement.innerText = ''
+      this.validationMessageElement.textContent = ''
+      this.validationElement.setAttribute('hidden', 'hidden')
+    })
+
+    this.addEventListener('toggleSwitchLoading', () => {
+      this.validationMessageElement.textContent = ''
       this.validationElement.setAttribute('hidden', 'hidden')
     })
   }

data/lib/primer/static/generate_info_arch.rb

@@ -72,6 +72,9 @@ module Primer
             memo[component] = {
               "fully_qualified_name" => component.name,
               "description" => description,
+              "is_form_component" => docs.manifest_entry.form_component?,
+              "is_published" => docs.manifest_entry.published?,
+              "requires_js" => docs.manifest_entry.requires_js?,
               **arg_data,
               "slots" => slot_docs,
               "methods" => method_docs,

data/lib/primer/static/generate_previews.rb

@@ -11,8 +11,8 @@ module Primer
       class << self
         def call
           Lookbook.previews.filter_map do |preview|
-            next if preview.preview_class.name.start_with?("Docs::")
-            next if preview.preview_class == Primer::Forms::FormsPreview
+            next if preview.preview_class == Primer::FormsPreview
+            next if Primer::Accessibility.ignore_preview?(preview.preview_class)
 
             component = preview.components.first&.component_class
 
@@ -29,12 +29,19 @@ module Primer
               component: class_name,
               status: component.status.to_s,
               lookup_path: preview.lookup_path,
-              examples: preview.examples.map do |example|
-                {
-                  inspect_path: example.url_path,
-                  preview_path: example.url_path.sub("/inspect/", "/preview/"),
-                  name: example.name
-                }
+              examples: preview.scenarios.flat_map do |parent_scenario|
+                scenarios = parent_scenario.type == :scenario_group ? parent_scenario.scenarios : [parent_scenario]
+
+                scenarios.map do |scenario|
+                  {
+                    preview_path: scenario.lookup_path,
+                    name: scenario.name,
+                    skip_rules: Primer::Accessibility.axe_rules_to_skip(
+                      component: component,
+                      scenario_name: scenario.name
+                    )
+                  }
+                end
               end
             }
           end

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

@@ -3,13 +3,10 @@
 require_relative "helpers/deprecated_components_helpers"
 require_relative "severity_schema"
 
-require "erblint-github/linters/custom_helpers"
-
 module ERBLint
   module Linters
     # Lints against deprecated components
-    class DeprecatedComponentsCounter < Linter
-      include CustomHelpers
+    class DeprecatedComponentsCounter < BaseLinter
       include ERBLint::LinterRegistry
       include Helpers::DeprecatedComponentsHelpers
 
@@ -25,7 +22,7 @@ module ERBLint
           deprecated_components.each do |component|
             next unless code.include?(component)
 
-            add_offense(erb_node.loc, message(component))
+            add_offense_with_severity(erb_node.loc, message(component))
           end
         end
 
@@ -46,14 +43,41 @@ module ERBLint
         end
       end
 
-      # this override is necessary because of the github/erblint-github `CustomHelpers`
-      # module. `counter_correct?` is provided by this module, and calls `add_offense`
-      # directly. there is no simple way to modify this without updating the gem and
-      # creating what would likely be an API that is non-standard and/or difficult to use
-      #
-      # https://github.com/github/erblint-github/blob/main/lib/erblint-github/linters/custom_helpers.rb
-      def add_offense(source_range, message, context = nil, severity = nil)
-        super(source_range, message, context, severity || @config.severity)
+      def counter_correct?(processed_source)
+        comment_node = nil
+        expected_count = 0
+        rule_name = self.class.name.gsub("ERBLint::Linters::", "")
+        offenses_count = @offenses.length
+
+        processed_source.parser.ast.descendants(:erb).each do |node|
+          indicator_node, _, code_node, = *node
+          indicator = indicator_node&.loc&.source
+          comment = code_node&.loc&.source&.strip
+
+          if indicator == "#" && comment.start_with?("erblint:counter") && comment.match(rule_name)
+            comment_node = node
+            expected_count = comment.match(/\s(\d+)\s?$/)[1].to_i
+          end
+        end
+
+        if offenses_count.zero?
+          # have to adjust to get `\n` so we delete the whole line
+          add_offense_with_severity(processed_source.to_source_range(comment_node.loc.adjust(end_pos: 1)), "Unused erblint:counter comment for #{rule_name}", "") if comment_node
+          return
+        end
+
+        first_offense = @offenses[0]
+
+        if comment_node.nil?
+          add_offense_with_severity(processed_source.to_source_range(first_offense.source_range), "#{rule_name}: If you must, add <%# erblint:counter #{rule_name} #{offenses_count} %> to bypass this check.", "<%# erblint:counter #{rule_name} #{offenses_count} %>")
+        else
+          clear_offenses
+          add_offense_with_severity(processed_source.to_source_range(comment_node.loc), "Incorrect erblint:counter number for #{rule_name}. Expected: #{expected_count}, actual: #{offenses_count}.", "<%# erblint:counter #{rule_name} #{offenses_count} %>") if expected_count != offenses_count
+        end
+      end
+
+      def add_offense_with_severity(source_range, message, context = nil, severity = nil)
+        add_offense(source_range, message, context, severity || @config.severity)
       end
     end
   end

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 1
-      PATCH = 8
+      MINOR = 2
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/primer/yard/component_manifest.rb

@@ -129,7 +129,7 @@ module Primer
         end
 
         def ref_for(klass)
-          ref_cache[klass] ||= ComponentRef.new(klass, COMPONENTS[klass])
+          ref_cache[klass] ||= ComponentRef.new(klass, COMPONENTS.fetch(klass, {}))
         end
 
         private

data/lib/primer/yard/lookbook_pages_backend.rb

@@ -10,7 +10,7 @@ module Primer
       PREVIEW_MAP = {
         Primer::Alpha::TextField => [:single_text_field_form, :multi_text_field_form],
         Primer::Alpha::TextArea => [],
-        Primer::Alpha::Select => [:select_list_form],
+        Primer::Alpha::Select => [:select_form],
         Primer::Alpha::MultiInput => [:multi_input_form],
         Primer::Alpha::RadioButton => [:radio_button_with_nested_form],
         Primer::Alpha::RadioButtonGroup => [:radio_button_group_form],
@@ -49,7 +49,13 @@ module Primer
 
         preview_methods = PREVIEW_MAP[component]
         preview_erbs = preview_methods.map do |preview_method|
-          "<%= embed Primer::Forms::FormsPreview, #{preview_method.inspect} %>"
+          # rubocop:disable Style/IfUnlessModifier
+          if Primer::FormsPreview.instance_methods.exclude?(preview_method)
+            raise "Preview '#{preview_method}' does not exist in Primer::FormsPreview"
+          end
+          # rubocop:enable Style/IfUnlessModifier
+
+          "<%= embed Primer::FormsPreview, #{preview_method.inspect} %>"
         end
         # rubocop:enable Lint/UselessAssignment
 

data/lib/primer/yard/registry.rb

@@ -89,6 +89,10 @@ module Primer
       def a11y_reviewed?
         metadata[:a11y_reviewed]
       end
+
+      def manifest_entry
+        @manifest_entry ||= ComponentManifest.ref_for(component)
+      end
     end
 
     # Wrapper around an instance of YARD::Registry that provides easy access to component

data/previews/pages/forms/03_caption_templates.md.erb

@@ -27,4 +27,4 @@ In cases where the `caption:` argument _and_ a caption template are provided, th
 
 ## Example
 
-<%= embed Primer::Forms::FormsPreview, :caption_template_form %>
+<%= embed Primer::FormsPreview, :caption_template_form %>

data/previews/pages/forms/04_after_content.md.erb

@@ -36,4 +36,4 @@ For such cases, Primer forms feature "after" content. Like [caption templates](<
 
 ## Example
 
-<%= embed Primer::Forms::FormsPreview, :after_content_form %>
+<%= embed Primer::FormsPreview, :after_content_form %>

data/previews/pages/forms/06_miscellaneous_inputs.md.erb

@@ -40,4 +40,4 @@ Occasionally it can be appealing to visually distinguish parts of a form from ea
 
 ### Example
 
-<%= embed Primer::Forms::FormsPreview, :multi_text_field_form %>
+<%= embed Primer::FormsPreview, :multi_text_field_form %>

data/previews/pages/forms/07_toggle_switch_forms.md.erb

@@ -55,4 +55,4 @@ The server can indicate that an error occurred by responding with a non-2xx stat
 
 ## Example
 
-<%= embed Primer::Forms::FormsPreview, :example_toggle_switch_form %>
+<%= embed Primer::FormsPreview, :example_toggle_switch_form %>

data/previews/primer/alpha/action_menu_preview/two_menus.html.erb

@@ -0,0 +1,13 @@
+<%= render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu| %>
+  <% menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Pac-Man" } %>
+  <% menu.with_item(label: "Eat a dot") %>
+  <% menu.with_item(label: "Avoid a ghost") %>
+  <% menu.with_item(label: "Eat a stunned ghost") %>
+<% end %>
+
+<%= render(Primer::Alpha::ActionMenu.new(menu_id: "menu-2")) do |menu| %>
+  <% menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Mario Bros" } %>
+  <% menu.with_item(label: "Stomp a turtle") %>
+  <% menu.with_item(label: "Collect a gold coin") %>
+  <% menu.with_item(label: "Save the princess") %>
+<% end %>

data/previews/primer/alpha/action_menu_preview/with_actions.html.erb

@@ -0,0 +1,21 @@
+<script type="text/javascript">
+  window.addEventListener('load', function() {
+    document.querySelector('button#alert-item').addEventListener('click', (_e) => {
+      alert('Foo')
+    });
+  }, false);
+</script>
+
+<%= render(Primer::Alpha::ActionMenu.new) do |component| %>
+  <% component.with_show_button { "Trigger" } %>
+  <% component.with_item(label: "Alert", tag: :button, id: "alert-item") %>
+  <% component.with_item(label: "Navigate", tag: :a, content_arguments: { href: action_menu_landing_path }) %>
+  <% component.with_item(label: "Copy text", tag: :"clipboard-copy", content_arguments: { value: "Text to copy" }) %>
+  <% component.with_item(
+    label: "Submit form",
+    href: action_menu_form_action_path,
+    form_arguments: {
+      name: "foo", value: "bar", method: :post
+    }
+  ) %>
+<% end %>

data/previews/primer/alpha/action_menu_preview.rb

@@ -180,19 +180,6 @@ module Primer
       # @label With actions
       #
       def with_actions
-        render(Primer::Alpha::ActionMenu.new) do |component|
-          component.with_show_button { "Trigger" }
-          component.with_item(label: "Alert", tag: :button, content_arguments: { onclick: "alert('Foo')", onkeydown: "if (event.key === 'Enter') { alert(event.key) }" })
-          component.with_item(label: "Navigate", tag: :a, content_arguments: { href: UrlHelpers.action_menu_landing_path })
-          component.with_item(label: "Copy text", tag: :"clipboard-copy", content_arguments: { value: "Text to copy" })
-          component.with_item(
-            label: "Submit form",
-            href: UrlHelpers.action_menu_form_action_path,
-            form_arguments: {
-              name: "foo", value: "bar", method: :post
-            }
-          )
-        end
       end
 
       # @label Single select form
@@ -284,6 +271,11 @@ module Primer
           end
         end
       end
+
+      # @label Two menus
+      #
+      def two_menus
+      end
     end
   end
 end

data/previews/primer/alpha/button_marketing_preview.rb

@@ -9,8 +9,9 @@ module Primer
       # @param variant [Symbol] select [default, large]
       # @param tag [Symbol] select [button, a]
       # @param type [Symbol] select [button, submit]
-      def playground(tag: :button, type: :button, scheme: :default, variant: :default)
-        render(Primer::Alpha::ButtonMarketing.new(tag: tag, type: type, scheme: scheme, variant: variant)) { "Default" }
+      # @param disabled [Boolean]
+      def playground(tag: :button, type: :button, scheme: :default, variant: :default, disabled: false)
+        render(Primer::Alpha::ButtonMarketing.new(tag: tag, type: type, scheme: scheme, variant: variant, disabled: disabled)) { "Default" }
       end
 
       # @label Default options

data/previews/primer/alpha/dialog_preview.rb

@@ -12,15 +12,16 @@ module Primer
       # @param position [Symbol] select [center, left, right]
       # @param position_narrow [Symbol] select [inherit, bottom, fullscreen, left, right]
       # @param visually_hide_title [Boolean] toggle
+      # @param disable_button [Boolean] toggle
       # @param button_text [String] text
       # @param body_text [String] text
       # @param icon [Symbol] octicon
-      def playground(title: "Test Dialog", subtitle: nil, size: :medium, button_text: "Show Dialog", body_text: "Content", position: :center, position_narrow: :fullscreen, visually_hide_title: false, icon: nil)
+      def playground(title: "Test Dialog", subtitle: nil, size: :medium, button_text: "Show Dialog", body_text: "Content", position: :center, position_narrow: :fullscreen, visually_hide_title: false, icon: nil, disable_button: false)
         render(Primer::Alpha::Dialog.new(title: title, subtitle: subtitle, size: size, position: position, position_narrow: position_narrow, visually_hide_title: visually_hide_title)) do |d|
           if icon.present? && (icon != :none)
-            d.with_show_button(icon: icon, "aria-label": icon.to_s)
+            d.with_show_button(icon: icon, "aria-label": icon.to_s, disabled: disable_button)
           else
-            d.with_show_button { button_text }
+            d.with_show_button(disabled: disable_button) { button_text }
           end
           d.with_body { body_text }
         end

data/previews/primer/alpha/hellip_button_preview.rb

@@ -16,8 +16,9 @@ module Primer
       #
       # @param aria_label [String]
       # @param inline [Boolean]
-      def playground(inline: false, aria_label: "No effect")
-        render(Primer::Alpha::HellipButton.new(inline: inline, "aria-label": aria_label))
+      # @param disabled [Boolean]
+      def playground(inline: false, aria_label: "No effect", disabled: false)
+        render(Primer::Alpha::HellipButton.new(inline: inline, "aria-label": aria_label, disabled: disabled))
       end
     end
   end

data/previews/primer/alpha/nav_list_preview.rb

@@ -6,7 +6,7 @@ module Primer
     class NavListPreview < ViewComponent::Preview
       # @label Playground
       def playground
-        render(Primer::Alpha::NavList.new(aria: { label: "Repository settings" }, selected_item_id: :code_review_limits)) do |list|
+        render(Primer::Alpha::NavList.new(aria: { label: "Repository settings" }, selected_item_id: :collaborators)) do |list|
           list.with_heading(title: "Repository settings")
 
           list.with_item(label: "General", href: "/general") do |item|

data/previews/primer/alpha/overlay_preview/middle_of_page_with_relative_container.html.erb

@@ -0,0 +1,19 @@
+<div style="width:100%; height: 400px; display: flex; justify-content: center; align-items: center;">
+  <div style="position:relative;">
+    <%= render(Primer::Alpha::Overlay.new(
+      title: title,
+      subtitle: subtitle,
+      role: role,
+      size: size,
+      placement: placement,
+      anchor_align: anchor_align,
+      anchor_side: anchor_side,
+      allow_out_of_bounds: allow_out_of_bounds,
+      visually_hide_title: visually_hide_title,
+    )) do |d| %>
+      <% d.with_header(title: title, size: header_size) %>
+      <% d.with_show_button { button_text } %>
+      <% d.with_body { body_text } %>
+    <% end %>
+  </div>
+</div>

data/previews/primer/alpha/overlay_preview.rb

@@ -132,6 +132,37 @@ module Primer
                                body_text: body_text
                              })
       end
+
+      # @label Middle Of Page with relative container
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param role [Symbol] select [dialog, menu]
+      # @param size [Symbol] select [auto, small, medium, medium_portrait, large, xlarge]
+      # @param anchor_align [Symbol] select [start, center, end]
+      # @param anchor_side [Symbol] select [inside_top, inside_bottom, inside_left, inside_right, inside_center, outside_top, outside_bottom, outside_left, outside_right]
+      # @param allow_out_of_bounds [Boolean] toggle
+      # @param visually_hide_title [Boolean] toggle
+      #
+      # @param header_size [Symbol] select [medium, large]
+      # @param button_text [String] text
+      # @param body_text [String] text
+      def middle_of_page_with_relative_container(title: "Test Overlay", subtitle: nil, role: :dialog, size: :auto, placement: :anchored, anchor_align: :center, anchor_side: :outside_bottom, allow_out_of_bounds: false, visually_hide_title: false, header_size: :medium, button_text: "Show Overlay", body_text: "")
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               role: role,
+                               size: size,
+                               placement: placement,
+                               anchor_align: anchor_align,
+                               anchor_side: anchor_side,
+                               allow_out_of_bounds: allow_out_of_bounds,
+                               visually_hide_title: visually_hide_title,
+                               header_size: header_size,
+                               button_text: button_text,
+                               body_text: body_text
+                             })
+      end
     end
   end
 end

data/previews/primer/beta/base_button_preview.rb

@@ -9,8 +9,9 @@ module Primer
       # @param type [Symbol] select [button, submit]
       # @param tag [Symbol] select [button, a, summary]
       # @param block [Boolean] toggle
-      def playground(tag: :button, block: false, type: :button)
-        render(Primer::Beta::BaseButton.new(tag: tag, block: block, type: type)) { "Button" }
+      # @param disabled [Boolean]
+      def playground(tag: :button, block: false, type: :button, disabled: false)
+        render(Primer::Beta::BaseButton.new(tag: tag, block: block, type: type, disabled: disabled)) { "Button" }
       end
 
       # @label Default options
@@ -21,6 +22,12 @@ module Primer
       def default(tag: :button, block: false, type: :button)
         render(Primer::Beta::BaseButton.new(tag: tag, block: block, type: type)) { "Button" }
       end
+
+      # @label Disabled
+      #
+      def disabled
+        render(Primer::Beta::BaseButton.new(disabled: true)) { "Button" }
+      end
     end
   end
 end

data/previews/primer/beta/button_group_preview/action_menus.html.erb

@@ -0,0 +1,8 @@
+<%= render(Primer::Beta::ButtonGroup.new) do |component| %>
+  <% component.with_button() { "Main menu" } %>
+  <% component.with_button(icon: "triangle-down", "aria-label": "secondary menu", data: { "menu-id": "my-id" }) %>
+<% end %>
+
+<%= render(Primer::Alpha::ActionMenu.new(anchor_align: :end, menu_id: "my-id")) do |component| %>
+  <% component.with_item(label: "Item", tag: :button, value: "") %>
+<% end %>

data/previews/primer/beta/button_group_preview.rb

@@ -6,13 +6,13 @@ module Primer
     class ButtonGroupPreview < ViewComponent::Preview
       # @label Playground
       #
-      # @param size [Symbol] select [medium, small]
-      def playground(size: :medium)
-        render(Primer::Beta::ButtonGroup.new(size: size)) do |component|
-          component.with_button { "Button" }
-          component.with_button(scheme: :primary) { "Primary" }
-          component.with_button(scheme: :danger) { "Danger" }
-          component.with_button(scheme: :outline) { "Outline" }
+      # @param size [Symbol] select [small, medium, large]
+      # @param scheme [Symbol] select [default, primary, secondary, danger, invisible]
+      def playground(size: :medium, scheme: :default)
+        render(Primer::Beta::ButtonGroup.new(size: size, scheme: scheme)) do |component|
+          component.with_button { "Button 1" }
+          component.with_button { "Button 2" }
+          component.with_button { "Button 3" }
         end
       end
 
@@ -21,10 +21,48 @@ module Primer
       # @param size [Symbol] select [medium, small]
       def default(size: :medium)
         render(Primer::Beta::ButtonGroup.new(size: size)) do |component|
-          component.with_button { "Button" }
-          component.with_button(scheme: :primary) { "Primary" }
-          component.with_button(scheme: :danger) { "Danger" }
-          component.with_button(scheme: :outline) { "Outline" }
+          component.with_button { "Button 1" }
+          component.with_button { "Button 2" }
+          component.with_button { "Button 3" }
+        end
+      end
+
+      # @label Split button
+      #
+      # @param size [Symbol] select [medium, small]
+      def split_button(size: :medium)
+        render(Primer::Beta::ButtonGroup.new(size: size)) do |component|
+          component.with_button { "Button 1" }
+          component.with_button(icon: "triangle-down", "aria-label": "menu")
+        end
+      end
+
+      # @label Icon buttons
+      #
+      # @param size [Symbol] select [medium, small]
+      def icon_buttons(size: :medium)
+        render(Primer::Beta::ButtonGroup.new(size: size)) do |component|
+          component.with_button(icon: :note, "aria-label": "button 1")
+          component.with_button(icon: :rows, "aria-label": "button 2")
+          component.with_button(icon: "sort-desc", "aria-label": "button 3")
+        end
+      end
+
+      # @label Button group with all tags
+      def all_tags
+        render(Primer::Beta::ButtonGroup.new) do |component|
+          component.with_button(id: "button-1", tag: :button) do |component|
+            component.with_tooltip(text: "Button Tooltip")
+            "Button 1"
+          end
+          component.with_button(id: "button-2", tag: :a) do |component|
+            component.with_tooltip(text: "Button Tooltip")
+            "Button 2"
+          end
+          component.with_button(id: "button-3", tag: :summary) do |component|
+            component.with_tooltip(text: "Button Tooltip")
+            "Button 3"
+          end
         end
       end
     end

data/previews/primer/beta/button_preview/trailing_counter.html.erb

@@ -1,5 +1,5 @@
 <%= render(Primer::Beta::Button.new(
-    scheme: :primary,
+    scheme: scheme,
     size: :medium,
     block: block,
     id: id,