add icon, hint, and dark mode styles

apps/design-land/src/app/input/input.component.html

@@ -18,7 +18,17 @@ <h3>Disabled</h3>
 
 <design-land-example-viewer-container example="input-disabled"></design-land-example-viewer-container>
 
+<h3>Input With Hint</h3>
+<p>The input in this example has a hint.</p>
+
+<design-land-example-viewer-container example="input-hint"></design-land-example-viewer-container>
+
 <h3>With Reactive Forms</h3>
 <p>The input in this example uses the <code>ReactiveFormsModule</code> to display errors.</p>
 
-<design-land-example-viewer-container example="input-error"></design-land-example-viewer-container>
+<design-land-example-viewer-container example="input-error"></design-land-example-viewer-container>
+
+<h3>Password With Reactive Forms</h3>
+<p>This is a special case where hints and errors for passwords are displayed.</p>
+
+<design-land-example-viewer-container example="password-with-form-field"></design-land-example-viewer-container>

libs/design/input/examples/src/examples.ts

@@ -1,11 +1,15 @@
 import { BasicInputComponent } from './basic-input/basic-input.component';
 import { InputDisabledComponent } from './input-disabled/input-disabled.component';
 import { InputErrorComponent } from './input-error/input-error.component';
+import { InputHintComponent } from './input-hint/input-hint.component';
 import { InputWithFormFieldComponent } from './input-with-form-field/input-with-form-field.component';
+import { PasswordWithFormFieldComponent } from './password-with-form-field/password-with-form-field.component';
 
 export const INPUT_EXAMPLES = [
   BasicInputComponent,
   InputWithFormFieldComponent,
   InputDisabledComponent,
   InputErrorComponent,
+  PasswordWithFormFieldComponent,
+  InputHintComponent,
 ];

libs/design/input/examples/src/input-error/input-error.component.html

@@ -7,5 +7,6 @@
   @if (control.errors?.email) {
     <daff-error-message>Email is not valid.</daff-error-message>
   }
+  <div class="hint">Hint goes here.</div>
 </daff-form-field>
 <p>Value: {{ control.value }} </p>

libs/design/input/examples/src/input-hint/input-hint.component.html

@@ -0,0 +1,5 @@
+<daff-form-field>
+  <input daff-input type="text" placeholder="Email" name="email" id="input-hint"/>
+  <label for="input-hint">Label</label>
+  <div class="hint">Hint goes here.</div>
+</daff-form-field>

libs/design/input/examples/src/input-hint/input-hint.component.ts

@@ -0,0 +1,23 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+
+import {
+  DaffFormFieldModule,
+  DaffInputModule,
+} from '@daffodil/design';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'input-hint',
+  templateUrl: './input-hint.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DaffFormFieldModule,
+    DaffInputModule,
+  ],
+})
+export class InputHintComponent {
+}

libs/design/input/examples/src/input-with-form-field/input-with-form-field.component.html

@@ -1,5 +1,6 @@
 <daff-form-field>
-  <!-- <input daff-input type="text" placeholder="Email" name="email" id="input" /> -->
-  <input daff-input type="text" name="email" id="input"/>
+  <fa-icon [icon]="faUser" class="prefix"></fa-icon>
+  <input daff-input type="text" name="email" id="input" />
   <label for="input">Label</label>
+  <fa-icon [icon]="faCircleXmark" class="suffix"></fa-icon>
 </daff-form-field>

libs/design/input/examples/src/input-with-form-field/input-with-form-field.component.ts

@@ -2,19 +2,27 @@ import {
   ChangeDetectionStrategy,
   Component,
 } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import {
+  faUser,
+  faCircleXmark,
+} from '@fortawesome/free-solid-svg-icons';
 
 import {
   DaffFormFieldModule,
   DaffInputModule,
 } from '@daffodil/design';
 
+
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'input-with-form-field',
   templateUrl: './input-with-form-field.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffFormFieldModule, DaffInputModule],
+  imports: [DaffFormFieldModule, DaffInputModule, FontAwesomeModule],
 })
 export class InputWithFormFieldComponent {
+  faUser = faUser;
+  faCircleXmark = faCircleXmark;
 }

libs/design/input/examples/src/password-with-form-field/password-with-form-field.component.html

@@ -0,0 +1,5 @@
+<daff-form-field>
+  <input daff-input type="password" placeholder="Password" name="password" id="password-input" />
+  <!-- <input daff-input type="text" name="email" id="input"/> -->
+  <label for="password-input">Label</label>
+</daff-form-field>

libs/design/input/examples/src/password-with-form-field/password-with-form-field.component.ts

@@ -0,0 +1,25 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+import {
+  ReactiveFormsModule,
+  UntypedFormControl,
+} from '@angular/forms';
+
+import {
+  DaffFormFieldModule,
+  DaffInputModule,
+} from '@daffodil/design';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'password-with-form-field',
+  templateUrl: './password-with-form-field.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [DaffFormFieldModule, DaffInputModule, ReactiveFormsModule],
+})
+export class PasswordWithFormFieldComponent {
+  control: UntypedFormControl = new UntypedFormControl();
+}

libs/design/src/atoms/form/error-message/error-message.component.scss

@@ -3,5 +3,6 @@
 :host {
 	display: block;
 	font-size: t.$small-font-size;
-	margin-top: 5px;
+	margin-top: 4px;
+  padding-left: 16px;
 }

libs/design/src/atoms/form/form-field/form-field/form-field-theme.scss

@@ -11,10 +11,6 @@
 	$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, 6);

libs/design/src/atoms/form/form-field/form-field/form-field.component.html

@@ -5,13 +5,19 @@
 	[class.daff-valid]="isValid"
 	[class.daff-filled]="isFilled"
 >
+  <span class="daff-form-field__icon daff-form-field__icon--prefix">
+    <ng-content select=".prefix"></ng-content>
+  </span>
 	<ng-content></ng-content>
 	<div
 		class="daff-form-field__icon"
 		*ngIf="_control.controlType === 'native-select'"
 	>
 		<fa-icon [icon]="faChevronDown"></fa-icon>
 	</div>
+  <span class="daff-form-field__icon daff-form-field__icon--suffix">
+    <ng-content select=".suffix"></ng-content>
+  </span>
 </div>
 @if (_control?.ngControl?.touched) {
   <ng-content select="daff-error-message"></ng-content>

libs/design/src/atoms/form/form-field/form-field/form-field.component.scss

@@ -2,13 +2,9 @@
 	display: block;
 	position: relative;
 
-  &:has(.error) {
-    padding-bottom: 32px;
-  }
-
 	&__control {
 		border-radius: 4px;
-		display: inline-block;
+		display: flex;
 		font-size: 16px;
 		height: inherit;
 		line-height: 16px;
@@ -48,14 +44,40 @@
 		display: inline-block;
 		pointer-events: none;
 		position: absolute;
-		right: 16px;
-	}
+    top: 50%;
+    transform: translateY(-50%);
+
+    &--prefix {
+      left: 16px;
+    }
+
+    &--suffix {
+      right: 16px;
+    }
+  }
+
+  :has(fa-icon.prefix) > label,
+  :has(fa-icon.prefix) > input {
+    padding-left: 28px;
+  }
 
-  .error {
+  .hint {
     position: absolute;
     top: 100%;
     left: 16px;
-    padding-top: 8px;
+    margin-top: 8px;
     font-size: 12px;
   }
+
+  &:has(.hint) {
+    margin-bottom: 24px;
+
+    daff-error-message {
+      margin-top: 24px;
+    }
+
+    &:has(daff-error-message) {
+      margin-bottom: 0px;
+    }
+  }
 }

libs/design/src/atoms/form/form-field/form-field/form-field.component.ts

@@ -103,7 +103,7 @@ export class DaffFormFieldComponent implements AfterContentInit, AfterContentChe
    */
   ngAfterContentChecked() {
     this._validateFormControl();
-    if(this._control?.ngControl) {
+    if (this._control?.ngControl) {
       this.isError = this._control.ngControl.errors && (this._control.ngControl.touched);
       this.isValid = !this._control.ngControl.errors && this._control.ngControl.touched;
     }

libs/design/src/atoms/form/input/input-theme.scss

@@ -5,12 +5,8 @@
 	$base: core.daff-map-deep-get($theme, 'core.base');
 	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
 
-	:host {
+	.daff-input {
 		background: $base;
 		color: $base-contrast;
-
-		&::placeholder {
-			color: transparent;
-		}
 	}
 }

libs/design/src/atoms/form/input/input.component.ts

@@ -6,6 +6,7 @@ import {
   ElementRef,
   HostListener,
   ChangeDetectionStrategy,
+  HostBinding,
 } from '@angular/core';
 import { NgControl } from '@angular/forms';
 
@@ -27,6 +28,8 @@ import { DaffFormFieldControl } from '../form-field/form-field-control';
 })
 export class DaffInputComponent implements DaffFormFieldControl<string> {
 
+  @HostBinding('class.daff-input') class = true;
+
   /**
    * Has the form been submitted.
    */