Adds 'inactive' state to buttons

.changeset/mean-bottles-unite.md

@@ -0,0 +1,7 @@
+---
+"@primer/view-components": minor
+---
+
+Adds an 'inactive' state to buttons. An inactive button looks disabled and has aria-disabled, but it can still be clicked and focused. This was added to support buttons that are broken due to availability issues, but can't be removed from the page.
+
+<!-- Changed components: Primer::Beta::Button, Primer::Beta::BaseButton, Primer::Beta::IconButton -->

app/components/primer/beta/base_button.rb

@@ -19,12 +19,14 @@ class BaseButton < Primer::Component
       # @param type [Symbol] <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
       # @param block [Boolean] Whether button is full-width with `display: block`.
       # @param disabled [Boolean] Whether or not the button is disabled. If true, this option forces `tag:` to `:button`.
+      # @param inactive [Boolean] Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         tag: DEFAULT_TAG,
         type: DEFAULT_TYPE,
         block: false,
         disabled: false,
+        inactive: false,
         **system_arguments
       )
         @system_arguments = system_arguments
@@ -37,6 +39,8 @@ def initialize(
           "btn-block" => block
         )
 
+        @system_arguments[:"aria-disabled"] = true if inactive
+
         @disabled = disabled
         return unless @disabled
 

app/components/primer/beta/button.pcss

@@ -47,11 +47,15 @@
     transition: none;
   }
 
-  &:disabled,
-  &[aria-disabled='true'] {
+  &:disabled {
     cursor: not-allowed;
     box-shadow: none;
   }
+
+  &[aria-disabled='true'] {
+    cursor: default;
+    box-shadow: none;
+  }
 }
 
 .Button-withTooltip {

previews/primer/beta/button_preview.rb

@@ -18,6 +18,7 @@ class ButtonPreview < ViewComponent::Preview
       # @param size select [small, medium, large]
       # @param block toggle
       # @param disabled toggle
+      # @param inactive toggle
       # @param align_content select [center, start]
       # @param tag select [a, summary, button]
       def playground(
@@ -27,7 +28,8 @@ def playground(
         id: "button-preview",
         align_content: :center,
         tag: :button,
-        disabled: false
+        disabled: false,
+        inactive: false
       )
         render(Primer::Beta::Button.new(
                  scheme: scheme,
@@ -36,7 +38,8 @@ def playground(
                  id: id,
                  align_content: align_content,
                  tag: tag,
-                 disabled: disabled
+                 disabled: disabled,
+                 inactive: inactive
                )) do |_c|
           "Button"
         end
@@ -341,6 +344,21 @@ def with_tooltip(
                                align_content: align_content
                              })
       end
+
+      # @label Inactive
+      # @param inactive toggle
+      # @snapshot
+      def inactive(
+        id: "button-preview",
+        inactive: true
+      )
+        render(Primer::Beta::Button.new(
+                 id: id,
+                 inactive: inactive
+               )) do |_c|
+          "Button"
+        end
+      end
     end
   end
 end

previews/primer/beta/icon_button_preview.rb

@@ -9,6 +9,7 @@ class IconButtonPreview < ViewComponent::Preview
       # @param size select [small, medium, large]
       # @param aria_label text
       # @param disabled toggle
+      # @param inactive toggle
       # @param tag select [a, summary, button]
       # @param icon [Symbol] octicon
       # @param show_tooltip toggle
@@ -18,6 +19,7 @@ def playground(
         id: "button-preview",
         tag: :button,
         disabled: false,
+        inactive: false,
         icon: :plus,
         aria_label: "Button",
         show_tooltip: true
@@ -28,6 +30,7 @@ def playground(
                  id: id,
                  tag: tag,
                  disabled: disabled,
+                 inactive: inactive,
                  icon: icon,
                  "aria-label": aria_label,
                  show_tooltip: show_tooltip