From 9446b6e8904cb89be04289586913a6f26b001d24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Mendon=C3=A7a?= Date: Thu, 8 May 2025 11:38:18 -0300 Subject: [PATCH] aria-disabled for Tabs --- app/components/ruby_ui/tabs/tabs_trigger.rb | 8 +++++++- app/views/docs/tabs.rb | 22 +++++++++++++++++++++ 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/app/components/ruby_ui/tabs/tabs_trigger.rb b/app/components/ruby_ui/tabs/tabs_trigger.rb index 3745be76..c2764f4f 100644 --- a/app/components/ruby_ui/tabs/tabs_trigger.rb +++ b/app/components/ruby_ui/tabs/tabs_trigger.rb @@ -21,7 +21,13 @@ def default_attrs action: "click->ruby-ui--tabs#show", value: @value }, - class: "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow" + class: [ + "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all", + "disabled:pointer-events-none disabled:opacity-50", + "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed", + "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow", + "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" + ] } end end diff --git a/app/views/docs/tabs.rb b/app/views/docs/tabs.rb index 86f9961c..33b6ff34 100644 --- a/app/views/docs/tabs.rb +++ b/app/views/docs/tabs.rb @@ -38,6 +38,28 @@ def view_template RUBY end + render Docs::VisualCodeExample.new(title: "Disabled", context: self) do + <<~RUBY + Tabs(default_value: "account", class: 'w-96') do + TabsList do + TabsTrigger(disabled: true, value: "account") { "Account" } + TabsTrigger(disabled: true, value: "password") { "Password" } + end + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do + <<~RUBY + Tabs(default_value: "account", class: 'w-96') do + TabsList do + TabsTrigger(aria: {disabled: "true"}, value: "account") { "Account" } + TabsTrigger(aria: {disabled: "true"}, value: "password") { "Password" } + end + end + RUBY + end + render Docs::VisualCodeExample.new(title: "Full width", context: self) do <<~RUBY Tabs(default_value: "overview", class: 'w-96') do