feat(formfield): add example of customizing spacing with theming toke…

…ns (#1329)

projects/ng-aquila/documentation/examples/formfield/formfield-examples.module.ts

@@ -33,8 +33,10 @@ import { FormfieldPasswordVisibilityExampleComponent } from './formfield-passwor
 import { FormfieldPlaceholderExampleComponent } from './formfield-placeholder/formfield-placeholder-example';
 import { FormfieldPrefixSuffixAppendixExampleComponent } from './formfield-prefix-suffix-appendix/formfield-prefix-suffix-appendix-example';
 import { FormfieldSimpleFormExampleComponent } from './formfield-simple-form/formfield-simple-form-example';
+import { FormfieldSpacingAdjusterExampleComponent } from './formfield-spacing-adjuster/formfield-spacing-adjuster-example';
 
 const EXAMPLES = [
+    FormfieldSpacingAdjusterExampleComponent,
     FormfieldAppearanceExampleComponent,
     FormfieldBasicExampleComponent,
     FormfieldCharacterCountExampleComponent,
@@ -77,6 +79,8 @@ const EXAMPLES = [
 export class FormfieldExamplesModule {
     static components() {
         return {
+            'formfield-spacing-adjuster':
+                FormfieldSpacingAdjusterExampleComponent,
             'formfield-appearance': FormfieldAppearanceExampleComponent,
             'formfield-basic': FormfieldBasicExampleComponent,
             'formfield-character-count':

projects/ng-aquila/documentation/examples/formfield/formfield-spacing-adjuster/formfield-spacing-adjuster-example.css

@@ -0,0 +1,5 @@
+.remove-formfield-spacing {
+    --formfield-bottom-padding: 0;
+    --formfield-outline-bottom-padding: 0;
+    --formfield-mobile-bottom-padding: 0;
+}

projects/ng-aquila/documentation/examples/formfield/formfield-spacing-adjuster/formfield-spacing-adjuster-example.html

@@ -0,0 +1,8 @@
+<form class="remove-formfield-spacing">
+    <nx-formfield label="Label">
+        <input nxInput />
+    </nx-formfield>
+    <nx-formfield label="Label">
+        <input nxInput />
+    </nx-formfield>
+</form>

projects/ng-aquila/documentation/examples/formfield/formfield-spacing-adjuster/formfield-spacing-adjuster-example.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NxFormfieldComponent } from '@aposin/ng-aquila/formfield';
+import { NxInputDirective } from '@aposin/ng-aquila/input';
+
+/**
+ * @title Adjusting Form Field Spacing with CSS Variables Example
+ */
+@Component({
+    selector: 'formfield-spacing-adjuster-example',
+    standalone: true,
+    imports: [NxFormfieldComponent, NxInputDirective],
+    templateUrl: './formfield-spacing-adjuster-example.html',
+    styleUrl: './formfield-spacing-adjuster-example.css',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormfieldSpacingAdjusterExampleComponent {}

projects/ng-aquila/src/formfield/formfield.md

@@ -188,3 +188,19 @@ The implementation is similar to Angular Material and can be checked for referen
 
 ### Showing optional label
 <!-- example(formfield-optional-label) -->
+
+### Customizing Form Field Spacing with CSS Variables 
+
+To customize the spacing of form fields, you can adjust the existing CSS variables. This allows for flexibility when applying styles, whether you need to remove or modify the spacing across specific forms, individual form fields, or the entire application.
+
+We provide default spacing for form fields, but in cases where you need to adjust it, you can use the following CSS variables:
+
+```scss
+--formfield-bottom-padding: 0;
+--formfield-outline-bottom-padding: 0;
+--formfield-mobile-bottom-padding: 0;
+```
+
+Here’s an example of how to remove bottom spacing for a whole form:
+
+<!-- example(formfield-spacing-adjuster) -->