@lightningjs/ui-components - npm Package Compare versions

Comparing version 2.13.1 to 2.14.0

package.json

 {
   "name": "@lightningjs/ui-components",
-  "version": "2.13.1",
+  "version": "2.14.0",
   "description": "A shared library of helpful LightningJS components utilizing theme files to easily customize for any LightningJS application.",
@@ -5,0 +5,0 @@ "repository": {

src/components/Button/Button.js

@@ -117,3 +117,19 @@ /**
       this._Content.patch({ Prefix: prefixPatch });
-      this._Prefix.items = this._addButtonProps(this.prefix);
+
+      /**
+       * Repatching all items re-renders all the components in the Prefix Row.
+       * This can cause items to shift while their layout in the Row is re-calculated if
+       * any of the items do not have width or height on their initial render (ex. an Icon
+       * does not have width and height until after its texture loads).
+       * If the contents of the Prefix are the same components and this update was triggered
+       * from something else (ex. a change in mode), only update the styles applied to the
+       * items in the Prefix (ex. updating the color to the value appropriate to the new mode).
+       */
+      const prefixString = JSON.stringify(this.prefix);
+      if (prefixString !== this._prevPrefix) {
+        this._prevPrefix = prefixString;
+        this._Prefix.items = this._addButtonProps(this.prefix);
+      } else {
+        this._updatePrefixStyles();
+      }
     } else {
@@ -124,2 +140,12 @@ this._Content.patch({ Prefix: undefined });
 
+  _updatePrefixStyles() {
+    this._Prefix.Items.children.forEach((item, idx) => {
+      item.color = this.prefix[idx].color;
+      item.style = {
+        ...item.style,
+        color: this.style.contentColor
+      };
+    });
+  }
+
   _updateTitle() {
@@ -126,0 +152,0 @@ if (this._hasTitle) {

src/components/CardContent/CardContent.d.ts

@@ -24,2 +24,3 @@ /**
 import MetadataBase from '../MetadataBase';
+import Tile from '../Tile';
 
@@ -51,5 +52,4 @@ type ImageSize = {
      * object containing all properties supported in the MetadataCardContent component
-     * TODO: This should be updated to a MetadataCardContent patch object once its d.ts has been updated
      */
-    metadata?: object;
+    metadata?: lng.Element.PatchTemplate<MetadataBase.TemplateSpec>;
     /**
@@ -69,5 +69,4 @@ * specifies whether the card layout should be oriented horizontally or vertically
      * object containing all properties supported in the Tile component
-     * TODO: This should be updated to a Tile patch object once its d.ts has been updated
      */
-    tile?: object;
+    tile?: lng.Element.PatchTemplate<Tile.TemplateSpec>;
   }
@@ -85,5 +84,4 @@ }
    * object containing all properties supported in the MetadataCardContent component
-   TODO: This should be updated to a MetadataCardContent patch object once its d.ts has been updated
    */
-  metadata?: object;
+  metadata?: lng.Element.PatchTemplate<MetadataBase.TemplateSpec>;
   /**
@@ -103,5 +101,4 @@ * specifies whether the card layout should be oriented horizontally or vertically
    * object containing all properties supported in the Tile component
-   TODO: This should be updated to a Tile patch object once its d.ts has been updated
    */
-  tile?: object;
+  tile?: lng.Element.PatchTemplate<Tile.TemplateSpec>;
 
@@ -108,0 +105,0 @@ get style(): CardContentStyle;

src/components/index.d.ts

@@ -92,3 +92,3 @@ /**
 export { default as TabBar, TabBarStyle, Tab, TabStyle } from './TabBar';
-export { default as TextBox, TextBoxStyle } from './TextBox';
+export { default as TextBox, TextBoxStyle, TextContent } from './TextBox';
 export { default as Tile, TileStyle } from './Tile';
@@ -95,0 +95,0 @@ export { default as TitleRow, TitleRowStyle } from './TitleRow';

src/components/InlineContent/InlineContent.js

@@ -447,2 +447,8 @@ /**
 
+  _setMaxLines(maxLines) {
+    // only accept positive numbers
+    // round down any decimals to whole numbers
+    return maxLines >= 1 ? Math.floor(maxLines) : 0;
+  }
+
   get textHeight() {
@@ -449,0 +455,0 @@ return this.style.textStyle.lineHeight || this.style.textStyle.fontSize;

src/components/TabBar/TabBar.js

@@ -145,2 +145,8 @@ /**
 
+  $itemChanged() {
+    // triggered when the Tabs Row resizes
+    // update the height of TabBar using the latest h value from Tabs
+    this._updateTabBarHeight();
+  }
+
   _updateTabBarHeight() {
@@ -147,0 +153,0 @@ let h;

src/components/TabBar/TabBar.test.js

@@ -131,4 +131,19 @@ /**
 
-  it('should not repeatedly selecte the tabs when already selected', async () => {
+  it('should update the TabBar height if the Tabs height changes', async () => {
+    [tabBar, testRenderer] = createComponent(
+      { tabs },
+      { focused: true, spyOnMethods: ['$itemChanged'] }
+    );
     await tabBar.__updateSpyPromise;
+    const initialHeight = tabBar.h;
+
+    // this triggers the Tabs Row to fire an $itemChanged signal
+    tabBar.tabs = [{ rect: true, h: initialHeight + 20, w: 200 }];
+    await tabBar._$itemChangedSpyPromise;
+
+    expect(tabBar.h).toBeGreaterThan(initialHeight);
+  });
+
+  it('should not repeatedly select the tabs when already selected', async () => {
+    await tabBar.__updateSpyPromise;
     jest.spyOn(tabBar, '_updateTabs');
@@ -135,0 +150,0 @@ expect(tabBar._updateTabs).not.toHaveBeenCalled();

src/components/TextBox/index.d.ts

@@ -19,4 +19,4 @@ /**
 
-import TextBox, { TextBoxStyle } from './TextBox';
+import TextBox, { TextBoxStyle, TextContent } from './TextBox';
 
-export { TextBox as default, TextBoxStyle };
+export { TextBox as default, TextBoxStyle, TextContent };

src/components/Tile/Tile.d.ts

@@ -22,2 +22,3 @@ /**
 import Artwork from '../Artwork';
+import Icon from '../Icon';
 import TextBox from '../TextBox';
@@ -34,2 +35,4 @@ import ProgressBar from '../ProgressBar';
   animationExit: lng.types.TransitionSettings.Literal;
+  iconWidth: number;
+  iconHeight: number;
   metadataLocation: 'standard' | 'inset';
@@ -66,2 +69,6 @@ paddingX: number;
     /**
+     * icon source
+     */
+    iconSrc?: string;
+    /**
      * Controls where there metadata is displayed in relation to the Tile. Available values are 'standard' and 'inset'
@@ -97,3 +104,2 @@ */
   badge?: lng.Element.PatchTemplate<Badge.TemplateSpec>;
-
   /**
@@ -138,2 +144,3 @@ * Object containing all properties supported in the [Checkbox component](?path=/docs/components-checkbox--checkbox)
   get _Checkbox(): Checkbox;
+  get _Icon(): Icon;
   get _Metadata(): MetadataBase;
@@ -140,0 +147,0 @@ get _ProgressBar(): ProgressBar;

src/components/Tile/Tile.js

@@ -27,2 +27,3 @@ /**
 import Surface from '../Surface';
+import Icon from '../Icon';
 
@@ -63,2 +64,3 @@ export default class Tile extends Surface {
       'label',
+      'iconSrc',
       'metadata',
@@ -80,2 +82,3 @@ 'metadataLocation',
       { name: 'Checkbox', path: 'Content.Checkbox' },
+      { name: 'Icon', path: 'Content.Icon' },
       { name: 'Metadata', path: 'Content.Metadata' },
@@ -116,2 +119,3 @@ { name: 'ProgressBar', path: 'Content.ProgressBar' },
     this._updateProgressBar();
+    this._updateIcon();
     this._updateMetadata();
@@ -182,2 +186,34 @@ }
 
+  /* ------------------------------ Icon ------------------------------ */
+
+  _updateIcon() {
+    const iconObject = {
+      w: this.style.iconWidth,
+      h: this.style.iconHeight,
+      icon: this.iconSrc,
+      alpha: this.style.alpha,
+      mountY: 1,
+      x: this.style.paddingX,
+      y: this._calculateIconYPosition()
+    };
+
+    if (this.iconSrc && (this.persistentMetadata || this._isFocusedMode)) {
+      if (!this._Icon) {
+        iconObject.type = Icon;
+      }
+      this.patch({ Icon: iconObject });
+    } else {
+      this.patch({ Icon: undefined });
+    }
+  }
+
+  _calculateIconYPosition() {
+    if (this._isInsetMetadata) {
+      return this._metadataY - (this._Metadata ? this._Metadata.h : 0);
+    } else {
+      return this._progressBarY
+        ? this._progressBarY - this.style.paddingYBetweenContent
+        : this._h + this.style.paddingY;
+    }
+  }
   /* ------------------------------ Artwork ------------------------------ */
@@ -184,0 +220,0 @@

src/components/Tile/Tile.stories.js

@@ -31,2 +31,3 @@ /**
 import { Text as BadgeStory } from '../Badge/Badge.stories.js';
+import xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';
 
@@ -63,2 +64,3 @@ export default {
   metadataLocation: 'standard',
+  iconSrc: xfinityLogo,
   persistentMetadata: false,
@@ -85,2 +87,10 @@ mode: 'focused'
     }
+  },
+  iconSrc: {
+    control: 'select',
+    options: [xfinityLogo, 'null'],
+    description: 'Icon source',
+    table: {
+      defaultValue: { summary: 'undefined' }
+    }
   }
@@ -87,0 +97,0 @@ };

src/components/Tile/Tile.styles.js

@@ -22,2 +22,4 @@ /**
   animationExit: theme.animation.standardExit,
+  iconWidth: theme.spacer.lg * 5,
+  iconHeight: theme.spacer.xxl + theme.spacer.md,
   metadataLocation: 'standard',
@@ -24,0 +26,0 @@ paddingX: theme.spacer.xl,

src/components/Tile/Tile.test.js

@@ -20,2 +20,3 @@ /**
 import {
+  pathToDataURI,
   makeCreateComponent,
@@ -409,2 +410,10 @@ fastForward
 
+  describe('icon', () => {
+    const icon = pathToDataURI('src/assets/images/ic_lightning_white_32.png');
+    it('should patch in an icon if provided', () => {
+      tile.iconSrc = icon;
+      expect(tile._Icon).toBeUndefined();
+    });
+  });
+
   describe('metadata', () => {
@@ -411,0 +420,0 @@ it('should update metadata and remove if no longer needed', async () => {

src/components/TitleRow/TitleRow.js

@@ -41,4 +41,3 @@ /**
       },
-      ...super._template(),
-      autoResizeHeight: false
+      ...super._template()
     };
@@ -59,2 +58,7 @@ }
 
+  _construct() {
+    super._construct();
+    this._autoResizeHeight = true;
+  }
+
   _update() {
@@ -66,2 +70,7 @@ super._update();
 
+  _autoResize() {
+    this.w = this.w || this.style.w;
+    this.h = this.autoResizeHeight ? this.Items.y + this.Items.h : this.h;
+  }
+
   _updateTitle() {
@@ -86,6 +95,2 @@ if (this.title) {
     });
-    this.patch({
-      w: this.w || this.style.w,
-      h: this.Items.y + this.Items.h
-    });
   }
@@ -92,0 +97,0 @@

src/components/TitleRow/TitleRow.test.js

@@ -114,2 +114,35 @@ /**
   });
+
+  it('should by default resize the TitleRow to the total height of its contents', async () => {
+    [titleRow, testRenderer] = createComponent(
+      {
+        title: 'Title',
+        items
+      },
+      { spyOnMethods: ['_update', '_autoResize'] }
+    );
+
+    await titleRow._updateSpyPromise;
+    await titleRow.__autoResizeSpyPromise;
+
+    expect(titleRow.h).toBe(titleRow.Items.y + titleRow.Items.h);
+  });
+
+  it('should allow setting the height manually', async () => {
+    const h = 100;
+    [titleRow, testRenderer] = createComponent(
+      {
+        title: 'Title',
+        items,
+        autoResizeHeight: false,
+        h
+      },
+      { spyOnMethods: ['_update', '_autoResize'] }
+    );
+
+    await titleRow._updateSpyPromise;
+    await titleRow.__autoResizeSpyPromise;
+
+    expect(titleRow.h).toBe(h);
+  });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12107399

increased by0.14%

Lines of code

56404

increased by0.26%

No dependency changes