feat(form-control): move background icons to element (#5531)

scripts/helpers.mjs

@@ -31,6 +31,23 @@ export const ifEquals = function () {
   return allEqual ? options.fn(this) : options.inverse(this);
 };
 
+// Using ifAny else if with helpers
+// {{#ifAny A B C}}
+//   this if A or B or C
+// {{else ifAny D E}}
+//   this if D or E
+// {{else}}
+//   something else
+// {{/ifAny}}
+
+export const ifAny = function () {
+  const args = Array.prototype.slice.call(arguments, 0, -1);
+  const options = arguments[arguments.length - 1];
+  const anyTruthy = args.some(arg => arg);
+
+  return anyTruthy ? options.fn(this) : options.inverse(this);
+};
+
 /** Using ternary
 if custom value for select--width: {{#> select select--width='160px'}}Filter by name{{/select}}
 else custom value for select--width: {{#> select)}}Filter by name{{/select}}

src/patternfly/components/FormControl/form-control-icon.hbs

@@ -0,0 +1,6 @@
+<div class="{{pfv}}form-control__icon{{#if form-control-icon--IsStatus}} pf-m-status{{/if}}{{#if form-control-icon--modifier}} {{form-control-icon--modifier}}{{/if}}"
+  {{#if form-control-icon--attribute}}
+    {{{form-control-icon--attribute}}}
+  {{/if}}>
+  <i class="fas fa-{{form-control--HasIcon}}" aria-hidden="true"></i>
+</div>

src/patternfly/components/FormControl/form-control-select.hbs

@@ -0,0 +1,16 @@
+<select class="{{#if form-control-select--IsExpanded}} pf-m-expanded{{/if}}{{#if form-control-select--modifier}} {{form-control-select--modifier}}{{/if}}"
+    {{#if form-control--IsDisabled}} disabled{{/if}}
+    {{#if form-control--IsReadonly}} readonly{{/if}}
+    {{#if form-control--IsRequired}} required{{/if}}
+    {{#if form-control--attribute}}
+      {{{form-control--attribute}}}
+    {{/if}}
+>{{#if @partial-block}}{{> @partial-block}}{{/if}}</select>
+{{#> form-control-utilities}}
+  {{#ifAny form-control--HasIcon form-control--IsError form-control--IsSuccess form-control--IsWarning}}
+    {{> form-control-template-status}}
+  {{/ifAny}}
+  <div class="{{pfv}}form-control__toggle-icon">
+    <i class="fas fa-caret-down" aria-hidden="true"></i>
+  </div>
+{{/form-control-utilities}}

src/patternfly/components/FormControl/form-control-template-status.hbs

@@ -0,0 +1,7 @@
+{{#if form-control--IsSuccess}}
+  {{> form-control-icon form-control-icon--IsStatus=true form-control--HasIcon='check-circle'}}
+{{else if form-control--IsWarning}}
+  {{> form-control-icon form-control-icon--IsStatus=true form-control--HasIcon='exclamation-triangle'}}
+{{else if form-control--IsError}}
+  {{> form-control-icon form-control-icon--IsStatus=true form-control--HasIcon='exclamation-circle'}}
+{{/if}}

src/patternfly/components/FormControl/form-control-utilities.hbs

@@ -0,0 +1,6 @@
+<div class="{{pfv}}form-control__utilities{{#if form-control-utilities--modifier}} {{form-control-utilities--modifier}}{{/if}}"
+  {{#if form-control-utilities--attribute}}
+    {{{form-control-utilities--attribute}}}
+  {{/if}}>
+  {{> @partial-block}}
+</div>

src/patternfly/components/FormControl/form-control.hbs

@@ -1,5 +1,38 @@
-<{{controlType}} class="{{pfv}}form-control{{#if form-control--IsExpanded}} pf-m-expanded{{/if}}{{#if form-control--modifier}} {{form-control--modifier}}{{/if}}"
-  {{#if form-control--attribute}}
-    {{{form-control--attribute}}}
-	{{/if}}
-{{#if input}}>{{else}}>{{#if @partial-block}}{{> @partial-block}}{{/if}}</{{controlType}}>{{/if}}
+<div class="{{pfv}}form-control
+  {{#if form-control--IsExpanded}} pf-m-expanded{{/if}}
+  {{#if form-control--IsDisabled}} pf-m-disabled{{/if}}
+  {{#if form-control--IsReadonly}} pf-m-readonly{{/if}}
+  {{#if form-control--IsRequired}} pf-m-required{{/if}}
+  {{#if form-control--IsPlaceholder}} pf-m-placeholder{{/if}}
+  {{#if form-control--IsPlain}} pf-m-plain{{/if}}
+  {{#if form-control--IsSuccess}} pf-m-success{{/if}}
+  {{#if form-control--IsWarning}} pf-m-warning{{/if}}
+  {{#if form-control--IsError}} pf-m-error{{/if}}
+  {{#if form-control--HasIcon}} pf-m-icon{{/if}}
+  {{#if form-control--modifier}} {{form-control--modifier}}{{/if}}
+">
+  {{#ifEquals controlType "select"}}
+    {{> form-control-select}}
+  {{else}}
+    <{{controlType}}
+      {{#if form-control--IsDisabled}} disabled{{/if}}
+      {{#if form-control--IsReadonly}} readonly{{/if}}
+      {{#if form-control--IsRequired}} required{{/if}}
+      {{#if form-control--attribute}}
+        {{{form-control--attribute}}}
+      {{/if}}
+    {{#if input}}>{{else}}>{{#if @partial-block}}{{> @partial-block}}{{/if}}</{{controlType}}>{{/if}}
+    {{#ifAny form-control--HasIcon form-control--IsError form-control--IsSuccess form-control--IsWarning }}
+      {{#> form-control-utilities}}
+        {{#ifEquals form-control--HasIcon "clock"}}
+          {{> form-control-icon}}
+        {{else ifEquals form-control--HasIcon "calendar-alt"}}
+          {{> form-control-icon}}
+        {{else if form-control--HasIcon}}
+          {{> form-control-icon}}
+        {{/ifEquals}}
+        {{> form-control-template-status}}
+      {{/form-control-utilities}}
+    {{/ifAny}}
+  {{/ifEquals}}
+</div>