refactor: 💡 refactor select field so it can support more yields

addons/rose/addon/components/rose/form.stories.mdx

@@ -30,12 +30,14 @@ and actions.
     @label="Label"
     @helperText="Helper text"
     @onChange={{fn this.actionHandler}}
-    as |select|
+    as |Field|
   >
-    <select.option>Choose an option</select.option>
-    <select.option @value="value-1">Value 1</select.option>
-    <select.option @value="value-2">Value 2</select.option>
-    <select.option @value="value-3">Value 3</select.option>
+    <Field as |select|>
+      <select.option>Choose an option</select.option>
+      <select.option @value="value-1">Value 1</select.option>
+      <select.option @value="value-2">Value 2</select.option>
+      <select.option @value="value-3">Value 3</select.option>
+    </Field>
   </form.select>
   <form.radioGroup @name="color" @selectedValue="green" as |radioGroup|>
     <radioGroup.radio
@@ -84,12 +86,14 @@ and actions.
           @label="Label"
           @helperText="Helper text"
           @onChange={{selectChange}}
-          as |select|
+          as |Field|
         >
-          <select.option>Choose an option</select.option>
-          <select.option @value="value-1">Value 1</select.option>
-          <select.option @value="value-2">Value 2</select.option>
-          <select.option @value="value-3">Value 3</select.option>
+          <Field as |select|>
+            <select.option>Choose an option</select.option>
+            <select.option @value="value-1">Value 1</select.option>
+            <select.option @value="value-2">Value 2</select.option>
+            <select.option @value="value-3">Value 3</select.option>
+          </Field>
         </form.select>
         <form.radioGroup @name="color" @selectedValue="green" as |radioGroup|>
           <radioGroup.radio

addons/rose/addon/components/rose/form/select.js

@@ -3,22 +3,6 @@ import layout from '../../../templates/components/rose/form/select';
 
 /**
  * A `<select>` element context component which yields option components.
- *
- * @example
- *  <Rose::Form::Select
- *    @id="select-id-1"
- *    name="select-field-name"
- *    @value="current-value"
- *    @label="Label"
- *    @helperText="Helper text"
- *    @error={{true}}
- *    @onChange={{fn this.selectChange}}
- *    disabled={{true}}
- *    as |select|
- *  >
- *    <select.option>Choose an option</select.option>
- *    <select.option @value="current-value">Curret value</select.option>
- *  </Rose::Form::Select>
  */
 export default Component.extend({
   layout,

addons/rose/addon/components/rose/form/select.stories.mdx

@@ -12,17 +12,20 @@ Renders a form select element.
 ```htmlbars
 <Rose::Form::Select
   @id="select-id"
+  @name="select-name"
   @value="green"
   @label="Color"
   @helperText="Set your desired color"
   @disabled={{false}}
   @error={{false}}
-  as |select|
+  as |Field|
 >
-  <select.option>Choose a color</select.option>
-  <select.option @value="red">Red</select.option>
-  <select.option @value="green">Green</select.option>
-  <select.option @value="blue">Blue</select.option>
+  <Field as |select|>
+    <select.option>Choose a color</select.option>
+    <select.option @value="red">Red</select.option>
+    <select.option @value="green">Green</select.option>
+    <select.option @value="blue">Blue</select.option>
+  </Field>
 </Rose::Form::Select>
 ```
 
@@ -31,18 +34,21 @@ Renders a form select element.
     template: hbs`
       <Rose::Form::Select
         @id={{id}}
+        @name={{name}}
         @value={{value}}
         @label={{label}}
         @helperText={{helperText}}
         @disabled={{disabled}}
         @error={{error}}
         @onChange={{fn onChange}}
-        as |select|
+        as |Field|
       >
-        <select.option>Choose an option</select.option>
-        <select.option @value="value-1">Value 1</select.option>
-        <select.option @value="value-2">Value 2</select.option>
-        <select.option @value="value-3">Value 3</select.option>
+        <Field as |select|>
+          <select.option>Choose an option</select.option>
+          <select.option @value="value-1">Value 1</select.option>
+          <select.option @value="value-2">Value 2</select.option>
+          <select.option @value="value-3">Value 3</select.option>
+        </Field>
       </Rose::Form::Select>
     `,
     context: {
@@ -56,7 +62,8 @@ Renders a form select element.
         },
         null
       ),
-      id: text('id', 'field-id'),
+      id: text('id', 'select-id'),
+      name: text('name', 'select-name'),
       label: text('label', 'Label'),
       helperText: text('helperText', 'Helper text'),
       disabled: boolean('disabled', false),

addons/rose/addon/components/rose/form/select/select.js

@@ -0,0 +1,11 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/form/select/select';
+
+/**
+ * This component is used internally by rose/form/select and should not be
+ * instantiated directly.
+ */
+export default Component.extend({
+  layout,
+  tagName: '',
+});

addons/rose/addon/templates/components/rose/form/select.hbs

@@ -8,16 +8,12 @@
     <span class="rose-form-select-helper-text">{{@helperText}}</span>
   {{/if}}
 
-  <XSelect
-    ...attributes
-    class="rose-form-select-field"
-    id={{@id}}
-    disabled={{@disabled}}
-    @value={{@value}}
-    @onChange={{@onChange}}
-    as |xs|
-  >
-    {{yield xs}}
-  </XSelect>
+  {{yield (component 'rose/form/select/select'
+    id=@id
+    name=@name
+    disabled=@disabled
+    value=@value
+    onChange=@onChange
+  )}}
 
 </div>

addons/rose/addon/templates/components/rose/form/select/select.hbs

@@ -0,0 +1,11 @@
+<XSelect
+  class="rose-form-select-field"
+  id={{@id}}
+  name={{@name}}
+  disabled={{@disabled}}
+  @value={{@value}}
+  @onChange={{@onChange}}
+  as |xs|
+>
+  {{yield xs}}
+</XSelect>

addons/rose/app/components/rose/form/select/select.js

@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/select/select';

addons/rose/tests/dummy/app/templates/index.hbs

@@ -107,21 +107,25 @@ Dummy app index template
     @label="Label"
     @helperText="Helper text"
     @onChange={{fn this.actionHandler}}
-    as |select|
+    as |Field|
   >
-    <select.option>Choose an option</select.option>
-    <select.option @value="value-1">Value 1</select.option>
-    <select.option @value="value-2">Value 2</select.option>
-    <select.option @value="value-3">Value 3</select.option>
+    <Field as |select|>
+      <select.option>Choose an option</select.option>
+      <select.option @value="value-1">Value 1</select.option>
+      <select.option @value="value-2">Value 2</select.option>
+      <select.option @value="value-3">Value 3</select.option>
+    </Field>
   </form.select>
   <form.select
-    disabled={{true}}
+
     @label="Label"
     @helperText="Helper text"
     @onChange={{fn this.actionHandler}}
-    as |select|
+    as |Field|
   >
-    <select.option>Choose an option</select.option>
+    <Field as |select|>
+      <select.option>Choose an option</select.option>
+    </Field>
   </form.select>
 
 

addons/rose/tests/integration/components/rose/form-test.js

@@ -41,7 +41,14 @@ module('Integration | Component | rose/form', function (hooks) {
       >
         <form.input @label="Input" name="input-field" />
         <form.textarea @label="Textarea" name="textarea-field" />
-        <form.select @label="Select" name="select-field" @onChange={{this.select}} />
+        <form.select
+          @label="Select"
+          @name="select-field"
+          @onChange={{this.select}}
+          as |Field|
+        >
+          <Field />
+        </form.select>
         <form.checkbox @label="Checkbox" name="checkbox-field" />
         <form.radioGroup @name="radio-group-field" @selectedValue="green" as |radioGroup|>
           <radioGroup.radio

addons/rose/tests/integration/components/rose/form/select-test.js

@@ -12,12 +12,14 @@ module('Integration | Component | rose/form/select', function (hooks) {
       <Rose::Form::Select
         @label="Label"
         @onChange={{fn this.onChange}}
-        as |select|
+        as |Field|
       >
-        <select.option>Choose an option</select.option>
-        <select.option @value="value-1">Value 1</select.option>
-        <select.option @value="value-2">Value 2</select.option>
-        <select.option @value="value-3">Value 3</select.option>
+        <Field as |select|>
+          <select.option>Choose an option</select.option>
+          <select.option @value="value-1">Value 1</select.option>
+          <select.option @value="value-2">Value 2</select.option>
+          <select.option @value="value-3">Value 3</select.option>
+        </Field>
       </Rose::Form::Select>
     `);
     assert.equal(find('label').textContent.trim(), 'Label');
@@ -32,9 +34,11 @@ module('Integration | Component | rose/form/select', function (hooks) {
         @label="Label"
         @helperText="Helper text"
         @onChange={{fn this.onChange}}
-        as |select|
+        as |Field|
       >
-        <select.option>Choose an option</select.option>
+        <Field as |select|>
+          <select.option>Choose an option</select.option>
+        </Field>
       </Rose::Form::Select>
     `);
     assert.equal(
@@ -49,9 +53,11 @@ module('Integration | Component | rose/form/select', function (hooks) {
       <Rose::Form::Select
         @onChange={{fn this.onChange}}
         @disabled={{true}}
-        as |select|
+        as |Field|
       >
-        <select.option>Choose an option</select.option>
+        <Field as |select|>
+          <select.option>Choose an option</select.option>
+        </Field>
       </Rose::Form::Select>
     `);
     assert.ok(find('[disabled]'));
@@ -64,10 +70,12 @@ module('Integration | Component | rose/form/select', function (hooks) {
       <Rose::Form::Select
         @onChange={{fn this.onChange}}
         @value={{value}}
-        as |select|
+        as |Field|
       >
-        <select.option @value="value-1">value-1</select.option>
-        <select.option @value="value-2">value-2</select.option>
+        <Field as |select|>
+          <select.option @value="value-1">value-1</select.option>
+          <select.option @value="value-2">value-2</select.option>
+        </Field>
       </Rose::Form::Select>
     `);
     assert.equal(find('select').value, 'value-1');
@@ -91,12 +99,14 @@ module('Integration | Component | rose/form/select', function (hooks) {
     this.onChange = this.onChange1;
     await render(hbs`
       <Rose::Form::Select
-        name="my-select"
+        @name="my-select"
         @onChange={{fn this.onChange}}
-        as |select|
+        as |Field|
       >
-        <select.option>Choose an option</select.option>
-        <select.option @value="value-1">value-1</select.option>
+        <Field as |select|>
+          <select.option>Choose an option</select.option>
+          <select.option @value="value-1">value-1</select.option>
+        </Field>
       </Rose::Form::Select>
     `);
     await fillIn('[name="my-select"]', 'value-1');