add full padding properties

Author: chiefcll

docs/flow/layout.md

@@ -101,10 +101,14 @@ Produces:
 
 To control the layout further, you can use the following properties on individual items:
 
-- **`padding`**: number (Specifies padding on the element itself on main axis. Only in current flex engine.)
-
-- **`padding`**: number | [number, number, number, number] (Specifies padding on the element itself. Using an array aligns with the CSS `[Top, Right, Bottom, Left]` specification.) Only in new flex engine.
-- **`margin`**: [number, number, number, number] (Specifies margins on the element using the `[Top, Right, Bottom, Left]` CSS array syntax.) Only in new flex engine.
+- **`padding`**: number (Specifies padding on the element itself on main axis. Only in legacy flex engine.)
+
+- **`padding`**: number | [number, number, number, number] (Specifies padding on the element itself. Using an array aligns with the CSS `[Top, Right, Bottom, Left]` specification. Available in the new flex engine.)
+- **`paddingTop`**: number (Overrides the top value of the padding array. Available in the new flex engine.)
+- **`paddingRight`**: number (Overrides the right value of the padding array. Available in the new flex engine.)
+- **`paddingBottom`**: number (Overrides the bottom value of the padding array. Available in the new flex engine.)
+- **`paddingLeft`**: number (Overrides the left value of the padding array. Available in the new flex engine.)
+- **`margin`**: [number, number, number, number] (Specifies margins on the element using the `[Top, Right, Bottom, Left]` CSS array syntax. Available in the new flex engine.)
 - **`marginBottom`**: number
 - **`marginLeft`**: number
 - **`marginRight`**: number

src/core/elementNode.ts

@@ -642,6 +642,18 @@ export interface ElementNode extends RendererNode, FocusNode {
    * @see https://lightning-tv.github.io/solid/#/flow/layout
    */
   onLayout?: (this: ElementNode, target: ElementNode) => void;
+
+  /**
+   * The individual padding on each side of an element, acting as an override to the `padding` array property.
+   * `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`.
+   * Only in the new flex engine.
+   *
+   * @see https://lightning-tv.github.io/solid/#/flow/layout?id=flex
+   */
+  paddingTop?: number;
+  paddingRight?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
 }
 
 export class ElementNode extends Object {

src/core/flexLayout.ts

@@ -21,18 +21,19 @@ export default function (node: ElementNode): boolean {
 
   // padding order: Top, Right, Bottom, Left
   const nodePadding = node.padding;
-  const paddingStart = isRow
-    ? getArrayValue(nodePadding, 3)
-    : getArrayValue(nodePadding, 0);
-  const paddingEnd = isRow
-    ? getArrayValue(nodePadding, 1)
-    : getArrayValue(nodePadding, 2);
-  const paddingCrossStart = isRow
-    ? getArrayValue(nodePadding, 0)
-    : getArrayValue(nodePadding, 3);
-  const paddingCrossEnd = isRow
-    ? getArrayValue(nodePadding, 2)
-    : getArrayValue(nodePadding, 1);
+  const paddingTop = (node.paddingTop ??
+    getArrayValue(nodePadding, 0)) as number;
+  const paddingRight = (node.paddingRight ??
+    getArrayValue(nodePadding, 1)) as number;
+  const paddingBottom = (node.paddingBottom ??
+    getArrayValue(nodePadding, 2)) as number;
+  const paddingLeft = (node.paddingLeft ??
+    getArrayValue(nodePadding, 3)) as number;
+
+  const paddingStart = isRow ? paddingLeft : paddingTop;
+  const paddingEnd = isRow ? paddingRight : paddingBottom;
+  const paddingCrossStart = isRow ? paddingTop : paddingLeft;
+  const paddingCrossEnd = isRow ? paddingBottom : paddingRight;
   const nodePaddingTotal = paddingStart + paddingEnd;
 
   const minDimension = isRow ? 'minWidth' : 'minHeight';