fix(Textbox): stops flash on inlineContent change

packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js

@@ -148,21 +148,26 @@ export default class InlineContent extends Base {
     if (this.children.length) {
       setTimeout(() => {
         this.multiLineHeight = this.finalH;
+
         if (
           this.flex &&
           this.flex._layout &&
           this.flex._layout._lineLayouter &&
           this.flex._layout._lineLayouter._lines
         ) {
+          // only using this.flex._layout._lineLayouter._lines.length if maxLines is larger than the number of lines so we don't have a height too large
+          const multiplierLines =
+            this.maxLines === undefined ||
+            this.maxLines > this.flex._layout._lineLayouter._lines.length
+              ? this.flex._layout._lineLayouter._lines.length
+              : this.maxLines;
+
           this.multiLineHeight =
-            this.style.textStyle.lineHeight *
-            this.flex._layout._lineLayouter._lines.length;
-          this.h = this.multiLineHeight;
+            this.style.textStyle.lineHeight * multiplierLines;
 
           if (this._shouldTruncate) {
             this._renderMaxLines();
           }
-
           this._notifyAncestors();
         } else {
           this._contentLoaded();

packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js

@@ -146,6 +146,8 @@ export default class TextBox extends Base {
   _updateInlineContent() {
     this.patch({ Text: undefined });
 
+    const contentStyle = this._textStyleSet;
+
     const inlineContentPatch = InlineContent.properties.reduce(
       (acc, prop) => {
         if (this[prop] != undefined) {
@@ -157,20 +159,20 @@ export default class TextBox extends Base {
       {
         style: {
           ...this.style,
-          textStyle: this._textStyleSet
+          textStyle: contentStyle
         }
       }
     );
 
-    if (this._textStyleSet.wordWrapWidth) {
-      inlineContentPatch.w = this._textStyleSet.wordWrapWidth;
+    if (contentStyle.wordWrapWidth) {
+      inlineContentPatch.w = contentStyle.wordWrapWidth;
       inlineContentPatch.rtt = true;
     }
-    if (this._textStyleSet.maxLines) {
-      inlineContentPatch.maxLines = this._textStyleSet.maxLines;
+    if (contentStyle.maxLines) {
+      inlineContentPatch.maxLines = contentStyle.maxLines;
     }
-    if (this._textStyleSet.maxLinesSuffix) {
-      inlineContentPatch.maxLinesSuffix = this._textStyleSet.maxLinesSuffix;
+    if (contentStyle.maxLinesSuffix) {
+      inlineContentPatch.maxLinesSuffix = contentStyle.maxLinesSuffix;
     }
 
     this.patch({

packages/@lightningjs/ui-components/src/components/TextBox/TextBox.stories.js

@@ -32,15 +32,20 @@ const { args: inlineContentArgs, argTypes: inlineContentArgTypes } =
 const lorum =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est eu eleifend interdum. Vivamus egestas maximus elementum. Sed condimentum ligula justo, non sollicitudin lectus rutrum vel. Integer iaculis vitae nisl quis tincidunt. Sed quis dui vehicula, vehicula felis a, tempor leo. Fusce tincidunt, ante eget pretium efficitur, libero elit volutpat quam, sit amet porta tortor odio non ligula. Ut sed dolor eleifend massa auctor porttitor eget ut lectus. Vivamus elementum lorem mauris, eu luctus tortor posuere sit amet. Nunc a interdum metus.';
 
-export const Basic = () =>
+export const Basic = args =>
   class Basic extends lng.Component {
     static _template() {
       return {
         TextBox: {
           type: TextBox,
           fixed: true,
           w: 600,
-          style: { textStyle: { maxLines: 3 } }
+          style: {
+            textStyle: {
+              maxLines: args.maxLines,
+              contentWrap: args.contentWrap
+            }
+          }
         }
       };
     }
@@ -51,7 +56,9 @@ Basic.args = {
   marquee: false,
   fixed: true,
   hideOnLoad: false,
-  w: 600
+  w: 600,
+  maxLines: 3,
+  contentWrap: false
 };
 
 Basic.argTypes = {
@@ -94,10 +101,27 @@ Basic.argTypes = {
     table: {
       defaultValue: { summary: 0 }
     }
+  },
+  maxLines: {
+    control: 'number',
+    description: 'maximum number of lines to render before truncation',
+    type: 'number',
+    table: {
+      defaultValue: { summary: 'undefined' }
+    }
+  },
+  contentWrap: {
+    control: 'boolean',
+    description:
+      'Determines whether the containing flexbox should wrap the content onto the next line',
+    type: 'boolean',
+    table: {
+      defaultValue: { summary: false }
+    }
   }
 };
 
-export const WithInlineContentArray = () =>
+export const WithInlineContentArray = args =>
   class WithInlineContentArray extends lng.Component {
     static _template() {
       return {
@@ -125,7 +149,14 @@ export const WithInlineContentArray = () =>
             'for fun',
             { badge: 'HD', title: 'HD' },
             { badge: 'SD', title: 'SD' }
-          ]
+          ],
+          style: {
+            textStyle: {
+              maxLines: args.maxLines,
+              maxLinesSuffix: args.maxLinesSuffix,
+              contentWrap: args.contentWrap
+            }
+          }
         }
       };
     }
@@ -134,7 +165,7 @@ export const WithInlineContentArray = () =>
 WithInlineContentArray.args = inlineContentArgs;
 WithInlineContentArray.argTypes = inlineContentArgTypes;
 
-export const WithInlineContentString = () =>
+export const WithInlineContentString = args =>
   class WithInlineContentArray extends lng.Component {
     static _template() {
       return {
@@ -149,6 +180,13 @@ export const WithInlineContentString = () =>
               fontStyle: 'italic',
               textColor: getHexColor('FF6194')
             }
+          },
+          style: {
+            textStyle: {
+              maxLines: args.maxLines,
+              maxLinesSuffix: args.maxLinesSuffix,
+              contentWrap: args.contentWrap
+            }
           }
         }
       };
@@ -158,7 +196,7 @@ export const WithInlineContentString = () =>
 WithInlineContentString.args = inlineContentArgs;
 WithInlineContentString.argTypes = inlineContentArgTypes;
 
-export const WithInlineContentTruncation = () =>
+export const WithInlineContentTruncation = args =>
   class Basic extends lng.Component {
     static _template() {
       return {
@@ -167,8 +205,9 @@ export const WithInlineContentTruncation = () =>
           w: 500,
           style: {
             textStyle: {
-              maxLines: 2,
-              maxLinesSuffix: '...'
+              maxLines: args.maxLines,
+              maxLinesSuffix: args.maxLinesSuffix,
+              contentWrap: args.contentWrap
             }
           },
           content: [
@@ -192,9 +231,11 @@ export const WithInlineContentTruncation = () =>
             { badge: 'HD', title: 'HD' },
             { badge: 'SD', title: 'SD' },
             ', and this should truncate before going on to a third line.'
-          ],
-          contentWrap: true
+          ]
         }
       };
     }
   };
+
+WithInlineContentTruncation.args = inlineContentArgs;
+WithInlineContentTruncation.argTypes = inlineContentArgTypes;