AUI: Add a few style properties (#234)

Author: bheston

change/@adaptive-web-adaptive-ui-5b8255fa-df58-4aa9-bec0-d74bd12ba263.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "AUI: Add a few style properties",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/adaptive-ui/docs/api-report.md

@@ -625,13 +625,21 @@ export const StyleProperty: {
     readonly paddingLeft: "paddingLeft";
     readonly gap: "gap";
     readonly height: "height";
+    readonly minHeight: "minHeight";
+    readonly maxHeight: "maxHeight";
     readonly width: "width";
+    readonly minWidth: "minWidth";
+    readonly maxWidth: "maxWidth";
+    readonly layoutInner: "layoutInner";
     readonly layoutDirection: "layoutDirection";
+    readonly layoutMainAxisAlignItems: "layoutMainAxisAlignItems";
+    readonly layoutCrossAxisAlignItems: "layoutCrossAxisAlignItems";
     readonly opacity: "opacity";
     readonly cursor: "cursor";
     readonly outlineColor: "outlineColor";
     readonly outlineOffset: "outlineOffset";
     readonly outlineStyle: "outlineStyle";
+    readonly outlineThickness: "outlineThickness";
     readonly outlineWidth: "outlineWidth";
     readonly shadow: "shadow";
 };

packages/adaptive-ui/src/core/modules/css.ts

@@ -79,10 +79,24 @@ export const stylePropertyToCssProperty = (usage: StyleProperty): string => {
             return "gap";
         case StyleProperty.height:
             return "height";
+        case StyleProperty.minHeight:
+            return "min-height";
+        case StyleProperty.maxHeight:
+            return "max-height";
         case StyleProperty.width:
             return "width";
+        case StyleProperty.minWidth:
+            return "min-width";
+        case StyleProperty.maxWidth:
+            return "max-width";
+        case StyleProperty.layoutInner:
+            return "display";
         case StyleProperty.layoutDirection:
             return "flex-direction";
+        case StyleProperty.layoutMainAxisAlignItems:
+            return "justify-content";
+        case StyleProperty.layoutCrossAxisAlignItems:
+            return "align-items";
         case StyleProperty.opacity:
             return "opacity";
         case StyleProperty.cursor:
@@ -93,6 +107,8 @@ export const stylePropertyToCssProperty = (usage: StyleProperty): string => {
             return "outline-offset";
         case StyleProperty.outlineStyle:
             return "outline-style";
+        case StyleProperty.outlineThickness:
+            return "outline-width";
         case StyleProperty.outlineWidth:
             return "outline-width";
         case StyleProperty.shadow:

packages/adaptive-ui/src/core/modules/types.ts

@@ -336,13 +336,23 @@ export const StyleProperty = {
     paddingLeft: "paddingLeft",
     gap: "gap",
     height: "height",
+    minHeight: "minHeight",
+    maxHeight: "maxHeight",
     width: "width",
+    minWidth: "minWidth",
+    maxWidth: "maxWidth",
+    // layoutOuter: "layoutOuter", // TODO Add support for inline or block definition
+    layoutInner: "layoutInner",
     layoutDirection: "layoutDirection",
+    layoutMainAxisAlignItems: "layoutMainAxisAlignItems",
+    layoutCrossAxisAlignItems: "layoutCrossAxisAlignItems",
     opacity: "opacity",
     cursor: "cursor",
     outlineColor: "outlineColor",
     outlineOffset: "outlineOffset",
     outlineStyle: "outlineStyle",
+    outlineThickness: "outlineThickness",
+    /** @deprecated Use outlineThickness */
     outlineWidth: "outlineWidth",
     shadow: "shadow",
 } as const;

packages/adaptive-ui/src/reference/modules.ts

@@ -1690,7 +1690,7 @@ export const focusIndicatorStyles: Styles = Styles.fromProperties(
         outlineColor: focusStroke,
         outlineOffset: "1px",
         outlineStyle: "solid",
-        outlineWidth: focusStrokeThickness,
+        outlineThickness: focusStrokeThickness,
     },
     "styles.focus-indicator",
 );