minor type fixes

userlike · Aug 25, 2024 · c8c767e · c8c767e
1 parent cd10a9b
commit c8c767e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/packages/chakra-ui/src/Scrollable.tsx b/packages/chakra-ui/src/Scrollable.tsx
@@ -2,10 +2,10 @@ import { useTheme } from "@chakra-ui/react";
 import { chakra, forwardRef } from "@chakra-ui/system";
 import {
   __DEV__,
-  AlignItems,
   FlexDirection,
   isHorizontal,
   isVertical,
+  JustifyContent,
   MoblinTheme,
   unsafeCoerce,
 } from "@moblin/core";
@@ -14,7 +14,7 @@ import { ContainerProps } from "./props";
 
 export interface ScrollableOptions {
   direction?: FlexDirection;
-  justifyContent?: AlignItems;
+  justifyContent?: JustifyContent;
   overflowAnchor?: "auto" | "none";
 }
 
@@ -75,10 +75,10 @@ const marginEndProp = (direction: FlexDirection) => {
   return isHorizontal(direction) ? "marginInlineEnd" : "marginBlockEnd";
 };
 
-const marginStart = (justifyContent: AlignItems) =>
+const marginStart = (justifyContent: JustifyContent) =>
   justifyContent === "stretch" || justifyContent === "flex-start"
     ? "0"
     : "auto";
 
-const marginEnd = (justifyContent:  AlignItems) =>
+const marginEnd = (justifyContent: JustifyContent) =>
   justifyContent === "stretch" || justifyContent === "flex-end" ? "0" : "auto";
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -7,13 +7,13 @@ export type ContentDistribution =
 
 export type ContentPosition = "center" | "flex-end" | "flex-start";
 
-export type AlignContent = ContentDistribution | ContentPosition;
+export type AlignContent = "stretch" | ContentDistribution | ContentPosition;
 
 export type AlignItems = "stretch" | ContentPosition;
 
 export type AlignSelf = "stretch" | ContentPosition;
 
-export type JustifyContent = ContentDistribution | ContentPosition;
+export type JustifyContent = "stretch" | ContentDistribution | ContentPosition;
 
 export const contentPositions: ContentPosition[] = [
   "flex-start",

diff --git a/packages/web/src/Flex.ts b/packages/web/src/Flex.ts
@@ -26,7 +26,8 @@ export class Flex extends LitElement {
      * Direction
      * ===================================
      */
-    :host(:not([direction])), :host([direction="row"]) {
+    :host(:not([direction])),
+    :host([direction="row"]) {
       flex-direction: row;
       --moblin-direction: column;
     }
@@ -83,6 +84,9 @@ export class Flex extends LitElement {
     :host([align-content="space-evenly"]) {
       align-content: space-evenly;
     }
+    :host([align-content="stretch"]) {
+      align-content: stretch;
+    }
     /* =================================== */
 
     /**
@@ -107,6 +111,9 @@ export class Flex extends LitElement {
     :host([justify-content="space-evenly"]) {
       justify-content: space-evenly;
     }
+    :host([justify-content="stretch"]) {
+      justify-content: stretch;
+    }
     /* =================================== */
 
     /**
@@ -140,14 +147,17 @@ export class Flex extends LitElement {
     /**
      * x-flex-item and child min width/height normalization
      */
-    :host(:not([direction])), :host([direction="row"]), :host([direction="row-reverse"]) {
+    :host(:not([direction])),
+    :host([direction="row"]),
+    :host([direction="row-reverse"]) {
       --moblin-item-min-width: 0;
       --moblin-item-min-height: auto;
       --moblin-child-min-width: auto;
       --moblin-child-min-height: 0;
     }
 
-    :host([direction="column"]), :host([direction="column-reverse"]) {
+    :host([direction="column"]),
+    :host([direction="column-reverse"]) {
       --moblin-item-min-width: auto;
       --moblin-item-min-height: 0;
       --moblin-child-min-width: 0;