feat(input-address): add new comp level styling hooks (#5065)

Author: Amarnath510

ui/components/form-layout/RELEASENOTES.md

@@ -4,4 +4,21 @@
 
 <!-- ## [Unreleased] -->
 
-<!-- ## [VERSION] -->
+## 2.19
+
+### Added
+
+- Spacing Styling Hooks for Compound `Form`
+  - `--slds-c-form-compound-spacing-block-start` to customize `margin top`
+  - `--slds-c-form-compound-spacing-block-end` to customize `margin bottom`
+  - `--slds-c-form-compound-spacing-block` to customize `margin top & bottom`
+  - `--slds-c-form-compound-spacing-inline-start` to customize `margin left`
+  - `--slds-c-form-compound-spacing-inline-end` to customize `margin right`
+  - `--slds-c-form-compound-spacing-inline` to customize `margin left & right`
+- Spacing Styling Hooks for `Form Element` Row
+  - `--slds-c-form-row-spacing-block-start` to customize `margin top`
+  - `--slds-c-form-row-spacing-block-end` to customize `margin bottom`
+  - `--slds-c-form-row-spacing-block` to customize `margin top & bottom`
+  - `--slds-c-form-row-spacing-inline-start` to customize `margin left`
+  - `--slds-c-form-row-spacing-inline-end` to customize `margin right`
+  - `--slds-c-form-row-spacing-inline` to customize `margin left & right`

ui/components/form-layout/compound/_index.scss

@@ -15,9 +15,35 @@
 .slds-form--compound {
   width: 100%;
 
+  > .slds-form-element {
+    margin-top:
+      var(--slds-c-form-compound-spacing-block-start,
+      var(--slds-c-form-compound-spacing-block, 0));
+    margin-bottom:
+      var(--slds-c-form-compound-spacing-block-end,
+      var(--slds-c-form-compound-spacing-block, 0));
+    margin-left:
+      var(--slds-c-form-compound-spacing-inline-start,
+      var(--slds-c-form-compound-spacing-inline, 0));
+    margin-right:
+      var(--slds-c-form-compound-spacing-inline-end,
+      var(--slds-c-form-compound-spacing-inline, 0));
+  }
+
   .slds-form-element__row {
     display: flex;
-    margin-bottom: $spacing-xx-small;
+    margin-top:
+      var(--slds-c-form-row-spacing-block-start,
+      var(--slds-c-form-row-spacing-block, 0));
+    margin-bottom:
+      var(--slds-c-form-row-spacing-block-end,
+      var(--slds-c-form-row-spacing-block, #{$spacing-xx-small}));
+    margin-left:
+      var(--slds-c-form-row-spacing-inline-start,
+      var(--slds-c-form-row-spacing-inline, 0));
+    margin-right:
+      var(--slds-c-form-row-spacing-inline-end,
+      var(--slds-c-form-row-spacing-inline, 0));
 
     + .slds-form-element__row {
       clear: both;