Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Socket
Sign inDemoInstall

@material/fab

Package Overview
Dependencies
Maintainers
17
Versions
1700
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@material/fab - npm Package Compare versions

Comparing version 4.0.0 to 5.0.0-canary.3cbee6dac.0

987

CHANGELOG.md

@@ -6,3 +6,3 @@ # Change Log

# [4.0.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0) (2019-11-02)
# [5.0.0-canary.3cbee6dac.0](https://github.com/material-components/material-components-web/compare/v4.0.0...v5.0.0-canary.3cbee6dac.0) (2019-11-15)

@@ -12,4 +12,5 @@

* **fab:** Add overflow: hidden; to ripple target to fix bounded ripple. ([#5214](https://github.com/material-components/material-components-web/issues/5214)) ([97cbbdc](https://github.com/material-components/material-components-web/commit/97cbbdc))
* **fab:** Use FAB ripple target selector ([#5146](https://github.com/material-components/material-components-web/issues/5146)) ([9d91acc](https://github.com/material-components/material-components-web/commit/9d91acc))
* **fab:** Add missing dep to fab package.json. ([#5236](https://github.com/material-components/material-components-web/issues/5236)) ([e0f6fd9](https://github.com/material-components/material-components-web/commit/e0f6fd9))
* **fab:** Add overflow: visible to make touch target visible in… ([#5241](https://github.com/material-components/material-components-web/issues/5241)) ([5850080](https://github.com/material-components/material-components-web/commit/5850080))
* **fab:** Adjust fab line-height ([#5254](https://github.com/material-components/material-components-web/issues/5254)) ([525989b](https://github.com/material-components/material-components-web/commit/525989b))

@@ -19,984 +20,12 @@

* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
* **touchtarget:** Rename mdc-touch-target-component => mdc… ([#5245](https://github.com/material-components/material-components-web/issues/5245)) ([afe0dd1](https://github.com/material-components/material-components-web/commit/afe0dd1))
### BREAKING CHANGES
### Features
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
* **fab:** Add support for increased touch target to mini FAB. ([#5231](https://github.com/material-components/material-components-web/issues/5231)) ([0c4d8f3](https://github.com/material-components/material-components-web/commit/0c4d8f3))
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.062ade5c0.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.062ade5c0.0) (2019-10-17)
### Bug Fixes
* **fab:** Use FAB ripple target selector ([#5146](https://github.com/material-components/material-components-web/issues/5146)) ([9d91acc](https://github.com/material-components/material-components-web/commit/9d91acc))
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.735147131.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.735147131.0) (2019-10-16)
### Bug Fixes
* **fab:** Use FAB ripple target selector ([#5146](https://github.com/material-components/material-components-web/issues/5146)) ([9d91acc](https://github.com/material-components/material-components-web/commit/9d91acc))
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.5dc45b82a.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.5dc45b82a.0) (2019-10-16)
### Bug Fixes
* **fab:** Use FAB ripple target selector ([#5146](https://github.com/material-components/material-components-web/issues/5146)) ([9d91acc](https://github.com/material-components/material-components-web/commit/9d91acc))
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.22d7ad2fb.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.22d7ad2fb.0) (2019-10-15)
### Bug Fixes
* **fab:** Use FAB ripple target selector ([#5146](https://github.com/material-components/material-components-web/issues/5146)) ([9d91acc](https://github.com/material-components/material-components-web/commit/9d91acc))
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.199534d61.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.199534d61.0) (2019-09-27)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.905884690.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.905884690.0) (2019-09-16)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.e851d4f40.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.e851d4f40.0) (2019-09-13)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.e09c3b770.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.e09c3b770.0) (2019-09-13)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.b58076d4b.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.b58076d4b.0) (2019-09-13)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.22916a234.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.22916a234.0) (2019-09-13)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.c7e991001.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.c7e991001.0) (2019-09-13)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [5.0.0-canary.b8513889d.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v5.0.0-canary.b8513889d.0) (2019-09-13)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.0c808fb33.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.0c808fb33.0) (2019-09-13)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.e3497b3e6.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.e3497b3e6.0) (2019-09-13)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.79d881baf.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.79d881baf.0) (2019-09-13)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.79d881baf.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.79d881baf.0) (2019-09-13)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.79d881baf.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.79d881baf.0) (2019-09-13)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.eab7903af.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.eab7903af.0) (2019-09-13)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.eab7903af.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.eab7903af.0) (2019-09-13)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [3.2.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v3.2.0) (2019-09-12)
**Note:** Version bump only for package @material/fab
# [4.0.0-edc72a4d7.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-edc72a4d7.0) (2019-09-09)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.1](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.1) (2019-09-09)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.1](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.1) (2019-09-09)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.0) (2019-09-05)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.0) (2019-09-05)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-canary.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.0) (2019-09-05)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-a9e694931.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-a9e694931.0) (2019-09-05)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-snapshot.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-snapshot.0) (2019-09-05)
### Code Refactoring
* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))
### BREAKING CHANGES
* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
```html
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
NEW
```html
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
```
# [4.0.0-alpha.0](https://github.com/material-components/material-components-web/compare/v3.1.0...v4.0.0-alpha.0) (2019-08-07)
**Note:** Version bump only for package @material/fab
# [3.1.0](https://github.com/material-components/material-components-web/compare/v3.0.0...v3.1.0) (2019-07-22)
### Bug Fixes
* **fab:** clear text decoration ([#4865](https://github.com/material-components/material-components-web/issues/4865)) ([b524a12](https://github.com/material-components/material-components-web/commit/b524a12))
# [3.1.0-alpha.0](https://github.com/material-components/material-components-web/compare/v3.0.0...v3.1.0-alpha.0) (2019-07-16)
### Bug Fixes
* **fab:** clear text decoration ([#4865](https://github.com/material-components/material-components-web/issues/4865)) ([b524a12](https://github.com/material-components/material-components-web/commit/b524a12))
# [3.1.0](https://github.com/material-components/material-components-web/compare/v3.0.0...v3.1.0) (2019-07-16)
### Bug Fixes
* **fab:** clear text decoration ([#4865](https://github.com/material-components/material-components-web/issues/4865)) ([b524a12](https://github.com/material-components/material-components-web/commit/b524a12))
* **touchtarget:** Renames mixin from mdc-touch-target-component => mdc-touch-target-margin

21

package.json
{
"name": "@material/fab",
"description": "The Material Components for the web floating action button component",
"version": "4.0.0",
"version": "5.0.0-canary.3cbee6dac.0",
"license": "MIT",

@@ -18,12 +18,13 @@ "keywords": [

"dependencies": {
"@material/animation": "^4.0.0",
"@material/elevation": "^4.0.0",
"@material/feature-targeting": "^4.0.0",
"@material/ripple": "^4.0.0",
"@material/rtl": "^4.0.0",
"@material/shape": "^4.0.0",
"@material/theme": "^4.0.0",
"@material/typography": "^4.0.0"
"@material/animation": "5.0.0-canary.3cbee6dac.0",
"@material/elevation": "5.0.0-canary.3cbee6dac.0",
"@material/feature-targeting": "5.0.0-canary.3cbee6dac.0",
"@material/ripple": "5.0.0-canary.3cbee6dac.0",
"@material/rtl": "5.0.0-canary.3cbee6dac.0",
"@material/shape": "5.0.0-canary.3cbee6dac.0",
"@material/theme": "5.0.0-canary.3cbee6dac.0",
"@material/touch-target": "5.0.0-canary.3cbee6dac.0",
"@material/typography": "5.0.0-canary.3cbee6dac.0"
},
"gitHead": "8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72"
"gitHead": "5ae37026c572ffe6707702e535533859ddc81a48"
}

18

README.md

@@ -146,2 +146,20 @@ <!--docs:

#### Accessibility
Material Design spec advises that touch targets should be at least 48x48px.
While the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:
```html
<div class="mdc-touch-target-wrapper">
<button class="mdc-fab mdc-fab--mini mdc-fab--touch">
<div class="mdc-fab__ripple"></div>
<span class="material-icons mdc-fab__icon">add</span>
<span class="mdc-fab__label">Create</span>
<div class="mdc-fab__touch"></div>
</button>
</div>
```
Note that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).
#### Positioning

@@ -148,0 +166,0 @@ 

_mixins.scss

Sorry, the diff of this file is not supported yet

dist/mdc.fab.css

Sorry, the diff of this file is not supported yet

dist/mdc.fab.css.map

Sorry, the diff of this file is not supported yet

dist/mdc.fab.min.css

Sorry, the diff of this file is not supported yet

dist/mdc.fab.min.css.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc