feat(Fab): add cssOnly support

rmwc · Dec 18, 2017 · 951391e · 951391e
1 parent 71a82b2
commit 951391e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git a/src/Base/withRipple.js b/src/Base/withRipple.js
@@ -17,7 +17,7 @@ export const withRipple = (
     static displayName = `withRipple(${Component.displayName || 'Unknown'})`;
     render() {
       const { ripple, ...rest } = this.props;
-      if (ripple) {
+      if (ripple && !rest.cssOnly) {
         return (
           <Ripple>
             <Component {...rest} />

diff --git a/src/Fab/fab.story.js b/src/Fab/fab.story.js
@@ -7,12 +7,18 @@ import { Fab } from './';
 
 // storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
 
-storiesOf('Buttons', module).add('Fab', () => (
-	<Fab
-		mini={boolean('mini', false)}
-		ripple={boolean('ripple', true)}
-		onClick={action('clicked')}
-	>
-		favorite
-	</Fab>
-));
+storiesOf('Buttons', module)
+  .add('Fab', () => (
+    <Fab
+      mini={boolean('mini', false)}
+      ripple={boolean('ripple', true)}
+      onClick={action('clicked')}
+    >
+      favorite
+    </Fab>
+  ))
+  .add('cssOnly Fab', () => (
+    <Fab cssOnly mini={boolean('mini', false)} onClick={action('clicked')}>
+      favorite
+    </Fab>
+  ));
diff --git a/src/Fab/index.js b/src/Fab/index.js
@@ -11,7 +11,9 @@ import type { RMWCProviderOptionsT } from '../Provider';
 
 export type FabRootPropsT = {
   /** Make the Fab smaller. */
-  mini?: boolean
+  mini?: boolean,
+  /** cssOnly Fab. */
+  cssOnly?: boolean
 } & SimpleTagPropsT &
   WithRipplePropsT;
 
@@ -26,9 +28,10 @@ export const FabRoot = withRipple(
       }
     ],
     defaultProps: {
+      cssOnly: false,
       mini: false
     },
-    consumeProps: ['mini']
+    consumeProps: ['mini', 'cssOnly']
   })
 );