@lightningjs/ui-components - npm Package Compare versions

Comparing version 2.16.1 to 2.17.0

package.json

 {
   "name": "@lightningjs/ui-components",
-  "version": "2.16.1",
+  "version": "2.17.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/Base/Base.d.ts

@@ -106,3 +106,3 @@ /**
    */
-  isFullyOnScreen(): boolean;
+  isFullyOnScreen(offsets: { offsetX: number; offsetY: number }): boolean;
 
@@ -109,0 +109,0 @@ // TODO: for future reference these accessors should technically be public

src/components/Base/Base.js

@@ -124,4 +124,4 @@ /**
 
-  isFullyOnScreen() {
-    return isComponentOnScreen(this);
+  isFullyOnScreen(offsets) {
+    return isComponentOnScreen(this, offsets);
   }
@@ -128,0 +128,0 @@

src/components/Button/Button.js

@@ -108,2 +108,3 @@ /**
   _updatePrefix() {
+    const prefixString = JSON.stringify(this.prefix);
     if (this.prefix) {
@@ -122,34 +123,47 @@ let prefixPatch = {
       this._Content.patch({ Prefix: prefixPatch });
-
-      /**
-       * 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();
-      }
+      this._updatePrefixSuffixStyles('prefix');
     } else {
       this._Content.patch({ Prefix: undefined });
     }
+    this._prevPrefix = prefixString;
   }
 
-  _updatePrefixStyles() {
-    this._Prefix.Items.children.forEach((item, idx) => {
-      item.color = Array.isArray(this.prefix)
-        ? this.prefix[idx].color
-        : this.prefix.color;
-      item.style = {
-        ...item.style,
-        color: this.style.contentColor
-      };
-    });
+  _updatePrefixSuffixStyles(type = 'prefix') {
+    /**
+     * Repatching all items re-renders all the components in the Prefix/Suffix Rows.
+     * 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/Suffix 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 map = {
+      prefix: {
+        tag: this._Prefix,
+        prop: this.prefix,
+        prevProp: this._prevPrefix
+      },
+      suffix: {
+        tag: this._Suffix,
+        prop: this.suffix,
+        prevProp: this._prevSuffix
+      }
+    };
+    const { tag, prop } = map[type];
+    let { prevProp } = map[type];
+    const propString = JSON.stringify(prop);
+
+    if (propString !== prevProp) {
+      prevProp = propString;
+      tag.items = this._addButtonProps(prop);
+    } else {
+      tag.Items.children.forEach((item, idx) => {
+        item.color = Array.isArray(prop) ? prop[idx].color : prop.color;
+        item.style = {
+          ...item.style,
+          color: this.style.contentColor
+        };
+      });
+    }
   }
@@ -199,3 +213,3 @@
       this._Content.patch({ Suffix: suffixPatch });
-      this._Suffix.items = this._addButtonProps(this.suffix);
+      this._updatePrefixSuffixStyles('suffix');
     } else {
@@ -239,3 +253,3 @@ this._Content.patch({ Suffix: undefined });
     if (Object.keys(contentDimensionsPatch).length > 0) {
-      this.applySmooth(this._Content, contentDimensionsPatch);
+      this._Content.patch(contentDimensionsPatch);
     }
@@ -242,0 +256,0 @@ }

src/components/Button/Button.test.js

@@ -153,2 +153,18 @@ /**
     });
+
+    it('should render a new preix row when a prefix is toggled between undefined and defined', () => {
+      expect(button._Prefix).toBeUndefined();
+
+      button.prefix = [{ type: Icon }];
+      testRenderer.forceAllUpdates();
+      expect(button._Prefix.items.length).toEqual(button.prefix.length);
+
+      button.prefix = undefined;
+      testRenderer.forceAllUpdates();
+      expect(button._Prefix).toBeUndefined();
+
+      button.prefix = [{ type: Icon }];
+      testRenderer.forceAllUpdates();
+      expect(button._Prefix.items.length).toEqual(button.prefix.length);
+    });
   });
@@ -155,0 +171,0 @@

src/components/Checkbox/Checkbox.d.ts

@@ -31,7 +31,13 @@ /**
   checkH: number;
+  /** @deprecated */
   checkHeight: number;
+  iconHeight: number;
   /** @deprecated */
   checkW: number;
+  /** @deprecated */
   checkWidth: number;
+  iconWidth: number;
+  /** @deprecated */
   checkSrc: string;
+  icon: string;
   radius: lng.Tools.CornerRadius;
@@ -38,0 +44,0 @@ strokeColor: Color;

src/components/Checkbox/Checkbox.js

@@ -59,4 +59,7 @@ /**
     return [
-      { prev: 'checkH', curr: 'checkHeight' },
-      { prev: 'checkW', curr: 'checkWidth' }
+      { prev: 'checkSrc', curr: 'icon' },
+      { prev: 'checkH', curr: 'iconHeight' },
+      { prev: 'checkW', curr: 'iconWidth' },
+      { prev: 'checkHeight', curr: 'iconHeight' },
+      { prev: 'checkWidth', curr: 'iconWidth' }
     ];
@@ -78,5 +81,5 @@ }
     this._Check.patch({
-      w: this.style.checkWidth,
-      h: this.style.checkHeight,
-      icon: this.style.checkSrc,
+      w: this.style.iconWidth,
+      h: this.style.iconHeight,
+      icon: this.style.icon,
       style: { color: this.style.checkColor }
@@ -100,3 +103,3 @@ });
       this.style.radius >= this.w / 2
-        ? (this.w - this.style.strokeWidth) / 2
+        ? (this.w - this.style.strokeWidth - 2) / 2
         : 0;
@@ -106,4 +109,5 @@
       texture: lng.Tools.getRoundRect(
-        this.w - this.style.strokeWidth,
-        this.h - this.style.strokeWidth,
+        // Compensating for the extra 2 pixels getRoundRect adds
+        this.w - this.style.strokeWidth * 2 - 2,
+        this.h - this.style.strokeWidth * 2 - 2,
         radius,
@@ -121,4 +125,5 @@ 0,
       texture: lng.Tools.getRoundRect(
-        this.w,
-        this.h,
+        // Compensating for the extra 2 pixels getRoundRect adds
+        this.w - 2,
+        this.h - 2,
         this.style.radius,
@@ -125,0 +130,0 @@ this.style.strokeWidth,

src/components/Checkbox/Checkbox.styles.js

@@ -21,3 +21,3 @@ /**
   const strokeWidth = theme.stroke.sm;
-  const size = theme.spacer.xxl - strokeWidth * 2;
+  const size = theme.spacer.xxl;
   return {
@@ -27,6 +27,6 @@ alpha: theme.alpha.primary,
     height: size,
-    checkWidth: theme.spacer.lg,
-    checkHeight: theme.spacer.md + theme.spacer.xs,
-    checkSrc: theme.asset.check,
-    radius: size / 2,
+    iconWidth: theme.spacer.lg,
+    iconHeight: theme.spacer.lg,
+    icon: theme.asset.check,
+    radius: theme.radius.xs,
     strokeWidth
@@ -38,17 +38,17 @@ };
   neutral: {
-    strokeColor: theme.color.strokeInverse,
-    checkColor: theme.color.textInverse,
-    backgroundColor: theme.color.fillNeutralDisabled,
+    strokeColor: theme.color.strokeNeutralSecondary,
+    checkColor: theme.color.fillInverse,
+    backgroundColor: theme.color.fillInverseSecondary,
     backgroundColorChecked: theme.color.fillNeutral
   },
   inverse: {
-    strokeColor: theme.color.strokeNeutral,
-    checkColor: theme.color.textNeutral,
-    backgroundColor: theme.color.fillInverseDisabled,
+    strokeColor: theme.color.strokeInverseSecondary,
+    checkColor: theme.color.fillNeutral,
+    backgroundColor: theme.color.fillNeutralSecondary,
     backgroundColorChecked: theme.color.fillInverse
   },
   brand: {
-    strokeColor: theme.color.strokeNeutral,
-    checkColor: theme.color.textNeutral,
-    backgroundColor: theme.color.fillInverseDisabled,
+    strokeColor: theme.color.strokeNeutralSecondary,
+    checkColor: theme.color.fillInverse,
+    backgroundColor: theme.color.fillNeutralSecondary,
     backgroundColorChecked: theme.color.fillBrand
@@ -55,0 +55,0 @@ }

src/components/Checkbox/CheckboxSmall.styles.js

@@ -21,11 +21,11 @@ /**
   const strokeWidth = theme.stroke.sm;
-  const size = theme.spacer.xl - strokeWidth * 2;
+  const size = theme.spacer.xl;
   return {
     width: size,
     height: size,
-    checkWidth: theme.spacer.md,
-    checkHeight: theme.spacer.md + theme.spacer.xxs,
-    radius: size / 2,
+    iconWidth: theme.spacer.md,
+    iconHeight: theme.spacer.md,
+    radius: theme.radius.xs,
     strokeWidth
   };
 };

src/components/NavigationManager/NavigationManager.js

@@ -502,2 +502,15 @@ /**
   }
+
+  isFullyOnScreen({ offsetX = 0, offsetY = 0 } = {}) {
+    // if the NavigationManager is nested in another Focus Manager
+    // (like a Row inside of a Column),
+    // the `isComponentOnScreen` method needs to account for
+    // how much the Items container is moving as it scrolls
+    const focusmanager = this.parent?.parent;
+    if (focusmanager instanceof FocusManager) {
+      offsetX += focusmanager.Items.transition('x').targetValue || 0;
+      offsetY += focusmanager.Items.transition('y').targetValue || 0;
+    }
+    return super.isFullyOnScreen({ offsetX, offsetY });
+  }
 }

src/components/Radio/Radio.js

@@ -73,3 +73,3 @@ /**
       this.style.radius >= this.w / 2
-        ? (this.w - this.style.strokeWidth) / 2
+        ? (this.w - this.style.strokeWidth - 2) / 2
         : 0;
@@ -79,4 +79,5 @@
       texture: lng.Tools.getRoundRect(
-        this.w - this.style.strokeWidth,
-        this.h - this.style.strokeWidth,
+        // Compensating for the extra 2 pixels getRoundRect adds
+        this.w - this.style.strokeWidth * 2 - 2,
+        this.h - this.style.strokeWidth * 2 - 2,
         radius,
@@ -93,5 +94,6 @@ null,
     this._Stroke.patch({
+      // Compensating for the extra 2 pixels getRoundRect adds
       texture: lng.Tools.getRoundRect(
-        this.w,
-        this.h,
+        this.w - 2,
+        this.h - 2,
         this.style.radius,
@@ -98,0 +100,0 @@ this.style.strokeWidth,

src/components/Radio/Radio.styles.js

@@ -34,18 +34,18 @@ /**
   neutral: {
-    backgroundColor: theme.color.fillNeutralDisabled,
+    backgroundColor: theme.color.fillInverseSecondary,
     backgroundColorChecked: theme.color.fillNeutral,
     knobColor: theme.color.fillInverse,
-    strokeColor: theme.color.strokeInverse
+    strokeColor: theme.color.strokeNeutralSecondary
   },
   inverse: {
-    backgroundColor: theme.color.fillInverseDisabled,
+    backgroundColor: theme.color.fillNeutralSecondary,
     backgroundColorChecked: theme.color.fillInverse,
     knobColor: theme.color.fillNeutral,
-    strokeColor: theme.color.strokeNeutral
+    strokeColor: theme.color.strokeInverseSecondary
   },
   brand: {
-    backgroundColor: theme.color.fillInverseDisabled,
+    backgroundColor: theme.color.fillNeutralSecondary,
     backgroundColorChecked: theme.color.fillBrand,
-    knobColor: theme.color.fillNeutral,
-    strokeColor: theme.color.strokeNeutral
+    knobColor: theme.color.fillInverse,
+    strokeColor: theme.color.strokeNeutralSecondary
   }
@@ -52,0 +52,0 @@ });

src/components/TabBar/TabBar.js

@@ -65,3 +65,4 @@ /**
 
-  _selectedTabChange() {
+  _selectedTabChange(selected, prevSelected) {
+    this.fireAncestors('$tabChanged', selected, prevSelected, this);
     if (
@@ -183,2 +184,3 @@ typeof this._tabContent === 'object' &&
     }
+    return false;
   }
@@ -188,2 +190,3 @@
     this.selectTabs();
+    return false;
   }
@@ -190,0 +193,0 @@

src/components/TabBar/TabBar.test.js

@@ -19,2 +19,3 @@ /**
 
+import lng from '@lightningjs/core';
 import { makeCreateComponent } from '@lightningjs/ui-components-test-utils';
@@ -132,2 +133,53 @@ import Row from '../Row';
 
+  it('should emit a $tabChanged signal when the selected tab changes', () => {
+    const prevSelected = tabBar.tag('Tabs').selected;
+    jest.spyOn(tabBar, 'fireAncestors');
+    expect(tabBar.fireAncestors).not.toHaveBeenCalled();
+
+    tabBar.tag('Tabs').selectNext();
+    const selected = tabBar.tag('Tabs').selected;
+
+    expect(tabBar.fireAncestors).toHaveBeenCalledWith(
+      '$tabChanged',
+      selected,
+      prevSelected,
+      tabBar
+    );
+  });
+
+  it('should propogate key events', () => {
+    const onUp = jest.fn();
+    const onDown = jest.fn();
+    class Wrapper extends lng.Component {
+      static _template() {
+        return {
+          TabBar: {
+            type: TabBar,
+            tabs
+          }
+        };
+      }
+      _handleUp() {
+        onUp();
+      }
+      _handleDown() {
+        onDown();
+      }
+      _getFocused() {
+        return this.tag('TabBar');
+      }
+    }
+    const [, testRenderer] = makeCreateComponent(Wrapper)();
+
+    expect(onUp).not.toHaveBeenCalled();
+    expect(onDown).not.toHaveBeenCalled();
+
+    testRenderer.keyPress('Down');
+    expect(onUp).not.toHaveBeenCalled();
+    expect(onDown).toHaveBeenCalled();
+
+    testRenderer.keyPress('Up');
+    expect(onUp).toHaveBeenCalled();
+  });
+
   it('should update the TabBar height if the Tabs height changes', async () => {
@@ -134,0 +186,0 @@ [tabBar, testRenderer] = createComponent(

src/components/TitleRow/TitleRow.d.ts

@@ -37,2 +37,4 @@ /**
   titleTextStyle: TextBoxStyle;
+  titleMarginBottom: number;
+  /** @deprecated */
   rowMarginTop: number;
@@ -39,0 +41,0 @@ };

src/components/TitleRow/TitleRow.js

@@ -53,2 +53,6 @@ /**
 
+  static get aliasStyles() {
+    return [{ prev: 'rowMarginTop', curr: 'titleMarginBottom' }];
+  }
+
   _titleLoaded() {
@@ -91,3 +95,3 @@ this._updateRow();
     this.Items.patch({
-      y: this._Title.finalH + this.style.rowMarginTop
+      y: this.title ? this._Title.finalH + this.style.titleMarginBottom : 0
     });
@@ -94,0 +98,0 @@ }

src/components/TitleRow/TitleRow.styles.js

@@ -28,3 +28,3 @@ /**
   },
-  rowMarginTop: theme.spacer.lg
+  titleMarginBottom: theme.spacer.lg
 });
@@ -31,0 +31,0 @@

src/components/TitleRow/TitleRow.test.js

@@ -105,3 +105,3 @@ /**
       );
-      expect(titleRow._Items.y).toBe(titleRow.style.rowMarginTop);
+      expect(titleRow._Items.y).toBe(titleRow.style.titleMarginBottom);
 
@@ -111,3 +111,3 @@ await titleRow.__titleLoadedSpyPromise;
       expect(titleRow._Items.y).toBe(
-        titleRow._Title.finalH + titleRow.style.rowMarginTop
+        titleRow._Title.finalH + titleRow.style.titleMarginBottom
       );
@@ -114,0 +114,0 @@ });

src/components/Toggle/Toggle.d.ts

@@ -32,7 +32,11 @@ /**
   knobColorChecked: Color;
+  /* @deprecated */
   knobX: number;
+  /* @deprecated */
   knobXChecked: number;
   strokeColor: Color;
   strokeRadius: lng.Tools.CornerRadius;
+  /* @deprecated */
   strokeWeight: number;
+  strokeWidth: number;
 };
@@ -39,0 +43,0 @@

src/components/Toggle/Toggle.js

@@ -59,2 +59,6 @@ /**
 
+  static get aliasStyles() {
+    return [{ prev: 'strokeWeight', curr: 'strokeWidth' }];
+  }
+
   _construct() {
@@ -78,10 +82,9 @@ super._construct && super._construct();
   _updateKnobPosition() {
-    const { knobXChecked, knobX, knobPadding, knobWidth, strokeWeight } =
-      this.style;
-    this._knobX = knobX || strokeWeight + knobPadding;
-    this._knobXChecked =
-      knobXChecked || this.w - strokeWeight - knobPadding - knobWidth;
-    const x = this.checked ? this._knobXChecked : this._knobX;
+    const { knobPadding, knobWidth, strokeWidth } = this.style;
 
-    this.applySmooth(this._Knob, { x });
+    this.applySmooth(this._Knob, {
+      x: this.checked
+        ? this.w - strokeWidth - knobPadding - knobWidth
+        : strokeWidth + knobPadding
+    });
   }
@@ -107,14 +110,10 @@
   _updateContainer() {
-    const { knobRadius, knobPadding, strokeRadius, strokeWeight } = this.style;
+    const { knobRadius, knobPadding, strokeRadius, strokeWidth } = this.style;
 
-    let radius;
-    if (strokeRadius !== undefined) {
-      if (strokeRadius === 0) {
-        radius = 0;
-      } else {
-        radius = Math.max(0, strokeRadius - strokeWeight);
-      }
-    } else {
-      radius = Math.max(0, knobRadius + knobPadding + strokeWeight);
-    }
+    const radius =
+      strokeRadius !== undefined
+        ? strokeRadius === 0
+          ? strokeRadius
+          : Math.max(0, strokeRadius - strokeWidth)
+        : Math.max(0, knobRadius + knobPadding + strokeWidth);
 
@@ -125,6 +124,7 @@ this._Container.patch({
       texture: lng.Tools.getRoundRect(
-        this.w - 2 * strokeWeight,
-        this.h - 2 * strokeWeight,
+        // Compensating for the extra 2 pixels getRoundRect adds
+        this.w - strokeWidth * 2 - 2,
+        this.h - strokeWidth * 2 - 2,
         radius,
-        strokeWeight,
+        strokeWidth,
         0,
@@ -138,3 +138,3 @@ true,
   _updateStroke() {
-    const { knobRadius, knobPadding, strokeColor, strokeRadius, strokeWeight } =
+    const { knobRadius, knobPadding, strokeColor, strokeRadius, strokeWidth } =
       this.style;
@@ -146,8 +146,9 @@
       texture: lng.Tools.getRoundRect(
-        this.w,
-        this.h,
+        // Compensating for the extra 2 pixels getRoundRect adds
+        this.w - 2,
+        this.h - 2,
         strokeRadius !== undefined
           ? strokeRadius
-          : knobRadius + knobPadding + strokeWeight,
-        strokeWeight,
+          : knobRadius + knobPadding + strokeWidth,
+        strokeWidth,
         strokeColor,
@@ -162,2 +163,3 @@ false,
     const { knobHeight, knobWidth, knobRadius } = this.style;
+
     this._Knob.patch({
@@ -167,2 +169,3 @@ zIndex: 2,
       texture: lng.Tools.getRoundRect(
+        // Compensating for the extra 2 pixels getRoundRect adds
         knobWidth - 2,
@@ -169,0 +172,0 @@ knobHeight - 2,

src/components/Toggle/Toggle.styles.js

@@ -19,28 +19,30 @@ /**
 
-export const base = theme => ({
-  height: theme.spacer.xxl,
-  knobWidth: theme.spacer.xl,
-  knobHeight: theme.spacer.xl,
-  knobRadius: theme.radius.sm + theme.radius.xs,
-  knobPadding: theme.spacer.xxs,
-  knobX: theme.spacer.xs,
-  knobXChecked: theme.spacer.xxl + theme.spacer.xs,
-  strokeRadius: theme.radius.md,
-  strokeWeight: theme.stroke.sm,
-  width: theme.spacer.xxl * 2
-});
+export const base = theme => {
+  const knobSize = theme.spacer.xl;
+  const knobPadding = theme.spacer.xs;
+  const strokeWidth = theme.stroke.sm;
+  return {
+    height: knobSize + (knobPadding + strokeWidth) * 2,
+    knobWidth: knobSize,
+    knobHeight: knobSize,
+    knobRadius: knobSize / 2,
+    knobPadding,
+    strokeWidth,
+    width: (strokeWidth + knobPadding * 2 + knobSize) * 2
+  };
+};
 
 export const tone = theme => ({
   neutral: {
-    strokeColor: theme.color.fillInverse,
-    backgroundColor: theme.color.fillNeutralDisabled,
+    strokeColor: theme.color.fillNeutral,
+    backgroundColor: theme.color.fillInverseTertiary,
     backgroundColorChecked: theme.color.fillNeutral,
-    knobColor: theme.color.fillInverse,
+    knobColor: theme.color.fillNeutral,
     knobColorChecked: theme.color.fillInverse,
     mode: {
       disabled: {
-        strokeColor: theme.color.fillInverseDisabled,
-        backgroundColor: theme.color.fillNeutralDisabled,
+        strokeColor: theme.color.fillNeutralDisabled,
+        backgroundColor: theme.color.fillInverselDisabled,
         backgroundColorChecked: theme.color.fillNeutralDisabled,
-        knobColor: theme.color.fillInverseDisabled,
+        knobColor: theme.color.fillNeutralDisabled,
         knobColorChecked: theme.color.fillInverseDisabled
@@ -51,6 +53,6 @@ }
   inverse: {
-    strokeColor: theme.color.fillNeutral,
-    backgroundColor: theme.color.fillInverseDisabled,
+    strokeColor: theme.color.fillInverse,
+    backgroundColor: theme.color.fillNeutralTertiary,
     backgroundColorChecked: theme.color.fillInverse,
-    knobColor: theme.color.fillNeutral,
+    knobColor: theme.color.fillInverse,
     knobColorChecked: theme.color.fillNeutral,
@@ -61,5 +63,5 @@ mode: {
         backgroundColor: theme.color.fillNeutralDisabled,
-        backgroundColorChecked: theme.color.fillNeutralDisabled,
+        backgroundColorChecked: theme.color.fillInverseDisabled,
         knobColor: theme.color.fillInverseDisabled,
-        knobColorChecked: theme.color.fillInverseDisabled
+        knobColorChecked: theme.color.fillNeutralDisabled
       }
@@ -69,14 +71,14 @@ }
   brand: {
-    strokeColor: theme.color.fillNeutral,
-    backgroundColor: theme.color.fillInverseDisabled,
+    strokeColor: theme.color.fillBrand,
+    backgroundColor: theme.color.fillBrandTertiary,
     backgroundColorChecked: theme.color.fillBrand,
-    knobColor: theme.color.fillNeutral,
-    knobColorChecked: theme.color.fillNeutral,
+    knobColor: theme.color.fillBrand,
+    knobColorChecked: theme.color.fillInverse,
     mode: {
       disabled: {
         strokeColor: theme.color.fillNeutralDisabled,
-        backgroundColor: theme.color.fillInverseDisabled,
-        backgroundColorChecked: theme.color.fillInverseDisabled,
+        backgroundColor: theme.color.fillInverselDisabled,
+        backgroundColorChecked: theme.color.fillNeutralDisabled,
         knobColor: theme.color.fillNeutralDisabled,
-        knobColorChecked: theme.color.fillNeutralDisabled
+        knobColorChecked: theme.color.fillInverseDisabled
       }
@@ -83,0 +85,0 @@ }

src/components/Toggle/Toggle.test.js

@@ -29,3 +29,3 @@ /**
   strokeRadius: 20,
-  strokeWeight: 2,
+  strokeWidth: 2,
   knobWidth: 36,
@@ -100,6 +100,6 @@ knobHeight: 30,
       const uncheckedPosition =
-        styledToggle.style.strokeWeight + styledToggle.style.knobPadding;
+        styledToggle.style.strokeWidth + styledToggle.style.knobPadding;
       const checkedPosition =
         styledToggle.style.w -
-        styledToggle.style.strokeWeight -
+        styledToggle.style.strokeWidth -
         styledToggle.style.knobPadding -
@@ -106,0 +106,0 @@ styledToggle.style.knobWidth;

src/components/Toggle/ToggleSmall.styles.js

@@ -19,12 +19,15 @@ /**
 
-export const base = theme => ({
-  height: theme.spacer.md * 3,
-  strokeRadius: theme.radius.md * 0.75,
-  strokeWeight: theme.stroke.sm,
-  knobWidth: theme.spacer.lg,
-  knobHeight: theme.spacer.lg,
-  knobRadius: theme.radius.sm,
-  knobPadding: theme.spacer.xs,
-  knobXChecked: theme.spacer.xl + theme.spacer.xs,
-  width: theme.spacer.md * 6
-});
+export const base = theme => {
+  const knobSize = theme.spacer.lg;
+  const knobPadding = theme.spacer.xxs;
+  const strokeWidth = theme.stroke.sm;
+  return {
+    height: knobSize + (knobPadding + strokeWidth) * 2,
+    knobWidth: knobSize,
+    knobHeight: knobSize,
+    knobRadius: knobSize / 2,
+    knobPadding,
+    strokeWidth,
+    width: (strokeWidth + knobPadding * 2 + knobSize) * 2
+  };
+};

src/docs/constants.js

@@ -48,3 +48,4 @@ /**
       'Theme Properties',
-      '*'
+      'Hierarchy',
+      'Tutorial'
     ],
@@ -51,0 +52,0 @@ 'Unit Testing',

src/utils/index.js

@@ -135,3 +135,3 @@ /**
 
-export function isComponentOnScreen(component) {
+export function isComponentOnScreen(component, offsets = {}) {
   if (!component) return false;
@@ -147,5 +147,26 @@
 
-  const wVis = px >= 0 && px + w <= stageW;
-  const hVis = py >= 0 && py + h <= stageH;
+  let finalX = px;
+  let finalY = py;
+  // keep track of the different between the the absolute world position and relative position
+  const relativeOffsetX = px - component.x;
+  const relativeOffsetY = py - component.y;
+  const offsetX = offsets.offsetX - relativeOffsetX || 0;
+  const offsetY = offsets.offsetY - relativeOffsetY || 0;
+  // if the current component is animating, apply the relative offset to the transition value
+  if (component.transition('x')) {
+    finalX = px - component.x + component.transition('x').targetValue;
+  }
+  if (component.transition('y')) {
+    finalY = py - component.y + component.transition('y').targetValue;
+  }
+  // apply any offset passed into the function
+  // this is mainly used to parent components that are transitioning,
+  // like in the case of Rows nested inside of Columns where the Rows themselves do not animate,
+  // but their parent container does
+  finalX += offsetX;
+  finalY += offsetY;
 
+  const wVis = finalX >= 0 && finalX + w <= stageW;
+  const hVis = finalY >= 0 && finalY + h <= stageH;
+
   if (!wVis || !hVis) return false;
@@ -162,8 +183,9 @@
     const withinLeftClippingBounds =
-      Math.round(px + w) >= Math.round(leftBounds);
+      Math.round(finalX + w) >= Math.round(leftBounds);
     const withinRightClippingBounds =
-      Math.round(px) <= Math.round(leftBounds + clipWidth);
-    const withinTopClippingBounds = Math.round(py + h) >= Math.round(topBounds);
+      Math.round(finalX) <= Math.round(leftBounds + clipWidth);
+    const withinTopClippingBounds =
+      Math.round(finalY + h) >= Math.round(topBounds);
     const withinBottomClippingBounds =
-      Math.round(py + h) <= Math.round(topBounds + clipHeight);
+      Math.round(finalY + h) <= Math.round(topBounds + clipHeight);
 
@@ -170,0 +192,0 @@ return (

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

12244696

increased by0.23%

Number of package files

630

increased by0.16%

Lines of code

58145

increased by0.27%

No dependency changes