bemto-overflower - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

Changelog.md

 ## Changelog
 
+### v0.4.0 (2018-04-05)
+
+- Added stylelint (don't seem to work for some reason O_o?).
+- Updated deps.
+
 ### v0.3.0 (2018-03-05)
@@ -4,0 +9,0 @@

lib/Readme.md

@@ -91,1 +91,50 @@ This is an implementation of a flexible overflow element (see [article about it](http://kizu.ru/en/blog/flexible-overflow/)), which allows us to have a responsive text snippet that would adjust its content based on available space.
 You can see in the above example how you can control which styles would be applied to which part. However, it is not recommended to use this way of styling parts of Overflower — it is much better to style the elements that you would pass to them otherwise.
+
+### Gradient Overflow
+
+With the existent structure its really easy to create overflower that would be rendered as you'd like. For example, we can make an overflow into a gradient, which when placed over a solid background of the same color would make it look like a gradient fade:
+
+    const GradientOverflower = BemtoOverflower.extend.attrs({
+      __Overflow: " "
+    })`
+      &__Overflow {
+        position: relative;
+        z-index: 1;
+        
+        margin-bottom: -1.5em;
+
+        background:
+          linear-gradient(to left, #FFF, rgba(255, 255, 255, 0))
+          no-repeat 100% 0/50px 100%;
+      }
+    `;
+
+    <GradientOverflower>
+      Some really long text that fades into a gradient overlay.
+    </GradientOverflower>
+
+This works really easily: instead of an overflower with some extra text, we make it empty (but containing just a single nbsp in order not to lose the baseline), but then make it not to take any space by utilizing a negative margin, then moving it in front of our content using z-index and now we can make any visual effect for our fade, in our example — white gradient.
+
+Note how this gradient would appear only when there won't be enough space for our original text: it uses the same method as our usual overflower, which is really handy.
+
+Its also really easy to utilize a mask in case its browser support is ok for you and you want to have your overflower over any background, not necessary solid:
+
+    const MaskOverflower = BemtoOverflower.extend.attrs({
+      __Overflow: props => props.children
+    })`
+      @supports (mask-image: none) {
+        &__Overflow {
+          text-overflow: clip;
+          mask-image:
+            linear-gradient(to right, #000, #000 calc(100% - 50px), transparent);
+        }
+      }
+    `;
+
+    <div style={{ background: 'linear-gradient(to top right, pink, orange)', padding: 40 }}>
+      <MaskOverflower>
+        Some really long text that fades into a proper gradient mask.
+      </MaskOverflower>
+    </div>
+
+You can see how its even less code, though we duplicate (automatically) our content inside overflower in order to use a mask for it. It would also fallback to default ellipsis when there'd be no `mask-image` support.

package.json

 {
   "name": "bemto-overflower",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Flexible content overflow based on bemto-components & styled-components",
   "main": "lib/index.js",
   "scripts": {
+    "lint:css": "stylelint 'lib/**/*.js'",
     "test": "jest"
@@ -27,3 +28,3 @@ },
   "dependencies": {
-    "bemto-components": "^2.0.0"
+    "bemto-components": "^2.3.1"
   },
@@ -38,4 +39,8 @@ "peerDependencies": {
     "jest-styled-components": "^5.0.0",
-    "react-test-renderer": "16.1.1"
+    "react-test-renderer": "16.1.1",
+    "stylelint": "^9.2.0",
+    "stylelint-config-standard": "^18.2.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-processor-styled-components": "^1.3.1"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

19629

increased by17.55%

Number of package files

13

increased by8.33%

Worsened metrics

Dev dependency count

9

increased by80%

Dependency changes

• Updatedbemto-components@^2.3.1