diff --git a/app/components/primer/beta/base_button.rb b/app/components/primer/beta/base_button.rb index 834a8ef52a..f1a9cf705b 100644 --- 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 index 13b42df5a4..2cb0f7dbe6 100644 --- 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 index 95c980309c..80182964af 100644 --- a/app/components/primer/beta/button.rb +++ b/app/components/primer/beta/button.rb @@ -100,6 +100,7 @@ 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, @@ -107,6 +108,7 @@ def initialize( block: false, align_content: DEFAULT_ALIGN_CONTENT, disabled: false, + inactive: false, **system_arguments ) @scheme = scheme @@ -114,6 +116,7 @@ def initialize( @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 index 9b51ed34c2..0bf080201b 100644 --- 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