diff --git a/CHANGELOG.md b/CHANGELOG.md index 5e6d0462a7..a345035097 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix unicode arrow characters to be RTL aware ([#690](https://github.com/stardust-ui/react/pull/690)) - Fix positioning of `Popup` with changable content @layershifter ([#678](https://github.com/stardust-ui/react/pull/678)) - Fix default props in `Accordion` and `Dropdown` components @layershifter ([#675](https://github.com/stardust-ui/react/pull/675)) +- Refactor render method of `Label` component and simplify docs @davezuko ([#642](https://github.com/stardust-ui/react/pull/642)) ### Documentation - Add ability to edit examples' code in JavaScript and TypeScript @layershifter ([#650](https://github.com/stardust-ui/react/pull/650)) diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index 971c94a387..f004d3910e 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -25,27 +25,27 @@ export interface LabelProps ContentComponentProps { accessibility?: Accessibility - /** A label can be circular. */ + /** A Label can be circular. */ circular?: boolean - /** A Label can take the width of its container. */ + /** A Label can take up the width of its container. */ fluid?: boolean - /** Label can have an icon. */ + /** A Label can have an icon. */ icon?: ShorthandValue - /** An icon label can format an Icon to appear before or after the text in the label */ + /** A Label can position its Icon at the start or end of the layout. */ iconPosition?: 'start' | 'end' - /** Label can have an image. */ + /** A Label can contain an image. */ image?: ShorthandValue - /** An icon label can format an Icon to appear before or after the text in the label */ + /** A Label can position its image at the start or end of the layout. */ imagePosition?: 'start' | 'end' } /** - * A label is used to classify content. + * A Label is used to classify content. */ class Label extends UIComponent, any> { static displayName = 'Label' @@ -82,69 +82,58 @@ class Label extends UIComponent, any> { renderComponent({ ElementType, classes, rest, variables, styles }) { const { children, content, icon, iconPosition, image, imagePosition } = this.props - const imageElement = - image && - Image.create(image, { - defaultProps: { - styles: styles.image, - variables: variables.image, - }, - }) - - const iconElement = - icon && - Icon.create(icon, { - defaultProps: { - styles: styles.icon, - variables: variables.icon, - }, - overrideProps: this.handleIconOverrides, - }) - - let start: React.ReactNode = null - let end: React.ReactNode = null - - // Default positioning of the image and icon - if (image && imagePosition === 'start') { - start = imageElement - } - if (icon && iconPosition === 'end') { - end = iconElement + if (childrenExist(children)) { + return ( + + {children} + + ) } - // Custom positioning of the icon and image - if (icon && iconPosition === 'start') { - if (image && imagePosition === 'start') { - start = ( - - {imageElement} - {iconElement} - - ) - } else { - start = iconElement - } - } - if (image && imagePosition === 'end') { - if (icon && iconPosition === 'end') { - end = ( - - {iconElement} - {imageElement} - - ) - } else { - end = imageElement - } - } + const imageElement = Image.create(image, { + defaultProps: { + styles: styles.image, + variables: variables.image, + }, + }) + const iconElement = Icon.create(icon, { + defaultProps: { + styles: styles.icon, + variables: variables.icon, + }, + overrideProps: this.handleIconOverrides, + }) + + const startImage = imagePosition === 'start' && imageElement + const startIcon = iconPosition === 'start' && iconElement + const endIcon = iconPosition === 'end' && iconElement + const endImage = imagePosition === 'end' && imageElement + + const hasStartElement = startImage || startIcon + const hasEndElement = endIcon || endImage return ( - {childrenExist(children) ? ( - children - ) : ( - - )} + + {startImage} + {startIcon} + + ) + } + main={content} + end={ + hasEndElement && ( + <> + {endIcon} + {endImage} + + ) + } + gap={pxToRem(3)} + /> ) } diff --git a/test/specs/commonTests/implementsShorthandProp.tsx b/test/specs/commonTests/implementsShorthandProp.tsx index 2d2cf289b7..64492a214f 100644 --- a/test/specs/commonTests/implementsShorthandProp.tsx +++ b/test/specs/commonTests/implementsShorthandProp.tsx @@ -37,9 +37,9 @@ export default ((Component: React.ComponentType) => { const expectContainsSingleShorthandElement = (wrapper: ReactWrapper, withProps: Props) => expect( - wrapper.findWhere( - node => node.type() === ShorthandComponent && checkPropsMatch(node.props(), withProps), - ).length, + wrapper + .find(ShorthandComponent) + .filterWhere(node => checkPropsMatch(node.props(), withProps)).length, ).toEqual(1) const expectShorthandPropsAreHandled = (withProps: Props | string) => {