[PM-2195] Adjust radio groups margin (#5410)

* Adjust radio groups margin

* Move hint margin to input field

* Tweak field spacing

* Add story for hint, and fix hint display

* Fix label ssue

* Revert input margin

* Re-add margin to hint

* Change font weight

* Fix required placement

* Add support for required

* Change margin of radio group

* Remove unnecessary div

* Fix long inputs cutting off

* Fix radio story

* Remove newline

---------

Co-authored-by: Will Martin <contact@willmartian.com>

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

@@ -1,13 +1,13 @@
 <label [class]="labelClasses">
   <ng-content></ng-content>
   <span [class]="labelContentClasses">
-    <ng-content select="bit-label"></ng-content>
-    <span *ngIf="required" class="tw-text-xs tw-font-normal"> ({{ "required" | i18n }})</span>
+    <span>
+      <ng-content select="bit-label"></ng-content>
+      <span *ngIf="required" class="tw-text-xs tw-font-normal"> ({{ "required" | i18n }})</span>
+    </span>
+    <ng-content select="bit-hint" *ngIf="!hasError"></ng-content>
   </span>
 </label>
-<div>
-  <ng-content select="bit-hint" *ngIf="!hasError"></ng-content>
-</div>
 <div *ngIf="hasError" class="tw-mt-1 tw-text-danger">
   <i class="bwi bwi-error"></i> {{ displayError }}
 </div>

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

@@ -20,22 +20,36 @@ export class FormControlComponent {
     this._inline = coerceBooleanProperty(value);
   }
 
+  private _disableMargin = false;
+  @Input() set disableMargin(value: boolean | "") {
+    this._disableMargin = coerceBooleanProperty(value);
+  }
+  get disableMargin() {
+    return this._disableMargin;
+  }
+
   @ContentChild(BitFormControlAbstraction) protected formControl: BitFormControlAbstraction;
 
   @HostBinding("class") get classes() {
-    return ["tw-mb-6"].concat(this.inline ? ["tw-inline-block", "tw-mr-4"] : ["tw-block"]);
+    return []
+      .concat(this.inline ? ["tw-inline-block", "tw-mr-4"] : ["tw-block"])
+      .concat(this.disableMargin ? [] : ["tw-mb-6"]);
   }
 
   constructor(private i18nService: I18nService) {}
 
   protected get labelClasses() {
-    return ["tw-transition", "tw-select-none", "tw-mb-0"].concat(
-      this.formControl.disabled ? "tw-cursor-auto" : "tw-cursor-pointer"
-    );
+    return [
+      "tw-transition",
+      "tw-select-none",
+      "tw-mb-0",
+      "tw-inline-flex",
+      "tw-items-baseline",
+    ].concat(this.formControl.disabled ? "tw-cursor-auto" : "tw-cursor-pointer");
   }
 
   protected get labelContentClasses() {
-    return ["tw-font-semibold"].concat(
+    return ["tw-inline-flex", "tw-flex-col", "tw-font-semibold"].concat(
       this.formControl.disabled ? "tw-text-muted" : "tw-text-main"
     );
   }

libs/components/src/form-control/hint.component.ts

@@ -6,7 +6,7 @@ let nextId = 0;
 @Directive({
   selector: "bit-hint",
   host: {
-    class: "tw-text-muted tw-inline-block tw-mt-1",
+    class: "tw-text-muted tw-font-normal tw-inline-block tw-mt-1",
   },
 })
 export class BitHintComponent {