Skip to content

Commit 518264c

Browse files
committed
added missing select component
1 parent 984548a commit 518264c

File tree

5 files changed

+78
-0
lines changed

5 files changed

+78
-0
lines changed
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
%select{ html_attributes }
2+
- if block_given?
3+
= yield
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module Matestack::Ui::Core::Select
2+
class Select < Matestack::Ui::Core::Component::Static
3+
4+
html_attributes :autofocus, :disabled, :form, :multiple, :name, :required, :size
5+
6+
end
7+
end

docs/api/100-components/select.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Matestack Core Component: Select
2+
3+
The HTML `<select>` tag, implemented in Ruby.
4+
5+
If you want to use the `select` in context of a matestack `form`, please use `form_select`
6+
documented [here](/docs/api/100-components/form_select.md)
7+
8+
## Parameters
9+
This component can take various optional configuration params and yield content
10+
11+
### HMTL attributes (optional)
12+
This component accepts all the canonical [HTML global attributes](https://www.w3schools.com/tags/ref_standardattributes.asp) like `id` or `class`.
13+
14+
## Examples
15+
16+
### Example 1: Basic usage along with `option` components
17+
18+
```ruby
19+
select id: "foo", class: "bar" do
20+
option label: 'Option 1', value: '1', selected: true
21+
option label: 'Option 2', value: '2'
22+
option label: 'Option 3', value: '3'
23+
end
24+
```
25+
26+
returns
27+
28+
```html
29+
<select id="foo" class="bar">
30+
<option label="Option 1" selected="selected" value="1"></option>
31+
<option label="Option 2" value="2"></option>
32+
<option label="Option 3" value="3"></option>
33+
</select>
34+
```

lib/matestack/ui/core/components.rb

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@ def self.require_core_component(name)
120120
require_core_component "s"
121121
require_core_component "samp"
122122
require_core_component "section"
123+
require_core_component "select"
123124
require_core_component "small"
124125
require_core_component "span"
125126
require_core_component "strong"
@@ -241,6 +242,7 @@ def self.require_core_component(name)
241242
s: Matestack::Ui::Core::S::S,
242243
samp: Matestack::Ui::Core::Samp::Samp,
243244
section: Matestack::Ui::Core::Section::Section,
245+
select: Matestack::Ui::Core::Select::Select,
244246
small: Matestack::Ui::Core::Small::Small,
245247
span: Matestack::Ui::Core::Span::Span,
246248
strong: Matestack::Ui::Core::Strong::Strong,

spec/test/components/select_spec.rb

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
require 'rails_helper'
2+
3+
describe 'Input Component', type: :feature, js: true do
4+
include Utils
5+
6+
it 'renders a input' do
7+
matestack_render do
8+
select
9+
end
10+
expect(page).to have_selector('select')
11+
end
12+
13+
it 'is possible to render options wrapped in a select' do
14+
matestack_render do
15+
select id: "foo", class: "bar" do
16+
option label: 'Option 1', value: '1', selected: true
17+
option label: 'Option 2', value: '2'
18+
option label: 'Option 3', value: '3'
19+
end
20+
end
21+
static_output = page.html
22+
expected_static_output = <<~HTML
23+
<select id="foo" class="bar">
24+
<option label="Option 1" selected="selected" value="1"></option>
25+
<option label="Option 2" value="2"></option>
26+
<option label="Option 3" value="3"></option>
27+
</select>
28+
HTML
29+
expect(stripped(static_output)).to include(stripped(expected_static_output))
30+
end
31+
32+
end

0 commit comments

Comments
 (0)