diff --git a/Gemfile.lock b/Gemfile.lock index c17e04f5..6b827d9d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -14,10 +14,10 @@ GIT GIT remote: https://github.com/ruby-ui/ruby_ui.git - revision: eea116e5fa397a1b544fb8574a8014e132193e90 + revision: 6e6b50ef39f08ec25db2db58a80d5b461e44837f branch: main specs: - ruby_ui (1.0.0.rc1) + ruby_ui (1.0.1) GEM remote: https://rubygems.org/ diff --git a/app/components/ruby_ui/button/button.rb b/app/components/ruby_ui/button/button.rb index 9636fa22..00750853 100644 --- a/app/components/ruby_ui/button/button.rb +++ b/app/components/ruby_ui/button/button.rb @@ -2,6 +2,13 @@ module RubyUI class Button < Base + BASE_CLASSES = [ + "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors", + "disabled:pointer-events-none disabled:opacity-50", + "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", + "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed" + ].freeze + def initialize(type: :button, variant: :primary, size: :md, icon: false, **attrs) @type = type @variant = variant.to_sym @@ -36,43 +43,54 @@ def size_classes def primary_classes [ - "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90", - size_classes + BASE_CLASSES, + size_classes, + "bg-primary text-primary-foreground shadow", + "hover:bg-primary/90" ] end def link_classes [ - "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary underline-offset-4 hover:underline", - size_classes + BASE_CLASSES, + size_classes, + "text-primary underline-offset-4", + "hover:underline" ] end def secondary_classes [ - "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-opacity-80", - size_classes + BASE_CLASSES, + size_classes, + "bg-secondary text-secondary-foreground", + "hover:bg-opacity-80" ] end def destructive_classes [ - "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", - size_classes + BASE_CLASSES, + size_classes, + "bg-destructive text-destructive-foreground shadow-sm", + "hover:bg-destructive/90" ] end def outline_classes [ - "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", - size_classes + BASE_CLASSES, + size_classes, + "border border-input bg-background shadow-sm", + "hover:bg-accent hover:text-accent-foreground" ] end def ghost_classes [ - "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground", - size_classes + BASE_CLASSES, + size_classes, + "hover:bg-accent hover:text-accent-foreground" ] end @@ -88,10 +106,7 @@ def default_classes end def default_attrs - { - type: @type, - class: default_classes - } + {type: @type, class: default_classes} end end end diff --git a/app/views/docs/button.rb b/app/views/docs/button.rb index 835bdf61..ee943b12 100644 --- a/app/views/docs/button.rb +++ b/app/views/docs/button.rb @@ -51,6 +51,18 @@ def view_template RUBY end + render Docs::VisualCodeExample.new(title: "Disabled", context: self) do + <<~RUBY + Button(disabled: true) { "Disabled" } + RUBY + end + + render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do + <<~RUBY + Button(aria: {disabled: "true"}) { "Aria Disabled" } + RUBY + end + render Docs::VisualCodeExample.new(title: "Icon", context: self) do <<~RUBY Button(variant: :outline, icon: true) do