[PS-960] Fix form input group suffix not working (#2947)

* Fix form suffix not working without prefix

* Use tailwind first/last to avoid hacky components

libs/components/src/form-field/form-field.component.html

@@ -7,7 +7,7 @@
     <ng-content select="[bitPrefix]"></ng-content>
   </div>
   <ng-content></ng-content>
-  <div *ngIf="prefixChildren.length" class="tw-flex">
+  <div *ngIf="suffixChildren.length" class="tw-flex">
     <ng-content select="[bitSuffix]"></ng-content>
   </div>
 </div>

libs/components/src/form-field/form-field.component.ts

@@ -31,17 +31,6 @@ export class BitFormFieldComponent implements AfterContentChecked {
   @ContentChildren(BitSuffixDirective) suffixChildren: QueryList<BitSuffixDirective>;
 
   ngAfterContentChecked(): void {
-    this.input.hasPrefix = this.prefixChildren.length > 0;
-    this.input.hasSuffix = this.suffixChildren.length > 0;
-
-    this.prefixChildren.forEach((prefix) => {
-      prefix.first = prefix == this.prefixChildren.first;
-    });
-
-    this.suffixChildren.forEach((suffix) => {
-      suffix.last = suffix == this.suffixChildren.last;
-    });
-
     if (this.error) {
       this.input.ariaDescribedBy = this.error.id;
     } else if (this.hint) {

libs/components/src/form-field/form-field.stories.ts

@@ -167,8 +167,6 @@ const ButtonGroupTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldCom
     <bit-form-field>
       <bit-label>Label</bit-label>
       <input bitInput placeholder="Placeholder" />
-      <button bitPrefix bitButton>Button</button>
-      <button bitPrefix bitButton>Button</button>
       <button bitSuffix bitButton>
         <i aria-hidden="true" class="bwi bwi-lg bwi-eye"></i>
       </button>

libs/components/src/form-field/prefix.directive.ts

@@ -9,7 +9,7 @@ export const PrefixClasses = [
   "tw-border-solid",
   "tw-border-secondary-500",
   "tw-text-muted",
-  "tw-rounded",
+  "tw-rounded-none",
 ];
 
 @Directive({
@@ -17,12 +17,6 @@ export const PrefixClasses = [
 })
 export class BitPrefixDirective {
   @HostBinding("class") @Input() get classList() {
-    return PrefixClasses.concat([
-      "tw-border-r-0",
-      "tw-rounded-r-none",
-      !this.first ? "tw-rounded-l-none" : "",
-    ]).filter((c) => c != "");
+    return PrefixClasses.concat(["tw-border-r-0", "first:tw-rounded-l"]);
   }
-
-  @Input() first = false;
 }

libs/components/src/form-field/suffix.directive.ts

@@ -7,12 +7,6 @@ import { PrefixClasses } from "./prefix.directive";
 })
 export class BitSuffixDirective {
   @HostBinding("class") @Input() get classList() {
-    return PrefixClasses.concat([
-      "tw-rounded-l-none",
-      "tw-border-l-0",
-      !this.last ? "tw-rounded-r-none" : "",
-    ]).filter((c) => c != "");
+    return PrefixClasses.concat(["tw-border-l-0", "last:tw-rounded-r"]);
   }
-
-  @Input() last = false;
 }

libs/components/src/input/input.directive.ts

@@ -17,18 +17,20 @@ export class BitInputDirective {
       "tw-bg-background-alt",
       "tw-border",
       "tw-border-solid",
-      "tw-rounded",
+      this.hasError ? "tw-border-danger-500" : "tw-border-secondary-500",
       "tw-text-main",
       "tw-placeholder-text-muted",
+      // Rounded
+      "tw-rounded-none",
+      "first:tw-rounded-l",
+      "last:tw-rounded-r",
+      // Focus
       "focus:tw-outline-none",
       "focus:tw-border-primary-700",
       "focus:tw-ring-1",
       "focus:tw-ring-primary-700",
       "focus:tw-z-10",
       "disabled:tw-bg-secondary-100",
-      this.hasPrefix ? "tw-rounded-l-none" : "",
-      this.hasSuffix ? "tw-rounded-r-none" : "",
-      this.hasError ? "tw-border-danger-500" : "tw-border-secondary-500",
     ].filter((s) => s != "");
   }