diff --git a/src/addons/Confirm/Confirm.js b/src/addons/Confirm/Confirm.js
index cf89df11f6..4fdf3bd9b3 100644
--- a/src/addons/Confirm/Confirm.js
+++ b/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}
- {this.props.abortLabel}
- {this.props.confirmLabel}
+ {this.props.abortLabel}
+ {this.props.confirmLabel}
)
diff --git a/src/addons/Select/Select.js b/src/addons/Select/Select.js
index 0fbdb2e702..f638d45d36 100644
--- a/src/addons/Select/Select.js
+++ b/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 is sugar for .
* @see Dropdown
*/
-function Select({ className, ...rest }) {
- const classes = cx('sd-select', className)
-
- return
+function Select(props) {
+ return
}
Select.propTypes = {
diff --git a/src/addons/Textarea/Textarea.js b/src/addons/Textarea/Textarea.js
index 0e46a46af1..de665132db 100644
--- a/src/addons/Textarea/Textarea.js
+++ b/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 (
-
+
)
}
}
diff --git a/src/collections/Form/Form.js b/src/collections/Form/Form.js
index 5c88173d12..24e157441f 100644
--- a/src/collections/Form/Form.js
+++ b/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'
diff --git a/src/collections/Form/FormField.js b/src/collections/Form/FormField.js
index 6886471cb5..85d3beb2b8 100644
--- a/src/collections/Form/FormField.js
+++ b/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'
diff --git a/src/collections/Form/FormFields.js b/src/collections/Form/FormFields.js
index 939499d921..5f4d2fed2c 100644
--- a/src/collections/Form/FormFields.js
+++ b/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'
diff --git a/src/collections/Grid/Grid.js b/src/collections/Grid/Grid.js
index 05357a3bbd..5169954f95 100644
--- a/src/collections/Grid/Grid.js
+++ b/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'
diff --git a/src/collections/Grid/GridColumn.js b/src/collections/Grid/GridColumn.js
index 67b673bea8..f3f543c57e 100644
--- a/src/collections/Grid/GridColumn.js
+++ b/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'
diff --git a/src/collections/Grid/GridRow.js b/src/collections/Grid/GridRow.js
index 7fbb4d654f..1e85049915 100644
--- a/src/collections/Grid/GridRow.js
+++ b/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'
)
diff --git a/src/collections/Menu/Menu.js b/src/collections/Menu/Menu.js
index e362ca62bc..ac9f06bf45 100644
--- a/src/collections/Menu/Menu.js
+++ b/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
diff --git a/src/collections/Menu/MenuItem.js b/src/collections/Menu/MenuItem.js
index 64d4cdfcf1..44fde85002 100644
--- a/src/collections/Menu/MenuItem.js
+++ b/src/collections/Menu/MenuItem.js
@@ -1,6 +1,7 @@
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) => {
@@ -8,9 +9,7 @@ function MenuItem({ __onClick, active, children, className, label, name, onClick
if (onClick) onClick(name)
}
- const menuLabel = label &&
+
{this.props.header && header}
{children}
diff --git a/src/collections/Table/Table.js b/src/collections/Table/Table.js
index 618078f7f5..a123d82208 100644
--- a/src/collections/Table/Table.js
+++ b/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
{content} |
+ return
{content} |
})
}
_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 },
diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
index d8a92426ca..f0ac21cb0b 100644
--- a/src/elements/Button/Button.js
+++ b/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'
diff --git a/src/elements/Button/Buttons.js b/src/elements/Button/Buttons.js
index 78e6beb606..5f74786bf4 100644
--- a/src/elements/Button/Buttons.js
+++ b/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'
diff --git a/src/elements/Container/Container.js b/src/elements/Container/Container.js
index 3a6c7a34b1..d6f629c85d 100644
--- a/src/elements/Container/Container.js
+++ b/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'),
diff --git a/src/elements/Divider/Divider.js b/src/elements/Divider/Divider.js
index 44492b1e55..71383ea875 100644
--- a/src/elements/Divider/Divider.js
+++ b/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'),
diff --git a/src/elements/Header/HeaderH1.js b/src/elements/Header/HeaderH1.js
index 1d5e3e0e2a..214c5e0672 100644
--- a/src/elements/Header/HeaderH1.js
+++ b/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' />
)
}
diff --git a/src/elements/Header/HeaderH2.js b/src/elements/Header/HeaderH2.js
index e088e95b82..d8f13f1edd 100644
--- a/src/elements/Header/HeaderH2.js
+++ b/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' />
)
}
diff --git a/src/elements/Header/HeaderH3.js b/src/elements/Header/HeaderH3.js
index b47a366d91..3ab701429f 100644
--- a/src/elements/Header/HeaderH3.js
+++ b/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' />
)
}
diff --git a/src/elements/Header/HeaderH4.js b/src/elements/Header/HeaderH4.js
index 8339f066bc..77a3edc158 100644
--- a/src/elements/Header/HeaderH4.js
+++ b/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' />
)
}
diff --git a/src/elements/Header/HeaderH5.js b/src/elements/Header/HeaderH5.js
index 3bd2ab0b67..91e237364e 100644
--- a/src/elements/Header/HeaderH5.js
+++ b/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' />
)
}
diff --git a/src/elements/Header/HeaderH6.js b/src/elements/Header/HeaderH6.js
index ee67420e9d..5e7ed9b862 100644
--- a/src/elements/Header/HeaderH6.js
+++ b/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' />
)
}
diff --git a/src/elements/Header/HeaderSubheader.js b/src/elements/Header/HeaderSubheader.js
index 02cc8a68ae..d9f3d088b3 100644
--- a/src/elements/Header/HeaderSubheader.js
+++ b/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'
)
diff --git a/src/elements/Header/_Header.js b/src/elements/Header/_Header.js
index fbebfc83a3..523a964b52 100644
--- a/src/elements/Header/_Header.js
+++ b/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
diff --git a/src/elements/Icon/Icon.js b/src/elements/Icon/Icon.js
index 63ad09195a..93bb7f61cf 100644
--- a/src/elements/Icon/Icon.js
+++ b/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',
)
diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js
index 375f708d8f..061d5d972c 100644
--- a/src/elements/Image/Image.js
+++ b/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'
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
index 8df2d42bd5..3280840f45 100644
--- a/src/elements/Input/Input.js
+++ b/src/elements/Input/Input.js
@@ -53,7 +53,6 @@ export default class Input extends Component {
})
const classes = classNames(
- 'sd-input',
'ui',
className,
'input'
diff --git a/src/elements/Label/Label.js b/src/elements/Label/Label.js
index ac3292a573..a6dc429dea 100644
--- a/src/elements/Label/Label.js
+++ b/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'),
diff --git a/src/elements/List/List.js b/src/elements/List/List.js
index 41573c8af1..4ded1341ea 100644
--- a/src/elements/List/List.js
+++ b/src/elements/List/List.js
@@ -19,7 +19,6 @@ export default class List extends Component {
render() {
const classes = classNames(
- 'sd-list',
'ui',
this.props.className,
'list'
diff --git a/src/elements/List/ListItem.js b/src/elements/List/ListItem.js
index b283515aec..982b872b9f 100644
--- a/src/elements/List/ListItem.js
+++ b/src/elements/List/ListItem.js
@@ -23,7 +23,7 @@ export default class ListItem extends Component {
render() {
const { children, className, description, header, icon, image, ...rest } = this.props
- const classes = cx('sd-list-item', className, 'item')
+ const classes = cx(className, 'item')
const media = iconPropRenderer(icon) || imagePropRenderer(image)
const _description = description || children
diff --git a/src/elements/Segment/Segment.js b/src/elements/Segment/Segment.js
index 6b30c55845..f6afafcd6f 100644
--- a/src/elements/Segment/Segment.js
+++ b/src/elements/Segment/Segment.js
@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react'
import classNames from 'classnames'
import META from '../../utils/Meta'
import Segments from './SegmentSegments'
+import Header from '../Header/Header'
/**
* A segment is used to create a grouping of related content.
@@ -28,9 +29,8 @@ export default class Segment extends Component {
static Segments = Segments
render() {
- const heading =
{this.props.heading}
+ const heading =
{this.props.heading}
const classes = classNames(
- 'sd-segment',
'ui',
this.props.className,
'segment'
diff --git a/src/elements/Segment/SegmentSegments.js b/src/elements/Segment/SegmentSegments.js
index e646d4a6f6..21d859965d 100644
--- a/src/elements/Segment/SegmentSegments.js
+++ b/src/elements/Segment/SegmentSegments.js
@@ -32,7 +32,6 @@ export default class SegmentSegments extends Component {
const { children } = this.props
const classes = classNames(
- 'sd-segment-segments',
'ui',
this.props.className,
'segments'
diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js
index ba346fca5f..f064c9e22c 100644
--- a/src/modules/Checkbox/Checkbox.js
+++ b/src/modules/Checkbox/Checkbox.js
@@ -69,7 +69,6 @@ export default class Checkbox extends Component {
type = 'radio'
}
const classes = classNames(
- 'sd-checkbox',
'ui',
this.props.className,
// auto apply fitted class to compact white space when there is no label
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index db938c916c..6cc4ea06de 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/src/modules/Dropdown/Dropdown.js
@@ -739,7 +739,8 @@ export default class Dropdown extends Component {
} = this.props
// Classes
- const classes = cx('sd-dropdown ui',
+ const classes = cx(
+ 'ui',
dropdownClasses,
useKeyOnly(disabled, 'disabled'),
useKeyOnly(error, 'error'),
diff --git a/src/modules/Dropdown/DropdownDivider.js b/src/modules/Dropdown/DropdownDivider.js
index 1f3966b0d8..ddeb620f32 100644
--- a/src/modules/Dropdown/DropdownDivider.js
+++ b/src/modules/Dropdown/DropdownDivider.js
@@ -14,7 +14,7 @@ class DropdownDivider extends Component {
}
render() {
- return
+ return
}
}
diff --git a/src/modules/Dropdown/DropdownItem.js b/src/modules/Dropdown/DropdownItem.js
index 3539a8f404..6e6eb2c04f 100644
--- a/src/modules/Dropdown/DropdownItem.js
+++ b/src/modules/Dropdown/DropdownItem.js
@@ -25,7 +25,6 @@ function DropdownItem(props) {
}
const classes = cx(
- 'sd-dropdown-item',
useKeyOnly(active, 'active'),
useKeyOnly(selected, 'selected'),
'item',
diff --git a/src/modules/Dropdown/DropdownMenu.js b/src/modules/Dropdown/DropdownMenu.js
index 7298aa62b2..ebe000a87e 100644
--- a/src/modules/Dropdown/DropdownMenu.js
+++ b/src/modules/Dropdown/DropdownMenu.js
@@ -21,7 +21,7 @@ class DropdownMenu extends Component {
render() {
const { className, ...rest } = this.props
- const classes = cx('sd-dropdown-menu menu transition', className)
+ const classes = cx('menu transition', className)
return
}
}
diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js
index fc0aea5894..51a7535c69 100644
--- a/src/modules/Modal/Modal.js
+++ b/src/modules/Modal/Modal.js
@@ -34,7 +34,6 @@ export default class Modal extends Component {
render() {
const classes = classNames(
- 'sd-modal',
'ui',
this.props.className,
'modal',
diff --git a/src/modules/Modal/ModalContent.js b/src/modules/Modal/ModalContent.js
index d2309a4646..52bdcd80f5 100644
--- a/src/modules/Modal/ModalContent.js
+++ b/src/modules/Modal/ModalContent.js
@@ -17,7 +17,6 @@ export default class ModalContent extends Component {
render() {
const classes = classNames(
- 'sd-modal-content',
this.props.className,
'content'
)
diff --git a/src/modules/Modal/ModalFooter.js b/src/modules/Modal/ModalFooter.js
index db3d4dde32..3334f1f00f 100644
--- a/src/modules/Modal/ModalFooter.js
+++ b/src/modules/Modal/ModalFooter.js
@@ -17,7 +17,6 @@ export default class ModalFooter extends Component {
render() {
const classes = classNames(
- 'sd-modal-footer',
this.props.className,
'actions'
)
diff --git a/src/modules/Modal/ModalHeader.js b/src/modules/Modal/ModalHeader.js
index 064115ff79..3d040679e4 100644
--- a/src/modules/Modal/ModalHeader.js
+++ b/src/modules/Modal/ModalHeader.js
@@ -17,7 +17,6 @@ export default class ModalHeader extends Component {
render() {
const classes = classNames(
- 'sd-modal-header',
this.props.className,
'header'
)
diff --git a/src/modules/Progress/Progress.js b/src/modules/Progress/Progress.js
index 21823e78d2..fd2afcef47 100644
--- a/src/modules/Progress/Progress.js
+++ b/src/modules/Progress/Progress.js
@@ -86,7 +86,6 @@ export default class Progress extends Component {
render() {
const { children, className, onChange, onError, showProgress } = this.props
const classes = classNames(
- 'sd-progress',
'ui',
className,
'progress'
diff --git a/src/views/Item/Item.js b/src/views/Item/Item.js
index 3eda30ede2..4ee0844c27 100644
--- a/src/views/Item/Item.js
+++ b/src/views/Item/Item.js
@@ -35,9 +35,9 @@ export default class Item extends Component {
const { className: imageClassName, ...imageProps } = _.get(image, 'props', {})
- const classes = cx('sd-item', className, 'item')
- const imageClasses = cx('sd-item-image ui', imageClassName, 'image')
- const contentClasses = cx('sd-item-content', contentClassName, 'content')
+ const classes = cx(className, 'item')
+ const imageClasses = cx('ui', imageClassName, 'image')
+ const contentClasses = cx(contentClassName, 'content')
const _description = children || description
diff --git a/src/views/Item/ItemItems.js b/src/views/Item/ItemItems.js
index f82a24c6c9..bdf0aced2d 100644
--- a/src/views/Item/ItemItems.js
+++ b/src/views/Item/ItemItems.js
@@ -4,7 +4,7 @@ import META from '../../utils/Meta'
function ItemItems(props) {
const { className, children, ...rest } = props
- const classes = cx('sd-item-items ui', className, 'items')
+ const classes = cx('ui', className, 'items')
return
{children}
}
diff --git a/src/views/Statistic/Statistic.js b/src/views/Statistic/Statistic.js
index ed186ffa13..600952e070 100644
--- a/src/views/Statistic/Statistic.js
+++ b/src/views/Statistic/Statistic.js
@@ -26,7 +26,6 @@ export default class Statistic extends Component {
render() {
const classes = classNames(
- 'sd-statistic',
'ui',
this.props.className,
'statistic'
diff --git a/src/views/Statistic/StatisticLabel.js b/src/views/Statistic/StatisticLabel.js
index fec38d3769..c0c6dda1ca 100644
--- a/src/views/Statistic/StatisticLabel.js
+++ b/src/views/Statistic/StatisticLabel.js
@@ -18,7 +18,6 @@ export default class StatisticLabel extends Component {
render() {
const classes = classNames(
- 'sd-statistic-label',
this.props.className,
'label',
)
diff --git a/src/views/Statistic/StatisticStatistics.js b/src/views/Statistic/StatisticStatistics.js
index e464d915c1..b2c29d6a75 100644
--- a/src/views/Statistic/StatisticStatistics.js
+++ b/src/views/Statistic/StatisticStatistics.js
@@ -17,7 +17,6 @@ export default class StatisticStatistics extends Component {
render() {
const classes = classNames(
- 'sd-statistic-statistics',
'ui',
this.props.className,
'statistics'
diff --git a/src/views/Statistic/StatisticValue.js b/src/views/Statistic/StatisticValue.js
index 13dc558161..3693a148cb 100644
--- a/src/views/Statistic/StatisticValue.js
+++ b/src/views/Statistic/StatisticValue.js
@@ -19,7 +19,6 @@ export default class StatisticValue extends Component {
render() {
const classes = classNames(
- 'sd-statistic-value',
this.props.className,
'value',
)
diff --git a/test/specs/addons/Confirm-test.js b/test/specs/addons/Confirm-test.js
index b00bd669ed..4ca0715a54 100644
--- a/test/specs/addons/Confirm-test.js
+++ b/test/specs/addons/Confirm-test.js
@@ -21,7 +21,7 @@ describe('Confirm', () => {
.show()
.then(isConfirmed => isConfirmed.should.equal(true))
confirm
- .find('.sd-confirm-button')
+ .findWhere(c => c.text() === 'Yes')
.simulate('click')
})
it('should return false on abort', () => {
@@ -31,7 +31,7 @@ describe('Confirm', () => {
.show()
.then(isConfirmed => isConfirmed.should.equal(false))
confirm
- .find('.sd-abort-button')
+ .findWhere(c => c.text() === 'Cancel')
.simulate('click')
})
})
diff --git a/test/specs/addons/Select/Select-test.js b/test/specs/addons/Select/Select-test.js
index 21779877da..b7fd51e73e 100644
--- a/test/specs/addons/Select/Select-test.js
+++ b/test/specs/addons/Select/Select-test.js
@@ -14,6 +14,6 @@ describe('Select', () => {
it('renders a selection Dropdown', () => {
shallow(
)
.first()
- .should.contain(
)
+ .should.contain(
)
})
})
diff --git a/test/specs/collections/Menu/MenuItem-test.js b/test/specs/collections/Menu/MenuItem-test.js
index bcef68ab27..fac7f41e2a 100644
--- a/test/specs/collections/Menu/MenuItem-test.js
+++ b/test/specs/collections/Menu/MenuItem-test.js
@@ -70,12 +70,12 @@ describe('MenuItem', () => {
describe('label', () => {
it('should not have a label by default', () => {
shallow(
)
- .should.not.have.className('sd-menu-label')
+ .should.not.have.descendants('Label')
})
it('should render a label if prop given', () => {
- shallow(
)
- .find('.sd-menu-label')
- .should.have.text('37')
+ mount(
)
+ .should.have.descendants('Label')
+ .and.contain.text('37')
})
})
})
diff --git a/test/specs/collections/Message/Message-test.js b/test/specs/collections/Message/Message-test.js
index 945b10942a..fd8ee07144 100644
--- a/test/specs/collections/Message/Message-test.js
+++ b/test/specs/collections/Message/Message-test.js
@@ -12,16 +12,17 @@ describe('Message', () => {
describe('with header', () => {
it('has a header', () => {
const header = faker.hacker.phrase()
- const message = shallow(
)
+ const message = mount(
)
- message.should.have.descendants('.sd-message-header')
- message.should.contain.text(header)
+ message
+ .should.have.descendants('Header')
+ .and.contain.text(header)
})
})
describe('without header', () => {
it('has no header', () => {
shallow(
)
- .should.not.have.descendants('.sd-message-header')
+ .should.not.have.descendants('Header')
})
})
describe('with icon', () => {
@@ -31,7 +32,7 @@ describe('Message', () => {
})
it('has a "content" wrapper', () => {
shallow(
)
- .should.have.descendants('.sd-message-content')
+ .should.have.descendants('.content')
})
})
describe('without icon', () => {
@@ -41,13 +42,13 @@ describe('Message', () => {
})
it('has no "content" wrapper', () => {
shallow(
)
- .should.not.have.descendants('.sd-message-content')
+ .should.not.have.descendants('.content')
})
})
describe('dismissable', () => {
it('adds a close icon', () => {
- shallow(
)
- .should.have.descendants('.sd-message-close-icon')
+ mount(
)
+ .should.have.descendants('.close.icon')
})
it('calls transition "fade" when dismissed', () => {
@@ -57,9 +58,8 @@ describe('Message', () => {
instance.messageElm.transition
.should.not.have.been.called()
-
wrapper
- .find('.sd-message-close-icon')
+ .find('.close.icon')
.simulate('click')
instance.messageElm.transition
@@ -69,7 +69,7 @@ describe('Message', () => {
describe('not dismissable', () => {
it('has no close icon', () => {
shallow(
)
- .should.not.have.descendants('.sd-message-close-icon')
+ .should.not.have.descendants('.close.icon')
})
})
})
diff --git a/test/specs/collections/Table/Table-test.js b/test/specs/collections/Table/Table-test.js
index f673f0083c..f78019e821 100644
--- a/test/specs/collections/Table/Table-test.js
+++ b/test/specs/collections/Table/Table-test.js
@@ -62,16 +62,17 @@ describe('Table', () => {
it('is called with the rowItem and index onClick', () => {
const spy = sandbox.spy()
const rowItem = { name: 'bob' }
- const row = shallow(
+ shallow(
)
- .find('.sd-table-row')
+ .find('tbody')
+ .find('tr')
.first()
+ .simulate('click')
- spy.should.have.not.been.called()
- row.simulate('click')
+ spy.should.have.been.calledOnce()
spy.should.have.been.calledWith(rowItem, 0)
})
})
@@ -84,7 +85,7 @@ describe('Table', () => {
)
- .find('.sd-table-header')
+ .find('th')
.should.contain.text('First Name')
})
@@ -94,7 +95,7 @@ describe('Table', () => {
'YO!'} />
)
- .find('.sd-table-header')
+ .find('th')
.should.contain.text('YO!')
})
})
@@ -106,7 +107,7 @@ describe('Table', () => {
)
- .find('.sd-table-cell')
+ .find('td')
.forEach((tableCell, i) => {
const originalItem = tableData[i][randomDataKey]
const originalValue = Table.getSafeCellContents(originalItem)
@@ -120,7 +121,7 @@ describe('Table', () => {
'REDACTED'} />
)
- .find('.sd-table-cell')
+ .find('td')
.forEach((tableCell) => {
tableCell.should.contain.text('REDACTED')
})
@@ -133,7 +134,7 @@ describe('Table', () => {
)
- .find('.sd-table-cell')
+ .find('td')
.forEach((tableCell) => {
const text = tableCell.text()
text.should.be.a('string')
@@ -149,7 +150,7 @@ describe('Table', () => {
)
- .find('.sd-table-cell')
+ .find('td')
.forEach((tableCell, i) => {
// remove this table's column from the current data object
// then expect this cell's value to not be found in the object
@@ -172,7 +173,8 @@ describe('Table', () => {
)
- .find('.sd-table-row')
+ .find('tbody')
+ .find('tr')
})
it('applies class "active" only to the clicked row', () => {
@@ -209,8 +211,8 @@ describe('Table', () => {
)
const table = wrapper.instance()
- const headers = wrapper.find('.sd-table-header')
- const rows = wrapper.find('.sd-table-row')
+ const headers = wrapper.find('th')
+ const rows = wrapper.find('tbody').find('tr')
// select a row
rows
diff --git a/test/specs/commonTests.js b/test/specs/commonTests.js
index 0599a850de..dd11c3f69b 100644
--- a/test/specs/commonTests.js
+++ b/test/specs/commonTests.js
@@ -25,11 +25,6 @@ const componentInfo = componentCtx.keys().map(key => {
const subComponentName = _.has(_meta, 'parent') && _.has(_meta, 'name')
? _meta.name.replace(_meta.parent, '')
: null
- // HeaderH1 => sd-header-h1
- const sdClass = `sd-${constructorName
- .replace('_', '') // remove underscore
- .replace(/(?!^)([A-Z])/g, '-$1') // prefix capitals with hyphen
- .toLowerCase()}` // lowercase
const componentClassName = (subComponentName || constructorName).toLowerCase()
@@ -37,7 +32,6 @@ const componentInfo = componentCtx.keys().map(key => {
_meta,
Component,
constructorName,
- sdClass,
componentClassName,
subComponentName,
filePath,
@@ -68,7 +62,6 @@ export const isConformant = (Component, requiredProps = {}) => {
constructorName,
componentClassName,
filenameWithoutExt,
- sdClass,
subComponentName,
} = _.find(componentInfo, i => i.constructorName === Component.prototype.constructor.name)
@@ -239,9 +232,19 @@ export const isConformant = (Component, requiredProps = {}) => {
// Handles className
// ----------------------------------------
describe('className (common)', () => {
- it(`has the Stardust className "${sdClass}"`, () => {
- render()
- .should.have.className(sdClass)
+ it('does not have an sd-* className', () => {
+ const wrapper = shallow()
+ const className = wrapper.prop('className')
+ const children = wrapper.children()
+
+ // component itself
+ if (className) className.should.not.contain('sd-')
+
+ // children
+ children.forEach(c => {
+ const childClassName = c.prop('className')
+ if (childClassName) childClassName.should.not.contain('sd-')
+ })
})
if (META.isSemanticUI(Component)) {
diff --git a/test/specs/elements/Label/Label-test.js b/test/specs/elements/Label/Label-test.js
index c5f0aad94d..8b5a399182 100644
--- a/test/specs/elements/Label/Label-test.js
+++ b/test/specs/elements/Label/Label-test.js
@@ -166,7 +166,6 @@ describe('Label Component', () => {
// mount to get click event to propagate on click
mount()
- .find('.sd-label')
.simulate('click')
props.onClick.should.have.been.calledOnce()
diff --git a/test/specs/elements/Segment/Segment-test.js b/test/specs/elements/Segment/Segment-test.js
index 804cc61de6..082f117580 100644
--- a/test/specs/elements/Segment/Segment-test.js
+++ b/test/specs/elements/Segment/Segment-test.js
@@ -13,15 +13,15 @@ describe('Segment', () => {
describe('heading', () => {
it('is not present by default', () => {
- shallow()
- .should.not.have.descendants('.sd-segment-heading')
+ mount()
+ .should.not.have.descendants('.header')
})
it('adds a heading', () => {
const heading = faker.hacker.phrase()
- const wrapper = shallow()
+ const wrapper = mount()
wrapper
- .should.have.descendants('.sd-segment-heading')
+ .should.have.descendants('.header')
wrapper
.should.contain.text(heading)
})