Merge pull request mui#3621 from heetvachhani/addDescription

[Card] Document card subcomponent properties
Dashlane · Mar 9, 2016 · 5884e01 · 5884e01
2 parents ea2d973 + cc8b94e
commit 5884e01
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 3 deletions.
diff --git a/src/card/card-actions.jsx b/src/card/card-actions.jsx
@@ -16,9 +16,24 @@ function getStyles() {
 const CardActions = React.createClass({
 
   propTypes: {
+    /**
+     * If true, a click on this card component expands the card.
+     */
     actAsExpander: React.PropTypes.bool,
+
+    /**
+     * Can be used to render elements inside the Card Action.
+     */
     children: React.PropTypes.node,
+
+    /**
+     * If true, this card component is expandable.
+     */
     expandable: React.PropTypes.bool,
+
+    /**
+     * If true, this card component will include a button to expand the card.
+     */
     showExpandableButton: React.PropTypes.bool,
 
     /**

diff --git a/src/card/card-header.jsx b/src/card/card-header.jsx
@@ -38,22 +38,69 @@ function getStyles(props, state) {
 const CardHeader = React.createClass({
 
   propTypes: {
+    /**
+     * If true, a click on this card component expands the card.
+     */
     actAsExpander: React.PropTypes.bool,
+
+    /**
+     * This is the [Avatar](/#/components/avatar) element to be displayed on the Card Header.
+     */
     avatar: React.PropTypes.node,
+
+    /**
+     * Can be used to render elements inside the Card Header.
+     */
     children: React.PropTypes.node,
+
+    /**
+     * If true, this card component is expandable.
+     */
     expandable: React.PropTypes.bool,
+
+    /**
+     * If true, this card component will include a button to expand the card.
+     */
     showExpandableButton: React.PropTypes.bool,
 
     /**
      * Override the inline-styles of the root element.
      */
     style: React.PropTypes.object,
+
+    /**
+     * Can be used to render a subtitle in Card Header.
+     */
     subtitle: React.PropTypes.node,
+
+    /**
+     * Override the subtitle color.
+     */
     subtitleColor: React.PropTypes.string,
+
+    /**
+     * Override the inline-styles of the subtitle.
+     */
     subtitleStyle: React.PropTypes.object,
+
+    /**
+     * Override the inline-styles of the text.
+     */
     textStyle: React.PropTypes.object,
+
+    /**
+     * Can be used to render a title in Card Header.
+     */
     title: React.PropTypes.node,
+
+    /**
+     * Override the title color.
+     */
     titleColor: React.PropTypes.string,
+
+    /**
+     * Override the inline-styles of the title.
+     */
     titleStyle: React.PropTypes.object,
   },
 

diff --git a/src/card/card-media.jsx b/src/card/card-media.jsx
@@ -41,13 +41,44 @@ function getStyles(props, state) {
 const CardMedia = React.createClass({
 
   propTypes: {
+    /**
+     * If true, a click on this card component expands the card.
+     */
     actAsExpander: React.PropTypes.bool,
+
+    /**
+     * Can be used to render elements inside the Card Media.
+     */
     children: React.PropTypes.node,
+
+    /**
+     * If true, this card component is expandable.
+     */
     expandable: React.PropTypes.bool,
+
+    /**
+     * Override the inline-styles of the Card Media.
+     */
     mediaStyle: React.PropTypes.object,
+
+    /**
+     * Can be used to render overlay element in Card Media.
+     */
     overlay: React.PropTypes.node,
+
+    /**
+     * Override the inline-styles of the overlay container.
+     */
     overlayContainerStyle: React.PropTypes.object,
+
+    /**
+     * Override the inline-styles of the overlay content.
+     */
     overlayContentStyle: React.PropTypes.object,
+
+    /**
+     * Override the inline-styles of the overlay element.
+     */
     overlayStyle: React.PropTypes.object,
 
     /**

diff --git a/src/card/card-text.jsx b/src/card/card-text.jsx
@@ -18,9 +18,24 @@ function getStyles(props, state) {
 const CardText = React.createClass({
 
   propTypes: {
+    /**
+     * If true, a click on this card component expands the card.
+     */
     actAsExpander: React.PropTypes.bool,
+
+    /**
+     * Can be used to render elements inside the Card Text.
+     */
     children: React.PropTypes.node,
+
+    /**
+     * Override the CardText color.
+     */
     color: React.PropTypes.string,
+
+    /**
+     * If true, this card component is expandable.
+     */
     expandable: React.PropTypes.bool,
 
     /**

diff --git a/src/card/card-title.jsx b/src/card/card-title.jsx
@@ -26,20 +26,59 @@ function getStyles(props, state) {
 const CardTitle = React.createClass({
 
   propTypes: {
+    /**
+     * If true, a click on this card component expands the card.
+     */
     actAsExpander: React.PropTypes.bool,
+
+    /**
+     * Can be used to render elements inside the Card Title.
+     */
     children: React.PropTypes.node,
+
+    /**
+     * If true, this card component is expandable.
+     */
     expandable: React.PropTypes.bool,
+
+    /**
+     * If true, this card component will include a button to expand the card.
+     */
     showExpandableButton: React.PropTypes.bool,
 
     /**
      * Override the inline-styles of the root element.
      */
     style: React.PropTypes.object,
+
+    /**
+     * Can be used to render a subtitle in the Card Title.
+     */
     subtitle: React.PropTypes.node,
+
+    /**
+     * Override the subtitle color.
+     */
     subtitleColor: React.PropTypes.string,
+
+    /**
+     * Override the inline-styles of the subtitle.
+     */
     subtitleStyle: React.PropTypes.object,
+
+    /**
+     * Can be used to render a title in the Card Title.
+     */
     title: React.PropTypes.node,
+
+    /**
+     * Override the title color.
+     */
     titleColor: React.PropTypes.string,
+
+    /**
+     * Override the inline-styles of the title.
+     */
     titleStyle: React.PropTypes.object,
   },
 

diff --git a/src/card/card.jsx b/src/card/card.jsx
@@ -6,7 +6,7 @@ const Card = React.createClass({
 
   propTypes: {
     /**
-     * Whether a click on this card component expands the card. Can be set on any child of the Card component.
+     * If true, a click on this card component expands the card. Can be set on any child of the `Card` component.
      */
     actAsExpander: React.PropTypes.bool,
 
@@ -16,7 +16,7 @@ const Card = React.createClass({
     children: React.PropTypes.node,
 
     /**
-     * Whether this card component is expandable. Can be set on any child of the Card component.
+     * If true, this card component is expandable. Can be set on any child of the `Card` component.
      */
     expandable: React.PropTypes.bool,
 
@@ -40,7 +40,7 @@ const Card = React.createClass({
     onExpandChange: React.PropTypes.func,
 
     /**
-     * Whether this card component include a button to expand the card. `CardTitle`,
+     * If true, this card component will include a button to expand the card. `CardTitle`,
      * `CardHeader` and `CardActions` implement `showExpandableButton`. Any child component
      * of `Card` can implements `showExpandableButton` or forwards the property to a child
      * component supporting it.