feat(design): add all basic form field inputs

graycoreio · Dec 14, 2024 · 6136791 · 6136791
1 parent a8ea9b1
commit 6136791
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 25 deletions.
diff --git a/libs/design/input/examples/src/input-disabled/input-disabled.component.html b/libs/design/input/examples/src/input-disabled/input-disabled.component.html
@@ -1,3 +1,4 @@
 <daff-form-field>
-  <input disabled daff-input type="text" placeholder="Email" name="email" />
+  <input daff-input type="text" name="email" id="disabled-input" disabled/>
+  <label for="disabled-input">Label</label>
 </daff-form-field>
diff --git a/libs/design/input/examples/src/input-disabled/input-disabled.component.ts b/libs/design/input/examples/src/input-disabled/input-disabled.component.ts
@@ -17,5 +17,5 @@ import {
   imports: [DaffFormFieldModule, DaffInputModule],
 })
 export class InputDisabledComponent {
-
+  isDisabled = true;
 }
diff --git a/libs/design/input/examples/src/input-error/input-error.component.html b/libs/design/input/examples/src/input-error/input-error.component.html
@@ -1,4 +1,6 @@
 <daff-form-field>
-  <input daff-input type="text" placeholder="Email" name="email" [formControl]="control" />
+  <input daff-input type="text" placeholder="Email" name="email" [formControl]="control" id="error-input"/>
+  <label for="error-input">Label</label>
+  <div class="error">Error message goes here.</div>
 </daff-form-field>
 <p>Value: {{ control.value }} </p>
diff --git a/libs/design/input/examples/src/input-with-form-field/input-with-form-field.component.html b/libs/design/input/examples/src/input-with-form-field/input-with-form-field.component.html
@@ -1,3 +1,5 @@
 <daff-form-field>
-  <input daff-input type="text" placeholder="Email" name="email" />
-</daff-form-field>
+  <!-- <input daff-input type="text" placeholder="Email" name="email" [formControl]="control" id="input" /> -->
+  <input daff-input type="text" name="email" [formControl]="control" id="input"/>
+  <label for="input">Label</label>
+</daff-form-field>
diff --git a/libs/design/input/examples/src/input-with-form-field/input-with-form-field.component.ts b/libs/design/input/examples/src/input-with-form-field/input-with-form-field.component.ts
@@ -2,6 +2,10 @@ import {
   ChangeDetectionStrategy,
   Component,
 } from '@angular/core';
+import {
+  ReactiveFormsModule,
+  UntypedFormControl,
+} from '@angular/forms';
 
 import {
   DaffFormFieldModule,
@@ -14,8 +18,8 @@ import {
   templateUrl: './input-with-form-field.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffFormFieldModule, DaffInputModule],
+  imports: [DaffFormFieldModule, DaffInputModule, ReactiveFormsModule],
 })
 export class InputWithFormFieldComponent {
-
+  control: UntypedFormControl = new UntypedFormControl();
 }
diff --git a/libs/design/src/atoms/form/form-field/form-field/form-field-theme.scss b/libs/design/src/atoms/form/form-field/form-field/form-field-theme.scss
@@ -11,28 +11,37 @@
 	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
 
 	.daff-form-field {
+    &:has(.error) .error {
+      color: theming.daff-color(theming.$daff-red, 60);
+    }
+
 		&__control {
 			background: $base;
-			border: 1px solid theming.daff-illuminate($base, $neutral, 3);
-			color: theming.daff-illuminate($base-contrast, $neutral, 4);
+			border: 1px solid theming.daff-illuminate($base, $neutral, 6);
+			color: theming.daff-illuminate($base, $neutral, 6);
 
-			&:focus {
-				border: 1px solid $base-contrast;
+			&.daff-focus {
+        border: 1px solid theming.daff-color($primary, 'default');
 			}
 
 			&.daff-error {
 				border: 1px solid theming.daff-color(theming.$daff-red, 60);
-
-				&:focus {
-					border: 1px solid theming.daff-color(theming.$daff-red, 60);
-				}
 			}
 
 			&.daff-valid {
 				> * {
 					color: $base-contrast;
 				}
 			}
+
+      &:has(input:disabled) {
+        border: 1px solid theming.daff-illuminate($base, $neutral, 4);
+        color: theming.daff-illuminate($base, $neutral, 4);
+      }
+
+      input:disabled {
+        background-color: transparent;
+      }
 		}
 	}
 }
diff --git a/libs/design/src/atoms/form/form-field/form-field/form-field.component.html b/libs/design/src/atoms/form/form-field/form-field/form-field.component.html
@@ -1,7 +1,17 @@
-<div class="daff-form-field__control" [class.daff-error]="isError" [class.daff-valid]="isValid" [class.daff-focus]="isFocused">
-  <ng-content></ng-content>
-  <div class="daff-form-field__icon" *ngIf="_control.controlType === 'native-select'">
-    <fa-icon [icon]="faChevronDown"></fa-icon>
-  </div>
+<div
+	class="daff-form-field__control"
+	[class.daff-focus]="isFocused"
+	[class.daff-error]="isError"
+	[class.daff-valid]="isValid"
+	[class.daff-filled]="isFilled"
+	[class.daff-disabled]="isDisabled"
+>
+	<ng-content></ng-content>
+	<div
+		class="daff-form-field__icon"
+		*ngIf="_control.controlType === 'native-select'"
+	>
+		<fa-icon [icon]="faChevronDown"></fa-icon>
+	</div>
 </div>
 <ng-content select="daff-error-message"></ng-content>
diff --git a/libs/design/src/atoms/form/form-field/form-field/form-field.component.scss b/libs/design/src/atoms/form/form-field/form-field/form-field.component.scss
@@ -2,20 +2,60 @@
 	display: block;
 	position: relative;
 
+  &:has(.error) {
+    padding-bottom: 32px;
+  }
+
 	&__control {
-		border-radius: 3px;
+		border-radius: 4px;
 		display: inline-block;
-		font-size: 1rem;
+		font-size: 16px;
 		height: inherit;
-		line-height: 1.5rem;
-		padding: 10px 15px;
+		line-height: 16px;
+		padding: 8px 16px;
+    max-width: 320px;
 		width: 100%;
+    position: relative;
+
+    label {
+      position: absolute;
+      left: 16px;
+      top: 50%;
+      transform: translateY(-50%);
+      transition: all 0.2s ease;
+      pointer-events: none;
+    }
+
+    input {
+      padding-top: 16px;
+
+      &:placeholder-shown ~ label,
+      &:focus ~ label {
+        top: 6px;
+        font-size: 12px;
+        transform: none;
+      }
+    }
+
+    &.daff-filled label {
+      top: 6px;
+      font-size: 12px;
+      transform: none;
+    }
 	}
 
 	&__icon {
 		display: inline-block;
 		pointer-events: none;
 		position: absolute;
-		right: 15px;
+		right: 16px;
 	}
+
+  .error {
+    position: absolute;
+    top: 100%;
+    left: 16px;
+    padding-top: 8px;
+    font-size: 12px;
+  }
 }
diff --git a/libs/design/src/atoms/form/form-field/form-field/form-field.component.ts b/libs/design/src/atoms/form/form-field/form-field/form-field.component.ts
@@ -52,12 +52,24 @@ export class DaffFormFieldComponent implements DoCheck, AfterContentInit, AfterC
    */
   isError = false;
 
+  /**
+   * Tracking property to keep a record of whether or not the
+   * form field contains any user input.
+   */
+  isFilled = false;
+
   /**
    * Tracking property to keep a record of whether or not the
    * form field should be marked as valid.
    */
   isValid = false;
 
+  /**
+   * Tracking property to keep a record of whether or not the
+   * form field should be marked as disabled.
+   */
+  // isDisabled = false;
+
   /**
    * @docs
    *
@@ -79,6 +91,8 @@ export class DaffFormFieldComponent implements DoCheck, AfterContentInit, AfterC
     if(this._control?.ngControl) {
       this.isError = this._control.ngControl.errors && (this._control.ngControl.touched);
       this.isValid = !this._control.ngControl.errors && this._control.ngControl.touched;
+      this.isFilled = !!this._control.ngControl.value;
+      // this.isDisabled = this._control.ngControl.disabled;
     }
   }