temp

graycoreio · Jan 3, 2025 · 0fbac25 · 0fbac25
1 parent 90ae11f
commit 0fbac25
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 52 deletions.
diff --git a/apps/design-land/src/app/input/input.component.html b/apps/design-land/src/app/input/input.component.html
@@ -1,34 +1,23 @@
 <h1>Input</h1>
-<p>Input is a form control element that can be used in forms.</p>
+<p>The input component allows the native HTML <code>&lt;input&gt;</code> element to work with the Form Field component.</p>
 
-<h2>Examples</h2>
-
-<h3>Basic</h3>
-<p>A basic input without using the <code>DaffFormFieldComponent</code>.</p>
-
-<design-land-example-viewer-container example="basic-input"></design-land-example-viewer-container>
-
-<h3>With <code>DaffFormFieldComponent</code></h3>
-<p>An input using <code>DaffFormField</code></p>
+<h2>Overview</h2>
+<p>The input component has the same functionality as a native HTML <code>&lt;input&gt;</code> element, with additional custom styling and functionality. It can't be used by itself and must be contained within a <code>&lt;daff-form-field&gtrarr;</code>.</p>
 
+<h2>Basic input with form field</h2>
 <design-land-example-viewer-container example="input-with-form-field"></design-land-example-viewer-container>
 
-<h3>Disabled</h3>
+<h2>Disabled input</h2>
 <p>The input in this example is disabled using the native HTML disabled attribute.</p>
 
 <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>
+<h2>Input with error messages</h2>
 <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>
 
-<h3>Password With Reactive Forms</h3>
-<p>This is a special case where hints and errors for passwords are displayed.</p>
+<h3>Input with hint</h3>
+<p>The input in this example has a hint.</p>
 
-<design-land-example-viewer-container example="password-with-form-field"></design-land-example-viewer-container>
+<design-land-example-viewer-container example="input-hint"></design-land-example-viewer-container>
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,6 +1,6 @@
 <daff-form-field>
   <fa-icon [icon]="faUser" daffPrefix></fa-icon>
   <label daffFormLabel for="example-input">First Name</label>
-  <input daff-input type="text" name="first-name" id="example-input" />
+  <input daff-input type="text" name="first-name" placeholder="First Name" id="example-input" />
   <fa-icon [icon]="faCircleXmark" daffSuffix></fa-icon>
 </daff-form-field>
diff --git a/libs/design/src/atoms/form/form-field/form-field-control.ts b/libs/design/src/atoms/form/form-field/form-field-control.ts
@@ -34,8 +34,8 @@ export abstract class DaffFormFieldControl<T> {
       focused: this.focused,
       filled: !!this.value,
       disabled: this.ngControl?.disabled,
-      error: this.ngControl?.errors && this.ngControl?.touched,
-      valid: !this.ngControl?.errors && this.ngControl?.touched,
+      error: this.ngControl?.errors && (this.ngControl?.dirty || this.ngControl?.touched),
+      valid: !this.ngControl?.errors && (this.ngControl?.dirty || this.ngControl?.touched),
     };
   }
 

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
@@ -17,18 +17,24 @@
 			border: 1px solid theming.daff-illuminate($base, $neutral, 6);
 			color: theming.daff-illuminate($base, $neutral, 6);
 
-			&.daff-focus {
+			&.daff-focused {
         border: 1px solid theming.daff-color($primary);
+
+				.daff-form-label {
+					color: theming.daff-color($primary);
+				}
 			}
 
 			&.daff-error {
 				border: 1px solid theming.daff-color($critical);
+
+				.daff-form-label {
+					color: theming.daff-color($critical);
+				}
 			}
 
 			&.daff-valid {
-				> * {
-					color: $base-contrast;
-				}
+				color: $base-contrast;
 			}
 
       &.daff-disabled {

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,6 +1,6 @@
 <div
 	class="daff-form-field__control"
-	[class.daff-focus]="isFocused"
+	[class.daff-focused]="isFocused"
 	[class.daff-error]="isError"
 	[class.daff-valid]="isValid"
 	[class.daff-filled]="isFilled"

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
@@ -15,37 +15,44 @@
     position: relative;
     width: 100%;
 
+    * {
+      ::-webkit-input-placeholder {
+        opacity: 0;
+      }
+    }
+
     .daff-form-label {
       position: absolute;
       left: 1rem;
-      top: 20px;
+      top: 1.25rem;
       pointer-events: none;
-      transition: all 0.2s ease;
+      transition: all 200ms ease;
     }
 
-    &.daff-focus,
+    &.daff-focused,
     &.daff-filled {
       .daff-form-label {
         font-size: 0.75rem;
-        top: 6px;
+        top: 0.25rem;
+      }
+
+      * {
+        ::-webkit-input-placeholder {
+          opacity: 1;
+        }
       }
     }
 	}
 
   &__form-wrapper {
     flex-grow: 1;
     padding: 1.5rem 1rem 0.5rem;
+    position: relative;
   }
 
   .daff-hint,
   .daff-error-message {
-    margin-top: 4px;
-  }
-
-  :has(.daff-prefix) {
-    .daff-form-label {
-      left: 48px;
-    }
+    margin-top: 0.25rem;
   }
 
 	.daff-prefix {

diff --git a/libs/design/src/atoms/form/input/README.md b/libs/design/src/atoms/form/input/README.md
@@ -1,24 +1,25 @@
 # Input
-Input is a form control element that can be used in forms.
+The input component allows the native HTML `<input>` element to work with the [Form Field](/libs/design/src/atoms/form/form-field/README.md) component.
 
-## Examples
-
-### Basic
-A basic input without using the `DaffFormFieldComponent`.
-
-<design-land-example-viewer-container example="basic-input"></design-land-example-viewer-container>
-
-### With `DaffFormFieldComponent`
-An input using `DaffFormField`
+## Overview
+The input component has the same functionality as a native HTML `<input>` element, with additional custom styling and functionality. It can't be used by itself and must be contained within a `<daff-form-field>`.
 
+## Basic input with form field
 <design-land-example-viewer-container example="input-with-form-field"></design-land-example-viewer-container>
 
-### Disabled
+## Examples
+
+### Disabled input
 The input in this example is disabled using the native HTML disabled attribute.
 
 <design-land-example-viewer-container example="input-disabled"></design-land-example-viewer-container>
 
-### With Reactive Forms
+### Input with error messages
 The input in this example uses the `ReactiveFormsModule` to display errors.
 
-<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>
+
+### Input with hint
+The input in this example has a hint.
+
+<design-land-example-viewer-container example="input-hint"></design-land-example-viewer-container>