diff --git a/packages/fab/README.md b/packages/fab/README.md index 286c2a614..080d270f9 100644 --- a/packages/fab/README.md +++ b/packages/fab/README.md @@ -47,7 +47,8 @@ The Fab can be used with the `span`, `i`, `img` or `svg` elements. It can also b Prop Name | Type | Description --- | --- | --- className | String | Classes to be applied to the root element. -mini | n/a | Enables the mini variant. +exited | Boolean | When true animates the FAB out of view. When this false, the FAB will return to view. +mini | Boolean | Enables the mini variant. icon | Element | The icon. textLabel | String | The label, which makes the FAB extended. diff --git a/packages/fab/index.tsx b/packages/fab/index.tsx index 4d8e5864d..751a9cf5f 100644 --- a/packages/fab/index.tsx +++ b/packages/fab/index.tsx @@ -24,13 +24,15 @@ import * as React from 'react'; import * as classnames from 'classnames'; import * as Ripple from '@material/react-ripple'; -export interface FabProps extends Ripple.InjectedProps { - mini?: boolean; - icon?: React.ReactElement; - textLabel?: string; - className?: string; - initRipple: React.Ref; - unbounded: boolean; +export interface FabProps extends Ripple.InjectedProps, + React.ButtonHTMLAttributes { + exited?: boolean; + mini?: boolean; + icon?: React.ReactElement; + textLabel?: string; + className?: string; + initRipple: React.Ref; + unbounded: boolean; } const Icon: React.FunctionComponent<{icon?: React.ReactElement}> = ({icon}) => { @@ -54,6 +56,7 @@ const TextLabel: React.FunctionComponent<{textLabel: string}> = ({ export const Fab: React.FunctionComponent> = ({ /* eslint-disable react/prop-types */ + exited = false, mini = false, icon, textLabel = '', @@ -67,6 +70,7 @@ export const Fab: React.FunctionComponent { - return ( -
- favorite} - /> - favorite} - textLabel='Favorite' - /> - directions_transit} - /> - } /> - - - - - } - /> - - } - /> - favorite} - /> - directions_transit} - /> - } /> - - - - - } - /> - - } - /> - favorite} - /> - directions_transit} - /> - } - /> - - - - - } - /> - - } - /> - favorite} - /> - directions_transit} - /> - } - /> - - - - - } - /> - - } - /> - favorite} - /> - directions_transit} - /> - } - /> - - - - - } - /> - - } - /> - favorite} - /> - directions_transit} - /> - } - /> - - - - - } - /> - - } - /> -
- ); +class FabScreenshotTest extends React.Component<{}, {isHidden: boolean;}> { + state = {isHidden: false}; + + render() { + return ( +
+ favorite} + /> + favorite} + textLabel='Favorite' + /> + directions_transit} + /> + } /> + + + + + } + /> + + } + /> + favorite} + /> + directions_transit} + /> + } /> + + + + + } + /> + + } + /> + favorite} + /> + directions_transit} + /> + } + /> + + + + + } + /> + + } + /> + favorite} + /> + directions_transit} + /> + } + /> + + + + + } + /> + + } + /> + favorite} + /> + directions_transit} + /> + } + /> + + + + + } + /> + + } + /> + favorite} + /> + directions_transit} + /> + } + /> + + + + + } + /> + + } + /> + this.setState({isHidden: true})} + textLabel='Hide With Click' + icon={} + title='test' + /> + } + onClick={() => this.setState({isHidden: false})} + /> +
+ ); + } }; + export default FabScreenshotTest; diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index 3b4610792..383c5e6e0 100644 --- a/test/screenshot/golden.json +++ b/test/screenshot/golden.json @@ -3,7 +3,7 @@ "card": "b2fd82763c383be438ff6578083bf9009711c7470333d07eb916ab690fc42d31", "checkbox": "9c61177f0f927e178e7c6687d74cdfa08abc15ea8fc3c381f570b7c7d1f46d2a", "chips": "f5973cc5f1961464cbbbe152ca25b9a989e7e5a54b6d64cb28f0c25788f7df44", - "fab": "db36f52195c420062d91dd5ebe5432ad87247b3c1146fd547b0a195079bbce2f", + "fab": "fd6f12b48ef6fa61227230dd9803f192f935d9376d0a5106c744deb54ba42d83", "floating-label": "1d4d4f2e57e1769b14fc84985d1e6f53410c49aef41c9cf4fde94f938adefe57", "icon-button": "5ffb1f7fbd06d2c0533f6ba8d4d9ea170cec1a248a61de1cc1bb626cb58ebcd2", "layout-grid": "fe40f7a34853bc2a1d9a836e812599d4d47b5b26b839a8eaed7f98ea91946790", diff --git a/test/unit/fab/index.test.tsx b/test/unit/fab/index.test.tsx index 4baf94b66..290d9d757 100644 --- a/test/unit/fab/index.test.tsx +++ b/test/unit/fab/index.test.tsx @@ -32,6 +32,16 @@ test('has correct mini class', () => { assert.isTrue(wrapper.find('button').hasClass('mdc-fab--mini')); }); +test('has correct exited class', () => { + const wrapper = mount( + + + + ); + assert.isTrue(wrapper.find('button').hasClass('mdc-fab--exited')); +}); + + test('has correct extended class', () => { const icon = ; const wrapper = mount();