Fix #819

components/snackbar/Snackbar.js

@@ -12,12 +12,16 @@ const factory = (Overlay, Button) => {
     static propTypes = {
       action: PropTypes.string,
       active: PropTypes.bool,
+      children: PropTypes.node,
       className: PropTypes.string,
       icon: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.element
       ]),
-      label: PropTypes.string,
+      label: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
       onClick: PropTypes.func,
       onTimeout: PropTypes.func,
       theme: PropTypes.shape({
@@ -49,7 +53,7 @@ const factory = (Overlay, Button) => {
     }
 
     render () {
-      const {action, active, icon, label, onClick, theme, type } = this.props;
+      const {action, active, children, icon, label, onClick, theme, type } = this.props;
       const className = classnames([theme.snackbar, theme[type]], {
         [theme.active]: active
       }, this.props.className);
@@ -58,7 +62,10 @@ const factory = (Overlay, Button) => {
         <Overlay invisible>
           <div data-react-toolbox='snackbar' className={className}>
             {icon ? <FontIcon value={icon} className={theme.icon} /> : null}
-            <span className={theme.label}>{label}</span>
+            <span className={theme.label}>
+              {label}
+              {children}
+            </span>
             {action ? <Button className={theme.button} label={action} onClick={onClick}/> : null}
           </div>
         </Overlay>

components/snackbar/readme.md

@@ -41,9 +41,10 @@ This component can be styled by context providing a theme with the key `RTSnackb
 |:-----|:-----|:-----|:-----|
 | `action`      | `String`                |               | Label for the action component inside the Snackbar.|
 | `active`      | `Boolean`               |  `false`      | If true, the snackbar will be active.|
+| `children`    | `String or Element`     |  `false`      | Text or node to be displayed in the content as alternative to `label`.|
 | `className`   | `String`                | `''`          | Additional class name to provide custom styling.|
 | `icon`        | `String` or `Element`   |               | String key for an icon or Element which will be displayed in left side of the snackbar.|
-| `label`       | `String`                |               | Text to display in the content. Required.|
+| `label`       | `String or Element`     |               | Text to display in the content.|
 | `onClick`     | `Function`              |               | Callback function that will be called when the button action is clicked.|
 | `onTimeout`   | `Function`              |               | Callback function when finish the set timeout.|
 | `timeout`     | `Number`                |               | Amount of time in milliseconds after the Snackbar will be automatically hidden.|

spec/components/snackbar.js

@@ -29,12 +29,13 @@ class SnackbarTest extends React.Component {
           action='Hide'
           active={this.state.active}
           icon='question_answer'
-          label='Snackbar action cancel'
           timeout={2000}
           onClick={this.handleSnackbarClick}
           onTimeout={this.handleSnackbarTimeout}
           type='warning'
-        />
+        >
+          Snackbar action <strong>cancel</strong>
+        </Snackbar>
       </section>
     );
   }