From 651a5ec135c35e9b445c77e002209501c7a8a741 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Mendon=C3=A7a?= Date: Thu, 8 May 2025 13:42:14 +0000 Subject: [PATCH 1/3] disabled + aria-disabled examples for Combobox --- .../ruby_ui/combobox/combobox_checkbox.rb | 3 ++- .../ruby_ui/combobox/combobox_radio.rb | 8 +++++- .../ruby_ui/combobox/combobox_search_input.rb | 16 ++++++++---- .../combobox/combobox_toggle_all_checkbox.rb | 3 ++- .../ruby_ui/combobox/combobox_trigger.rb | 8 +++++- .../ruby_ui/combobox_controller.js | 4 +-- app/views/docs/combobox.rb | 26 ++++++++++++++++--- 7 files changed, 54 insertions(+), 14 deletions(-) diff --git a/app/components/ruby_ui/combobox/combobox_checkbox.rb b/app/components/ruby_ui/combobox/combobox_checkbox.rb index e3806d83..db49d217 100644 --- a/app/components/ruby_ui/combobox/combobox_checkbox.rb +++ b/app/components/ruby_ui/combobox/combobox_checkbox.rb @@ -13,7 +13,8 @@ def default_attrs class: [ "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", - "disabled:cursor-not-allowed disabled:opacity-50" + "disabled:cursor-not-allowed disabled:opacity-50", + "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" ], data: { ruby_ui__combobox_target: "input", diff --git a/app/components/ruby_ui/combobox/combobox_radio.rb b/app/components/ruby_ui/combobox/combobox_radio.rb index d27c7dae..c174afef 100644 --- a/app/components/ruby_ui/combobox/combobox_radio.rb +++ b/app/components/ruby_ui/combobox/combobox_radio.rb @@ -10,7 +10,13 @@ def view_template def default_attrs { - class: "aspect-square h-4 w-4 rounded-full border border-primary accent-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", + class: [ + "aspect-square h-4 w-4 rounded-full border border-primary accent-primary text-primary shadow", + "focus:outline-none", + "focus-visible:ring-1 focus-visible:ring-ring", + "disabled:cursor-not-allowed disabled:opacity-50", + "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" + ], data: { ruby_ui__combobox_target: "input", ruby_ui__form_field_target: "input", diff --git a/app/components/ruby_ui/combobox/combobox_search_input.rb b/app/components/ruby_ui/combobox/combobox_search_input.rb index 728ae56f..6515668c 100644 --- a/app/components/ruby_ui/combobox/combobox_search_input.rb +++ b/app/components/ruby_ui/combobox/combobox_search_input.rb @@ -19,16 +19,22 @@ def view_template def default_attrs { type: "search", - class: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none border-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", role: "searchbox", + autocorrect: "off", + autocomplete: "off", + spellcheck: "false", placeholder: @placeholder, + class: [ + "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none border-none", + "focus:ring-0", + "placeholder:text-muted-foreground", + "disabled:cursor-not-allowed disabled:opacity-50", + "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" + ], data: { ruby_ui__combobox_target: "searchInput", action: "keyup->ruby-ui--combobox#filterItems search->ruby-ui--combobox#filterItems" - }, - autocomplete: "off", - autocorrect: "off", - spellcheck: "false" + } } end diff --git a/app/components/ruby_ui/combobox/combobox_toggle_all_checkbox.rb b/app/components/ruby_ui/combobox/combobox_toggle_all_checkbox.rb index 5ac8beca..01a6e811 100644 --- a/app/components/ruby_ui/combobox/combobox_toggle_all_checkbox.rb +++ b/app/components/ruby_ui/combobox/combobox_toggle_all_checkbox.rb @@ -13,7 +13,8 @@ def default_attrs class: [ "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", - "disabled:cursor-not-allowed disabled:opacity-50" + "disabled:cursor-not-allowed disabled:opacity-50", + "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" ], data: { ruby_ui__combobox_target: "toggleAll", diff --git a/app/components/ruby_ui/combobox/combobox_trigger.rb b/app/components/ruby_ui/combobox/combobox_trigger.rb index 93fc9a98..be32a761 100644 --- a/app/components/ruby_ui/combobox/combobox_trigger.rb +++ b/app/components/ruby_ui/combobox/combobox_trigger.rb @@ -21,7 +21,13 @@ def view_template def default_attrs { type: "button", - class: "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 justify-between", + class: [ + "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors border border-input bg-background h-10 px-4 py-2 justify-between", + "hover:bg-accent hover:text-accent-foreground", + "disabled:pointer-events-none disabled:opacity-50", + "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed", + "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" + ], data: { placeholder: @placeholder, ruby_ui__combobox_target: "trigger", diff --git a/app/javascript/controllers/ruby_ui/combobox_controller.js b/app/javascript/controllers/ruby_ui/combobox_controller.js index 0dd4531a..7e233164 100644 --- a/app/javascript/controllers/ruby_ui/combobox_controller.js +++ b/app/javascript/controllers/ruby_ui/combobox_controller.js @@ -25,7 +25,7 @@ export default class extends Controller { } disconnect() { - this.cleanup(); + if (this.cleanup) { this.cleanup() } } inputChanged(e) { @@ -41,7 +41,7 @@ export default class extends Controller { } inputContent(input) { - return input.dataset.text || input.parentElement.innerText + return input.dataset.text || input.parentElement.textContent } toggleAllItems() { diff --git a/app/views/docs/combobox.rb b/app/views/docs/combobox.rb index 83ab8890..2fd1d422 100644 --- a/app/views/docs/combobox.rb +++ b/app/views/docs/combobox.rb @@ -22,7 +22,7 @@ def view_template ComboboxList do ComboboxEmptyState { "No result" } - ComboboxListGroup label: "Fruits" do + ComboboxListGroup(label: "Fruits") do ComboboxItem do ComboboxRadio(name: "food", value: "apple") span { "Apple" } @@ -34,7 +34,7 @@ def view_template end end - ComboboxListGroup label: "Vegetable" do + ComboboxListGroup(label: "Vegetable") do ComboboxItem do ComboboxRadio(name: "food", value: "brocoli") span { "Broccoli" } @@ -46,7 +46,7 @@ def view_template end end - ComboboxListGroup label: "Others" do + ComboboxListGroup(label: "Others") do ComboboxItem do ComboboxRadio(name: "food", value: "chocolate") span { "Chocolate" } @@ -123,6 +123,26 @@ def view_template RUBY end + render Docs::VisualCodeExample.new(title: "Disabled", context: self) do + <<~RUBY + div(class: "w-96") do + Combobox do + ComboboxTrigger(disabled: true, placeholder: "Pick value") + end + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do + <<~RUBY + div(class: "w-96") do + Combobox do + ComboboxTrigger(aria: {disabled: "true"}, placeholder: "Pick value") + end + end + RUBY + end + render Components::ComponentSetup::Tabs.new(component_name: "Combobox") render Docs::ComponentsTable.new(component_files("Combobox")) From ea49a5b67d6cb8bc1e7a2ebe1075d72b5b495121 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Mendon=C3=A7a?= Date: Thu, 8 May 2025 11:03:04 -0300 Subject: [PATCH 2/3] disabled + aria-disabled for Form and Input --- .../ruby_ui/form/form_field_label.rb | 8 +++++++- app/components/ruby_ui/input/input.rb | 9 ++++++++- app/views/docs/form.rb | 18 ++++++++++++++++++ app/views/docs/input.rb | 8 ++++++++ 4 files changed, 41 insertions(+), 2 deletions(-) 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 From c4a775cd197875f99b39943b6e387588e6f4e0ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Mendon=C3=A7a?= Date: Thu, 8 May 2025 11:05:01 -0300 Subject: [PATCH 3/3] OOPS --- .../ruby_ui/combobox/combobox_checkbox.rb | 3 +-- .../ruby_ui/combobox/combobox_radio.rb | 8 +----- .../ruby_ui/combobox/combobox_search_input.rb | 16 ++++-------- .../combobox/combobox_toggle_all_checkbox.rb | 3 +-- .../ruby_ui/combobox/combobox_trigger.rb | 8 +----- .../ruby_ui/combobox_controller.js | 4 +-- app/views/docs/combobox.rb | 26 +++---------------- 7 files changed, 14 insertions(+), 54 deletions(-) diff --git a/app/components/ruby_ui/combobox/combobox_checkbox.rb b/app/components/ruby_ui/combobox/combobox_checkbox.rb index db49d217..e3806d83 100644 --- a/app/components/ruby_ui/combobox/combobox_checkbox.rb +++ b/app/components/ruby_ui/combobox/combobox_checkbox.rb @@ -13,8 +13,7 @@ def default_attrs class: [ "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", - "disabled:cursor-not-allowed disabled:opacity-50", - "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" + "disabled:cursor-not-allowed disabled:opacity-50" ], data: { ruby_ui__combobox_target: "input", diff --git a/app/components/ruby_ui/combobox/combobox_radio.rb b/app/components/ruby_ui/combobox/combobox_radio.rb index c174afef..d27c7dae 100644 --- a/app/components/ruby_ui/combobox/combobox_radio.rb +++ b/app/components/ruby_ui/combobox/combobox_radio.rb @@ -10,13 +10,7 @@ def view_template def default_attrs { - class: [ - "aspect-square h-4 w-4 rounded-full border border-primary accent-primary text-primary shadow", - "focus:outline-none", - "focus-visible:ring-1 focus-visible:ring-ring", - "disabled:cursor-not-allowed disabled:opacity-50", - "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" - ], + class: "aspect-square h-4 w-4 rounded-full border border-primary accent-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", data: { ruby_ui__combobox_target: "input", ruby_ui__form_field_target: "input", diff --git a/app/components/ruby_ui/combobox/combobox_search_input.rb b/app/components/ruby_ui/combobox/combobox_search_input.rb index 6515668c..728ae56f 100644 --- a/app/components/ruby_ui/combobox/combobox_search_input.rb +++ b/app/components/ruby_ui/combobox/combobox_search_input.rb @@ -19,22 +19,16 @@ def view_template def default_attrs { type: "search", + class: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none border-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", role: "searchbox", - autocorrect: "off", - autocomplete: "off", - spellcheck: "false", placeholder: @placeholder, - class: [ - "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none border-none", - "focus:ring-0", - "placeholder:text-muted-foreground", - "disabled:cursor-not-allowed disabled:opacity-50", - "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" - ], data: { ruby_ui__combobox_target: "searchInput", action: "keyup->ruby-ui--combobox#filterItems search->ruby-ui--combobox#filterItems" - } + }, + autocomplete: "off", + autocorrect: "off", + spellcheck: "false" } end diff --git a/app/components/ruby_ui/combobox/combobox_toggle_all_checkbox.rb b/app/components/ruby_ui/combobox/combobox_toggle_all_checkbox.rb index 01a6e811..5ac8beca 100644 --- a/app/components/ruby_ui/combobox/combobox_toggle_all_checkbox.rb +++ b/app/components/ruby_ui/combobox/combobox_toggle_all_checkbox.rb @@ -13,8 +13,7 @@ def default_attrs class: [ "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", - "disabled:cursor-not-allowed disabled:opacity-50", - "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" + "disabled:cursor-not-allowed disabled:opacity-50" ], data: { ruby_ui__combobox_target: "toggleAll", diff --git a/app/components/ruby_ui/combobox/combobox_trigger.rb b/app/components/ruby_ui/combobox/combobox_trigger.rb index be32a761..93fc9a98 100644 --- a/app/components/ruby_ui/combobox/combobox_trigger.rb +++ b/app/components/ruby_ui/combobox/combobox_trigger.rb @@ -21,13 +21,7 @@ def view_template def default_attrs { type: "button", - class: [ - "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors border border-input bg-background h-10 px-4 py-2 justify-between", - "hover:bg-accent hover:text-accent-foreground", - "disabled:pointer-events-none disabled:opacity-50", - "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed", - "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" - ], + class: "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 justify-between", data: { placeholder: @placeholder, ruby_ui__combobox_target: "trigger", diff --git a/app/javascript/controllers/ruby_ui/combobox_controller.js b/app/javascript/controllers/ruby_ui/combobox_controller.js index 7e233164..0dd4531a 100644 --- a/app/javascript/controllers/ruby_ui/combobox_controller.js +++ b/app/javascript/controllers/ruby_ui/combobox_controller.js @@ -25,7 +25,7 @@ export default class extends Controller { } disconnect() { - if (this.cleanup) { this.cleanup() } + this.cleanup(); } inputChanged(e) { @@ -41,7 +41,7 @@ export default class extends Controller { } inputContent(input) { - return input.dataset.text || input.parentElement.textContent + return input.dataset.text || input.parentElement.innerText } toggleAllItems() { diff --git a/app/views/docs/combobox.rb b/app/views/docs/combobox.rb index 2fd1d422..83ab8890 100644 --- a/app/views/docs/combobox.rb +++ b/app/views/docs/combobox.rb @@ -22,7 +22,7 @@ def view_template ComboboxList do ComboboxEmptyState { "No result" } - ComboboxListGroup(label: "Fruits") do + ComboboxListGroup label: "Fruits" do ComboboxItem do ComboboxRadio(name: "food", value: "apple") span { "Apple" } @@ -34,7 +34,7 @@ def view_template end end - ComboboxListGroup(label: "Vegetable") do + ComboboxListGroup label: "Vegetable" do ComboboxItem do ComboboxRadio(name: "food", value: "brocoli") span { "Broccoli" } @@ -46,7 +46,7 @@ def view_template end end - ComboboxListGroup(label: "Others") do + ComboboxListGroup label: "Others" do ComboboxItem do ComboboxRadio(name: "food", value: "chocolate") span { "Chocolate" } @@ -123,26 +123,6 @@ def view_template RUBY end - render Docs::VisualCodeExample.new(title: "Disabled", context: self) do - <<~RUBY - div(class: "w-96") do - Combobox do - ComboboxTrigger(disabled: true, placeholder: "Pick value") - end - end - RUBY - end - - render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do - <<~RUBY - div(class: "w-96") do - Combobox do - ComboboxTrigger(aria: {disabled: "true"}, placeholder: "Pick value") - end - end - RUBY - end - render Components::ComponentSetup::Tabs.new(component_name: "Combobox") render Docs::ComponentsTable.new(component_files("Combobox"))