diff --git a/app/components/ruby_ui/form/form_field_label.rb b/app/components/ruby_ui/form/form_field_label.rb index 032ada13..d30f8b65 100644 --- a/app/components/ruby_ui/form/form_field_label.rb +++ b/app/components/ruby_ui/form/form_field_label.rb @@ -9,7 +9,13 @@ def view_template(&) private def default_attrs - {class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"} + { + class: [ + "text-sm font-medium leading-none", + "peer-disabled:cursor-not-allowed peer-disabled:opacity-70", + "peer-aria-disabled:cursor-not-allowed peer-aria-disabled:opacity-70 peer-aria-disabled:pointer-events-none" + ] + } end end end diff --git a/app/components/ruby_ui/input/input.rb b/app/components/ruby_ui/input/input.rb index 05087c23..6e326a43 100644 --- a/app/components/ruby_ui/input/input.rb +++ b/app/components/ruby_ui/input/input.rb @@ -19,7 +19,14 @@ def default_attrs ruby_ui__form_field_target: "input", action: "input->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid" }, - class: "flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 border-border focus-visible:ring-ring placeholder:text-muted-foreground" + class: [ + "flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors border-border", + "placeholder:text-muted-foreground", + "disabled:cursor-not-allowed disabled:opacity-50", + "file:border-0 file:bg-transparent file:text-sm file:font-medium", + "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", + "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" + ] } end end diff --git a/app/views/docs/form.rb b/app/views/docs/form.rb index 38eb0bff..499ad4b6 100644 --- a/app/views/docs/form.rb +++ b/app/views/docs/form.rb @@ -22,6 +22,24 @@ def view_template RUBY end + render Docs::VisualCodeExample.new(title: "Disabled", context: self) do + <<~RUBY + FormField do + FormFieldLabel { "Disabled" } + Input(disabled: true, placeholder: "Joel Drapper", required: true, minlength: "3") { "Joel Drapper" } + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do + <<~RUBY + FormField do + FormFieldLabel { "Aria Disabled" } + Input(aria: {disabled: "true"}, placeholder: "Joel Drapper", required: true, minlength: "3") { "Joel Drapper" } + end + RUBY + end + render Docs::VisualCodeExample.new(title: "Custom error message", context: self) do <<~RUBY Form(class: "w-2/3 space-y-6") do diff --git a/app/views/docs/input.rb b/app/views/docs/input.rb index fa1f1acb..460247bc 100644 --- a/app/views/docs/input.rb +++ b/app/views/docs/input.rb @@ -34,6 +34,14 @@ def view_template RUBY end + render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do + <<~RUBY + div(class: 'grid w-full max-w-sm items-center gap-1.5') do + Input(aria: {disabled: "true"}, type: "email", placeholder: "Email") + end + RUBY + end + render Docs::VisualCodeExample.new(title: "With label", context: self) do <<~RUBY div(class: 'grid w-full max-w-sm items-center gap-1.5') do