@material/fab - npm Package Compare versions

Comparing version 0.3.16 to 0.4.0

package.json

 {
   "name": "@material/fab",
   "description": "The Material Components for the web floating action button component",
-  "version": "0.3.16",
+  "version": "0.4.0",
   "license": "Apache-2.0",
@@ -19,5 +19,5 @@ "keywords": [
     "@material/elevation": "^0.1.11",
-    "@material/ripple": "^0.8.5",
-    "@material/theme": "^0.2.0"
+    "@material/ripple": "^0.8.6",
+    "@material/theme": "^0.3.0"
   }
 }

README.md

@@ -78,3 +78,3 @@ <!--docs:
 By default the FAB rests in the page where it sits in the content flow.
-Developers must position it as-needed within their applications designs.
+Developers must position it as needed within their application's design.
 
@@ -84,3 +84,3 @@ ```html
   This will position the FAB in the bottom-right corner.
-  Modify to fit your designs requirements.
+  Modify to fit your design's requirements.
 -->
@@ -133,4 +133,2 @@ <style>
 
-## Classes
-
 ### Block
@@ -141,12 +139,36 @@
 ### Element
+
 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.
 
-### Modifier
+### CSS Classes
 
-The provided modifiers are:
+CSS Class | Description
+--- | ---
+`mdc-fab--mini` | Makes the fab smaller (40 x 40 pixels)
+`mdc-fab--plain` | Makes the FAB have a white background
 
-| Class             | Description                             |
-| ------------------| --------------------------------------- |
-| `mdc-fab--mini`   | Makes the fab smaller (40 x 40 pixels). |
-| `mdc-fab--plain`  | Makes the FAB have a white background.  |
+> **NOTE**: No disabled styles are defined for FABs, as they are intended to denote a promoted action, and should not be
+> displayed in a disabled state. If there is ever a situation where a FAB should *not* perform an action,
+> an explanation should be presented to the user.
+
+### Sass Mixins
+
+The following mixins are intended for advanced users. By default a FAB will inherit its color from the theme.
+These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to 
+completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color.
+It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.
+
+#### `mdc-fab-container-color($color)`
+
+Changes the FAB's container color to the given color.
+
+#### `mdc-fab-ink-color($color)`
+
+Changes the FAB's ink color to the given color.
+
+#### `mdc-fab-ripple($ripple-config)`
+
+Changes the FAB's ripple to the given ripple configuration (see the [mdc-ripple README][ripple-readme]).
+
+[ripple-readme]: https://github.com/material-components/material-components-web/blob/master/packages/mdc-ripple/README.md

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

32866

increased by5.94%

Number of package files

6

increased by20%

Number of lines in readme file

171

increased by14.77%

Worsened metrics

Lines of code

376

decreased by-1.31%

Dependency changes

• + Added@material/theme@0.3.1(transitive)

• - Removed@material/theme@0.2.0(transitive)

• Updated@material/ripple@^0.8.6

• Updated@material/theme@^0.3.0