fix: form label spacing

SAP · Dec 10, 2024 · e596519 · e596519
1 parent 3cb7cb2
commit e596519
Show file tree

Hide file tree

Showing 8 changed files with 212 additions and 304 deletions.
diff --git a/libs/core/form/form-label/form-label.component.scss b/libs/core/form/form-label/form-label.component.scss
@@ -87,3 +87,26 @@ $form-label-bottom-spacing: 0.125rem;
         }
     }
 }
+
+// remove after adopting fd-styles version 0.39
+.fd-container.fd-form-layout-grid-container.fd-form-group .fd-form-item .fd-form-label--colon,
+.fd-container.fd-form-layout-grid-container .fd-form-group .fd-form-item .fd-form-label--colon {
+    padding-inline-end: 0.25rem;
+}
+.fd-container.fd-form-layout-grid-container.fd-form-group .fd-form-item .fd-form-label--required,
+.fd-container.fd-form-layout-grid-container .fd-form-group .fd-form-item .fd-form-label--required {
+    padding-inline-end: 0.5rem;
+}
+.fd-container.fd-form-layout-grid-container.fd-form-group .fd-form-item .fd-form-label--required.fd-form-label--colon,
+.fd-container.fd-form-layout-grid-container .fd-form-group .fd-form-item .fd-form-label--required.fd-form-label--colon {
+    padding-inline-end: 0.75rem;
+}
+.fd-form-item .fd-form-label--colon {
+    padding-inline-end: 0.25rem;
+}
+.fd-form-item .fd-form-label--required {
+    padding-inline-end: 0.5rem;
+}
+.fd-form-item .fd-form-label--required.fd-form-label--colon {
+    padding-inline-end: 0.75rem;
+}
diff --git a/libs/docs/platform/input/e2e/input-page-contents.ts b/libs/docs/platform/input/e2e/input-page-contents.ts
diff --git a/libs/docs/platform/input/e2e/input.e2e-spec.ts b/libs/docs/platform/input/e2e/input.e2e-spec.ts
diff --git a/libs/docs/platform/input/e2e/input.po.ts b/libs/docs/platform/input/e2e/input.po.ts
diff --git a/libs/docs/platform/input/e2e/input.ts b/libs/docs/platform/input/e2e/input.ts
diff --git a/libs/docs/platform/input/e2e/tsconfig.json b/libs/docs/platform/input/e2e/tsconfig.json
diff --git a/libs/docs/platform/input/examples/platform-input-example.component.html b/libs/docs/platform/input/examples/platform-input-example.component.html
@@ -1,12 +1,34 @@
 <form #myForm="ngForm">
     <fdp-form-group [formGroup]="formTypesGroupRegister">
-        <fdp-form-field #ffl1 label="Default Input Field" id="input1" [rank]="1" placeholder="Field placeholder text">
+        <fdp-form-field
+            #ffl1
+            label="Colon Label Field"
+            id="input1"
+            [rank]="1"
+            [colon]="true"
+            placeholder="Field placeholder text"
+        >
             <fdp-input name="input1" type="text"> </fdp-input>
         </fdp-form-field>
-        <fdp-form-field #ffl1 label="Text Input Field" id="input2" [rank]="1" placeholder="Field placeholder text">
+        <fdp-form-field
+            #ffl1
+            label="Required Field"
+            id="input2"
+            [rank]="1"
+            [colon]="true"
+            [required]="true"
+            placeholder="Field placeholder text"
+        >
             <fdp-input name="input2" type="text"> </fdp-input>
         </fdp-form-field>
-        <fdp-form-field #ffl1 label="Number Input Field" id="input3" [rank]="1" placeholder="Field placeholder text">
+        <fdp-form-field
+            #ffl1
+            label="Required Field"
+            id="input3"
+            [rank]="1"
+            [required]="true"
+            placeholder="Field placeholder text"
+        >
             <fdp-input name="input3" type="number"></fdp-input>
         </fdp-form-field>
         <fdp-form-field #ffl1 label="Compact Input Field" id="input4" [rank]="1" placeholder="Field placeholder text">