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

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');
   }
 

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');

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;
     }
 
     /**