primer_view_components 0.1.9 → 0.2.0

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

@@ -13,7 +13,7 @@
     white-space: nowrap;
 
     & + .Truncate-text {
-      margin-left: var(--control-small-gap, 4px);
+      margin-left: var(--control-small-gap);
     }
 
     &.Truncate-text--primary {

data/app/components/primer/focus_group.js

@@ -12,15 +12,6 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 var _FocusGroupElement_instances, _FocusGroupElement_abortController, _FocusGroupElement_items_get;
 import '@oddbird/popover-polyfill';
 const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]';
-const popoverSelector = (() => {
-    try {
-        document.querySelector(':popover-open');
-        return ':popover-open';
-    }
-    catch (_a) {
-        return '.\\:popover-open';
-    }
-})();
 const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
 const printable = /^\S$/;
 export default class FocusGroupElement extends HTMLElement {
@@ -128,7 +119,7 @@ export default class FocusGroupElement extends HTMLElement {
             {
                 let el = focusEl;
                 do {
-                    el = el.closest(`[popover]:not(${popoverSelector})`);
+                    el = el.closest(`[popover]:not(:popover-open)`);
                     if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto') {
                         el.showPopover();
                     }

data/app/components/primer/focus_group.ts

@@ -2,15 +2,6 @@ import '@oddbird/popover-polyfill'
 
 const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]'
 
-const popoverSelector = (() => {
-  try {
-    document.querySelector(':popover-open')
-    return ':popover-open'
-  } catch {
-    return '.\\:popover-open'
-  }
-})()
-
 const getMnemonicFor = (item: Element) => item.textContent?.trim()[0].toLowerCase()
 
 const printable = /^\S$/
@@ -118,7 +109,7 @@ export default class FocusGroupElement extends HTMLElement {
       {
         let el: HTMLElement | null = focusEl
         do {
-          el = el.closest(`[popover]:not(${popoverSelector})`)
+          el = el.closest(`[popover]:not(:popover-open)`)
           if (el?.popover === 'auto') {
             el.showPopover()
           }

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

@@ -1,3 +1,4 @@
+import '@github/include-fragment-element';
 import '@oddbird/popover-polyfill';
 import './alpha/dropdown';
 import './anchored_position';

data/app/components/primer/primer.js

@@ -1,3 +1,4 @@
+import '@github/include-fragment-element';
 import '@oddbird/popover-polyfill';
 import './alpha/dropdown';
 import './anchored_position';

data/app/components/primer/primer.pcss

@@ -25,6 +25,7 @@
 @import "./alpha/overlay.pcss";
 @import "./beta/breadcrumbs.pcss";
 @import "./beta/button.pcss";
+@import "./beta/button_group.pcss";
 @import "./beta/counter.pcss";
 @import "./beta/flash.pcss";
 @import "./beta/label.pcss";

data/app/components/primer/primer.ts

@@ -1,3 +1,4 @@
+import '@github/include-fragment-element'
 import '@oddbird/popover-polyfill'
 import './alpha/dropdown'
 import './anchored_position'

data/lib/postcss_mixins/activeIndicatorLine.pcss

@@ -1,11 +1,11 @@
 /* active indicator line for navlist items */
-@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8, 8px)) {
+@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8)) {
   position: absolute;
   top: calc(50% - 12px);
   left: $padding-left;
-  width: var(--base-size-4, 4px);
-  height: var(--base-size-24, 24px);
+  width: var(--base-size-4);
+  height: var(--base-size-24);
   content: '';
   background: var(--color-accent-fg);
-  border-radius: var(--borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium);
 }

data/lib/primer/accessibility.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Primer
+  # :nodoc:
+  module Accessibility
+    # Skip axe checks for components that should be tested as part of a larger component.
+    # Do not add to this list for any other reason!
+    IGNORED_PREVIEWS = [
+      Primer::Beta::MarkdownPreview,
+      Primer::Beta::AutoCompleteItemPreview
+    ].freeze
+
+    # Skip `:region` which relates to preview page structure rather than individual component.
+    # Skip `:color-contrast` which requires primer design-level change.
+    AXE_RULES_TO_SKIP = {
+      # these will be skipped in CI but will still be tracked in Datadog
+      will_fix: {
+        global: %i[
+          color-contrast
+        ],
+
+        per_component: {}
+      },
+
+      # these will always be skipped
+      wont_fix: {
+        global: %i[
+          region
+        ],
+
+        per_component: {
+          Primer::Alpha::ToggleSwitch => {
+            all_scenarios: %i[button-name]
+          }
+        }
+      }
+    }.freeze
+
+    class << self
+      def ignore_preview?(preview_class)
+        preview_class.name.start_with?("Docs::") || IGNORED_PREVIEWS.include?(preview_class)
+      end
+
+      def axe_rules_to_skip(component: nil, scenario_name: nil, flatten: false)
+        to_skip = {
+          wont_fix: Set.new(AXE_RULES_TO_SKIP.dig(:wont_fix, :global) || []),
+          will_fix: Set.new(AXE_RULES_TO_SKIP.dig(:will_fix, :global) || [])
+        }
+
+        if component
+          to_skip[:wont_fix].merge(AXE_RULES_TO_SKIP.dig(:wont_fix, :per_component, component, :all_scenarios) || [])
+          to_skip[:will_fix].merge(AXE_RULES_TO_SKIP.dig(:will_fix, :per_component, component, :all_scenarios) || [])
+
+          if scenario_name
+            to_skip[:wont_fix].merge(AXE_RULES_TO_SKIP.dig(:wont_fix, :per_component, component, scenario_name) || [])
+            to_skip[:will_fix].merge(AXE_RULES_TO_SKIP.dig(:will_fix, :per_component, component, scenario_name) || [])
+          end
+        end
+
+        if flatten
+          flattened = to_skip.each_with_object(Set.new) do |(_, rule_set), memo|
+            memo.merge(rule_set)
+          end
+
+          return flattened.to_a
+        end
+
+        to_skip.transform_values(&:to_a)
+      end
+    end
+  end
+end
+# :nocov:

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

@@ -10,7 +10,7 @@
     <% end %>
     <%= content %>
     <%= content_tag(:div, **@input.validation_arguments) do %>
-      <%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %>
+      <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)) %>

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 = 9
+      MINOR = 2
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/primer/yard/lookbook_pages_backend.rb

@@ -50,12 +50,12 @@ module Primer
         preview_methods = PREVIEW_MAP[component]
         preview_erbs = preview_methods.map do |preview_method|
           # rubocop:disable Style/IfUnlessModifier
-          if Primer::Forms::FormsPreview.instance_methods.exclude?(preview_method)
-            raise "Preview '#{preview_method}' does not exist in Primer::Forms::FormsPreview"
+          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::Forms::FormsPreview, #{preview_method.inspect} %>"
+          "<%= embed Primer::FormsPreview, #{preview_method.inspect} %>"
         end
         # rubocop:enable Lint/UselessAssignment
 

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/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,

data/previews/primer/beta/button_preview.rb

@@ -269,15 +269,18 @@ module Primer
       # @label Trailing Counter
       # @param block toggle
       # @param align_content select [center, start]
+      # @param scheme select [default, primary, danger, invisible]
       def trailing_counter(
         block: false,
         id: "button-preview",
-        align_content: :center
+        align_content: :center,
+        scheme: :primary
       )
         render_with_template(locals: {
                                block: block,
                                id: id,
-                               align_content: align_content
+                               align_content: align_content,
+                               scheme: scheme
                              })
       end
 

data/previews/primer/beta/close_button_preview.rb

@@ -7,8 +7,9 @@ module Primer
       # @label Playground
       #
       # @param type [Symbol] select [button, submit]
-      def playground(type: :button)
-        render(Primer::Beta::CloseButton.new(type: type))
+      # @param disabled toggle
+      def playground(type: :button, disabled: false)
+        render(Primer::Beta::CloseButton.new(type: type, disabled: disabled))
       end
 
       # @label Default options