From 3d12c7401ddbe8f31459eb0a8edee113e46c88bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Mendon=C3=A7a?= Date: Wed, 7 May 2025 20:27:02 +0000 Subject: [PATCH 1/2] Disabled + Aria Disabled Buttn --- Gemfile.lock | 4 +-- app/components/ruby_ui/button/button.rb | 47 ++++++++++++++++--------- app/views/docs/button.rb | 12 +++++++ 3 files changed, 45 insertions(+), 18 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index c17e04f5..5c1e142f 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: c271a3f53dcdedb080a4c824a6c3521fee721e43 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 From 66a8a09f35d245ea86bfd497c6bc3e370f0b1dff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Mendon=C3=A7a?= Date: Thu, 8 May 2025 09:47:34 -0300 Subject: [PATCH 2/2] UPDATE RUBY_UI --- Gemfile.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Gemfile.lock b/Gemfile.lock index 5c1e142f..6b827d9d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -14,7 +14,7 @@ GIT GIT remote: https://github.com/ruby-ui/ruby_ui.git - revision: c271a3f53dcdedb080a4c824a6c3521fee721e43 + revision: 6e6b50ef39f08ec25db2db58a80d5b461e44837f branch: main specs: ruby_ui (1.0.1)