Merge pull request #1162 from coralproject/slot-classnames

Slot Classnames

client/coral-framework/components/Slot.js

@@ -3,6 +3,7 @@ import cn from 'classnames';
 import styles from './Slot.css';
 import {connect} from 'react-redux';
 import omit from 'lodash/omit';
+import kebabCase from 'lodash/kebabCase';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
 import {getShallowChanges} from 'coral-framework/utils';
@@ -58,6 +59,7 @@ class Slot extends React.Component {
       childFactory,
       defaultComponent: DefaultComponent,
       queryData,
+      fill,
     } = this.props;
     const {plugins} = this.context;
     let children = this.getChildren();
@@ -72,7 +74,7 @@ class Slot extends React.Component {
     }
 
     return (
-      <Component className={cn({[styles.inline]: inline, [styles.debug]: pluginConfig.debug}, className)}>
+      <Component className={cn({[styles.inline]: inline, [styles.debug]: pluginConfig.debug}, className, `talk-slot-${kebabCase(fill)}`)}>
         {children}
       </Component>
     );
@@ -85,6 +87,10 @@ Slot.defaultProps = {
 
 Slot.propTypes = {
   fill: PropTypes.string.isRequired,
+  inline: PropTypes.bool,
+  className: PropTypes.string,
+  reduxState: PropTypes.object,
+  defaultComponent: PropTypes.component,
 
   /**
    * You may specify the component to use as the root wrapper.