fix text sizing (with dangerous static logic overrides)

Author: softmarshmallow

externals/design-sdk

@@ -14,7 +14,7 @@ import { Dynamic } from "@reflect-ui/core/lib/_utility-types";
  * You can select wich element to render with `elementPreference`. - choose between h1 ~ h6, p, span, etc.
  */
 export class Text extends TextChildWidget {
-  _type: "Text";
+  _type: "Text" = "Text";
 
   // text properties
   data: Dynamic<string>;
@@ -74,15 +74,27 @@ export class Text extends TextChildWidget {
       "text-decoration": css.textDecoration(this.textStyle.decoration),
       "text-shadow": css.textShadow(this.textStyle.textShadow),
       // ------------------------------------------
-      "min-height": css.px(this.height),
-      // TODO: do not specify width when parent is a flex container.
-      // Also flex: 1 is required to make the text wrap.
-      width: css.px(this.width),
+      ...textWH({ width: this.width, height: this.height }),
     };
 
     return <CSSProperties>textStyle;
   }
 
+  get finalStyle() {
+    const superFinalStyle = super.finalStyle;
+    // TODO: this is a dirty fix ------------------------------------------------
+    // the text's width should not be overriden by the constraint's preference.
+    if (this.width === undefined) {
+      delete superFinalStyle["width"];
+    }
+    if (this.height === undefined) {
+      delete superFinalStyle["height"];
+    }
+    // --------------------------------------------------------------------------
+
+    return { ...superFinalStyle };
+  }
+
   jsxConfig(): StylableJSXElementConfig {
     return <StylableJSXElementConfig>{
       type: "tag-and-attr",
@@ -99,3 +111,12 @@ const __get_dedicated_element_tag = (t?: WebTextElement | undefined) => {
     return __default_element_tag;
   }
 };
+
+function textWH({ width, height }: { width: number; height: number }) {
+  return {
+    // TODO: do not specify width when parent is a flex container.
+    // Also flex: 1 is required to make the text wrap.
+    width: css.px(width),
+    "min-height": css.px(height),
+  };
+}

packages/builder-web-core/widgets-native/html-text-element/index.ts

@@ -270,6 +270,16 @@ function handle_by_types(
       break;
 
     case nodes.ReflectSceneNodeType.text:
+      // FIXME: aberation handling (remove me if required) --------------------------------
+      // FIXME: this is for giving extra space for text so it won't break line accidently.
+      // FIXME: consider applying this only to a preview build
+      if (node.data.length <= 6 && node.data.length > 2) {
+        node.width = node.width + 1;
+      } else if (node.data.length < 30) {
+        node.width = node.width + 2;
+      }
+      // FIXME: ---------------------------------------------------------------------------------
+
       tokenizedTarget = tokenizeText.fromText(node as nodes.ReflectTextNode);
       break;