From b9086d33f6014fa9e2c9c5dd2db2a3c1c8215509 Mon Sep 17 00:00:00 2001 From: Alexander Fedyashov Date: Mon, 16 Oct 2017 03:33:00 +0300 Subject: [PATCH] test(mixed): add test for `content` prop, remove useless tests (#2144) * breaking(Statistic): refactor Statistic to use factories, update content props * test(mixed): add test for `content` prop, remove useless tests * breaking(Step): refactor Step to use factories, update content props, add missing props * test(mixed): add test for `content` prop, remove useless tests * test(mixed): add test for `content` prop, remove useless tests * style(mixed): remove TODOs, style fixes --- src/collections/Form/FormField.d.ts | 4 ++ src/collections/Form/FormField.js | 13 ++++- src/collections/Menu/MenuItem.js | 2 +- src/collections/Menu/MenuMenu.d.ts | 4 ++ src/collections/Menu/MenuMenu.js | 12 ++++- src/collections/Message/MessageContent.d.ts | 4 ++ src/collections/Message/MessageContent.js | 12 ++++- src/collections/Table/TableHeader.d.ts | 4 ++ src/collections/Table/TableHeader.js | 12 ++++- src/elements/Button/ButtonContent.d.ts | 4 ++ src/elements/Button/ButtonContent.js | 11 +++- src/elements/Button/ButtonGroup.d.ts | 4 ++ src/elements/Button/ButtonGroup.js | 11 +++- src/elements/Container/Container.d.ts | 5 +- src/elements/Container/Container.js | 11 +++- src/elements/Divider/Divider.d.ts | 4 ++ src/elements/Divider/Divider.js | 11 +++- src/elements/Header/HeaderContent.d.ts | 4 ++ src/elements/Header/HeaderContent.js | 12 ++++- src/elements/Icon/IconGroup.d.ts | 5 ++ src/elements/Icon/IconGroup.js | 12 ++++- src/elements/Image/Image.d.ts | 4 ++ src/elements/Image/Image.js | 7 +++ src/elements/Image/ImageGroup.d.ts | 5 +- src/elements/Image/ImageGroup.js | 12 ++++- src/elements/Label/LabelGroup.d.ts | 5 +- src/elements/Label/LabelGroup.js | 11 +++- src/elements/List/List.d.ts | 4 ++ src/elements/List/List.js | 8 +++ src/elements/List/ListList.d.ts | 4 ++ src/elements/List/ListList.js | 12 ++++- src/elements/Rail/Rail.d.ts | 5 +- src/elements/Rail/Rail.js | 11 +++- src/elements/Reveal/Reveal.d.ts | 5 ++ src/elements/Reveal/Reveal.js | 11 +++- src/elements/Reveal/RevealContent.d.ts | 4 ++ src/elements/Reveal/RevealContent.js | 11 +++- src/elements/Segment/Segment.d.ts | 4 ++ src/elements/Segment/Segment.js | 11 +++- src/elements/Segment/SegmentGroup.d.ts | 5 ++ src/elements/Segment/SegmentGroup.js | 11 +++- src/elements/Step/StepContent.d.ts | 5 +- src/elements/Step/StepContent.js | 6 ++- src/elements/Step/StepGroup.d.ts | 5 +- src/elements/Step/StepGroup.js | 5 ++ src/modules/Dimmer/DimmerDimmable.d.ts | 4 ++ src/modules/Dimmer/DimmerDimmable.js | 17 +++--- src/modules/Dropdown/DropdownItem.js | 2 +- src/modules/Dropdown/DropdownMenu.d.ts | 4 ++ src/modules/Dropdown/DropdownMenu.js | 12 ++++- src/modules/Embed/Embed.d.ts | 5 +- src/modules/Embed/Embed.js | 6 ++- src/modules/Modal/ModalActions.d.ts | 6 ++- src/modules/Modal/ModalActions.js | 6 ++- src/modules/Modal/ModalDescription.d.ts | 4 ++ src/modules/Modal/ModalDescription.js | 12 ++++- src/modules/Popup/PopupContent.d.ts | 4 ++ src/modules/Popup/PopupContent.js | 12 ++++- src/modules/Popup/PopupHeader.d.ts | 4 ++ src/modules/Popup/PopupHeader.js | 12 ++++- src/modules/Progress/Progress.d.ts | 4 ++ src/modules/Progress/Progress.js | 6 ++- src/modules/Search/SearchCategory.d.ts | 5 ++ src/modules/Search/SearchCategory.js | 8 ++- src/modules/Search/SearchResult.d.ts | 4 ++ src/modules/Search/SearchResult.js | 3 ++ src/modules/Search/SearchResults.d.ts | 4 ++ src/modules/Search/SearchResults.js | 12 ++++- src/modules/Sidebar/Sidebar.d.ts | 4 ++ src/modules/Sidebar/Sidebar.js | 11 +++- src/modules/Sidebar/SidebarPushable.d.ts | 4 ++ src/modules/Sidebar/SidebarPushable.js | 12 ++++- src/modules/Sidebar/SidebarPusher.d.ts | 4 ++ src/modules/Sidebar/SidebarPusher.js | 12 ++++- src/views/Advertisement/Advertisement.d.ts | 4 ++ src/views/Advertisement/Advertisement.js | 11 +++- src/views/Card/Card.d.ts | 3 ++ src/views/Card/Card.js | 7 +++ src/views/Card/CardContent.d.ts | 5 +- src/views/Card/CardContent.js | 9 ++-- src/views/Card/CardGroup.d.ts | 5 +- src/views/Card/CardGroup.js | 13 +++-- src/views/Comment/Comment.d.ts | 4 ++ src/views/Comment/Comment.js | 12 ++++- src/views/Comment/CommentAction.d.ts | 4 ++ src/views/Comment/CommentAction.js | 12 ++++- src/views/Comment/CommentActions.d.ts | 4 ++ src/views/Comment/CommentActions.js | 12 ++++- src/views/Comment/CommentAuthor.d.ts | 6 ++- src/views/Comment/CommentAuthor.js | 12 ++++- src/views/Comment/CommentContent.d.ts | 4 ++ src/views/Comment/CommentContent.js | 12 ++++- src/views/Comment/CommentGroup.d.ts | 4 ++ src/views/Comment/CommentGroup.js | 11 +++- src/views/Comment/CommentMetadata.d.ts | 4 ++ src/views/Comment/CommentMetadata.js | 12 ++++- src/views/Comment/CommentText.d.ts | 4 ++ src/views/Comment/CommentText.js | 12 ++++- src/views/Item/ItemGroup.d.ts | 5 +- src/views/Item/ItemGroup.js | 9 ++-- src/views/Statistic/StatisticGroup.d.ts | 5 +- src/views/Statistic/StatisticGroup.js | 5 ++ .../addons/Responsive/Responsive-test.js | 4 +- .../collections/Breadcrumb/Breadcrumb-test.js | 4 +- test/specs/collections/Form/Form-test.js | 4 +- test/specs/collections/Form/FormGroup-test.js | 4 +- test/specs/collections/Grid/Grid-test.js | 4 +- .../specs/collections/Grid/GridColumn-test.js | 4 +- test/specs/collections/Grid/GridRow-test.js | 4 +- test/specs/collections/Menu/Menu-test.js | 4 +- .../specs/collections/Menu/MenuHeader-test.js | 12 ----- test/specs/collections/Menu/MenuItem-test.js | 10 ---- .../specs/collections/Message/Message-test.js | 4 +- .../collections/Message/MessageList-test.js | 4 +- test/specs/collections/Table/Table-test.js | 4 +- .../specs/collections/Table/TableBody-test.js | 4 +- .../specs/collections/Table/TableCell-test.js | 15 ------ test/specs/collections/Table/TableRow-test.js | 4 +- test/specs/commonTests/rendersChildren.js | 52 ++++++++++++++----- test/specs/elements/Header/Header-test.js | 4 -- .../elements/Header/HeaderSubheader-test.js | 12 ----- test/specs/elements/Icon/Icon-test.js | 2 - test/specs/elements/Input/Input-test.js | 4 +- test/specs/elements/Label/Label-test.js | 16 ------ test/specs/elements/Label/LabelDetail-test.js | 12 ----- test/specs/elements/Loader/Loader-test.js | 9 ---- .../Accordion/AccordionAccordion-test.js | 4 +- test/specs/modules/Dimmer/Dimmer-test.js | 9 ---- .../modules/Dropdown/DropdownItem-test.js | 4 +- .../Dropdown/DropdownSearchInput-test.js | 1 - test/specs/modules/Sticky/Sticky-test.js | 6 ++- test/specs/views/Feed/Feed-test.js | 4 +- test/specs/views/Feed/FeedContent-test.js | 7 --- test/specs/views/Feed/FeedDate-test.js | 9 ---- test/specs/views/Feed/FeedEvent-test.js | 4 +- test/specs/views/Feed/FeedExtra-test.js | 13 ++--- test/specs/views/Feed/FeedLike-test.js | 7 --- test/specs/views/Feed/FeedMeta-test.js | 7 --- test/specs/views/Feed/FeedSummary-test.js | 7 --- test/specs/views/Feed/FeedUser-test.js | 9 ---- test/specs/views/Item/Item-test.js | 4 +- test/specs/views/Item/ItemContent-test.js | 12 ----- test/specs/views/Item/ItemDescription-test.js | 12 ----- test/specs/views/Item/ItemExtra-test.js | 12 ----- test/specs/views/Item/ItemHeader-test.js | 12 ----- test/specs/views/Item/ItemMeta-test.js | 12 ----- test/specs/views/Stastistic/Statistic-test.js | 10 ---- .../views/Stastistic/StatisticLabel-test.js | 12 ----- .../views/Stastistic/StatisticValue-test.js | 12 ----- 149 files changed, 754 insertions(+), 380 deletions(-) diff --git a/src/collections/Form/FormField.d.ts b/src/collections/Form/FormField.d.ts index 52780756fc..401540c185 100644 --- a/src/collections/Form/FormField.d.ts +++ b/src/collections/Form/FormField.d.ts @@ -1,6 +1,7 @@ import * as React from 'react'; import { HtmlLabelProps, + SemanticShorthandContent, SemanticShorthandItem, SemanticWIDTHS } from '../..'; @@ -17,6 +18,9 @@ export interface FormFieldProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** * A form control component (i.e. Dropdown) or HTML tagName (i.e. 'input'). * Extra FormField props are passed to the control component. diff --git a/src/collections/Form/FormField.js b/src/collections/Form/FormField.js index d28e1efd8f..5f7e60a72e 100644 --- a/src/collections/Form/FormField.js +++ b/src/collections/Form/FormField.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types' import React, { createElement } from 'react' import { + childrenUtils, createHTMLLabel, customPropTypes, getElementType, @@ -31,6 +32,7 @@ function FormField(props) { const { children, className, + content, control, disabled, error, @@ -58,7 +60,13 @@ function FormField(props) { // ---------------------------------------- if (_.isNil(control)) { - if (_.isNil(label)) return {children} + if (_.isNil(label)) { + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) + } return {createHTMLLabel(label)} } @@ -118,6 +126,9 @@ FormField.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** * A form control component (i.e. Dropdown) or HTML tagName (i.e. 'input'). * Extra FormField props are passed to the control component. diff --git a/src/collections/Menu/MenuItem.js b/src/collections/Menu/MenuItem.js index 4bb4c16c1c..021e73bbab 100644 --- a/src/collections/Menu/MenuItem.js +++ b/src/collections/Menu/MenuItem.js @@ -132,7 +132,7 @@ export default class MenuItem extends Component { return ( {Icon.create(icon)} - {content || _.startCase(name)} + {childrenUtils.isNil(content) ? _.startCase(name) : content} ) } diff --git a/src/collections/Menu/MenuMenu.d.ts b/src/collections/Menu/MenuMenu.d.ts index 57464a218f..f9c02f1472 100644 --- a/src/collections/Menu/MenuMenu.d.ts +++ b/src/collections/Menu/MenuMenu.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface MenuMenuProps { [key: string]: any; @@ -12,6 +13,9 @@ export interface MenuMenuProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** A sub menu can take left or right position. */ position?: 'left' | 'right'; } diff --git a/src/collections/Menu/MenuMenu.js b/src/collections/Menu/MenuMenu.js index 611017b208..376c2f44c1 100644 --- a/src/collections/Menu/MenuMenu.js +++ b/src/collections/Menu/MenuMenu.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -13,7 +14,7 @@ import { * A menu can contain a sub menu. */ function MenuMenu(props) { - const { children, className, position } = props + const { children, className, content, position } = props const classes = cx( position, @@ -23,7 +24,11 @@ function MenuMenu(props) { const rest = getUnhandledProps(MenuMenu, props) const ElementType = getElementType(MenuMenu, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } MenuMenu._meta = { @@ -42,6 +47,9 @@ MenuMenu.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** A sub menu can take left or right position. */ position: PropTypes.oneOf(['left', 'right']), } diff --git a/src/collections/Message/MessageContent.d.ts b/src/collections/Message/MessageContent.d.ts index eb7e563351..e990e3bb7f 100644 --- a/src/collections/Message/MessageContent.d.ts +++ b/src/collections/Message/MessageContent.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface MessageContentProps { [key: string]: any; @@ -11,6 +12,9 @@ export interface MessageContentProps { /** Additional classes. */ className?: string; + + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; } declare const MessageContent: React.StatelessComponent; diff --git a/src/collections/Message/MessageContent.js b/src/collections/Message/MessageContent.js index ba3929b93d..c1bec84eb5 100644 --- a/src/collections/Message/MessageContent.js +++ b/src/collections/Message/MessageContent.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -13,12 +14,16 @@ import { * A message can contain a content. */ function MessageContent(props) { - const { children, className } = props + const { children, className, content } = props const classes = cx('content', className) const rest = getUnhandledProps(MessageContent, props) const ElementType = getElementType(MessageContent, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } MessageContent._meta = { @@ -36,6 +41,9 @@ MessageContent.propTypes = { /** Additional classes. */ className: PropTypes.string, + + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, } export default MessageContent diff --git a/src/collections/Table/TableHeader.d.ts b/src/collections/Table/TableHeader.d.ts index f3ebc32e48..9aa045e13f 100644 --- a/src/collections/Table/TableHeader.d.ts +++ b/src/collections/Table/TableHeader.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface TableHeaderProps { [key: string]: any; @@ -12,6 +13,9 @@ export interface TableHeaderProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** A definition table can have a full width header or footer, filling in the gap left by the first column. */ fullWidth?: boolean; } diff --git a/src/collections/Table/TableHeader.js b/src/collections/Table/TableHeader.js index fefd9063a9..975dec723b 100644 --- a/src/collections/Table/TableHeader.js +++ b/src/collections/Table/TableHeader.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -14,7 +15,7 @@ import { * A table can have a header. */ function TableHeader(props) { - const { children, className, fullWidth } = props + const { children, className, content, fullWidth } = props const classes = cx( useKeyOnly(fullWidth, 'full-width'), className, @@ -22,7 +23,11 @@ function TableHeader(props) { const rest = getUnhandledProps(TableHeader, props) const ElementType = getElementType(TableHeader, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } TableHeader._meta = { @@ -45,6 +50,9 @@ TableHeader.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** A definition table can have a full width header or footer, filling in the gap left by the first column. */ fullWidth: PropTypes.bool, } diff --git a/src/elements/Button/ButtonContent.d.ts b/src/elements/Button/ButtonContent.d.ts index 048525648e..c62d12bba2 100644 --- a/src/elements/Button/ButtonContent.d.ts +++ b/src/elements/Button/ButtonContent.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface ButtonContentProps { [key: string]: any; @@ -12,6 +13,9 @@ export interface ButtonContentProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Initially hidden, visible on hover. */ hidden?: boolean; diff --git a/src/elements/Button/ButtonContent.js b/src/elements/Button/ButtonContent.js index b5aa08bf43..2400520dc3 100644 --- a/src/elements/Button/ButtonContent.js +++ b/src/elements/Button/ButtonContent.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -17,6 +18,7 @@ function ButtonContent(props) { const { children, className, + content, hidden, visible, } = props @@ -29,7 +31,11 @@ function ButtonContent(props) { const rest = getUnhandledProps(ButtonContent, props) const ElementType = getElementType(ButtonContent, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } ButtonContent._meta = { @@ -48,6 +54,9 @@ ButtonContent.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Initially hidden, visible on hover. */ hidden: PropTypes.bool, diff --git a/src/elements/Button/ButtonGroup.d.ts b/src/elements/Button/ButtonGroup.d.ts index 0ae09dfba7..4f68a90d71 100644 --- a/src/elements/Button/ButtonGroup.d.ts +++ b/src/elements/Button/ButtonGroup.d.ts @@ -2,6 +2,7 @@ import * as React from 'react'; import { SemanticCOLORS, SemanticFLOATS, + SemanticShorthandContent, SemanticSIZES, SemanticWIDTHS } from '../..'; @@ -30,6 +31,9 @@ export interface ButtonGroupProps { /** Groups can reduce their padding to fit into tighter spaces. */ compact?: boolean; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Groups can be aligned to the left or right of its container. */ floated?: SemanticFLOATS; diff --git a/src/elements/Button/ButtonGroup.js b/src/elements/Button/ButtonGroup.js index 23327e3a4a..ecfe865d57 100644 --- a/src/elements/Button/ButtonGroup.js +++ b/src/elements/Button/ButtonGroup.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -25,6 +26,7 @@ function ButtonGroup(props) { className, color, compact, + content, floated, fluid, icon, @@ -65,7 +67,11 @@ function ButtonGroup(props) { const rest = getUnhandledProps(ButtonGroup, props) const ElementType = getElementType(ButtonGroup, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } ButtonGroup._meta = { @@ -99,6 +105,9 @@ ButtonGroup.propTypes = { /** Groups can reduce their padding to fit into tighter spaces. */ compact: PropTypes.bool, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Groups can be aligned to the left or right of its container. */ floated: PropTypes.oneOf(SUI.FLOATS), diff --git a/src/elements/Container/Container.d.ts b/src/elements/Container/Container.d.ts index e029166acc..6e3311ce07 100644 --- a/src/elements/Container/Container.d.ts +++ b/src/elements/Container/Container.d.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { SemanticTEXTALIGNMENTS } from '../..'; +import { SemanticShorthandContent, SemanticTEXTALIGNMENTS } from '../..'; export interface ContainerProps { [key: string]: any; @@ -13,6 +13,9 @@ export interface ContainerProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Container has no maximum width. */ fluid?: boolean; diff --git a/src/elements/Container/Container.js b/src/elements/Container/Container.js index 3a5bc5f00b..683e36051d 100644 --- a/src/elements/Container/Container.js +++ b/src/elements/Container/Container.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -19,6 +20,7 @@ function Container(props) { const { children, className, + content, fluid, text, textAlign, @@ -34,7 +36,11 @@ function Container(props) { const rest = getUnhandledProps(Container, props) const ElementType = getElementType(Container, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } Container._meta = { @@ -52,6 +58,9 @@ Container.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Container has no maximum width. */ fluid: PropTypes.bool, diff --git a/src/elements/Divider/Divider.d.ts b/src/elements/Divider/Divider.d.ts index 007d9ff8e9..cd140ea196 100644 --- a/src/elements/Divider/Divider.d.ts +++ b/src/elements/Divider/Divider.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface DividerProps { [key: string]: any; @@ -15,6 +16,9 @@ export interface DividerProps { /** Divider can clear the content above it. */ clearing?: boolean; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Divider can be fitted without any space above or below it. */ fitted?: boolean; diff --git a/src/elements/Divider/Divider.js b/src/elements/Divider/Divider.js index c087151472..b4879f636a 100644 --- a/src/elements/Divider/Divider.js +++ b/src/elements/Divider/Divider.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -18,6 +19,7 @@ function Divider(props) { children, className, clearing, + content, fitted, hidden, horizontal, @@ -41,7 +43,11 @@ function Divider(props) { const rest = getUnhandledProps(Divider, props) const ElementType = getElementType(Divider, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } Divider._meta = { @@ -62,6 +68,9 @@ Divider.propTypes = { /** Divider can clear the content above it. */ clearing: PropTypes.bool, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Divider can be fitted without any space above or below it. */ fitted: PropTypes.bool, diff --git a/src/elements/Header/HeaderContent.d.ts b/src/elements/Header/HeaderContent.d.ts index 3a73bcdcb7..281843363b 100644 --- a/src/elements/Header/HeaderContent.d.ts +++ b/src/elements/Header/HeaderContent.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface HeaderContentProps { [key: string]: any; @@ -11,6 +12,9 @@ export interface HeaderContentProps { /** Additional classes. */ className?: string; + + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; } declare const HeaderContent: React.StatelessComponent; diff --git a/src/elements/Header/HeaderContent.js b/src/elements/Header/HeaderContent.js index 3ad4c4313b..b9072dbee5 100644 --- a/src/elements/Header/HeaderContent.js +++ b/src/elements/Header/HeaderContent.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -13,12 +14,16 @@ import { * Header content wraps the main content when there is an adjacent Icon or Image. */ function HeaderContent(props) { - const { children, className } = props + const { children, className, content } = props const classes = cx('content', className) const rest = getUnhandledProps(HeaderContent, props) const ElementType = getElementType(HeaderContent, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } HeaderContent._meta = { @@ -36,6 +41,9 @@ HeaderContent.propTypes = { /** Additional classes. */ className: PropTypes.string, + + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, } export default HeaderContent diff --git a/src/elements/Icon/IconGroup.d.ts b/src/elements/Icon/IconGroup.d.ts index 93ef9fab17..bb516b7f9b 100644 --- a/src/elements/Icon/IconGroup.d.ts +++ b/src/elements/Icon/IconGroup.d.ts @@ -1,4 +1,6 @@ import * as React from 'react'; + +import { SemanticShorthandContent } from '../..'; import { IconSizeProp } from './Icon'; export interface IconGroupProps { @@ -13,6 +15,9 @@ export interface IconGroupProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Size of the icon group. */ size?: IconSizeProp; } diff --git a/src/elements/Icon/IconGroup.js b/src/elements/Icon/IconGroup.js index 1a19dbfba3..a3ba311e6d 100644 --- a/src/elements/Icon/IconGroup.js +++ b/src/elements/Icon/IconGroup.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -15,7 +16,7 @@ import { * Several icons can be used together as a group. */ function IconGroup(props) { - const { children, className, size } = props + const { children, className, content, size } = props const classes = cx( size, 'icons', @@ -24,7 +25,11 @@ function IconGroup(props) { const rest = getUnhandledProps(IconGroup, props) const ElementType = getElementType(IconGroup, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } IconGroup._meta = { @@ -43,6 +48,9 @@ IconGroup.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Size of the icon group. */ size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')), } diff --git a/src/elements/Image/Image.d.ts b/src/elements/Image/Image.d.ts index dade2110f2..a03b7d648f 100644 --- a/src/elements/Image/Image.d.ts +++ b/src/elements/Image/Image.d.ts @@ -2,6 +2,7 @@ import * as React from 'react'; import { SemanticFLOATS, + SemanticShorthandContent, SemanticShorthandItem, SemanticSIZES, SemanticVERTICALALIGNMENTS, @@ -35,6 +36,9 @@ export interface ImageProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** An image can show that it is disabled and cannot be selected. */ disabled?: boolean; diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js index e962608741..04fa1035db 100644 --- a/src/elements/Image/Image.js +++ b/src/elements/Image/Image.js @@ -33,6 +33,7 @@ function Image(props) { centered, children, className, + content, dimmer, disabled, floated, @@ -77,6 +78,9 @@ function Image(props) { if (!childrenUtils.isNil(children)) { return {children} } + if (!childrenUtils.isNil(content)) { + return {content} + } const rootProps = { ...rest, className: classes } const imgTagProps = { alt, src, height, width } @@ -121,6 +125,9 @@ Image.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** An image can show that it is disabled and cannot be selected. */ disabled: PropTypes.bool, diff --git a/src/elements/Image/ImageGroup.d.ts b/src/elements/Image/ImageGroup.d.ts index cc65221ba3..11ccb7535b 100644 --- a/src/elements/Image/ImageGroup.d.ts +++ b/src/elements/Image/ImageGroup.d.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { SemanticSIZES } from '../..'; +import { SemanticSIZES, SemanticShorthandContent } from '../..'; export interface ImageGroupProps { [key: string]: any; @@ -13,6 +13,9 @@ export interface ImageGroupProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** A group of images can be formatted to have the same size. */ size?: SemanticSIZES; } diff --git a/src/elements/Image/ImageGroup.js b/src/elements/Image/ImageGroup.js index 9a27676d68..080facb420 100644 --- a/src/elements/Image/ImageGroup.js +++ b/src/elements/Image/ImageGroup.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -14,12 +15,16 @@ import { * A group of images. */ function ImageGroup(props) { - const { children, className, size } = props + const { children, className, content, size } = props const classes = cx('ui', size, className, 'images') const rest = getUnhandledProps(ImageGroup, props) const ElementType = getElementType(ImageGroup, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } ImageGroup._meta = { @@ -38,6 +43,9 @@ ImageGroup.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** A group of images can be formatted to have the same size. */ size: PropTypes.oneOf(SUI.SIZES), } diff --git a/src/elements/Label/LabelGroup.d.ts b/src/elements/Label/LabelGroup.d.ts index 81af4f17b9..c13d986834 100644 --- a/src/elements/Label/LabelGroup.d.ts +++ b/src/elements/Label/LabelGroup.d.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { SemanticCOLORS, SemanticSIZES } from '../..'; +import { SemanticCOLORS, SemanticShorthandContent, SemanticSIZES } from '../..'; export interface LabelGroupProps { [key: string]: any; @@ -19,6 +19,9 @@ export interface LabelGroupProps { /** Label group can share colors together. */ color?: SemanticCOLORS; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Label group can share sizes together. */ size?: SemanticSIZES; diff --git a/src/elements/Label/LabelGroup.js b/src/elements/Label/LabelGroup.js index 1f771c7c64..ae2b1610d6 100644 --- a/src/elements/Label/LabelGroup.js +++ b/src/elements/Label/LabelGroup.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -20,6 +21,7 @@ function LabelGroup(props) { circular, className, color, + content, size, tag, } = props @@ -36,7 +38,11 @@ function LabelGroup(props) { const rest = getUnhandledProps(LabelGroup, props) const ElementType = getElementType(LabelGroup, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } LabelGroup._meta = { @@ -61,6 +67,9 @@ LabelGroup.propTypes = { /** Label group can share colors together. */ color: PropTypes.oneOf(SUI.COLORS), + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Label group can share sizes together. */ size: PropTypes.oneOf(SUI.SIZES), diff --git a/src/elements/List/List.d.ts b/src/elements/List/List.d.ts index 316aa7454f..43c45b8010 100644 --- a/src/elements/List/List.d.ts +++ b/src/elements/List/List.d.ts @@ -3,6 +3,7 @@ import * as React from 'react'; import { SemanticFLOATS, SemanticShorthandCollection, + SemanticShorthandContent, SemanticSIZES, SemanticVERTICALALIGNMENTS } from '../..'; @@ -34,6 +35,9 @@ export interface ListProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** A list can show divisions between content. */ divided?: boolean; diff --git a/src/elements/List/List.js b/src/elements/List/List.js index cfc3af3961..6fe4815e9c 100644 --- a/src/elements/List/List.js +++ b/src/elements/List/List.js @@ -45,6 +45,9 @@ class List extends Component { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** A list can show divisions between content. */ divided: PropTypes.bool, @@ -119,6 +122,7 @@ class List extends Component { celled, children, className, + content, divided, floated, horizontal, @@ -157,6 +161,10 @@ class List extends Component { return {children} } + if (!childrenUtils.isNil(content)) { + return {content} + } + return ( {_.map(items, item => ListItem.create(item, { overrideProps: this.handleItemOverrides }))} diff --git a/src/elements/List/ListList.d.ts b/src/elements/List/ListList.d.ts index 0367cd5398..ec0fca1e89 100644 --- a/src/elements/List/ListList.d.ts +++ b/src/elements/List/ListList.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import {SemanticShorthandContent} from '../..'; export interface ListListProps { [key: string]: any; @@ -11,6 +12,9 @@ export interface ListListProps { /** Additional classes. */ className?: string; + + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; } declare const ListList: React.StatelessComponent; diff --git a/src/elements/List/ListList.js b/src/elements/List/ListList.js index 5af88cb092..aa0c7e518d 100644 --- a/src/elements/List/ListList.js +++ b/src/elements/List/ListList.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -14,7 +15,7 @@ import { * A list can contain a sub list. */ function ListList(props) { - const { children, className } = props + const { children, className, content } = props const rest = getUnhandledProps(ListList, props) const ElementType = getElementType(ListList, props) @@ -23,7 +24,11 @@ function ListList(props) { className, ) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } ListList._meta = { @@ -41,6 +46,9 @@ ListList.propTypes = { /** Additional classes. */ className: PropTypes.string, + + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, } export default ListList diff --git a/src/elements/Rail/Rail.d.ts b/src/elements/Rail/Rail.d.ts index c1de655e70..1960a99ef4 100644 --- a/src/elements/Rail/Rail.d.ts +++ b/src/elements/Rail/Rail.d.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { SemanticFLOATS } from '../..'; +import { SemanticFLOATS, SemanticShorthandContent } from '../..'; export interface RailProps { [key: string]: any; @@ -19,6 +19,9 @@ export interface RailProps { /** A rail can appear closer to the main viewport. */ close?: boolean | 'very'; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** A rail can create a division between itself and a container. */ dividing?: boolean; diff --git a/src/elements/Rail/Rail.js b/src/elements/Rail/Rail.js index c0af2f6714..0dda2ba649 100644 --- a/src/elements/Rail/Rail.js +++ b/src/elements/Rail/Rail.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -22,6 +23,7 @@ function Rail(props) { children, className, close, + content, dividing, internal, position, @@ -42,7 +44,11 @@ function Rail(props) { const rest = getUnhandledProps(Rail, props) const ElementType = getElementType(Rail, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } Rail._meta = { @@ -69,6 +75,9 @@ Rail.propTypes = { PropTypes.oneOf(['very']), ]), + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** A rail can create a division between itself and a container. */ dividing: PropTypes.bool, diff --git a/src/elements/Reveal/Reveal.d.ts b/src/elements/Reveal/Reveal.d.ts index df120c0b9c..5176ee2b73 100644 --- a/src/elements/Reveal/Reveal.d.ts +++ b/src/elements/Reveal/Reveal.d.ts @@ -1,4 +1,6 @@ import * as React from 'react'; + +import { SemanticShorthandContent } from '../..'; import { default as RevealContent } from './RevealContent'; export interface RevealProps { @@ -21,6 +23,9 @@ export interface RevealProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** A disabled reveal will not animate when hovered. */ disabled?: boolean; diff --git a/src/elements/Reveal/Reveal.js b/src/elements/Reveal/Reveal.js index 79dc9bbcb0..580d7173e1 100644 --- a/src/elements/Reveal/Reveal.js +++ b/src/elements/Reveal/Reveal.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -20,6 +21,7 @@ function Reveal(props) { animated, children, className, + content, disabled, instant, } = props @@ -36,7 +38,11 @@ function Reveal(props) { const rest = getUnhandledProps(Reveal, props) const ElementType = getElementType(Reveal, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } Reveal._meta = { @@ -64,6 +70,9 @@ Reveal.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** A disabled reveal will not animate when hovered. */ disabled: PropTypes.bool, diff --git a/src/elements/Reveal/RevealContent.d.ts b/src/elements/Reveal/RevealContent.d.ts index e5b17a45eb..40eab5232e 100644 --- a/src/elements/Reveal/RevealContent.d.ts +++ b/src/elements/Reveal/RevealContent.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface RevealContentProps { [key: string]: any; @@ -12,6 +13,9 @@ export interface RevealContentProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** A reveal may contain content that is visible before interaction. */ hidden?: boolean; diff --git a/src/elements/Reveal/RevealContent.js b/src/elements/Reveal/RevealContent.js index 8c11b93cae..8c5e3317d5 100644 --- a/src/elements/Reveal/RevealContent.js +++ b/src/elements/Reveal/RevealContent.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -17,6 +18,7 @@ function RevealContent(props) { const { children, className, + content, hidden, visible, } = props @@ -31,7 +33,11 @@ function RevealContent(props) { const rest = getUnhandledProps(RevealContent, props) const ElementType = getElementType(RevealContent, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } RevealContent._meta = { @@ -50,6 +56,9 @@ RevealContent.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** A reveal may contain content that is visible before interaction. */ hidden: PropTypes.bool, diff --git a/src/elements/Segment/Segment.d.ts b/src/elements/Segment/Segment.d.ts index 68909645d5..117c5a17dc 100644 --- a/src/elements/Segment/Segment.d.ts +++ b/src/elements/Segment/Segment.d.ts @@ -3,6 +3,7 @@ import * as React from 'react'; import { SemanticCOLORS, SemanticFLOATS, + SemanticShorthandContent, SemanticTEXTALIGNMENTS } from '../..'; import { default as SegmentGroup } from './SegmentGroup'; @@ -39,6 +40,9 @@ export interface SegmentProps { /** A segment may take up only as much space as is necessary. */ compact?: boolean; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** A segment may show its content is disabled. */ disabled?: boolean; diff --git a/src/elements/Segment/Segment.js b/src/elements/Segment/Segment.js index 9061405661..ac18f748df 100644 --- a/src/elements/Segment/Segment.js +++ b/src/elements/Segment/Segment.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -29,6 +30,7 @@ function Segment(props) { clearing, color, compact, + content, disabled, floated, inverted, @@ -71,7 +73,11 @@ function Segment(props) { const rest = getUnhandledProps(Segment, props) const ElementType = getElementType(Segment, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } Segment.Group = SegmentGroup @@ -112,6 +118,9 @@ Segment.propTypes = { /** A segment may take up only as much space as is necessary. */ compact: PropTypes.bool, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** A segment may show its content is disabled. */ disabled: PropTypes.bool, diff --git a/src/elements/Segment/SegmentGroup.d.ts b/src/elements/Segment/SegmentGroup.d.ts index d0939e7b20..6cadc81790 100644 --- a/src/elements/Segment/SegmentGroup.d.ts +++ b/src/elements/Segment/SegmentGroup.d.ts @@ -1,4 +1,6 @@ import * as React from 'react'; + +import { SemanticShorthandContent } from '../..'; import { SegmentSizeProp } from './Segment'; export interface SegmentGroupProps { @@ -16,6 +18,9 @@ export interface SegmentGroupProps { /** A segment may take up only as much space as is necessary. */ compact?: boolean; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Formats content to be aligned horizontally. */ horizontal?: boolean; diff --git a/src/elements/Segment/SegmentGroup.js b/src/elements/Segment/SegmentGroup.js index 844c5ff768..fa56e64073 100644 --- a/src/elements/Segment/SegmentGroup.js +++ b/src/elements/Segment/SegmentGroup.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -20,6 +21,7 @@ function SegmentGroup(props) { children, className, compact, + content, horizontal, piled, raised, @@ -41,7 +43,11 @@ function SegmentGroup(props) { const rest = getUnhandledProps(SegmentGroup, props) const ElementType = getElementType(SegmentGroup, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } SegmentGroup._meta = { @@ -63,6 +69,9 @@ SegmentGroup.propTypes = { /** A segment may take up only as much space as is necessary. */ compact: PropTypes.bool, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Formats content to be aligned horizontally. */ horizontal: PropTypes.bool, diff --git a/src/elements/Step/StepContent.d.ts b/src/elements/Step/StepContent.d.ts index 8e7e33791b..e0ffa76730 100644 --- a/src/elements/Step/StepContent.d.ts +++ b/src/elements/Step/StepContent.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { SemanticShorthandItem } from '../..'; +import { SemanticShorthandItem, SemanticShorthandContent } from '../..'; import { StepDescriptionProps } from './StepDescription'; import { StepTitleProps } from './StepTitle'; @@ -16,6 +16,9 @@ export interface StepContentProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Shorthand for StepDescription. */ description?: SemanticShorthandItem; diff --git a/src/elements/Step/StepContent.js b/src/elements/Step/StepContent.js index 310c4c2b0a..b29faf195a 100644 --- a/src/elements/Step/StepContent.js +++ b/src/elements/Step/StepContent.js @@ -17,12 +17,13 @@ import StepTitle from './StepTitle' * A step can contain a content. */ function StepContent(props) { - const { children, className, description, title } = props + const { children, className, content, description, title } = props const classes = cx('content', className) const rest = getUnhandledProps(StepContent, props) const ElementType = getElementType(StepContent, props) if (!childrenUtils.isNil(children)) return {children} + if (!childrenUtils.isNil(content)) return {content} return ( @@ -48,6 +49,9 @@ StepContent.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Shorthand for StepDescription. */ description: customPropTypes.itemShorthand, diff --git a/src/elements/Step/StepGroup.d.ts b/src/elements/Step/StepGroup.d.ts index 7e9d8c4318..f7ba0216a2 100644 --- a/src/elements/Step/StepGroup.d.ts +++ b/src/elements/Step/StepGroup.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { SemanticShorthandCollection, SemanticWIDTHS } from '../..'; +import { SemanticShorthandCollection, SemanticShorthandContent, SemanticWIDTHS } from '../..'; import { StepProps } from './Step'; export interface StepGroupProps { @@ -18,6 +18,9 @@ export interface StepGroupProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** A fluid step takes up the width of its container. */ fluid?: boolean; diff --git a/src/elements/Step/StepGroup.js b/src/elements/Step/StepGroup.js index 051b632eaf..6a4df25f9f 100644 --- a/src/elements/Step/StepGroup.js +++ b/src/elements/Step/StepGroup.js @@ -28,6 +28,7 @@ function StepGroup(props) { attached, children, className, + content, fluid, items, ordered, @@ -54,6 +55,7 @@ function StepGroup(props) { const ElementType = getElementType(StepGroup, props) if (!childrenUtils.isNil(children)) return {children} + if (!childrenUtils.isNil(content)) return {content} return ( @@ -84,6 +86,9 @@ StepGroup.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** A fluid step takes up the width of its container. */ fluid: PropTypes.bool, diff --git a/src/modules/Dimmer/DimmerDimmable.d.ts b/src/modules/Dimmer/DimmerDimmable.d.ts index 8001f872ed..7bf2eafa27 100644 --- a/src/modules/Dimmer/DimmerDimmable.d.ts +++ b/src/modules/Dimmer/DimmerDimmable.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface DimmerDimmableProps { [key: string]: any; @@ -15,6 +16,9 @@ export interface DimmerDimmableProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Controls whether or not the dim is displayed. */ dimmed?: boolean; } diff --git a/src/modules/Dimmer/DimmerDimmable.js b/src/modules/Dimmer/DimmerDimmable.js index 1f07eb695d..a28a29255f 100644 --- a/src/modules/Dimmer/DimmerDimmable.js +++ b/src/modules/Dimmer/DimmerDimmable.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -14,12 +15,7 @@ import { * A dimmable sub-component for Dimmer. */ function DimmerDimmable(props) { - const { - blurring, - className, - children, - dimmed, - } = props + const { blurring, className, children, content, dimmed } = props const classes = cx( useKeyOnly(blurring, 'blurring'), @@ -30,7 +26,11 @@ function DimmerDimmable(props) { const rest = getUnhandledProps(DimmerDimmable, props) const ElementType = getElementType(DimmerDimmable, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } DimmerDimmable._meta = { @@ -52,6 +52,9 @@ DimmerDimmable.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Controls whether or not the dim is displayed. */ dimmed: PropTypes.bool, } diff --git a/src/modules/Dropdown/DropdownItem.js b/src/modules/Dropdown/DropdownItem.js index 80a522b630..28e24bb128 100644 --- a/src/modules/Dropdown/DropdownItem.js +++ b/src/modules/Dropdown/DropdownItem.js @@ -147,7 +147,7 @@ class DropdownItem extends Component { const textElement = createShorthand( 'span', val => ({ children: val }), - content || text, + childrenUtils.isNil(content) ? text : content, { defaultProps: { className: 'text' } }, ) diff --git a/src/modules/Dropdown/DropdownMenu.d.ts b/src/modules/Dropdown/DropdownMenu.d.ts index 147ddf8130..fcbe39089a 100644 --- a/src/modules/Dropdown/DropdownMenu.d.ts +++ b/src/modules/Dropdown/DropdownMenu.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface DropdownMenuProps { [key: string]: any; @@ -12,6 +13,9 @@ export interface DropdownMenuProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** A dropdown menu can scroll. */ scrolling?: boolean; } diff --git a/src/modules/Dropdown/DropdownMenu.js b/src/modules/Dropdown/DropdownMenu.js index 77e19c3a54..c21e9e5921 100644 --- a/src/modules/Dropdown/DropdownMenu.js +++ b/src/modules/Dropdown/DropdownMenu.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -14,7 +15,7 @@ import { * A dropdown menu can contain a menu. */ function DropdownMenu(props) { - const { children, className, scrolling } = props + const { children, className, content, scrolling } = props const classes = cx( useKeyOnly(scrolling, 'scrolling'), 'menu transition', @@ -23,7 +24,11 @@ function DropdownMenu(props) { const rest = getUnhandledProps(DropdownMenu, props) const ElementType = getElementType(DropdownMenu, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } DropdownMenu._meta = { @@ -42,6 +47,9 @@ DropdownMenu.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** A dropdown menu can scroll. */ scrolling: PropTypes.bool, } diff --git a/src/modules/Embed/Embed.d.ts b/src/modules/Embed/Embed.d.ts index c06601a2ec..c0a873fdc6 100644 --- a/src/modules/Embed/Embed.d.ts +++ b/src/modules/Embed/Embed.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { HtmlIframeProps, SemanticShorthandItem } from '../..'; +import { HtmlIframeProps, SemanticShorthandContent, SemanticShorthandItem } from '../..'; import { IconProps } from '../../elements/Icon'; export interface EmbedProps { @@ -30,6 +30,9 @@ export interface EmbedProps { /** Specifies a default chrome color with Vimeo or YouTube. */ color?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Initial value of active. */ defaultActive?: boolean; diff --git a/src/modules/Embed/Embed.js b/src/modules/Embed/Embed.js index ce2f2b2b82..2ef4a17366 100644 --- a/src/modules/Embed/Embed.js +++ b/src/modules/Embed/Embed.js @@ -52,6 +52,9 @@ export default class Embed extends Component { PropTypes.string, ]), + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Initial value of active. */ defaultActive: PropTypes.bool, @@ -183,11 +186,12 @@ export default class Embed extends Component { } renderEmbed() { - const { children, iframe, source } = this.props + const { children, content, iframe, source } = this.props const { active } = this.state if (!active) return null if (!childrenUtils.isNil(children)) return
{children}
+ if (!childrenUtils.isNil(content)) return
{content}
return (
diff --git a/src/modules/Modal/ModalActions.d.ts b/src/modules/Modal/ModalActions.d.ts index 5f755f8cb9..fcf9588569 100644 --- a/src/modules/Modal/ModalActions.d.ts +++ b/src/modules/Modal/ModalActions.d.ts @@ -1,6 +1,7 @@ import * as React from 'react'; + import { ButtonProps } from '../../elements/Button'; -import { SemanticShorthandCollection } from '../..'; +import { SemanticShorthandCollection, SemanticShorthandContent } from '../..'; export interface ModalActionsProps { [key: string]: any; @@ -17,6 +18,9 @@ export interface ModalActionsProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** * onClick handler for an action. Mutually exclusive with children. * diff --git a/src/modules/Modal/ModalActions.js b/src/modules/Modal/ModalActions.js index 193fbabd7a..47672b5ec8 100644 --- a/src/modules/Modal/ModalActions.js +++ b/src/modules/Modal/ModalActions.js @@ -30,6 +30,9 @@ export default class ModalActions extends Component { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** * Action onClick handler when using shorthand `actions`. * @@ -56,12 +59,13 @@ export default class ModalActions extends Component { }) render() { - const { actions, children, className } = this.props + const { actions, children, className, content } = this.props const classes = cx('actions', className) const rest = getUnhandledProps(ModalActions, this.props) const ElementType = getElementType(ModalActions, this.props) if (!childrenUtils.isNil(children)) return {children} + if (!childrenUtils.isNil(content)) return {content} return ( diff --git a/src/modules/Modal/ModalDescription.d.ts b/src/modules/Modal/ModalDescription.d.ts index 049622ebb7..b1b9ee6039 100644 --- a/src/modules/Modal/ModalDescription.d.ts +++ b/src/modules/Modal/ModalDescription.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface ModalDescriptionProps { [key: string]: any; @@ -11,6 +12,9 @@ export interface ModalDescriptionProps { /** Additional classes. */ className?: string; + + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; } declare const ModalDescription: React.StatelessComponent; diff --git a/src/modules/Modal/ModalDescription.js b/src/modules/Modal/ModalDescription.js index 5a54d12010..ad1c717ee1 100644 --- a/src/modules/Modal/ModalDescription.js +++ b/src/modules/Modal/ModalDescription.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -13,12 +14,16 @@ import { * A modal can have a header. */ function ModalDescription(props) { - const { children, className } = props + const { children, className, content } = props const classes = cx('description', className) const rest = getUnhandledProps(ModalDescription, props) const ElementType = getElementType(ModalDescription, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } ModalDescription._meta = { @@ -36,6 +41,9 @@ ModalDescription.propTypes = { /** Additional classes. */ className: PropTypes.string, + + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, } export default ModalDescription diff --git a/src/modules/Popup/PopupContent.d.ts b/src/modules/Popup/PopupContent.d.ts index 22d0627c1a..ec04ac2cc5 100644 --- a/src/modules/Popup/PopupContent.d.ts +++ b/src/modules/Popup/PopupContent.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface PopupContentProps { [key: string]: any; @@ -11,6 +12,9 @@ export interface PopupContentProps { /** Additional classes. */ className?: string; + + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; } declare const PopupContent: React.StatelessComponent; diff --git a/src/modules/Popup/PopupContent.js b/src/modules/Popup/PopupContent.js index 2d5c152ba1..9a4742f530 100644 --- a/src/modules/Popup/PopupContent.js +++ b/src/modules/Popup/PopupContent.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, createShorthandFactory, customPropTypes, getElementType, @@ -14,12 +15,16 @@ import { * A PopupContent displays the content body of a Popover. */ export default function PopupContent(props) { - const { children, className } = props + const { children, className, content } = props const classes = cx('content', className) const rest = getUnhandledProps(PopupContent, props) const ElementType = getElementType(PopupContent, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } PopupContent.propTypes = { @@ -31,6 +36,9 @@ PopupContent.propTypes = { /** Classes to add to the Popup content className. */ className: PropTypes.string, + + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, } PopupContent._meta = { diff --git a/src/modules/Popup/PopupHeader.d.ts b/src/modules/Popup/PopupHeader.d.ts index 04cd6402f1..4cabfdff97 100644 --- a/src/modules/Popup/PopupHeader.d.ts +++ b/src/modules/Popup/PopupHeader.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface PopupHeaderProps { [key: string]: any; @@ -11,6 +12,9 @@ export interface PopupHeaderProps { /** Additional classes. */ className?: string; + + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; } declare const PopupHeader: React.StatelessComponent; diff --git a/src/modules/Popup/PopupHeader.js b/src/modules/Popup/PopupHeader.js index 60cc51e8f6..7e22635725 100644 --- a/src/modules/Popup/PopupHeader.js +++ b/src/modules/Popup/PopupHeader.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, createShorthandFactory, customPropTypes, getElementType, @@ -14,12 +15,16 @@ import { * A PopupHeader displays a header in a Popover. */ export default function PopupHeader(props) { - const { children, className } = props + const { children, className, content } = props const classes = cx('header', className) const rest = getUnhandledProps(PopupHeader, props) const ElementType = getElementType(PopupHeader, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } PopupHeader.propTypes = { @@ -31,6 +36,9 @@ PopupHeader.propTypes = { /** Additional classes. */ className: PropTypes.string, + + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, } PopupHeader._meta = { diff --git a/src/modules/Progress/Progress.d.ts b/src/modules/Progress/Progress.d.ts index 3f2db3a48d..f5bc17263d 100644 --- a/src/modules/Progress/Progress.d.ts +++ b/src/modules/Progress/Progress.d.ts @@ -2,6 +2,7 @@ import * as React from 'react'; import { HtmlLabelProps, SemanticCOLORS, + SemanticShorthandContent, SemanticShorthandItem } from '../..'; @@ -29,6 +30,9 @@ export interface ProgressProps { /** A progress bar can have different colors. */ color?: SemanticCOLORS; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** A progress bar be disabled. */ disabled?: boolean; diff --git a/src/modules/Progress/Progress.js b/src/modules/Progress/Progress.js index 9eb55a2f36..10d5415e75 100644 --- a/src/modules/Progress/Progress.js +++ b/src/modules/Progress/Progress.js @@ -41,6 +41,9 @@ class Progress extends Component { /** A progress bar can have different colors. */ color: PropTypes.oneOf(SUI.COLORS), + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** A progress bar be disabled. */ disabled: PropTypes.bool, @@ -131,9 +134,10 @@ class Progress extends Component { } renderLabel = () => { - const { children, label } = this.props + const { children, content, label } = this.props if (!childrenUtils.isNil(children)) return
{children}
+ if (!childrenUtils.isNil(content)) return
{content}
return createHTMLDivision(label, { defaultProps: { className: 'label' } }) } diff --git a/src/modules/Search/SearchCategory.d.ts b/src/modules/Search/SearchCategory.d.ts index 99b3765afd..ab0c9e5059 100644 --- a/src/modules/Search/SearchCategory.d.ts +++ b/src/modules/Search/SearchCategory.d.ts @@ -1,4 +1,6 @@ import * as React from 'react'; + +import { SemanticShorthandContent } from '../..'; import { default as SearchResult } from './SearchResult'; export interface SearchCategoryProps { @@ -16,6 +18,9 @@ export interface SearchCategoryProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Display name. */ name?: string; diff --git a/src/modules/Search/SearchCategory.js b/src/modules/Search/SearchCategory.js index 11224572ed..9f84eef9f9 100644 --- a/src/modules/Search/SearchCategory.js +++ b/src/modules/Search/SearchCategory.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -11,7 +12,7 @@ import { } from '../../lib' function SearchCategory(props) { - const { active, children, className, renderer } = props + const { active, children, className, content, renderer } = props const classes = cx( useKeyOnly(active, 'active'), 'category', @@ -25,7 +26,7 @@ function SearchCategory(props) {
{renderer(props)}
- {children} + {childrenUtils.isNil(children) ? content : children} ) } @@ -53,6 +54,9 @@ SearchCategory.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Display name. */ name: PropTypes.string, diff --git a/src/modules/Search/SearchResult.d.ts b/src/modules/Search/SearchResult.d.ts index e644f710c9..a1f2e7e3e8 100644 --- a/src/modules/Search/SearchResult.d.ts +++ b/src/modules/Search/SearchResult.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface SearchResultProps { [key: string]: any; @@ -12,6 +13,9 @@ export interface SearchResultProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Additional text with less emphasis. */ description?: string; diff --git a/src/modules/Search/SearchResult.js b/src/modules/Search/SearchResult.js index 1955ff7837..4e437a3d37 100644 --- a/src/modules/Search/SearchResult.js +++ b/src/modules/Search/SearchResult.js @@ -38,6 +38,9 @@ export default class SearchResult extends Component { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Additional text with less emphasis. */ description: PropTypes.string, diff --git a/src/modules/Search/SearchResults.d.ts b/src/modules/Search/SearchResults.d.ts index dd8eac2ad4..e15e4e7a94 100644 --- a/src/modules/Search/SearchResults.d.ts +++ b/src/modules/Search/SearchResults.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface SearchResultsProps { [key: string]: any; @@ -11,6 +12,9 @@ export interface SearchResultsProps { /** Additional classes. */ className?: string; + + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; } declare const SearchResults: React.StatelessComponent; diff --git a/src/modules/Search/SearchResults.js b/src/modules/Search/SearchResults.js index 2d6c9a3448..cd827d140f 100644 --- a/src/modules/Search/SearchResults.js +++ b/src/modules/Search/SearchResults.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -10,12 +11,16 @@ import { } from '../../lib' function SearchResults(props) { - const { children, className } = props + const { children, className, content } = props const classes = cx('results transition', className) const rest = getUnhandledProps(SearchResults, props) const ElementType = getElementType(SearchResults, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } SearchResults._meta = { @@ -33,6 +38,9 @@ SearchResults.propTypes = { /** Additional classes. */ className: PropTypes.string, + + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, } export default SearchResults diff --git a/src/modules/Sidebar/Sidebar.d.ts b/src/modules/Sidebar/Sidebar.d.ts index 8a439ad0b0..56f1784caf 100644 --- a/src/modules/Sidebar/Sidebar.d.ts +++ b/src/modules/Sidebar/Sidebar.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; import { default as SidebarPushable } from './SidebarPushable'; import { default as SidebarPusher } from './SidebarPusher'; @@ -18,6 +19,9 @@ export interface SidebarProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Initial value of visible. */ defaultVisible?: boolean; diff --git a/src/modules/Sidebar/Sidebar.js b/src/modules/Sidebar/Sidebar.js index 473cd3fd12..1cefdf05f9 100644 --- a/src/modules/Sidebar/Sidebar.js +++ b/src/modules/Sidebar/Sidebar.js @@ -4,6 +4,7 @@ import React from 'react' import { AutoControlledComponent as Component, + childrenUtils, customPropTypes, getUnhandledProps, getElementType, @@ -30,6 +31,9 @@ class Sidebar extends Component { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Initial value of visible. */ defaultVisible: PropTypes.bool, @@ -78,6 +82,7 @@ class Sidebar extends Component { animation, className, children, + content, direction, visible, width, @@ -98,7 +103,11 @@ class Sidebar extends Component { const rest = getUnhandledProps(Sidebar, this.props) const ElementType = getElementType(Sidebar, this.props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } } diff --git a/src/modules/Sidebar/SidebarPushable.d.ts b/src/modules/Sidebar/SidebarPushable.d.ts index 06f0e82090..3baf76db6a 100644 --- a/src/modules/Sidebar/SidebarPushable.d.ts +++ b/src/modules/Sidebar/SidebarPushable.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface SidebarPushableProps { [key: string]: any; @@ -11,6 +12,9 @@ export interface SidebarPushableProps { /** Additional classes. */ className?: string; + + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; } declare const SidebarPushable: React.StatelessComponent; diff --git a/src/modules/Sidebar/SidebarPushable.js b/src/modules/Sidebar/SidebarPushable.js index fc7a14236c..8b48a384cc 100644 --- a/src/modules/Sidebar/SidebarPushable.js +++ b/src/modules/Sidebar/SidebarPushable.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -13,12 +14,16 @@ import { * A pushable sub-component for Sidebar. */ function SidebarPushable(props) { - const { className, children } = props + const { className, children, content } = props const classes = cx('pushable', className) const rest = getUnhandledProps(SidebarPushable, props) const ElementType = getElementType(SidebarPushable, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } SidebarPushable._meta = { @@ -36,6 +41,9 @@ SidebarPushable.propTypes = { /** Additional classes. */ className: PropTypes.string, + + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, } export default SidebarPushable diff --git a/src/modules/Sidebar/SidebarPusher.d.ts b/src/modules/Sidebar/SidebarPusher.d.ts index 633f221be7..bf2b44ad0d 100644 --- a/src/modules/Sidebar/SidebarPusher.d.ts +++ b/src/modules/Sidebar/SidebarPusher.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface SidebarPusherProps { [key: string]: any; @@ -12,6 +13,9 @@ export interface SidebarPusherProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Controls whether or not the dim is displayed. */ dimmed?: boolean; } diff --git a/src/modules/Sidebar/SidebarPusher.js b/src/modules/Sidebar/SidebarPusher.js index d15cc96c00..0fb9a05b9a 100644 --- a/src/modules/Sidebar/SidebarPusher.js +++ b/src/modules/Sidebar/SidebarPusher.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -14,7 +15,7 @@ import { * A pushable sub-component for Sidebar. */ function SidebarPusher(props) { - const { className, dimmed, children } = props + const { className, dimmed, children, content } = props const classes = cx( 'pusher', @@ -24,7 +25,11 @@ function SidebarPusher(props) { const rest = getUnhandledProps(SidebarPusher, props) const ElementType = getElementType(SidebarPusher, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } SidebarPusher._meta = { @@ -43,6 +48,9 @@ SidebarPusher.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Controls whether or not the dim is displayed. */ dimmed: PropTypes.bool, } diff --git a/src/views/Advertisement/Advertisement.d.ts b/src/views/Advertisement/Advertisement.d.ts index 9d3e688796..938af191b9 100644 --- a/src/views/Advertisement/Advertisement.d.ts +++ b/src/views/Advertisement/Advertisement.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface AdvertisementProps { [key: string]: any; @@ -15,6 +16,9 @@ export interface AdvertisementProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Text to be displayed on the advertisement. */ test?: boolean | string | number; diff --git a/src/views/Advertisement/Advertisement.js b/src/views/Advertisement/Advertisement.js index 9ce7a554cb..87310fea3d 100644 --- a/src/views/Advertisement/Advertisement.js +++ b/src/views/Advertisement/Advertisement.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -18,6 +19,7 @@ function Advertisement(props) { centered, children, className, + content, test, unit, } = props @@ -33,7 +35,11 @@ function Advertisement(props) { const rest = getUnhandledProps(Advertisement, props) const ElementType = getElementType(Advertisement, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } Advertisement._meta = { @@ -54,6 +60,9 @@ Advertisement.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Text to be displayed on the advertisement. */ test: PropTypes.oneOfType([ PropTypes.bool, diff --git a/src/views/Card/Card.d.ts b/src/views/Card/Card.d.ts index 21bfc79fb8..130777ac93 100644 --- a/src/views/Card/Card.d.ts +++ b/src/views/Card/Card.d.ts @@ -30,6 +30,9 @@ export interface CardProps { /** A Card can be formatted to display different colors. */ color?: SemanticCOLORS; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Shorthand for CardDescription. */ description?: SemanticShorthandItem; diff --git a/src/views/Card/Card.js b/src/views/Card/Card.js index bf48e8d891..a36012bf3a 100644 --- a/src/views/Card/Card.js +++ b/src/views/Card/Card.js @@ -38,6 +38,9 @@ export default class Card extends Component { /** A Card can be formatted to display different colors. */ color: PropTypes.oneOf(SUI.COLORS), + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Shorthand for CardDescription. */ description: customPropTypes.itemShorthand, @@ -98,6 +101,7 @@ export default class Card extends Component { children, className, color, + content, description, extra, fluid, @@ -128,6 +132,9 @@ export default class Card extends Component { if (!childrenUtils.isNil(children)) { return {children} } + if (!childrenUtils.isNil(content)) { + return {content} + } return ( diff --git a/src/views/Card/CardContent.d.ts b/src/views/Card/CardContent.d.ts index 152ba4c5ed..c10d9ba38f 100644 --- a/src/views/Card/CardContent.d.ts +++ b/src/views/Card/CardContent.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { SemanticShorthandItem } from '../..'; +import { SemanticShorthandContent, SemanticShorthandItem } from '../..'; import { CardDescriptionProps } from './CardDescription'; import { CardHeaderProps } from './CardHeader'; import { CardMetaProps } from './CardMeta'; @@ -17,6 +17,9 @@ export interface CardContentProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Shorthand for CardDescription. */ description?: SemanticShorthandItem; diff --git a/src/views/Card/CardContent.js b/src/views/Card/CardContent.js index a2b7da424b..e55c19b6f6 100644 --- a/src/views/Card/CardContent.js +++ b/src/views/Card/CardContent.js @@ -25,6 +25,7 @@ function CardContent(props) { const { children, className, + content, description, extra, header, @@ -41,9 +42,8 @@ function CardContent(props) { const rest = getUnhandledProps(CardContent, props) const ElementType = getElementType(CardContent, props) - if (!childrenUtils.isNil(children)) { - return {children} - } + if (!childrenUtils.isNil(children)) return {children} + if (!childrenUtils.isNil(content)) return {content} return ( @@ -70,6 +70,9 @@ CardContent.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Shorthand for CardDescription. */ description: customPropTypes.itemShorthand, diff --git a/src/views/Card/CardGroup.d.ts b/src/views/Card/CardGroup.d.ts index 489d864891..14c17606cb 100644 --- a/src/views/Card/CardGroup.d.ts +++ b/src/views/Card/CardGroup.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { SemanticShorthandCollection, SemanticWIDTHS } from '../..'; +import { SemanticShorthandCollection, SemanticShorthandContent, SemanticWIDTHS } from '../..'; import { CardProps } from './Card'; export interface CardGroupProps { @@ -15,6 +15,9 @@ export interface CardGroupProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** A group of cards can double its column width for mobile. */ doubling?: boolean; diff --git a/src/views/Card/CardGroup.js b/src/views/Card/CardGroup.js index 205c4311e6..0e741d6356 100644 --- a/src/views/Card/CardGroup.js +++ b/src/views/Card/CardGroup.js @@ -23,6 +23,7 @@ function CardGroup(props) { const { children, className, + content, doubling, items, itemsPerRow, @@ -42,16 +43,15 @@ function CardGroup(props) { const rest = getUnhandledProps(CardGroup, props) const ElementType = getElementType(CardGroup, props) - if (!childrenUtils.isNil(children)) { - return {children} - } + if (!childrenUtils.isNil(children)) return {children} + if (!childrenUtils.isNil(content)) return {content} - const content = _.map(items, (item) => { + const itemsJSX = _.map(items, (item) => { const key = item.key || [item.header, item.description].join('-') return }) - return {content} + return {itemsJSX} } CardGroup._meta = { @@ -70,6 +70,9 @@ CardGroup.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** A group of cards can double its column width for mobile. */ doubling: PropTypes.bool, diff --git a/src/views/Comment/Comment.d.ts b/src/views/Comment/Comment.d.ts index 0641734836..6b3b2a8af5 100644 --- a/src/views/Comment/Comment.d.ts +++ b/src/views/Comment/Comment.d.ts @@ -1,5 +1,6 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; import { default as CommentAction } from './CommentAction'; import { default as CommentActions } from './CommentActions'; import { default as CommentAuthor } from './CommentAuthor'; @@ -23,6 +24,9 @@ export interface CommentProps { /** Comment can be collapsed, or hidden from view. */ collapsed?: boolean; + + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; } interface CommentComponent extends React.StatelessComponent { diff --git a/src/views/Comment/Comment.js b/src/views/Comment/Comment.js index 36b1152746..0e8a1285bb 100644 --- a/src/views/Comment/Comment.js +++ b/src/views/Comment/Comment.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -22,7 +23,7 @@ import CommentText from './CommentText' * A comment displays user feedback to site content. */ function Comment(props) { - const { className, children, collapsed } = props + const { className, children, collapsed, content } = props const classes = cx( useKeyOnly(collapsed, 'collapsed'), @@ -32,7 +33,11 @@ function Comment(props) { const rest = getUnhandledProps(Comment, props) const ElementType = getElementType(Comment, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } Comment._meta = { @@ -52,6 +57,9 @@ Comment.propTypes = { /** Comment can be collapsed, or hidden from view. */ collapsed: PropTypes.bool, + + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, } Comment.Author = CommentAuthor diff --git a/src/views/Comment/CommentAction.d.ts b/src/views/Comment/CommentAction.d.ts index 62989e4b40..476650073e 100644 --- a/src/views/Comment/CommentAction.d.ts +++ b/src/views/Comment/CommentAction.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface CommentActionProps { [key: string]: any; @@ -14,6 +15,9 @@ export interface CommentActionProps { /** Additional classes. */ className?: string; + + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; } declare const CommentAction: React.ComponentClass; diff --git a/src/views/Comment/CommentAction.js b/src/views/Comment/CommentAction.js index 7e2e2f5fac..9baa9e0023 100644 --- a/src/views/Comment/CommentAction.js +++ b/src/views/Comment/CommentAction.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -14,7 +15,7 @@ import { * A comment can contain an action. */ function CommentAction(props) { - const { active, className, children } = props + const { active, className, children, content } = props const classes = cx( useKeyOnly(active, 'active'), @@ -23,7 +24,11 @@ function CommentAction(props) { const rest = getUnhandledProps(CommentAction, props) const ElementType = getElementType(CommentAction, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } CommentAction._meta = { @@ -48,6 +53,9 @@ CommentAction.propTypes = { /** Additional classes. */ className: PropTypes.string, + + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, } export default CommentAction diff --git a/src/views/Comment/CommentActions.d.ts b/src/views/Comment/CommentActions.d.ts index 7fdb40ed9e..4a6b3cc188 100644 --- a/src/views/Comment/CommentActions.d.ts +++ b/src/views/Comment/CommentActions.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface CommentActionsProps { [key: string]: any; @@ -11,6 +12,9 @@ export interface CommentActionsProps { /** Additional classes. */ className?: string; + + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; } declare const CommentActions: React.StatelessComponent; diff --git a/src/views/Comment/CommentActions.js b/src/views/Comment/CommentActions.js index e7addaa99d..89be9a2282 100644 --- a/src/views/Comment/CommentActions.js +++ b/src/views/Comment/CommentActions.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -13,12 +14,16 @@ import { * A comment can contain an list of actions a user may perform related to this comment. */ function CommentActions(props) { - const { className, children } = props + const { className, children, content } = props const classes = cx('actions', className) const rest = getUnhandledProps(CommentActions, props) const ElementType = getElementType(CommentActions, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } CommentActions._meta = { @@ -36,6 +41,9 @@ CommentActions.propTypes = { /** Additional classes. */ className: PropTypes.string, + + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, } export default CommentActions diff --git a/src/views/Comment/CommentAuthor.d.ts b/src/views/Comment/CommentAuthor.d.ts index 200d4c7ab9..44f673459a 100644 --- a/src/views/Comment/CommentAuthor.d.ts +++ b/src/views/Comment/CommentAuthor.d.ts @@ -1,16 +1,20 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface CommentAuthorProps { [key: string]: any; /** An element type to render as (string or function). */ - as?: any; + as?: any; /** Primary content. */ children?: React.ReactNode; /** Additional classes. */ className?: string; + + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; } declare const CommentAuthor: React.StatelessComponent; diff --git a/src/views/Comment/CommentAuthor.js b/src/views/Comment/CommentAuthor.js index 72b10c1798..08354aa7b7 100644 --- a/src/views/Comment/CommentAuthor.js +++ b/src/views/Comment/CommentAuthor.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -13,12 +14,16 @@ import { * A comment can contain an author. */ function CommentAuthor(props) { - const { className, children } = props + const { className, children, content } = props const classes = cx('author', className) const rest = getUnhandledProps(CommentAuthor, props) const ElementType = getElementType(CommentAuthor, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } CommentAuthor._meta = { @@ -36,6 +41,9 @@ CommentAuthor.propTypes = { /** Additional classes. */ className: PropTypes.string, + + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, } export default CommentAuthor diff --git a/src/views/Comment/CommentContent.d.ts b/src/views/Comment/CommentContent.d.ts index ff6dd0648b..89abef7247 100644 --- a/src/views/Comment/CommentContent.d.ts +++ b/src/views/Comment/CommentContent.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface CommentContentProps { [key: string]: any; @@ -11,6 +12,9 @@ export interface CommentContentProps { /** Additional classes. */ className?: string; + + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; } declare const CommentContent: React.StatelessComponent; diff --git a/src/views/Comment/CommentContent.js b/src/views/Comment/CommentContent.js index 48ad17c2c3..4f2ab78c52 100644 --- a/src/views/Comment/CommentContent.js +++ b/src/views/Comment/CommentContent.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -13,12 +14,16 @@ import { * A comment can contain content. */ function CommentContent(props) { - const { className, children } = props + const { className, children, content } = props const classes = cx(className, 'content') const rest = getUnhandledProps(CommentContent, props) const ElementType = getElementType(CommentContent, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } CommentContent._meta = { @@ -36,6 +41,9 @@ CommentContent.propTypes = { /** Additional classes. */ className: PropTypes.string, + + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, } export default CommentContent diff --git a/src/views/Comment/CommentGroup.d.ts b/src/views/Comment/CommentGroup.d.ts index 69325d1dc1..f9539cf05b 100644 --- a/src/views/Comment/CommentGroup.d.ts +++ b/src/views/Comment/CommentGroup.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface CommentGroupProps { [key: string]: any; @@ -15,6 +16,9 @@ export interface CommentGroupProps { /** Comments can be collapsed, or hidden from view. */ collapsed?: boolean; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Comments can hide extra information unless a user shows intent to interact with a comment */ minimal?: boolean; diff --git a/src/views/Comment/CommentGroup.js b/src/views/Comment/CommentGroup.js index 34a17c2b85..ae58932b4e 100644 --- a/src/views/Comment/CommentGroup.js +++ b/src/views/Comment/CommentGroup.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -20,6 +21,7 @@ function CommentGroup(props) { className, children, collapsed, + content, minimal, size, threaded, @@ -37,7 +39,11 @@ function CommentGroup(props) { const rest = getUnhandledProps(CommentGroup, props) const ElementType = getElementType(CommentGroup, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } CommentGroup._meta = { @@ -59,6 +65,9 @@ CommentGroup.propTypes = { /** Comments can be collapsed, or hidden from view. */ collapsed: PropTypes.bool, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Comments can hide extra information unless a user shows intent to interact with a comment. */ minimal: PropTypes.bool, diff --git a/src/views/Comment/CommentMetadata.d.ts b/src/views/Comment/CommentMetadata.d.ts index 97f4db4e71..8cb5ceaab4 100644 --- a/src/views/Comment/CommentMetadata.d.ts +++ b/src/views/Comment/CommentMetadata.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface CommentMetadataProps { [key: string]: any; @@ -11,6 +12,9 @@ export interface CommentMetadataProps { /** Additional classes. */ className?: string; + + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; } declare const CommentMetadata: React.StatelessComponent; diff --git a/src/views/Comment/CommentMetadata.js b/src/views/Comment/CommentMetadata.js index 56c0d66803..1c01beb334 100644 --- a/src/views/Comment/CommentMetadata.js +++ b/src/views/Comment/CommentMetadata.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -13,12 +14,16 @@ import { * A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined. */ function CommentMetadata(props) { - const { className, children } = props + const { className, children, content } = props const classes = cx('metadata', className) const rest = getUnhandledProps(CommentMetadata, props) const ElementType = getElementType(CommentMetadata, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } CommentMetadata._meta = { @@ -36,6 +41,9 @@ CommentMetadata.propTypes = { /** Additional classes. */ className: PropTypes.string, + + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, } export default CommentMetadata diff --git a/src/views/Comment/CommentText.d.ts b/src/views/Comment/CommentText.d.ts index eb8d71841a..ae454a943f 100644 --- a/src/views/Comment/CommentText.d.ts +++ b/src/views/Comment/CommentText.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { SemanticShorthandContent } from '../..'; export interface CommentTextProps { [key: string]: any; @@ -11,6 +12,9 @@ export interface CommentTextProps { /** Additional classes. */ className?: string; + + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; } declare const CommentText: React.StatelessComponent; diff --git a/src/views/Comment/CommentText.js b/src/views/Comment/CommentText.js index 7b6cdc3086..a2b282b557 100644 --- a/src/views/Comment/CommentText.js +++ b/src/views/Comment/CommentText.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { + childrenUtils, customPropTypes, getElementType, getUnhandledProps, @@ -13,12 +14,16 @@ import { * A comment can contain text. */ function CommentText(props) { - const { className, children } = props + const { className, children, content } = props const classes = cx(className, 'text') const rest = getUnhandledProps(CommentText, props) const ElementType = getElementType(CommentText, props) - return {children} + return ( + + {childrenUtils.isNil(children) ? content : children} + + ) } CommentText._meta = { @@ -36,6 +41,9 @@ CommentText.propTypes = { /** Additional classes. */ className: PropTypes.string, + + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, } export default CommentText diff --git a/src/views/Item/ItemGroup.d.ts b/src/views/Item/ItemGroup.d.ts index 36a890c6f5..ba6a43ec33 100644 --- a/src/views/Item/ItemGroup.d.ts +++ b/src/views/Item/ItemGroup.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { SemanticShorthandCollection } from '../..'; +import { SemanticShorthandCollection, SemanticShorthandContent } from '../..'; import { ItemProps } from './Item'; export interface ItemGroupProps { @@ -15,6 +15,9 @@ export interface ItemGroupProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** Items can be divided to better distinguish between grouped content. */ divided?: boolean; diff --git a/src/views/Item/ItemGroup.js b/src/views/Item/ItemGroup.js index 10063b1736..ef3c93a9bc 100644 --- a/src/views/Item/ItemGroup.js +++ b/src/views/Item/ItemGroup.js @@ -21,6 +21,7 @@ function ItemGroup(props) { const { children, className, + content, divided, items, link, @@ -40,9 +41,8 @@ function ItemGroup(props) { const rest = getUnhandledProps(ItemGroup, props) const ElementType = getElementType(ItemGroup, props) - if (!childrenUtils.isNil(children)) { - return {children} - } + if (!childrenUtils.isNil(children)) return {children} + if (!childrenUtils.isNil(content)) return {content} const itemsJSX = _.map(items, (item) => { const { childKey, ...itemProps } = item @@ -70,6 +70,9 @@ ItemGroup.propTypes = { /** Additional classes. */ className: PropTypes.string, + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** Items can be divided to better distinguish between grouped content. */ divided: PropTypes.bool, diff --git a/src/views/Statistic/StatisticGroup.d.ts b/src/views/Statistic/StatisticGroup.d.ts index a1c62b38c0..34006ec1f4 100644 --- a/src/views/Statistic/StatisticGroup.d.ts +++ b/src/views/Statistic/StatisticGroup.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { SemanticCOLORS, SemanticWIDTHS, SemanticShorthandCollection } from '../..'; +import { SemanticCOLORS, SemanticShorthandCollection, SemanticShorthandContent, SemanticWIDTHS } from '../..'; import { StatisticProps, StatisticSizeProp } from './Statistic'; export interface StatisticGroupProps { @@ -18,6 +18,9 @@ export interface StatisticGroupProps { /** A statistic group can be formatted to be different colors. */ color?: SemanticCOLORS; + /** Shorthand for primary content. */ + content?: SemanticShorthandContent; + /** A statistic group can present its measurement horizontally. */ horizontal?: boolean; diff --git a/src/views/Statistic/StatisticGroup.js b/src/views/Statistic/StatisticGroup.js index 3898974ccf..97d612fc93 100644 --- a/src/views/Statistic/StatisticGroup.js +++ b/src/views/Statistic/StatisticGroup.js @@ -23,6 +23,7 @@ function StatisticGroup(props) { children, className, color, + content, horizontal, inverted, items, @@ -44,6 +45,7 @@ function StatisticGroup(props) { const ElementType = getElementType(StatisticGroup, props) if (!childrenUtils.isNil(children)) return {children} + if (!childrenUtils.isNil(content)) return {content} return ( @@ -71,6 +73,9 @@ StatisticGroup.propTypes = { /** A statistic group can be formatted to be different colors. */ color: PropTypes.oneOf(SUI.COLORS), + /** Shorthand for primary content. */ + content: customPropTypes.contentShorthand, + /** A statistic group can present its measurement horizontally. */ horizontal: PropTypes.bool, diff --git a/test/specs/addons/Responsive/Responsive-test.js b/test/specs/addons/Responsive/Responsive-test.js index 2330539042..590b783a94 100644 --- a/test/specs/addons/Responsive/Responsive-test.js +++ b/test/specs/addons/Responsive/Responsive-test.js @@ -6,7 +6,9 @@ import { domEvent, sandbox } from 'test/utils' describe('Responsive', () => { common.isConformant(Responsive) - common.rendersChildren(Responsive) + common.rendersChildren(Responsive, { + rendersContent: false, + }) describe('children', () => { it('renders by default', () => { diff --git a/test/specs/collections/Breadcrumb/Breadcrumb-test.js b/test/specs/collections/Breadcrumb/Breadcrumb-test.js index 1f6daf118f..d847d97b78 100644 --- a/test/specs/collections/Breadcrumb/Breadcrumb-test.js +++ b/test/specs/collections/Breadcrumb/Breadcrumb-test.js @@ -9,7 +9,9 @@ describe('Breadcrumb', () => { common.isConformant(Breadcrumb) common.hasSubComponents(Breadcrumb, [BreadcrumbDivider, BreadcrumbSection]) common.hasUIClassName(Breadcrumb) - common.rendersChildren(Breadcrumb) + common.rendersChildren(Breadcrumb, { + rendersContent: false, + }) it('renders a
element', () => { shallow() diff --git a/test/specs/collections/Form/Form-test.js b/test/specs/collections/Form/Form-test.js index 66efebbe54..a7e8366c3f 100644 --- a/test/specs/collections/Form/Form-test.js +++ b/test/specs/collections/Form/Form-test.js @@ -30,7 +30,9 @@ describe('Form', () => { FormSelect, ]) common.hasUIClassName(Form) - common.rendersChildren(Form) + common.rendersChildren(Form, { + rendersContent: false, + }) common.implementsWidthProp(Form, [], { propKey: 'widths', diff --git a/test/specs/collections/Form/FormGroup-test.js b/test/specs/collections/Form/FormGroup-test.js index 72e3e0be77..c9bd6828b9 100644 --- a/test/specs/collections/Form/FormGroup-test.js +++ b/test/specs/collections/Form/FormGroup-test.js @@ -4,7 +4,9 @@ import * as common from 'test/specs/commonTests' describe('FormGroup', () => { common.isConformant(FormGroup) - common.rendersChildren(FormGroup) + common.rendersChildren(FormGroup, { + rendersContent: false, + }) common.implementsWidthProp(FormGroup, SUI.WIDTHS, { canEqual: true, diff --git a/test/specs/collections/Grid/Grid-test.js b/test/specs/collections/Grid/Grid-test.js index aff37d645d..f92faca397 100644 --- a/test/specs/collections/Grid/Grid-test.js +++ b/test/specs/collections/Grid/Grid-test.js @@ -9,7 +9,9 @@ describe('Grid', () => { common.isConformant(Grid) common.hasSubComponents(Grid, [GridRow, GridColumn]) common.hasUIClassName(Grid) - common.rendersChildren(Grid) + common.rendersChildren(Grid, { + rendersContent: false, + }) common.implementsTextAlignProp(Grid) common.implementsVerticalAlignProp(Grid) diff --git a/test/specs/collections/Grid/GridColumn-test.js b/test/specs/collections/Grid/GridColumn-test.js index 942171be72..dc42306393 100644 --- a/test/specs/collections/Grid/GridColumn-test.js +++ b/test/specs/collections/Grid/GridColumn-test.js @@ -4,7 +4,9 @@ import * as common from 'test/specs/commonTests' describe('GridColumn', () => { common.isConformant(GridColumn) - common.rendersChildren(GridColumn) + common.rendersChildren(GridColumn, { + rendersContent: false, + }) common.implementsOnlyProp(GridColumn) common.implementsTextAlignProp(GridColumn) diff --git a/test/specs/collections/Grid/GridRow-test.js b/test/specs/collections/Grid/GridRow-test.js index 85d5d468de..72cf9ae378 100644 --- a/test/specs/collections/Grid/GridRow-test.js +++ b/test/specs/collections/Grid/GridRow-test.js @@ -4,7 +4,9 @@ import * as common from 'test/specs/commonTests' describe('GridRow', () => { common.isConformant(GridRow) - common.rendersChildren(GridRow) + common.rendersChildren(GridRow, { + rendersContent: false, + }) common.implementsOnlyProp(GridRow) common.implementsTextAlignProp(GridRow) diff --git a/test/specs/collections/Menu/Menu-test.js b/test/specs/collections/Menu/Menu-test.js index f4c329e0b1..844f62687f 100644 --- a/test/specs/collections/Menu/Menu-test.js +++ b/test/specs/collections/Menu/Menu-test.js @@ -13,7 +13,9 @@ describe('Menu', () => { common.isConformant(Menu) common.hasSubComponents(Menu, [MenuHeader, MenuItem, MenuMenu]) common.hasUIClassName(Menu) - common.rendersChildren(Menu) + common.rendersChildren(Menu, { + rendersContent: false, + }) common.implementsWidthProp(Menu, SUI.WIDTHS, { canEqual: false, diff --git a/test/specs/collections/Menu/MenuHeader-test.js b/test/specs/collections/Menu/MenuHeader-test.js index 6d68fd57c0..868a40b484 100644 --- a/test/specs/collections/Menu/MenuHeader-test.js +++ b/test/specs/collections/Menu/MenuHeader-test.js @@ -1,19 +1,7 @@ -import faker from 'faker' -import React from 'react' - import MenuHeader from 'src/collections/Menu/MenuHeader' import * as common from 'test/specs/commonTests' describe('MenuHeader', () => { common.isConformant(MenuHeader) common.rendersChildren(MenuHeader) - - describe('content', () => { - it('renders text', () => { - const text = faker.hacker.phrase() - - shallow() - .should.contain.text(text) - }) - }) }) diff --git a/test/specs/collections/Menu/MenuItem-test.js b/test/specs/collections/Menu/MenuItem-test.js index b473a6e1c1..49ce75e4a7 100644 --- a/test/specs/collections/Menu/MenuItem-test.js +++ b/test/specs/collections/Menu/MenuItem-test.js @@ -1,4 +1,3 @@ -import faker from 'faker' import React from 'react' import MenuItem from 'src/collections/Menu/MenuItem' @@ -29,15 +28,6 @@ describe('MenuItem', () => { .should.have.tagName('div') }) - describe('content', () => { - it('renders text', () => { - const text = faker.hacker.phrase() - - shallow() - .should.contain.text(text) - }) - }) - describe('name', () => { it('uses the name prop as Start Cased child text', () => { shallow() diff --git a/test/specs/collections/Message/Message-test.js b/test/specs/collections/Message/Message-test.js index ea68f7b7c7..6bb9132aa0 100644 --- a/test/specs/collections/Message/Message-test.js +++ b/test/specs/collections/Message/Message-test.js @@ -13,7 +13,9 @@ describe('Message', () => { common.isConformant(Message) common.hasSubComponents(Message, [MessageContent, MessageHeader, MessageList]) common.hasUIClassName(Message) - common.rendersChildren(Message) + common.rendersChildren(Message, { + rendersContent: false, + }) common.implementsIconProp(Message) common.implementsShorthandProp(Message, { diff --git a/test/specs/collections/Message/MessageList-test.js b/test/specs/collections/Message/MessageList-test.js index 1d7ce8bb06..16fc925126 100644 --- a/test/specs/collections/Message/MessageList-test.js +++ b/test/specs/collections/Message/MessageList-test.js @@ -5,7 +5,9 @@ import * as common from 'test/specs/commonTests' describe('MessageList', () => { common.isConformant(MessageList) common.implementsCreateMethod(MessageList) - common.rendersChildren(MessageList) + common.rendersChildren(MessageList, { + rendersContent: false, + }) it('renders an ul tag', () => { shallow() diff --git a/test/specs/collections/Table/Table-test.js b/test/specs/collections/Table/Table-test.js index deedad31e7..77d702d769 100644 --- a/test/specs/collections/Table/Table-test.js +++ b/test/specs/collections/Table/Table-test.js @@ -15,7 +15,9 @@ describe('Table', () => { common.isConformant(Table) common.hasSubComponents(Table, [TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow]) common.hasUIClassName(Table) - common.rendersChildren(Table) + common.rendersChildren(Table, { + rendersContent: false, + }) common.implementsWidthProp(Table, SUI.WIDTHS, { canEqual: false, diff --git a/test/specs/collections/Table/TableBody-test.js b/test/specs/collections/Table/TableBody-test.js index 861b564668..c794900030 100644 --- a/test/specs/collections/Table/TableBody-test.js +++ b/test/specs/collections/Table/TableBody-test.js @@ -5,7 +5,9 @@ import TableBody from 'src/collections/Table/TableBody' describe('TableBody', () => { common.isConformant(TableBody) - common.rendersChildren(TableBody) + common.rendersChildren(TableBody, { + rendersContent: false, + }) it('renders as a tbody by default', () => { shallow() diff --git a/test/specs/collections/Table/TableCell-test.js b/test/specs/collections/Table/TableCell-test.js index 52fef70db4..4466d00836 100644 --- a/test/specs/collections/Table/TableCell-test.js +++ b/test/specs/collections/Table/TableCell-test.js @@ -33,19 +33,4 @@ describe('TableCell', () => { shallow() .should.have.tagName('td') }) - - describe('shorthand', () => { - it('renders empty cell with no shorthand', () => { - const wrapper = shallow() - - wrapper.text().should.equal('') - }) - - it('renders the cell', () => { - const content = 'Hey there' - const wrapper = shallow() - - wrapper.text().should.equal(content) - }) - }) }) diff --git a/test/specs/collections/Table/TableRow-test.js b/test/specs/collections/Table/TableRow-test.js index 8054544919..87e026ef2b 100644 --- a/test/specs/collections/Table/TableRow-test.js +++ b/test/specs/collections/Table/TableRow-test.js @@ -5,7 +5,9 @@ import TableRow from 'src/collections/Table/TableRow' describe('TableRow', () => { common.isConformant(TableRow) - common.rendersChildren(TableRow) + common.rendersChildren(TableRow, { + rendersContent: false, + }) common.implementsCreateMethod(TableRow) common.implementsTextAlignProp(TableRow, ['left', 'center', 'right']) diff --git a/test/specs/commonTests/rendersChildren.js b/test/specs/commonTests/rendersChildren.js index 047eb580ea..e68b80c623 100644 --- a/test/specs/commonTests/rendersChildren.js +++ b/test/specs/commonTests/rendersChildren.js @@ -7,28 +7,52 @@ import helpers from './commonHelpers' * Assert a component renders children somewhere in the tree. * @param {React.Component|Function} Component A component that should render children. * @param {Object} [options={}] + * @param {Object} [options.rendersContent] Assert that component also renders `content` prop. * @param {Object} [options.requiredProps={}] Props required to render the component. */ export default (Component, options = {}) => { - const { requiredProps = {} } = options + const { rendersContent = true, requiredProps = {} } = options const { assertRequired } = helpers('rendersChildren', Component) assertRequired(Component, 'a `Component`') - it('renders child text', () => { - const text = faker.hacker.phrase() - shallow(createElement(Component, requiredProps, text)) - .should.contain.text(text) - }) + describe('children (common)', () => { + it('renders child text', () => { + const text = faker.hacker.phrase() + shallow(createElement(Component, requiredProps, text)) + .should.contain.text(text) + }) - it('renders child components', () => { - const child =
- shallow(createElement(Component, requiredProps, child)) - .should.contain(child) - }) + it('renders child components', () => { + const child =
+ shallow(createElement(Component, requiredProps, child)) + .should.contain(child) + }) - it('renders child number with 0 value', () => { - shallow(createElement(Component, requiredProps, 0)) - .should.contain.text('0') + it('renders child number with 0 value', () => { + shallow(createElement(Component, requiredProps, 0)) + .should.contain.text('0') + }) }) + + if (rendersContent) { + describe('content (common)', () => { + it('renders child text', () => { + const text = faker.hacker.phrase() + shallow(createElement(Component, { ...requiredProps, content: text })) + .should.contain.text(text) + }) + + it('renders child components', () => { + const child =
+ shallow(createElement(Component, { ...requiredProps, content: child })) + .should.contain(child) + }) + + it('renders child number with 0 value', () => { + shallow(createElement(Component, { ...requiredProps, content: 0 })) + .should.contain.text('0') + }) + }) + } } diff --git a/test/specs/elements/Header/Header-test.js b/test/specs/elements/Header/Header-test.js index 49717d9967..f92062fa26 100644 --- a/test/specs/elements/Header/Header-test.js +++ b/test/specs/elements/Header/Header-test.js @@ -58,10 +58,6 @@ describe('Header', () => { }) describe('content', () => { - it('adds child text', () => { - shallow(
) - .should.contain.text('foo') - }) it('is wrapped in HeaderContent when there is an image src', () => { shallow(
) .find('HeaderContent') diff --git a/test/specs/elements/Header/HeaderSubheader-test.js b/test/specs/elements/Header/HeaderSubheader-test.js index 1b87e03f0d..21313d7553 100644 --- a/test/specs/elements/Header/HeaderSubheader-test.js +++ b/test/specs/elements/Header/HeaderSubheader-test.js @@ -1,19 +1,7 @@ -import faker from 'faker' -import React from 'react' - import HeaderSubheader from 'src/elements/Header/HeaderSubheader' import * as common from 'test/specs/commonTests' describe('HeaderSubheader', () => { common.isConformant(HeaderSubheader) common.rendersChildren(HeaderSubheader) - - describe('content', () => { - it('renders text', () => { - const text = faker.hacker.phrase() - - shallow() - .should.contain.text(text) - }) - }) }) diff --git a/test/specs/elements/Icon/Icon-test.js b/test/specs/elements/Icon/Icon-test.js index 6ed530901b..85ec926f8a 100644 --- a/test/specs/elements/Icon/Icon-test.js +++ b/test/specs/elements/Icon/Icon-test.js @@ -28,8 +28,6 @@ describe('Icon', () => { common.propValueOnlyToClassName(Icon, 'name', ['money']) common.propValueOnlyToClassName(Icon, 'size', _.without(SUI.SIZES, 'medium')) - common.rendersChildren(Icon) - it('renders as an by default', () => { shallow() .should.have.tagName('i') diff --git a/test/specs/elements/Input/Input-test.js b/test/specs/elements/Input/Input-test.js index 92624df39a..33cd4cdbf3 100644 --- a/test/specs/elements/Input/Input-test.js +++ b/test/specs/elements/Input/Input-test.js @@ -51,7 +51,9 @@ describe('Input', () => { }, }) common.hasUIClassName(Input) - common.rendersChildren(Input) + common.rendersChildren(Input, { + rendersContent: false, + }) common.implementsButtonProp(Input, { propKey: 'action', diff --git a/test/specs/elements/Label/Label-test.js b/test/specs/elements/Label/Label-test.js index 7ec728a0ae..5ba6362535 100644 --- a/test/specs/elements/Label/Label-test.js +++ b/test/specs/elements/Label/Label-test.js @@ -1,4 +1,3 @@ -import faker from 'faker' import _ from 'lodash' import React from 'react' @@ -89,21 +88,6 @@ describe('Label', () => { }) }) - describe('content', () => { - it('has no content by default', () => { - shallow(