Skip to content

Commit 0945f2c

Browse files
pierry01cirdes
andauthored
aria-disabled for Tabs (#234)
Co-authored-by: Cirdes <[email protected]>
1 parent b1f2bcd commit 0945f2c

File tree

2 files changed

+29
-1
lines changed

2 files changed

+29
-1
lines changed

app/components/ruby_ui/tabs/tabs_trigger.rb

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,13 @@ def default_attrs
2121
action: "click->ruby-ui--tabs#show",
2222
value: @value
2323
},
24-
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"
24+
class: [
25+
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all",
26+
"disabled:pointer-events-none disabled:opacity-50",
27+
"aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
28+
"data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
29+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
30+
]
2531
}
2632
end
2733
end

app/views/docs/tabs.rb

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,28 @@ def view_template
3838
RUBY
3939
end
4040

41+
render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
42+
<<~RUBY
43+
Tabs(default_value: "account", class: 'w-96') do
44+
TabsList do
45+
TabsTrigger(disabled: true, value: "account") { "Account" }
46+
TabsTrigger(disabled: true, value: "password") { "Password" }
47+
end
48+
end
49+
RUBY
50+
end
51+
52+
render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do
53+
<<~RUBY
54+
Tabs(default_value: "account", class: 'w-96') do
55+
TabsList do
56+
TabsTrigger(aria: {disabled: "true"}, value: "account") { "Account" }
57+
TabsTrigger(aria: {disabled: "true"}, value: "password") { "Password" }
58+
end
59+
end
60+
RUBY
61+
end
62+
4163
render Docs::VisualCodeExample.new(title: "Full width", context: self) do
4264
<<~RUBY
4365
Tabs(default_value: "overview", class: 'w-96') do

0 commit comments

Comments
 (0)