@material/fab - npm Package Compare versions

Comparing version 0.35.0 to 0.36.0-0

package.json

 {
   "name": "@material/fab",
   "description": "The Material Components for the web floating action button component",
-  "version": "0.35.0",
+  "version": "0.36.0-0",
   "license": "Apache-2.0",
@@ -19,5 +19,5 @@ "keywords": [
     "@material/elevation": "^0.35.0",
-    "@material/ripple": "^0.35.0",
+    "@material/ripple": "^0.36.0-0",
     "@material/theme": "^0.35.0"
   }
 }

README.md

@@ -14,3 +14,3 @@ <!--docs:
   <a class="article__asset-link"
-     href="https://material-components-web.appspot.com/fab.html">
+     href="https://material-components.github.io/material-components-web-catalog/#/component/fab">
     <img src="{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png" width="78" alt="Floating action button screenshot">
@@ -26,6 +26,6 @@ </a>
   <li class="icon-list-item icon-list-item--spec">
-    <a href="https://material.io/guidelines/components/buttons-floating-action-button.html">Material Design guidelines: Floating Action Button</a>
+    <a href="https://material.io/go/design-fab">Material Design guidelines: Floating Action Button</a>
   </li>
   <li class="icon-list-item icon-list-item--link">
-    <a href="https://material-components-web.appspot.com/fab.html">Demo</a>
+    <a href="https://material-components.github.io/material-components-web-catalog/#/component/fab">Demo</a>
   </li>
@@ -40,3 +40,3 @@ </ul>
 
-## Usage
+## Basic Usage
 
@@ -56,6 +56,4 @@ ### Load Material Icons
 ```html
-<button class="mdc-fab material-icons" aria-label="Favorite">
-  <span class="mdc-fab__icon">
-    favorite
-  </span>
+<button class="mdc-fab" aria-label="Favorite">
+  <span class="mdc-fab__icon material-icons">favorite</span>
 </button>
@@ -66,2 +64,24 @@ ```
 
+> _NOTE:_ IE 11 will not center the icon properly if there is a newline or space after the material icon text.
+
+### Styles
+
+```scss
+@import "@material/fab/mdc-fab";
+```
+
+### JavaScript Instantiation
+
+The FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.
+
+```js
+import {MDCRipple} from '@material/ripple';
+
+const fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));
+```
+
+> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.
+
+## Style Customization
+
 ### CSS Classes
@@ -78,4 +98,32 @@
 
-### Absolutely Positioned
+### Sass Mixins
 
+#### Basic Sass Mixins
+
+MDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.
+
+Mixin | Description
+--- | ---
+`mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.
+
+#### Advanced Sass Mixins
+
+> **A note about advanced mixins**, The following mixins are intended for advanced users. 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.**
+
+Mixin | Description
+--- | ---
+`mdc-fab-container-color($color)` | Sets the container color to the given color
+`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.
+`mdc-fab-ink-color($color)` | Sets the ink color to the given color
+
+The ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.
+
+#### Caveat: Edge and CSS Variables
+
+In browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-fab-container-color` mixin, you must pass in an actual color value for support in Edge.
+
+### Additional Information
+
+#### Positioning
+
 Developers must position MDC FAB as needed within their application's design.
@@ -102,54 +150,5 @@
 </style>
-<button class="mdc-fab material-icons app-fab--absolute" aria-label="Favorite">
-  <span class="mdc-fab__icon">
-    favorite
-  </span>
+<button class="mdc-fab app-fab--absolute" aria-label="Favorite">
+  <span class="mdc-fab__icon material-icons">favorite</span>
 </button>
 ```
-
-### Adding MDC Ripple
-
-To add the ripple effect to an MDC FAB, attach a [ripple](../mdc-ripple) instance to the
-`mdc-fab` element.
-
-```js
-mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-fab'));
-```
-
-You can also do this declaratively when using the [material-components-web](../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>
-```
-
-MDC FAB is fully aware of MDC Ripple styles, so no DOM or CSS changes are required.
-
-### Sass Mixins
-
-By default an MDC FAB will inherit its color from the theme. This mixin will override the color of the MDC FAB's container, but maintain accessibility standards for the ink and ripple. The mixin is intended for customizing an MDC FAB's color to a non-theme color.
-
-#### `mdc-fab-accessible($container-color)`
-
-Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.
-
-### Advanced Sass Mixins
-
-> **A note about advanced mixins**, The following mixins are intended for advanced users. 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.**
-
-Mixin | Description
---- | ---
-`mdc-fab-container-color($color)` | Sets the container color to the given color
-`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.
-`mdc-fab-ink-color($color)` | Sets the ink color to the given color
-
-The ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.
-
-#### Caveat: Edge and CSS Variables
-
-In browsers that fully support CSS variables, the above mixins will hook up styles using CSS variables if a theme property is passed.
-However, due to Edge's buggy CSS variable support, `mdc-fab-container-color` will not honor CSS variables in Edge.
-This means you will need to override FAB container styles manually for Edge if you are altering the affected CSS variables for theme properties (FAB uses secondary by default for the container fill color).

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

26088

increased by1.8%

Lines of code

229

increased by2.23%

Worsened metrics

Number of lines in readme file

148

decreased by-0.67%

Dependency changes

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

• - Removed@material/ripple@0.35.0(transitive)

• Updated@material/ripple@^0.36.0-0