fix: calculated height displayed in the inspector for Button and Tile (…

…#403) * fix: calculated height displayed in the inspector for Button and Tile * test(Button): update snapshots
rdkcentral · Nov 14, 2023 · a84c1f7 · a84c1f7
1 parent ed5661e
commit a84c1f7
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 27 deletions.
diff --git a/packages/@lightningjs/ui-components/src/components/Button/Button.js b/packages/@lightningjs/ui-components/src/components/Button/Button.js
@@ -241,14 +241,6 @@ export default class Button extends Surface {
     this._Content.patch(this._contentProps);
   }
 
-  set h(v) {
-    super.h = v;
-  }
-
-  get h() {
-    return super.h || this.style.textStyle.lineHeight + this.style.paddingY * 2;
-  }
-
   _updateSurfaceDimensions() {
     let newWidth = this.w;
     if (this.fixed) {
@@ -269,7 +261,15 @@ export default class Button extends Surface {
       this.w = newWidth;
     }
 
-    // TODO breaks row resizing if this is wrapped in the above conditional
+    // In order to ensure the "hSetByUser" flag is not set to true,
+    // skip over "set h" by directly updating "_h"
+    // Using the "get h" return statement does not force an update to the inspector,
+    // whereas this will ensure the "height" attribute is updated
+    if (!this._hSetByUser && !this.style.h) {
+      this._h = this.style.textStyle.lineHeight + this.style.paddingY * 2;
+    }
+
+    // TODO breaks row resizing if this is wrapped in the width conditional above
     this.fireAncestors('$itemChanged');
   }
 

diff --git a/packages/@lightningjs/ui-components/src/components/Input/__snapshots__/Input.test.js.snap b/packages/@lightningjs/ui-components/src/components/Input/__snapshots__/Input.test.js.snap
@@ -186,7 +186,7 @@ exports[`Input renders 1`] = `
       "visible": true,
       "w": 0,
       "x": 30,
-      "y": 46,
+      "y": 0,
       "zIndex": 2,
     },
   },

diff --git a/...es/@lightningjs/ui-components/src/components/Keyboard/__snapshots__/Keyboard.test.js.snap b/...es/@lightningjs/ui-components/src/components/Keyboard/__snapshots__/Keyboard.test.js.snap
@@ -23681,7 +23681,7 @@ exports[`KeyboardInput renders 1`] = `
               "visible": true,
               "w": 1920,
               "x": 0,
-              "y": 202,
+              "y": 110,
               "zIndex": 0,
             },
           },
@@ -23690,7 +23690,7 @@ exports[`KeyboardInput renders 1`] = `
           "enabled": true,
           "flex": false,
           "flexItem": false,
-          "h": 202,
+          "h": 110,
           "isComponent": undefined,
           "mount": 0,
           "mountX": 0,

diff --git a/packages/@lightningjs/ui-components/src/components/Tile/Tile.js b/packages/@lightningjs/ui-components/src/components/Tile/Tile.js
@@ -130,14 +130,13 @@ export default class Tile extends Surface {
 
   /* ------------------------------ Tile ------------------------------ */
 
-  set h(v) {
-    super.h = v;
-  }
-
-  get h() {
+  _getRenderHeight() {
+    // if there is Metadata below the Tile, override _getRenderHeight
+    // in order to return the fully calculated height,
+    // not the height stored in "_h" for just the tile image
     return !this._isInsetMetadata
-      ? super.h + ((this._Metadata && this._Metadata.h) || 0)
-      : super.h;
+      ? this._h + (this._Metadata?.h + this.style.paddingY || 0)
+      : super._getRenderHeight();
   }
 
   get innerH() {
@@ -624,6 +623,11 @@ export default class Tile extends Surface {
   _metadataLoaded() {
     this._animateMetadata();
     this._updateLogo();
+
+    // if the metadata height has changed, the height of the entire Tile has changed
+    // and the inspector must be updated via _getRenderHeight()
+    this._updateDimensions();
+
     // Send event to columns/rows that the height has been updated since metadata will be displayed below the Tile
     if (!this._isInsetMetadata) {
       this.fireAncestors('$itemChanged');

diff --git a/...ghtningjs/ui-components/src/mixins/withEditItems/__snapshots__/withEditItems.test.js.snap b/...ghtningjs/ui-components/src/mixins/withEditItems/__snapshots__/withEditItems.test.js.snap
@@ -212,7 +212,7 @@ exports[`withEditItems renders 1`] = `
               "visible": true,
               "w": 0,
               "x": 236,
-              "y": 46,
+              "y": 0,
               "zIndex": 2,
             },
           },
@@ -449,7 +449,7 @@ exports[`withEditItems renders 1`] = `
               "visible": true,
               "w": 0,
               "x": 236,
-              "y": 46,
+              "y": 0,
               "zIndex": 2,
             },
           },
@@ -686,7 +686,7 @@ exports[`withEditItems renders 1`] = `
               "visible": true,
               "w": 0,
               "x": 236,
-              "y": 46,
+              "y": 0,
               "zIndex": 2,
             },
           },
@@ -923,7 +923,7 @@ exports[`withEditItems renders 1`] = `
               "visible": true,
               "w": 0,
               "x": 236,
-              "y": 46,
+              "y": 0,
               "zIndex": 2,
             },
           },
@@ -1160,7 +1160,7 @@ exports[`withEditItems renders 1`] = `
               "visible": true,
               "w": 0,
               "x": 236,
-              "y": 46,
+              "y": 0,
               "zIndex": 2,
             },
           },
@@ -1397,7 +1397,7 @@ exports[`withEditItems renders 1`] = `
               "visible": true,
               "w": 0,
               "x": 236,
-              "y": 46,
+              "y": 0,
               "zIndex": 2,
             },
           },
@@ -1437,7 +1437,7 @@ exports[`withEditItems renders 1`] = `
       "enabled": true,
       "flex": false,
       "flexItem": false,
-      "h": 92,
+      "h": 0,
       "isComponent": undefined,
       "mount": 0,
       "mountX": 0,

diff --git a/packages/@lightningjs/ui-components/src/mixins/withThemeStyles/index.js b/packages/@lightningjs/ui-components/src/mixins/withThemeStyles/index.js
@@ -337,7 +337,7 @@ export default function withThemeStyles(Base, mixinStyle = {}) {
      * @return {number}
      */
     get h() {
-      return (this._hSetByUser && this._h) || this.style?.h || 0;
+      return (this._hSetByUser && this._h) || this.style?.h || this._h || 0;
     }
 
     /**