fix flex-grow property handling

Author: softmarshmallow

externals/design-sdk

@@ -30,7 +30,6 @@ export function flexsizing({
     case MainAxisSize.max: {
       return {
         "align-self": "stretch",
-        flex: 1, // This is a temporary solution, since stretch can be used on non-space-between parent, but still the item should stretch, we use flex 1 to do this.
       };
     }
     case MainAxisSize.min: {

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

@@ -95,6 +95,7 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
     this.mainAxisSize = p.mainAxisSize;
     this.crossAxisAlignment = p.crossAxisAlignment;
     this.verticalDirection = p.verticalDirection;
+    this.flexWrap = p.flexWrap; // cssonly
     //
 
     //
@@ -107,7 +108,6 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
 
     // css only
     this.overflow = p.overflow;
-    this.flexWrap = p.flexWrap;
   }
 
   jsxConfig(): StylableJSXElementConfig {
@@ -120,10 +120,10 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
   styleData(): CSSProperties {
     return {
       display: "flex",
+      overflow: this.overflow,
       ...css.justifyContent(this.mainAxisAlignment),
       "flex-direction": direction(this.direction),
       "align-items": this.crossAxisAlignment,
-      overflow: this.overflow,
       flex: this.flex,
       "flex-wrap": this.flexWrap,
       gap: this.itemSpacing && css.px(this.itemSpacing),

packages/builder-web-core/widgets-native/flex/index.ts

@@ -14,12 +14,12 @@ import { tokenize_flagged_wrap } from "./token-wrap";
 import { tokenize_flagged_wh_declaration } from "./token-wh";
 import { tokenize_flagged_fix_wh } from "./token-wh-fix";
 
-export default function (node: ReflectSceneNode) {
+export default function handleWithFlags(node: ReflectSceneNode) {
   const flags = parse(node.name);
-  return handle_with_flags(node, flags);
+  return _handle_with_flags(node, flags);
 }
 
-function handle_with_flags(node, flags: FlagsParseResult) {
+function _handle_with_flags(node, flags: FlagsParseResult) {
   // artwork
   const artwork_flag_alias =
     flags["artwork"] ||

packages/designto-token/support-flags/index.ts

@@ -25,7 +25,7 @@ function fromVector(vector: ReflectVectorNode) {
     // we are not sure when specifically this happens, but as reported, curvy lines does not contain a vector paths.
     // so we just return a image bake of it.
     process.env.NODE_ENV === "development" &&
-      console.warn(
+      console.info(
         `tried to get path data from vector, but none was provided. baking as a bitmap instead.`,
         vector
       );

packages/designto-token/token-graphics/vector.ts

@@ -127,6 +127,17 @@ function flex_or_stack_from_frame(
   };
 
   if (frame.isAutoLayout) {
+    // const __is_this_autolayout_frame_under_autolayout_parent =
+    //   frame.parent instanceof nodes.ReflectFrameNode &&
+    //   frame.parent.isAutoLayout;
+
+    /// > From the docs: https://www.figma.com/plugin-docs/api/properties/nodes-layoutalign
+    /// Changing this property will cause the x, y, size, and relativeTransform properties on this node to change, if applicable (inside an auto-layout frame).
+    /// - Setting "STRETCH" will make the node "stretch" to fill the width of the parent vertical auto - layout frame, or the height of the parent horizontal auto - layout frame excluding the frame's padding.
+    /// - If the current node is an auto layout frame(e.g.an auto layout frame inside a parent auto layout frame) if you set layoutAlign to “STRETCH” you should set the corresponding axis – either primaryAxisSizingMode or counterAxisSizingMode – to be“FIXED”. This is because an auto - layout frame cannot simultaneously stretch to fill its parent and shrink to hug its children.
+    /// - Setting "INHERIT" does not "stretch" the node.
+    ///
+
     // TODO: inspect me. We're not 100% sure this is the correct behaviour.
     switch (frame.layoutMode) {
       case Axis.horizontal: