diff --git a/src/elements/Label/Label.js b/src/elements/Label/Label.js index dd0836cd50..36d0524ba2 100644 --- a/src/elements/Label/Label.js +++ b/src/elements/Label/Label.js @@ -2,6 +2,7 @@ import cx from 'classnames' import React, { PropTypes } from 'react' import { + customPropTypes, getElementType, getUnhandledProps, META, @@ -19,8 +20,8 @@ import { Icon, Image } from '../' */ function Label(props) { const { - attached, basic, children, color, corner, className, circular, detail, detailLink, floating, horizontal, - icon, image, link, onClick, onDetailClick, onRemove, pointing, removable, ribbon, size, tag, text, + attached, basic, children, color, corner, className, circular, detail, detailLink, empty, floating, horizontal, + icon, image, link, onClick, onDetailClick, onRemove, pointing, removable, ribbon, size, tag, content, } = props const handleClick = e => onClick && onClick(e, props) @@ -31,14 +32,15 @@ function Label(props) { size, color, useKeyOnly(basic, 'basic'), + useKeyOnly(circular, 'circular'), useKeyOnly(floating, 'floating'), useKeyOnly(horizontal, 'horizontal'), + useKeyOnly(empty, 'empty'), useKeyOnly(tag, 'tag'), useValueAndKey(attached, 'attached'), useKeyOrValueAndKey(corner, 'corner'), useKeyOrValueAndKey(pointing, 'pointing'), useKeyOrValueAndKey(ribbon, 'ribbon'), - circular && (children && 'circular' || 'empty circular'), // TODO how to handle image child with no image class? there are two image style labels. (image || childrenUtils.someByType(children, Image) || childrenUtils.someByType(children, 'img')) && 'image', 'label', @@ -46,16 +48,14 @@ function Label(props) { ) const DetailComponent = (detailLink || onDetailClick) && 'a' || 'div' - const ElementType = getElementType(Label, props, () => { - if (image || link || onClick) return 'a' - }) + const ElementType = getElementType(Label, props) const rest = getUnhandledProps(Label, props) return ( {createIcon(icon)} {createImage(image)} - {text} + {content} {children} {detail && ( {detail} @@ -93,8 +93,11 @@ Label.propTypes = { /** A label can reduce its complexity. */ basic: PropTypes.bool, - /** Primary content of the label, same as text. */ - children: PropTypes.node, + /** Primary content of the label, same as content. */ + children: customPropTypes.every([ + customPropTypes.disallow(['icon', 'image', 'content']), + PropTypes.node, + ]), /** Classes to add to the label className. */ className: PropTypes.string, @@ -114,13 +117,19 @@ Label.propTypes = { /** Format the detail as a link. */ detailLink: PropTypes.bool, + /** Formats the label as a dot. */ + empty: customPropTypes.every([ + customPropTypes.demand(['circular']), + PropTypes.bool, + ]), + /** Format a label to align better alongside text. */ horizontal: PropTypes.bool, /** Float above another element in the upper right corner. */ floating: PropTypes.bool, - /** Make the label circular, or a dot if it is empty. */ + /** Make the label circular, or a dot when used with 'empty' prop. */ circular: PropTypes.bool, /** Add an icon by icon name or pass an */ @@ -135,9 +144,6 @@ Label.propTypes = { PropTypes.element, ]), - /** Format the label as a link on hover. */ - link: PropTypes.bool, - /** Adds the link style when present, called with (event, props). */ onClick: PropTypes.func, @@ -165,8 +171,8 @@ Label.propTypes = { /** Format the label like a product tag. */ tag: PropTypes.bool, - /** Primary text of the label, same as children. */ - text: PropTypes.node, + /** Primary content of the label, same as children. */ + content: PropTypes.node, } export default Label diff --git a/test/specs/elements/Label/Label-test.js b/test/specs/elements/Label/Label-test.js index 3244574ec5..96df39ab67 100644 --- a/test/specs/elements/Label/Label-test.js +++ b/test/specs/elements/Label/Label-test.js @@ -13,6 +13,7 @@ describe('Label Component', () => { common.propKeyOnlyToClassName(Label, 'basic') common.propKeyOnlyToClassName(Label, 'circular') + common.propKeyOnlyToClassName(Label, 'empty') common.propKeyOnlyToClassName(Label, 'floating') common.propKeyOnlyToClassName(Label, 'horizontal') common.propKeyOnlyToClassName(Label, 'tag') @@ -33,18 +34,6 @@ describe('Label Component', () => { .should.have.tagName('div') }) - describe('(empty) circular', () => { - it('is added to className when there are no children', () => { - shallow(