From b6b2748423c2d50d57afda325985c7559e637d8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Mendon=C3=A7a?= Date: Wed, 7 May 2025 15:14:14 +0000 Subject: [PATCH 1/2] aria-disabled for Link --- lib/ruby_ui/link/link.rb | 63 ++++++++++++++++++++++++++++++---------- 1 file changed, 47 insertions(+), 16 deletions(-) diff --git a/lib/ruby_ui/link/link.rb b/lib/ruby_ui/link/link.rb index 528ea507..96966349 100644 --- a/lib/ruby_ui/link/link.rb +++ b/lib/ruby_ui/link/link.rb @@ -2,6 +2,11 @@ module RubyUI class Link < Base + DISABLED_CLASSES = "disabled:pointer-events-none disabled:opacity-50" + FOCUS_VISIBLE_CLASSES = "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" + ARIA_DISABLED_CLASSES = "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed" + DEFAULT_CLASSES = "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors" + def initialize(href: "#", variant: :link, size: :md, icon: false, **attrs) @href = href @variant = variant.to_sym @@ -36,43 +41,72 @@ 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 + DEFAULT_CLASSES, + FOCUS_VISIBLE_CLASSES, + DISABLED_CLASSES, + ARIA_DISABLED_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 + DEFAULT_CLASSES, + FOCUS_VISIBLE_CLASSES, + DISABLED_CLASSES, + ARIA_DISABLED_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 + DEFAULT_CLASSES, + FOCUS_VISIBLE_CLASSES, + DISABLED_CLASSES, + ARIA_DISABLED_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 + DEFAULT_CLASSES, + FOCUS_VISIBLE_CLASSES, + DISABLED_CLASSES, + ARIA_DISABLED_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 + DEFAULT_CLASSES, + FOCUS_VISIBLE_CLASSES, + DISABLED_CLASSES, + ARIA_DISABLED_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 + DEFAULT_CLASSES, + FOCUS_VISIBLE_CLASSES, + DISABLED_CLASSES, + ARIA_DISABLED_CLASSES, + size_classes, + "hover:bg-accent hover:text-accent-foreground" ] end @@ -88,10 +122,7 @@ def default_classes end def default_attrs - { - type: "button", - class: default_classes - } + {type: "button", class: default_classes} end end end From 38a62d9c856dcb78a1396a496605ed08dde44554 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Mendon=C3=A7a?= Date: Wed, 7 May 2025 17:11:25 +0000 Subject: [PATCH 2/2] BASE_CLASSES --- lib/ruby_ui/link/link.rb | 40 ++++++++++++---------------------------- 1 file changed, 12 insertions(+), 28 deletions(-) diff --git a/lib/ruby_ui/link/link.rb b/lib/ruby_ui/link/link.rb index 96966349..424ab79e 100644 --- a/lib/ruby_ui/link/link.rb +++ b/lib/ruby_ui/link/link.rb @@ -2,10 +2,12 @@ module RubyUI class Link < Base - DISABLED_CLASSES = "disabled:pointer-events-none disabled:opacity-50" - FOCUS_VISIBLE_CLASSES = "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" - ARIA_DISABLED_CLASSES = "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed" - DEFAULT_CLASSES = "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors" + 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(href: "#", variant: :link, size: :md, icon: false, **attrs) @href = href @@ -41,10 +43,7 @@ def size_classes def primary_classes [ - DEFAULT_CLASSES, - FOCUS_VISIBLE_CLASSES, - DISABLED_CLASSES, - ARIA_DISABLED_CLASSES, + BASE_CLASSES, size_classes, "bg-primary text-primary-foreground shadow", "hover:bg-primary/90" @@ -53,10 +52,7 @@ def primary_classes def link_classes [ - DEFAULT_CLASSES, - FOCUS_VISIBLE_CLASSES, - DISABLED_CLASSES, - ARIA_DISABLED_CLASSES, + BASE_CLASSES, size_classes, "text-primary underline-offset-4", "hover:underline" @@ -65,10 +61,7 @@ def link_classes def secondary_classes [ - DEFAULT_CLASSES, - FOCUS_VISIBLE_CLASSES, - DISABLED_CLASSES, - ARIA_DISABLED_CLASSES, + BASE_CLASSES, size_classes, "bg-secondary text-secondary-foreground", "hover:bg-opacity-80" @@ -77,10 +70,7 @@ def secondary_classes def destructive_classes [ - DEFAULT_CLASSES, - FOCUS_VISIBLE_CLASSES, - DISABLED_CLASSES, - ARIA_DISABLED_CLASSES, + BASE_CLASSES, size_classes, "bg-destructive text-destructive-foreground shadow-sm", "hover:bg-destructive/90" @@ -89,10 +79,7 @@ def destructive_classes def outline_classes [ - DEFAULT_CLASSES, - FOCUS_VISIBLE_CLASSES, - DISABLED_CLASSES, - ARIA_DISABLED_CLASSES, + BASE_CLASSES, size_classes, "border border-input bg-background shadow-sm", "hover:bg-accent hover:text-accent-foreground" @@ -101,10 +88,7 @@ def outline_classes def ghost_classes [ - DEFAULT_CLASSES, - FOCUS_VISIBLE_CLASSES, - DISABLED_CLASSES, - ARIA_DISABLED_CLASSES, + BASE_CLASSES, size_classes, "hover:bg-accent hover:text-accent-foreground" ]