fix(patternfly-4/react-core): add missing comments to component props (…

…#695)

affects: patternfly4-react-lerna-root, @patternfly/react-core

ISSUES CLOSED: #538

packages/patternfly-4/react-core/src/components/Alert/Alert.js

@@ -16,11 +16,17 @@ export const AlertVariant = {
 };
 
 const propTypes = {
+  /** Adds Alert variant styles */
   variant: PropTypes.oneOf(Object.values(AlertVariant)).isRequired,
+  /** Action button to put in the Alert */
   action: PropTypes.node,
+  /** Title of the Alert */
   title: PropTypes.string,
+  /** content rendered inside the Alert */
   children: PropTypes.node,
+  /** additional classes added to the Alert */
   className: PropTypes.string,
+  /** Adds accessible text to the Alert */
   'aria-label': PropTypes.string
 };
 

packages/patternfly-4/react-core/src/components/Badge/Badge.js

@@ -5,8 +5,11 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/patternfly-next/components/Badge/badge.css';
 
 export const propTypes = {
+  /**  Adds styling to the badge to indicate it has been read */
   isRead: PropTypes.bool,
+  /** content rendered inside the Badge */
   children: PropTypes.node,
+  /** additional classes added to the Badge */
   className: PropTypes.string
 };
 

packages/patternfly-4/react-core/src/components/Card/Card.js

@@ -5,8 +5,11 @@ import styles from '@patternfly/patternfly-next/components/Card/card.css';
 import { componentShape } from '../../internal/componentShape';
 
 const propTypes = {
+  /** content rendered inside the Card */
   children: PropTypes.any,
+  /** additional classes added to the Card */
   className: PropTypes.string,
+  /** Sets the base component to render. defaults to article */
   component: componentShape
 };
 

packages/patternfly-4/react-core/src/components/Card/CardBody.js

@@ -5,8 +5,11 @@ import styles from '@patternfly/patternfly-next/components/Card/card.css';
 import { componentShape } from '../../internal/componentShape';
 
 const propTypes = {
+  /** content rendered inside the Card Body */
   children: PropTypes.any,
+  /** additional classes added to the Card Body */
   className: PropTypes.string,
+  /** Sets the base component to render. defaults to div */
   component: componentShape
 };
 

packages/patternfly-4/react-core/src/components/Card/CardFooter.js

@@ -5,8 +5,11 @@ import styles from '@patternfly/patternfly-next/components/Card/card.css';
 import { componentShape } from '../../internal/componentShape';
 
 const propTypes = {
+  /** content rendered inside the Card Footer */
   children: PropTypes.any,
+  /** additional classes added to the Footer */
   className: PropTypes.string,
+  /** Sets the base component to render. defaults to div */
   component: componentShape
 };
 

packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.js

@@ -4,15 +4,17 @@ import { css } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
 
 const propTypes = {
-  children: PropTypes.node,
+  /** additional classes added to the Checkbox */
   className: PropTypes.string,
+  /** Flag to show if the Checkbox selection is valid or invalid. */
   isValid: PropTypes.bool,
+  /** Flag to show if the Checkbox is disabled. */
   isDisabled: PropTypes.bool,
+  /** A callback for when the Checkbox selection changes. */
   onChange: PropTypes.func
 };
 
 const defaultProps = {
-  children: null,
   className: '',
   isValid: true,
   isDisabled: false,
@@ -25,7 +27,7 @@ class Checkbox extends React.Component {
   };
 
   render() {
-    const { className, children, onChange, isValid, isDisabled, ...props } = this.props;
+    const { className, onChange, isValid, isDisabled, ...props } = this.props;
     return (
       <input
         {...props}

packages/patternfly-4/react-core/src/components/Radio/Radio.js

@@ -4,15 +4,17 @@ import { css } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
 
 const propTypes = {
-  children: PropTypes.node,
+  /** additional classes added to the Radio */
   className: PropTypes.string,
+  /** Flag to show if the Radio selection is valid or invalid. */
   isValid: PropTypes.bool,
+  /** Flag to show if the Radio is disabled. */
   isDisabled: PropTypes.bool,
+  /** A callback for when the Radio selection changes. */
   onChange: PropTypes.func
 };
 
 const defaultProps = {
-  children: null,
   className: '',
   isValid: true,
   isDisabled: false,
@@ -25,7 +27,7 @@ class Radio extends React.Component {
   };
 
   render() {
-    const { className, children, onChange, isValid, isDisabled, ...props } = this.props;
+    const { className, onChange, isValid, isDisabled, ...props } = this.props;
     return (
       <input
         {...props}

packages/patternfly-4/react-core/src/components/Title/Title.js

@@ -14,8 +14,11 @@ export const TitleSize = {
 };
 
 const propTypes = {
+  /** the size of the Title  */
   size: PropTypes.oneOf(Object.values(TitleSize)).isRequired,
+  /** content rendered inside the Title */
   children: PropTypes.node,
+  /** additional classes added to the Title */
   className: PropTypes.string
 };
 

packages/patternfly-4/react-core/src/layouts/Bullseye/Bullseye.js

@@ -5,8 +5,11 @@ import PropTypes from 'prop-types';
 import { componentShape } from '../../internal/componentShape';
 
 const propTypes = {
+  /** content rendered inside the Bullseye layout */
   children: PropTypes.any,
+  /** additional classes added to the Bullseye layout */
   className: PropTypes.string,
+  /** Sets the base component to render. defaults to div */
   component: componentShape
 };
 

packages/patternfly-4/react-core/src/layouts/Gallery/Gallery.js

@@ -5,8 +5,11 @@ import styles from '@patternfly/patternfly-next/layouts/Gallery/gallery.css';
 import { GutterSize, getGutterModifier } from '../../styles/gutters';
 
 const propTypes = {
+  /** content rendered inside the Gallery layout */
   children: PropTypes.any,
+  /** additional classes added to the Gallery layout */
   className: PropTypes.string,
+  /** Adds space between children. Options are sm, md or lg */
   gutter: PropTypes.oneOf(Object.keys(GutterSize))
 };
 

packages/patternfly-4/react-core/src/layouts/Gallery/GalleryItem.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const propTypes = {
+  /** content rendered inside the Gallery Item */
   children: PropTypes.any
 };
 

packages/patternfly-4/react-core/src/layouts/Grid/Grid.docs.js

@@ -1,5 +1,5 @@
 import { Grid, GridItem } from '@patternfly/react-core';
-import GridPlaygroud from './examples/GridPlaygroud';
+import GridPlayground from './examples/GridPlayground';
 import Simple from './examples/SimpleGrid';
 import WithGutters from './examples/GridWithGutters';
 import Overrides from './examples/GridOverrides';
@@ -14,5 +14,5 @@ export default {
   enumValues: {
     gridSpans: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
   },
-  examples: [Simple, WithGutters, Overrides, GridPlaygroud]
+  examples: [Simple, WithGutters, Overrides, GridPlayground]
 };

packages/patternfly-4/react-core/src/layouts/Grid/Grid.js

@@ -9,13 +9,21 @@ import { DeviceSizes } from '../../styles/sizes';
 const gridItemSpanValueShape = PropTypes.oneOf(gridSpans);
 
 const propTypes = {
+  /** content rendered inside the Grid layout */
   children: PropTypes.any,
+  /** additional classes added to the Grid layout */
   className: PropTypes.string,
+  /** Adds space between children. Options are sm, md or lg */
   gutter: PropTypes.oneOf(Object.keys(GutterSize)),
+  /** The number of rows a column in the grid should span.  Value should be a number 1-12 */
   span: gridItemSpanValueShape,
+  /** the number of columns all grid items should span on a small device */
   sm: gridItemSpanValueShape,
+  /** the number of columns all grid items should span on a medium device */
   md: gridItemSpanValueShape,
+  /** the number of columns all grid items should span on a large device */
   lg: gridItemSpanValueShape,
+  /** the number of columns all grid items should span on a xLarge device */
   xl: gridItemSpanValueShape
 };
 

packages/patternfly-4/react-core/src/layouts/Grid/GridItem.js

@@ -13,22 +13,39 @@ import {
 } from './gridUtils';
 
 const propTypes = {
+  /** content rendered inside the Grid Layout Item */
   children: PropTypes.any,
+  /** additional classes added to the Grid Layout Item */
   className: PropTypes.string,
+  /** the number of columns the grid item spans. Value should be a number 1-12   */
   span: PropTypes.oneOf(gridSpans),
+  /** the number of rows the grid item spans. Value should be a number 1-12   */
   rowSpan: PropTypes.oneOf(gridSpans),
+  /** the number of columns a grid item is offset */
   offset: PropTypes.oneOf(gridSpans),
+  /** the number of columns the grid item spans on small device. Value should be a number 1-12   */
   sm: PropTypes.oneOf(gridSpans),
+  /** the number of rows the grid item spans on medium device. Value should be a number 1-12   */
   smRowSpan: PropTypes.oneOf(gridSpans),
+  /** the number of columns the grid item is offset on small device. Value should be a number 1-12   */
   smOffset: PropTypes.oneOf(gridSpans),
+  /** the number of columns the grid item spans on medium device. Value should be a number 1-12   */
   md: PropTypes.oneOf(gridSpans),
+  /** the number of rows the grid item spans on medium device. Value should be a number 1-12   */
   mdRowSpan: PropTypes.oneOf(gridSpans),
+  /** the number of columns the grid item is offset on medium device. Value should be a number 1-12   */
   mdOffset: PropTypes.oneOf(gridSpans),
+  /** the number of columns the grid item spans on large device. Value should be a number 1-12   */
   lg: PropTypes.oneOf(gridSpans),
+  /** the number of rows the grid item spans on large device. Value should be a number 1-12   */
   lgRowSpan: PropTypes.oneOf(gridSpans),
+  /** the number of columns the grid item is offset on large device. Value should be a number 1-12   */
   lgOffset: PropTypes.oneOf(gridSpans),
+  /** the number of columns the grid item spans on xLarge device. Value should be a number 1-12   */
   xl: PropTypes.oneOf(gridSpans),
+  /** the number of rows the grid item spans on large device. Value should be a number 1-12   */
   xlRowSpan: PropTypes.oneOf(gridSpans),
+  /** the number of columns the grid item is offset on xLarge device. Value should be a number 1-12   */
   xlOffset: PropTypes.oneOf(gridSpans)
 };
 

packages/patternfly-4/react-core/src/layouts/Grid/examples/GridOverrides.js

@@ -10,7 +10,9 @@ class GridOverrides extends React.Component {
   render() {
     return (
       <Grid sm={6} md={4} lg={3}>
-        <GridItem>Grid Item</GridItem>
+        <GridItem pan={3} rowSpan={2}>
+          span = 3 rowSpan= 2
+        </GridItem>
         <GridItem>Grid Item</GridItem>
         <GridItem>Grid Item</GridItem>
         <GridItem>Grid Item</GridItem>

packages/patternfly-4/react-core/src/layouts/Grid/examples/GridPlaygroud.js → packages/patternfly-4/react-core/src/layouts/Grid/examples/GridPlayground.js

@@ -16,7 +16,7 @@ function createGridItem() {
 }
 
 class GridPlayground extends React.Component {
-  static title = 'Grid Playgroud';
+  static title = 'Grid Playground';
 
   state = {
     gridItems: [createGridItem(), createGridItem(), createGridItem(), createGridItem()]

packages/patternfly-4/react-core/src/layouts/Level/Level.js

@@ -5,8 +5,11 @@ import styles from '@patternfly/patternfly-next/layouts/Level/level.css';
 import { GutterSize, getGutterModifier } from '../../styles/gutters';
 
 const propTypes = {
+  /** Adds space between children. Options are sm, md or lg */
   gutter: PropTypes.oneOf(Object.keys(GutterSize)),
+  /** additional classes added to the Level layout */
   className: PropTypes.string,
+  /** content rendered inside the Level layout */
   children: PropTypes.node
 };
 const defaultProps = {

packages/patternfly-4/react-core/src/layouts/Level/LevelItem.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const propTypes = {
+  /** content rendered inside the Level Layout Item */
   children: PropTypes.node
 };
 const defaultProps = {

packages/patternfly-4/react-core/src/layouts/Split/Split.js

@@ -6,9 +6,13 @@ import { GutterSize, getGutterModifier } from '../../styles/gutters';
 import { css } from '@patternfly/react-styles';
 
 const propTypes = {
+  /** Adds space between children. Options are sm, md or lg */
   gutter: PropTypes.oneOf(Object.keys(GutterSize)),
+  /** content rendered inside the Split layout */
   children: PropTypes.node,
+  /** additional classes added to the Split layout */
   className: PropTypes.string,
+  /** Sets the base component to render. defaults to div */
   component: componentShape
 };
 

packages/patternfly-4/react-core/src/layouts/Split/SplitItem.js

@@ -4,8 +4,11 @@ import styles from '@patternfly/patternfly-next/layouts/Split/split.css';
 import { css } from '@patternfly/react-styles';
 
 const propTypes = {
+  /** Flag indicating if this Split Layout item contains the primary content */
   isMain: PropTypes.bool,
+  /** content rendered inside the Split Layout Item */
   children: PropTypes.node,
+  /** additional classes added to the Split Layout Item */
   className: PropTypes.string
 };
 

packages/patternfly-4/react-core/src/layouts/Stack/Stack.js

@@ -6,9 +6,13 @@ import { GutterSize, getGutterModifier } from '../../styles/gutters';
 import { css } from '@patternfly/react-styles';
 
 const propTypes = {
+  /** Adds space between children. Options are sm, md or lg */
   gutter: PropTypes.oneOf(Object.keys(GutterSize)),
+  /** content rendered inside the Stack layout */
   children: PropTypes.node,
+  /** additional classes added to the Stack layout */
   className: PropTypes.string,
+  /** Sets the base component to render. defaults to div */
   component: componentShape
 };
 

packages/patternfly-4/react-core/src/layouts/Stack/StackItem.js

@@ -4,8 +4,11 @@ import styles from '@patternfly/patternfly-next/layouts/Stack/stack.css';
 import { css } from '@patternfly/react-styles';
 
 const propTypes = {
+  /** Flag indicating if this Stack Layout item contains the primary content */
   isMain: PropTypes.bool,
+  /** additional classes added to the Stack Layout Item */
   children: PropTypes.node,
+  /** content rendered inside the Stack Layout Item */
   className: PropTypes.string
 };