@material/fab - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

package.json

 {
   "name": "@material/fab",
   "description": "The Material Components for the web floating action button component",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "Apache-2.0",
@@ -11,6 +11,7 @@ "repository": {
   "dependencies": {
-    "@material/animation": "^0.1.1",
-    "@material/elevation": "^0.1.1",
-    "@material/theme": "^0.1.0"
+    "@material/animation": "^0.1.3",
+    "@material/elevation": "^0.1.2",
+    "@material/ripple": "^0.1.2",
+    "@material/theme": "^0.1.1"
   }
 }

README.md

@@ -17,3 +17,3 @@ # MDC FAB
 The demonstrations use the [Material Design Icon Font](https://design.google.com/icons/).
-You may include this to use them as shown or use any other icon method you wish. 
+You may include this to use them as shown or use any other icon method you wish.
 
@@ -85,2 +85,23 @@ ### Default
 
+### Adding ripples to FABs
+
+To add the ink ripple effect to a FAB, attach a [ripple](../packages/mdc-ripple) instance to the
+FAB element.
+
+```js
+mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-fab'));
+```
+
+You can also do this declaratively when using the [material-components-web](../packages/material-components-web) package.
+
+```html
+<button class="mdc-fab material-icons" aria-label="Favorite" data-mdc-auto-init="MDCRipple">
+  <span class="mdc-fab__icon">
+    favorite
+  </span>
+</button>
+```
+
+FABs are fully aware of ripple styles, so no DOM or CSS changes are required to use them.
+
 ## Classes
@@ -93,3 +114,3 @@
 ### Element
-The button component has a single `span` element added as a child of the button due to buttons not adhering to flexbox rules 
+The button component has a single `span` element added as a child of the button due to buttons not adhering to flexbox rules
 in all browsers. See [this Stackoverflow post](http://stackoverflow.com/posts/35466231/revisions) for details.
@@ -96,0 +117,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

47659

increased by115.88%

Lines of code

712

increased by87.86%

Number of lines in readme file

123

increased by20.59%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Added@material/ripple@^0.1.2

• + Added@material/base@0.1.3(transitive)

• + Added@material/ripple@0.1.2(transitive)

• Updated@material/animation@^0.1.3

• Updated@material/elevation@^0.1.2

• Updated@material/theme@^0.1.1