disabled + aria-disabled examples for Combobox (#228)

* disabled + aria-disabled examples for Combobox

* disabled + aria-disabled examples for Combobox

---------

Co-authored-by: Cirdes <cirdes@linkana.com>

Author: pierry01

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",

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",

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
 

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",

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",

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() {

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"))