breaking(CardAction): Aligning with IconButton props.

rmwc · Aug 28, 2018 · 6901499 · 6901499
1 parent 9a675b3
commit 6901499
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 35 deletions.
diff --git a/src/Card/card.md b/src/Card/card.md
@@ -55,10 +55,8 @@ import { Typography } from 'rmwc/Typography';
     </CardActionButtons>
     <CardActionIcons>
       <CardAction
-        onLabel="Remove from favorites"
-        onContent="favorite"
-        offLabel="Add to favorites"
-        offContent="favorite_border"
+        onIcon="favorite"
+        icon="favorite_border"
       />
       <CardAction icon="share" />
       <CardAction icon="more_vert" />
@@ -179,10 +177,8 @@ import {
   <CardActions>
     <CardActionIcons>
       <CardAction
-        onLabel="Remove from favorites"
-        onContent="favorite"
-        offLabel="Add to favorites"
-        offContent="favorite_border"
+        onIcon="favorite"
+        icon="favorite_border"
       />
       <CardAction icon="bookmark_border" />
       <CardAction icon="share" />
@@ -201,5 +197,5 @@ import { DocumentComponent } from 'rmwc/Base/utils/DocumentComponent';
 <DocumentComponent displayName="CardActions" />
 <DocumentComponent displayName="CardActionButtons" />
 <DocumentComponent displayName="CardActionIcons" />
-<DocumentComponent displayName="CardAction" />
+<DocumentComponent displayName="CardAction" composes={['IconButton', 'Icon', 'Button']}/>
 ```
diff --git a/src/Card/index.js b/src/Card/index.js
@@ -102,10 +102,7 @@ export const CardActionIcons = simpleTag({
   classNames: 'mdc-card__action-icons'
 });
 
-export type CardActionPropsT = {
-  /** Forces the action to be an icon. In most cases, this will be determined for you. */
-  isIcon?: boolean
-} & IconButtonPropsT;
+export type CardActionPropsT = IconButtonPropsT;
 
 const CardActionIcon = simpleTag({
   tag: IconButton,
@@ -122,12 +119,10 @@ export class CardAction extends React.Component<CardActionPropsT> {
   static displayName = 'CardAction';
 
   render() {
-    const { isIcon, ...rest } = this.props;
-    const { onContent, offContent, use } = this.props;
-    return isIcon || onContent || offContent || use ? (
-      <CardActionIcon {...rest} />
+    return this.props.icon ? (
+      <CardActionIcon {...this.props} />
     ) : (
-      <CardActionButton {...rest} />
+      <CardActionButton {...this.props} />
     );
   }
 }

diff --git a/src/IconButton/index.js b/src/IconButton/index.js
@@ -94,7 +94,6 @@ class IconButtonToggle extends withFoundation({
 
   syncWithProps(nextProps: IconButtonPropsT) {
     // checked
-    console.log(nextProps.checked, this.on);
     syncFoundationProp(nextProps.checked, this.on, () => {
       this.on = !!nextProps.checked;
     });

diff --git a/src/docs/App.js b/src/docs/App.js
@@ -18,12 +18,7 @@ import {
 import { Theme } from 'rmwc/Theme';
 import { TabBar, Tab } from 'rmwc/Tabs';
 
-import {
-  Drawer,
-  DrawerContent,
-  DrawerScrim,
-  DrawerAppContent
-} from 'rmwc/Drawer';
+import { Drawer, DrawerContent, DrawerAppContent } from 'rmwc/Drawer';
 
 import {
   ListItem,

diff --git a/src/docs/docgen.json b/src/docs/docgen.json
@@ -167,16 +167,7 @@
     {
       "description": "A Card action Button. Depending on the props that are passed, this will either render an instance of the Button component, or the IconButton component.",
       "displayName": "CardAction",
-      "methods": [],
-      "props": {
-        "isIcon": {
-          "flowType": {
-            "name": "boolean"
-          },
-          "required": false,
-          "description": "Forces the action to be an icon. In most cases, this will be determined for you."
-        }
-      }
+      "methods": []
     }
   ],
   "src/Checkbox/index.js": [