adds inactive button state

primer · Oct 12, 2023 · a37d8a0 · a37d8a0
1 parent 47d4c23
commit a37d8a0
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/app/components/primer/beta/base_button.rb b/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
 

diff --git a/app/components/primer/beta/button.pcss b/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 {

diff --git a/app/components/primer/beta/button.rb b/app/components/primer/beta/button.rb
@@ -100,20 +100,23 @@ class Button < Primer::Component
       # @param tag [Symbol] (Primer::Beta::BaseButton::DEFAULT_TAG) <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
       # @param type [Symbol] (Primer::Beta::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
       # @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(
         scheme: DEFAULT_SCHEME,
         size: DEFAULT_SIZE,
         block: false,
         align_content: DEFAULT_ALIGN_CONTENT,
         disabled: false,
+        inactive: false,
         **system_arguments
       )
         @scheme = scheme
         @block = block
 
         @system_arguments = system_arguments
         @system_arguments[:disabled] = disabled
+        @system_arguments[:inactive] = inactive
 
         @id = @system_arguments[:id]
 

diff --git a/previews/primer/beta/button_preview.rb b/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