Add grid areas to fields and buttons

This commit gives fields and buttons default grid template areas
with an option to turn them off.

addon/components/field-for.hbs

@@ -16,6 +16,7 @@
       this.using
       "-field"
     }}
+    {{style grid-area=this.gridArea}}
     {{on "change" (stop-propagation)}}
     ...attributes
     data-test-field-for={{this._testingSelector}}

addon/components/field-for.js

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { arg } from 'ember-arg-types';
-import { array, func, bool, string, object, any } from 'prop-types';
+import { array, func, bool, string, object, any, oneOfType } from 'prop-types';
 import { oneWay, notEmpty, gt, union, readOnly } from '@ember/object/computed';
 import { dasherize } from '@ember/string';
 import { isArray } from '@ember/array';
@@ -102,6 +102,16 @@ export default class FieldForComponent extends Component {
   @readOnly('formFor.fieldClasses') fieldClasses;
   @readOnly('formFor.testingClassPrefix') testingClassPrefix;
 
+  /**
+   * Disable named grid areas at the prop level by default
+   * @param {String} gridAreaName
+   * @public
+   */
+  @arg(bool)
+  get useGridTemplate() {
+    return this.args?.form?.useGridTemplate ?? false;
+  }
+
   /**
    * Whether or not this field is a composite value, meaning
    * that it exposes more than one value to the control layer
@@ -126,7 +136,7 @@ export default class FieldForComponent extends Component {
    *
    * @returns {String}
    */
-  @arg(string)
+  @arg(oneOfType([array, string]))
   for = '';
 
   /**
@@ -253,6 +263,22 @@ export default class FieldForComponent extends Component {
     return !(this.isDestroyed && this.isDestroying) && this._valueIsDirty && this._valueIsNotBlank;
   }
 
+  /**
+   * The name of the field's grid area
+   * @property gridArea
+   * @type String
+   * @default false
+   * @public
+   */
+  get gridArea() {
+    return this.useGridTemplate ? this._gridAreaName : 'auto';
+  }
+
+  get _gridAreaName() {
+    const prefix = this.args.form.gridTemplatePrefix ?? '';
+    return `${prefix}${this._dasherizedParams}`;
+  }
+
   get _valueIsDirty() {
     return this._stringify(this._lastValidValue) !== this._stringify(this.value);
   }

addon/components/form-button.hbs

@@ -7,6 +7,7 @@
     "
   type={{if (eq this.buttonType "submit") "submit" "button"}}
   disabled={{@disabled}}
+  {{style grid-area=this.gridArea}}
   ...attributes
   data-test-form-button="{{this.buttonType}}"
   {{on "click" (stop-propagation this.handleClick)}}

addon/components/form-button.js

@@ -1,12 +1,44 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { arg } from 'ember-arg-types';
+import { string, bool } from 'prop-types';
+import { action } from '@ember/object';
 
 export default class FormButtonComponent extends Component {
-  @arg
+  /**
+   * The type of button (ie, submit)
+   * @param {String} buttonType
+   * @public
+   */
+  @arg(string)
   buttonType = 'button';
 
+  /**
+   * Disable named grid areas at the prop level by default
+   * @param {String} useGridTemplate
+   * @public
+   */
+  @arg(bool)
+  get useGridTemplate() {
+    return this.args?.form?.useGridTemplate ?? false;
+  }
+
+  /**
+   * The name of the button's grid area
+   * @property gridArea
+   * @type String
+   * @default false
+   * @public
+   */
+  get gridArea() {
+    return this.useGridTemplate ? this._gridAreaName : 'auto';
+  }
+
+  get _gridAreaName() {
+    const prefix = this.args.form.gridTemplatePrefix ?? '';
+    return `${prefix}${this.buttonType}`;
+  }
+
   @tracked
   isActing = false;
 

addon/components/form-for.hbs

@@ -25,6 +25,7 @@
           )
           buttonActingClass=this.buttonActingClass
           buttonType="button"
+          form=this
         )
         submit=(component
           this.buttonComponent
@@ -41,6 +42,7 @@
           buttonType="submit"
           onClick=this.alternativeSubmit
           disabled=this.isSubmitButtonDisabled
+          form=this
         )
         reset=(component
           this.buttonComponent
@@ -56,6 +58,7 @@
           isActing=this.isResetting
           onClick=this.reset
           buttonType="reset"
+          form=this
         )
         destroy=(component
           this.buttonComponent
@@ -71,6 +74,7 @@
           isActing=this.isDestroyingRecord
           onClick=(fn this.confirmDestroy this.model)
           buttonType="destroy"
+          form=this
         )
         errors=(component
           "errors-for" errors=this.errors customErrorComponent=this.formFor.customErrorComponent

addon/components/form-for.js

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { arg, func } from 'ember-arg-types';
-import { bool, string, object, boolean } from 'prop-types';
+import { bool, string, object } from 'prop-types';
 import { next } from '@ember/runloop';
 import { dasherize } from '@ember/string';
 import { action, setProperties, notifyPropertyChange } from '@ember/object';
@@ -83,6 +83,8 @@ export default class FormForComponent extends Component {
   @readOnly('formFor.testingClassPrefix') testingClassPrefix;
   @readOnly('formFor.bemClassPrefix') bemClassPrefix;
   @readOnly('formFor.useBemClass') useBemClassConfig;
+  @readOnly('formFor.gridTemplatePrefix') gridTemplatePrefix;
+  @readOnly('formFor.useGridTemplate') useGridTemplateConfig;
   @readOnly('formFor.formClasses') formClasses;
   @readOnly('formFor.buttonClasses') buttonClasses;
   @readOnly('formFor.submittingClass') _submittingClasses;
@@ -155,6 +157,18 @@ export default class FormForComponent extends Component {
     return this.useBemClassConfig || false;
   }
 
+  /**
+   * Whether or not this form uses grid template areas in inline styles
+   * @property useGridTemplate
+   * @type boolean
+   * @default false
+   * @public
+   */
+  @arg(bool)
+  get useGridTemplate() {
+    return this.useGridTemplateConfig || false;
+  }
+
   @arg(string)
   get submittingClasses() {
     return this._submittingClasses;
@@ -405,7 +419,7 @@ export default class FormForComponent extends Component {
    * @default true
    * @public
    */
-  @arg(boolean)
+  @arg(bool)
   confirmsDestroy = true;
 
   /**
@@ -495,7 +509,7 @@ export default class FormForComponent extends Component {
   @arg(string)
   modelName = null;
 
-  @arg(boolean)
+  @arg(bool)
   useCustomButtonComponent = true;
 
   @arg(bool)

addon/services/form-for.js

@@ -15,6 +15,7 @@ export default class FormForService extends Service {
     this.testingClassPrefix = this.config.testingClassPrefix;
     this.bemClassPrefix = this.config.bemClassPrefix;
     this.useBemClass = this.config.useBemClass;
+    this.useGridTemplate = this.config.useGridTemplate;
     this.submittingClasses = this.config.submittingClasses;
     this.fieldClasses = this.config.fieldClasses;
     this.formClasses = this.config.formClasses;

config/environment.js

@@ -10,6 +10,8 @@ module.exports = function (/* environment, appConfig */) {
         formClasses: 'form',
         bemClassPrefix: '',
         useBemClass: false,
+        gridTemplatePrefix: '',
+        useGridTemplate: false,
         fieldForControlCalloutClasses: 'field-for-control-callout',
         fieldForControlCalloutPosition: 'bottom left',
         showRequiredIndicator: true,