gestalt - npm Package Compare versions

Comparing version 0.17.0 to 0.17.1-beta1

package.json

 {
   "name": "gestalt",
-  "version": "0.17.0",
+  "version": "0.17.1-beta1",
   "license": "SEE LICENSE IN LICENSE",
@@ -140,2 +140,8 @@ "homepage": "https://pinterest.github.io/gestalt",
       "max-nesting-depth": 0,
+      "media-feature-name-no-unknown": [
+        true,
+        {
+          "ignoreMediaFeatureNames": "inverted-colors"
+        }
+      ],
       "no-descending-specificity": true,
@@ -142,0 +148,0 @@ "no-duplicate-selectors": true,

src/Heading/__docs__/Heading-doc.js

@@ -16,3 +16,2 @@ // @flow
   color?: 'blue' | 'darkGray' | 'gray' | 'red' | 'white', /* default: darkGray */
-  overflow?: 'normal' | 'breakWord' /* default: normal */
   size: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
@@ -109,3 +108,3 @@ truncate?: bool, /* default: false */
 <Heading>White</Heading>
-<Heading overflow="breakWord">WordWrap</Heading>
+<Heading>WordWrap</Heading>
 <Heading truncate>WordWrap</Heading>
@@ -120,3 +119,3 @@ \`\`\`
     <br />
-    <Heading size="xs" overflow="breakWord">
+    <Heading size="xs">
       This is a long and Supercalifragilisticexpialidocious
@@ -123,0 +122,0 @@ sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉

src/Heading/Heading.js

@@ -27,3 +27,2 @@ // @flow
   color?: Color,
-  overflow?: 'normal' | 'breakWord',
   size: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
@@ -39,3 +38,2 @@ truncate?: bool,
     size,
-    overflow = 'normal',
     truncate = false,
@@ -52,6 +50,4 @@ } = props;
     headingColor(color),
-    {
-      'break-word': overflow === 'breakWord',
-      truncate,
-    },
+    'break-word',
+    truncate,
   );
@@ -67,5 +63,4 @@
   color: PropTypes.oneOf(['blue', 'darkGray', 'gray', 'red', 'white']),
-  overflow: PropTypes.oneOf(['normal', 'breakWord']),
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']).isRequired,
   truncate: PropTypes.bool,
 };

src/Icon/__docs__/Icon-doc.js

@@ -23,2 +23,3 @@ // @flow
   icon: $Keys<typeof paths>,
+  inline?: boolean,
   size?: number, /* default: 16 */
@@ -25,0 +26,0 @@ };

src/Image/__docs__/Image-doc.js

@@ -19,4 +19,6 @@ // @flow
   alt: string,
+  children?: any,
   color: string,
-  height: number,
+  naturalHeight: number,
+  naturalWidth: number,
   onError?: () => void,
@@ -27,3 +29,2 @@ onLoad?: () => void,
   srcSet?: {[key: string]: string},
-  width: number, /* default: false */
 };
@@ -30,0 +31,0 @@ \`\`\`

src/Masonry/Masonry.js

@@ -5,2 +5,3 @@ // @flow
 import ReactDOM from 'react-dom';
+import MasonryComponentWrapper from './MasonryComponentWrapper';
 import ScrollFetch from '../ScrollFetch/ScrollFetch';
@@ -395,6 +396,9 @@ import styles from './Masonry.css';
         // Increase top values of other items
-        for (let i = itemIdx + 1; i < gridItems[colIdx].length; i += 1) {
-          const gridItem = gridItems[colIdx][i];
-          gridItem.top = gridItems[colIdx][i - 1].bottom;
-          gridItem.bottom = gridItem.top + gridItem.height + this.gutterWidth;
+        if (itemIdx < gridItems[colIdx].length - 1) {
+          const offset = gridItems[colIdx][itemIdx].bottom - gridItems[colIdx][itemIdx + 1].top;
+          for (let i = itemIdx + 1; i < gridItems[colIdx].length; i += 1) {
+            const gridItem = gridItems[colIdx][i];
+            gridItem.top += offset;
+            gridItem.bottom += offset;
+          }
         }
@@ -579,3 +583,3 @@ } else {
   itemIsVisible(item: GridItemType<T>) {
-    return item.bottom < this.state.viewportTop || item.top > this.state.viewportBottom;
+    return !(item.bottom < this.state.viewportTop || item.top > this.state.viewportBottom);
   }
@@ -592,2 +596,6 @@
   render() {
+    const itemClassName = [
+      this.state.serverItems ? 'static' : styles.Masonry__Item,
+      this.state.mounted ? styles.Masonry__Item__Mounted : ''
+    ].join(' ');
     return (
@@ -607,6 +615,3 @@ <div
           <div
-            className={`
-              ${this.state.serverItems ? 'static ' : styles.Masonry__Item}
-              ${this.state.mounted ? styles.Masonry__Item__Mounted : ''}
-            `}
+            className={itemClassName}
             data-grid-item
@@ -619,3 +624,3 @@ key={item.key}
               ...(this.itemWidth ? { width: (this.itemWidth - this.gutterWidth) } : {}),
-              ...(this.itemIsVisible(item) ? { display: 'none', transition: 'none' } : {})
+              ...(this.itemIsVisible(item) ? {} : { display: 'none', transition: 'none' })
             }}
@@ -629,3 +634,6 @@ {...this.state.serverItems ? { ref: (ref) => { this.serverRefs.push(ref); } } : {}}
             >
-              {item.component}
+              <MasonryComponentWrapper
+                isInViewport={this.itemIsVisible(item)}
+                component={item.component}
+              />
             </div>
@@ -632,0 +640,0 @@ </div>,

src/Modal/__docs__/Modal-doc.js

@@ -46,5 +46,5 @@ // @flow
       <Divider />
-      <Text><b>sm:</b> 435px</Text>
+      <Text><b>sm:</b> 414px</Text>
       <Text><b>md:</b> 544px</Text>
-      <Text><b>lg:</b> 800px</Text>
+      <Text><b>lg:</b> 804px</Text>
       <Text italic>
@@ -51,0 +51,0 @@ If you need additional sizes, please let us know!

src/Modal/Modal.js

@@ -10,5 +10,5 @@ // @flow
 const SIZE_WIDTH_MAP = {
-  sm: 435,
+  sm: 414,
   md: 544,
-  lg: 800,
+  lg: 804,
 };
@@ -15,0 +15,0 @@

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

1501009

increased by0.66%

Number of package files

226

increased by0.44%

Lines of code

25162

increased by0.42%

No dependency changes