diff --git a/app/components/ruby_ui/select/select_item.rb b/app/components/ruby_ui/select/select_item.rb index ec7bbbfe..d4fe3e8a 100644 --- a/app/components/ruby_ui/select/select_item.rb +++ b/app/components/ruby_ui/select/select_item.rb @@ -37,15 +37,24 @@ def default_attrs { role: "option", tabindex: "0", - class: "item group relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", + data_value: @value, + aria_selected: "false", + data_orientation: "vertical", + class: [ + "item group relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors", + "focus:bg-accent focus:text-accent-foreground", + "hover:bg-accent hover:text-accent-foreground", + "disabled:pointer-events-none disabled:opacity-50", + "aria-selected:bg-accent aria-selected:text-accent-foreground", + "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", + "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed" + ], data: { controller: "ruby-ui--select-item", action: "click->ruby-ui--select#selectItem keydown.enter->ruby-ui--select#selectItem keydown.down->ruby-ui--select#handleKeyDown keydown.up->ruby-ui--select#handleKeyUp keydown.esc->ruby-ui--select#handleEsc", ruby_ui__select_target: "item" - }, - data_value: @value, - data_orientation: "vertical", - aria_selected: "false" + } + } end end diff --git a/app/components/ruby_ui/select/select_trigger.rb b/app/components/ruby_ui/select/select_trigger.rb index 8effd902..a5999244 100644 --- a/app/components/ruby_ui/select/select_trigger.rb +++ b/app/components/ruby_ui/select/select_trigger.rb @@ -33,12 +33,12 @@ def icon def default_attrs { + type: "button", + role: "combobox", data: { action: "ruby-ui--select#onClick", ruby_ui__select_target: "trigger" }, - type: "button", - role: "combobox", aria: { controls: "radix-:r0:", expanded: "false", @@ -46,8 +46,13 @@ def default_attrs haspopup: "listbox", activedescendant: true }, - class: - "truncate w-full flex h-9 items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50" + class: [ + "truncate w-full flex h-9 items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background", + "placeholder:text-muted-foreground", + "focus:outline-none focus:ring-1 focus:ring-ring", + "disabled:cursor-not-allowed disabled:opacity-50", + "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" + ] } end end diff --git a/app/views/docs/select.rb b/app/views/docs/select.rb index f28f4c40..3fb110c9 100644 --- a/app/views/docs/select.rb +++ b/app/views/docs/select.rb @@ -11,20 +11,88 @@ def view_template render Docs::VisualCodeExample.new(title: "Select (Deconstructed)", context: self) do <<~RUBY - div(class: 'w-56 flex items-center justify-center') do - Select do - SelectInput(value: "apple", id: "select-a-fruit") - SelectTrigger do - SelectValue(placeholder: 'Select a fruit', id: "select-a-fruit") { "Apple" } + Select(class: "w-56") do + SelectInput(value: "apple", id: "select-a-fruit") + + SelectTrigger do + SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" } + end + + SelectContent(outlet_id: "select-a-fruit") do + SelectGroup do + SelectLabel { "Fruits" } + SelectItem(value: "apple") { "Apple" } + SelectItem(value: "orange") { "Orange" } + SelectItem(value: "banana") { "Banana" } + SelectItem(value: "watermelon") { "Watermelon" } + end + end + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "Disabled", context: self) do + <<~RUBY + Select(class: "w-56") do + SelectInput(value: "apple", id: "select-a-fruit") + + SelectTrigger(disabled: true) do + SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" } + end + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "Data Disabled", context: self) do + <<~RUBY + Select(class: "w-56") do + SelectInput(value: "apple", id: "select-a-fruit") + + SelectTrigger do + SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" } + end + + SelectContent(outlet_id: "select-a-fruit") do + SelectGroup do + SelectLabel { "Fruits" } + SelectItem(data: {disabled: true}, value: "apple") { "Apple" } + SelectItem(value: "orange") { "Orange" } + SelectItem(value: "banana") { "Banana" } + SelectItem(data: {disabled: true}, value: "watermelon") { "Watermelon" } end - SelectContent(outlet_id: "select-a-fruit") do - SelectGroup do - SelectLabel { "Fruits" } - SelectItem(value: "apple") { "Apple" } - SelectItem(value: "orange") { "Orange" } - SelectItem(value: "banana") { "Banana" } - SelectItem(value: "watermelon") { "Watermelon" } - end + end + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "Aria Disabled Trigger", context: self) do + <<~RUBY + Select(class: "w-56") do + SelectInput(value: "apple", id: "select-a-fruit") + + SelectTrigger(aria: {disabled: "true"}) do + SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" } + end + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "Aria Disabled Item", context: self) do + <<~RUBY + Select(class: "w-56") do + SelectInput(value: "apple", id: "select-a-fruit") + + SelectTrigger do + SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" } + end + + SelectContent(outlet_id: "select-a-fruit") do + SelectGroup do + SelectLabel { "Fruits" } + SelectItem(aria: {disabled: "true"}, value: "apple") { "Apple" } + SelectItem(value: "orange") { "Orange" } + SelectItem(value: "banana") { "Banana" } + SelectItem(aria: {disabled: "true"}, value: "watermelon") { "Watermelon" } end end end