Remove sd-* classNames (#301)

* test(common): fail if sd-* className exists

* refactor(className): remove sd-* classNames

src/addons/Confirm/Confirm.js

@@ -46,7 +46,6 @@ export default class Confirm extends Component {
 
   render() {
     const classes = classNames(
-      'sd-confirm',
       this.props.className
     )
     return (
@@ -58,8 +57,8 @@ export default class Confirm extends Component {
           {this.state.message}
         </ModalContent>
         <ModalFooter>
-          <div className='sd-abort-button ui button' onClick={this.handleAbort}>{this.props.abortLabel}</div>
-          <div className='sd-confirm-button ui blue button' onClick={this.handleConfirm}>{this.props.confirmLabel}</div>
+          <div className='ui button' onClick={this.handleAbort}>{this.props.abortLabel}</div>
+          <div className='ui blue button' onClick={this.handleConfirm}>{this.props.confirmLabel}</div>
         </ModalFooter>
       </Modal>
     )

src/addons/Select/Select.js

@@ -1,6 +1,4 @@
-/* eslint-disable valid-jsdoc */
 import React, { PropTypes } from 'react'
-import cx from 'classnames'
 
 import META from '../../utils/Meta'
 import Dropdown from '../../modules/Dropdown/Dropdown'
@@ -9,10 +7,8 @@ import Dropdown from '../../modules/Dropdown/Dropdown'
  * A <Select /> is sugar for <Dropdown selection />.
  * @see Dropdown
  */
-function Select({ className, ...rest }) {
-  const classes = cx('sd-select', className)
-
-  return <Dropdown {...rest} className={classes} selection />
+function Select(props) {
+  return <Dropdown {...props} selection />
 }
 
 Select.propTypes = {

src/addons/Textarea/Textarea.js

@@ -1,5 +1,4 @@
 import React, { Component, PropTypes } from 'react'
-import classNames from 'classnames'
 import META from '../../utils/Meta'
 
 export default class Textarea extends Component {
@@ -15,12 +14,8 @@ export default class Textarea extends Component {
   }
 
   render() {
-    const classes = classNames(
-      'sd-textarea',
-      this.props.className
-    )
     return (
-      <textarea {...this.props} className={classes} />
+      <textarea {...this.props} />
     )
   }
 }

src/collections/Form/Form.js

@@ -118,7 +118,6 @@ export default class Form extends Component {
 
   render() {
     const classes = classNames(
-      'sd-form',
       'ui',
       this.props.className,
       'form'

src/collections/Form/FormField.js

@@ -20,7 +20,6 @@ export default class FormField extends Component {
 
   render() {
     const classes = classNames(
-      'sd-form-field',
       this.props.width && `${numberToWord(this.props.width)} wide`,
       this.props.className,
       'field'

src/collections/Form/FormFields.js

@@ -34,7 +34,6 @@ export default class FormFields extends Component {
     }
 
     const classes = classNames(
-      'sd-form-fields',
       this.props.className,
       numberToWord(fieldCount),
       'fields'

src/collections/Grid/Grid.js

@@ -21,7 +21,6 @@ export default class Grid extends Component {
 
   render() {
     const classes = classNames(
-      'sd-grid',
       'ui',
       this.props.className,
       'grid'

src/collections/Grid/GridColumn.js

@@ -21,7 +21,6 @@ export default class GridColumn extends Component {
 
   render() {
     const classes = classNames(
-      'sd-grid-column',
       this.props.className,
       this.props.width && `${numberToWord(this.props.width)} wide`,
       'column'

src/collections/Grid/GridRow.js

@@ -17,7 +17,6 @@ export default class GridRow extends Component {
 
   render() {
     const classes = classNames(
-      'sd-grid-row',
       this.props.className,
       'row'
     )

src/collections/Menu/Menu.js

@@ -37,7 +37,7 @@ export default class Menu extends Component {
   render() {
     const { activeItem, children, className, ...rest } = this.props
 
-    const classes = cx('sd-menu ui', className, 'menu')
+    const classes = cx('ui', className, 'menu')
 
     const _children = Children.map(children, (child) => {
       const { type, props } = child

src/collections/Menu/MenuItem.js

@@ -1,16 +1,15 @@
 import React, { PropTypes } from 'react'
-import classNames from 'classnames'
+import cx from 'classnames'
 import META from '../../utils/Meta'
+import Label from 'src/elements/Label/Label'
 
 function MenuItem({ __onClick, active, children, className, label, name, onClick, ...rest }) {
   const handleClick = (e) => {
     if (__onClick) __onClick(name)
     if (onClick) onClick(name)
   }
 
-  const menuLabel = label && <div className='sd-menu-label ui blue label'>{label}</div>
-  const classes = classNames(
-    'sd-menu-item',
+  const classes = cx(
     active && 'active',
     className,
     'item',
@@ -19,7 +18,7 @@ function MenuItem({ __onClick, active, children, className, label, name, onClick
   return (
     <a {...rest} className={classes} onClick={handleClick}>
       {name}
-      {menuLabel}
+      {label && <Label>{label}</Label>}
       {children}
     </a>
   )

src/collections/Message/Message.js

@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react'
 import classNames from 'classnames'
 import $ from 'jquery'
 import META from '../../utils/Meta'
+import Header from '../../elements/Header/Header'
 import Icon from '../../elements/Icon/Icon'
 
 export default class Message extends Component {
@@ -29,28 +30,22 @@ export default class Message extends Component {
 
   render() {
     const classes = classNames(
-      'sd-message',
       'ui',
       this.props.className,
       { icon: this.props.icon },
       'message'
     )
 
-    const iconClasses = classNames(
-      'sd-message-icon',
-      this.props.icon
-    )
-
-    const closeIcon = <Icon className='sd-message-close-icon close' onClick={this.handleDismiss} />
-    const header = <div className='sd-message-header header'>{this.props.header}</div>
-    const icon = <Icon className={iconClasses} />
+    const closeIcon = <Icon className='close' onClick={this.handleDismiss} />
+    const header = <Header>{this.props.header}</Header>
+    const icon = <Icon className={this.props.icon} />
 
     // wrap children in <p> if there is a header
     const children = this.props.header ? <p>{this.props.children}</p> : this.props.children
 
     // wrap header and children in content if there is an icon
     const content = (
-      <div className='sd-message-content content'>
+      <div className='content'>
         {this.props.header && header}
         {children}
       </div>

src/collections/Table/Table.js

@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import React, { Children, Component, PropTypes } from 'react'
-import classNames from 'classnames'
+import cx from 'classnames'
 import { customPropTypes } from '../../utils/propUtils'
 import META from '../../utils/Meta'
 import TableColumn from './TableColumn'
@@ -96,7 +96,7 @@ export default class Table extends Component {
       const onClick = () => this._handleSortHeaderChange(
         dataKey, sort.direction === 'ascending' ? 'descending' : 'ascending'
       )
-      const classes = classNames('sd-table-header', {
+      const classes = cx({
         sorted: isSorted,
         ascending: isSorted && sort.direction === 'ascending',
         descending: isSorted && sort.direction === 'descending',
@@ -116,14 +116,14 @@ export default class Table extends Component {
         content = Table.getSafeCellContents(itemContents)
       }
 
-      return <td key={rowIndex + column.props.dataKey} className={'sd-table-cell'}>{content}</td>
+      return <td key={rowIndex + column.props.dataKey}>{content}</td>
     })
   }
 
   _getRows() {
     return _.map(this.props.data, (dataItem, rowIndex) => {
       const cells = this._getCells(dataItem, rowIndex)
-      const classes = classNames('sd-table-row', {
+      const classes = cx({
         active: this._isRowSelected(rowIndex),
       })
       const onClick = () => this._handleSelectRow(dataItem, rowIndex)
@@ -140,8 +140,7 @@ export default class Table extends Component {
 
   render() {
     const { onSelectRow, onSortChange, defaultSelectedRows } = this.props
-    const classes = classNames(
-      'sd-table',
+    const classes = cx(
       'ui',
       { selectable: !!onSelectRow || !!defaultSelectedRows },
       { sortable: !!onSortChange },

src/elements/Button/Button.js

@@ -20,7 +20,6 @@ export default class Button extends Component {
 
   render() {
     const classes = classNames(
-      'sd-button',
       'ui',
       this.props.className,
       'button'

src/elements/Button/Buttons.js

@@ -17,7 +17,6 @@ export default class Buttons extends Component {
 
   render() {
     const classes = classNames(
-      'sd-buttons',
       'ui',
       this.props.className,
       'buttons'

src/elements/Container/Container.js

@@ -17,7 +17,8 @@ function Container(props) {
     children, className,
   } = props
 
-  const classes = cx('sd-container ui',
+  const classes = cx(
+    'ui',
     useKeyOnly(text, 'text'),
     useAlignedProp(aligned),
     useKeyOnly(fluid, 'fluid'),

src/elements/Divider/Divider.js

@@ -15,7 +15,8 @@ function Divider(props) {
     children, className,
   } = props
 
-  const classes = cx('sd-divider ui',
+  const classes = cx(
+    'ui',
     useKeyOnly(horizontal, 'horizontal'),
     useKeyOnly(vertical, 'vertical'),
     useKeyOnly(inverted, 'inverted'),

src/elements/Header/HeaderH1.js

@@ -4,7 +4,7 @@ import _Header from './_Header'
 
 function HeaderH1(props) {
   return (
-    <_Header {...props} _sdClass='sd-header-h1' _headerElement='h1' />
+    <_Header {...props} _headerElement='h1' />
   )
 }
 

src/elements/Header/HeaderH2.js

@@ -4,7 +4,7 @@ import _Header from './_Header'
 
 function HeaderH2(props) {
   return (
-    <_Header {...props} _sdClass='sd-header-h2' _headerElement='h2' />
+    <_Header {...props} _headerElement='h2' />
   )
 }
 

src/elements/Header/HeaderH3.js

@@ -4,7 +4,7 @@ import _Header from './_Header'
 
 function HeaderH3(props) {
   return (
-    <_Header {...props} _sdClass='sd-header-h3' _headerElement='h3' />
+    <_Header {...props} _headerElement='h3' />
   )
 }
 

src/elements/Header/HeaderH4.js

@@ -4,7 +4,7 @@ import _Header from './_Header'
 
 function HeaderH4(props) {
   return (
-    <_Header {...props} _sdClass='sd-header-h4' _headerElement='h4' />
+    <_Header {...props} _headerElement='h4' />
   )
 }
 

src/elements/Header/HeaderH5.js

@@ -4,7 +4,7 @@ import _Header from './_Header'
 
 function HeaderH5(props) {
   return (
-    <_Header {...props} _sdClass='sd-header-h5' _headerElement='h5' />
+    <_Header {...props} _headerElement='h5' />
   )
 }
 

src/elements/Header/HeaderH6.js

@@ -4,7 +4,7 @@ import _Header from './_Header'
 
 function HeaderH6(props) {
   return (
-    <_Header {...props} _sdClass='sd-header-h6' _headerElement='h6' />
+    <_Header {...props} _headerElement='h6' />
   )
 }
 

src/elements/Header/HeaderSubheader.js

@@ -10,7 +10,8 @@ function HeaderSubheader(props) {
     children, className,
   } = props
 
-  const classes = cx('sd-header-subheader', 'sub',
+  const classes = cx(
+    'sub',
     className,
     'header'
   )

src/elements/Header/_Header.js

@@ -15,13 +15,13 @@ import {
 
 function _Header(props) {
   const {
-    _sdClass, _headerElement,
+    _headerElement,
     color, aligned, dividing, block, attached, floated, inverted, disabled,
     icon, image, children, className,
   } = props
 
   const classes = cx(
-    _sdClass, 'ui',
+    'ui',
     icon && 'icon',
     color,
     useAlignedProp(aligned),
@@ -61,7 +61,6 @@ _Header._meta = {
 
 _Header.propTypes = {
   _headerElement: PropTypes.string,
-  _sdClass: PropTypes.string,
   className: PropTypes.string,
   children: PropTypes.node,
 
@@ -104,7 +103,6 @@ _Header.propTypes = {
 
 _Header.defaultProps = {
   _headerElement: 'div',
-  _sdClass: 'sd-header',
 }
 
 export default _Header

src/elements/Icon/Icon.js

@@ -16,7 +16,6 @@ export default class Icon extends Component {
   render() {
     const { className } = this.props
     const classes = cx(
-      'sd-icon',
       className,
       'icon',
     )

src/elements/Image/Image.js

@@ -17,7 +17,6 @@ export default class Image extends Component {
 
   render() {
     const classes = classNames(
-      'sd-image',
       'ui',
       this.props.className,
       'image'

src/elements/Input/Input.js

@@ -53,7 +53,6 @@ export default class Input extends Component {
     })
 
     const classes = classNames(
-      'sd-input',
       'ui',
       className,
       'input'

src/elements/Label/Label.js

@@ -28,7 +28,7 @@ function Label(props) {
   const handleRemove = e => onRemove && onRemove(e, props)
   const handleDetailClick = e => onDetailClick && onDetailClick(e, props)
 
-  const classes = cx('sd-label ui',
+  const classes = cx('ui',
     size,
     color,
     useKeyOnly(basic, 'basic'),