support proper layout grow as expanded - flex: n for every elements

Author: softmarshmallow

externals/design-sdk

@@ -37,7 +37,7 @@ export function flexsizing({
         case Axis.horizontal:
         case Axis.vertical:
           return {
-            flex: "none",
+            flex: flex > 0 ? flex : "none", // 1+
             width: width && length(width),
             height: height && length(height),
           };

externals/reflect-core

@@ -0,0 +1,5 @@
+import type { ReflectSceneNode } from "@design-sdk/figma-node";
+
+export function hasFlexible(node: ReflectSceneNode) {
+  return node.layoutGrow >= 1;
+}

packages/builder-css-styles/tricks/trick-flex-sizing/index.ts

@@ -1,3 +1,4 @@
+export * from "./do-have-flex";
 export * from "./do-contains-masking";
 export * from "./do-have-dimmed-opacity";
 export * from "./do-have-stretching";

packages/designto-token/detection/do-have-flex.ts

@@ -1,5 +1,5 @@
 import { nodes } from "@design-sdk/core";
-import { Widget } from "@reflect-ui/core";
+import { Expanded, Widget } from "@reflect-ui/core";
 import type { Blurred, Opacity, Rotation } from "@reflect-ui/core";
 import type { Stretched } from "./tokens";
 import { tokenizeText } from "./token-text";
@@ -21,13 +21,15 @@ import {
   hasLayerBlurType,
   hasRotation,
   hasStretching,
+  hasFlexible,
 } from "./detection";
 import { MaskingItemContainingNode, tokenizeMasking } from "./token-masking";
 import { wrap_with_opacity } from "./token-opacity";
 import { wrap_with_stretched } from "./token-stretch";
 import { wrap_with_layer_blur } from "./token-effect/layer-blur";
 import { wrap_with_background_blur } from "./token-effect/background-blur";
 import { wrap_with_rotation } from "./token-rotation";
+import { wrap_with_expanded } from "./token-expanded";
 import flags_handling_gate from "./support-flags";
 
 export type { Widget };
@@ -239,12 +241,15 @@ function handleNode(
 export function post_wrap(
   node: nodes.ReflectSceneNode,
   tokenizedTarget: Widget
-): Widget | Stretched | Opacity | Blurred | Rotation {
+): Widget | Stretched | Opacity | Blurred | Rotation | Expanded {
   let wrapped = tokenizedTarget;
-  if (wrapped) {
-    if (hasStretching(node)) {
-      wrapped = wrap_with_stretched(node, wrapped);
-    }
+
+  if (hasStretching(node)) {
+    wrapped = wrap_with_stretched(node, wrapped);
+  }
+
+  if (hasFlexible(node)) {
+    wrapped = wrap_with_expanded(node, wrapped);
   }
 
   if (hasDimmedOpacity(node)) {

packages/designto-token/detection/index.ts

@@ -0,0 +1,23 @@
+import { nodes } from "@design-sdk/core";
+import { Expanded, WidgetKey } from "@reflect-ui/core";
+import type { Widget } from "@reflect-ui/core";
+import assert from "assert";
+
+export function wrap_with_expanded(
+  node: nodes.ReflectSceneNode,
+  widget: Widget
+): Expanded {
+  assert(
+    node.layoutGrow >= 1,
+    "layoug grow must be >= 1 to be wrapped with Expanded"
+  );
+
+  return new Expanded({
+    key: new WidgetKey({
+      ...widget.key,
+      id: widget.key.id + "_opacity",
+    }),
+    child: widget,
+    flex: node.layoutGrow,
+  });
+}

packages/designto-token/main.ts

@@ -0,0 +1,13 @@
+import type { Composer } from ".";
+import { Expanded } from "@reflect-ui/core";
+
+export function compose_wrapped_with_expanded(
+  widget: Expanded,
+  child_composer: Composer
+) {
+  const child = child_composer(widget.child);
+  child.extendStyle({
+    flex: widget.flex,
+  });
+  return child;
+}

packages/designto-token/token-expanded/index.ts

@@ -14,6 +14,7 @@ import { compose_wrapped_with_positioned } from "./compose-wrapped-with-position
 import { compose_wrapped_with_clip_stretched } from "./compose-wrapped-with-stretched";
 import { compose_wrapped_with_sized_box } from "./compose-wrapped-with-sized-box";
 import { compose_wrapped_with_overflow_box } from "./compose-wrapped-with-overflow-box";
+import { compose_wrapped_with_expanded } from "./compose-wrapped-with-expanded";
 import { compose_unwrapped_text_input } from "./compose-unwrapped-text-field";
 import { compose_unwrapped_button } from "./compose-unwrapped-button";
 import { compose_unwrapped_slider } from "./compose-unwrapped-slider";
@@ -144,6 +145,8 @@ function compose<T extends JsxWidget>(
     thisWebWidget = compose_wrapped_with_blurred(widget, handleChild);
   } else if (widget instanceof core.Rotation) {
     thisWebWidget = compose_wrapped_with_rotation(widget, handleChild);
+  } else if (widget instanceof core.Expanded) {
+    thisWebWidget = compose_wrapped_with_expanded(widget, handleChild);
   }
   // ----- region clip path ------
   else if (widget instanceof core.ClipRRect) {