feat: New 'display' styling prop

BREAKING CHANGE: `display: block` is no longer
automatically applied when using the `overflow` or `textAlign`
styling props. Instead, the new `display` prop should be used to
give inline elements block-level layout

src/Box/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import {
 	positionProps,
+	displayProps,
 	flexProps,
 	marginProps,
 	paddingProps,
@@ -12,6 +13,7 @@ import {
 
 const Box = styled.div`
 	${positionProps}
+	${displayProps}
 	${flexProps}
 	${marginProps}
 	${paddingProps}
@@ -21,13 +23,17 @@ const Box = styled.div`
 
 Box.propTypes = {
 	position: PropTypes.oneOf(['static', 'relative', 'absolute', 'fixed']),
+	display: PropTypes.oneOf(['block', 'inline', 'inline-block']),
 	border: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
 	flexAlign: PropTypes.oneOf(['top', 'left', 'center', 'bottom', 'right']),
 	basis: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 	grow: PropTypes.bool,
 	shrink: PropTypes.bool,
 	bold: PropTypes.bool,
-	caps: PropTypes.oneOf(['all', 'first']),
+	caps: PropTypes.oneOfType([
+		PropTypes.oneOf(['all', 'first']),
+		PropTypes.bool,
+	]),
 	dimmed: PropTypes.bool,
 	fontSize: PropTypes.string,
 	lineHeight: PropTypes.number,

src/Text/README.mdx

@@ -3,41 +3,49 @@ name: Text
 menu: Components
 ---
 
-import { Playground, Props } from 'docz'
-import Text from './'
+import {Playground, Props} from 'docz';
+import Text from './';
 
 # Text
 
-`Text` is a helper component for formatting text.
+`Text` is a helper component for formatting text. It supports styling props for the following styles:
 
-- Margin and padding
-- Text styles (bold, dimmed, fontSize, lineHeight, textAlign, overflow, caps)
+-   Text styles (bold, dimmed, fontSize, lineHeight, textAlign, overflow, caps)
+-   Display (block, inline, inline-block)
+-   Margin and padding
 
-In addition to the `fontSize` and `textAlign` props, this component also supports the shortcuts `size` and `align`.
+In addition to the `fontSize` and `textAlign` props, this component also supports the shorthands `size` and `align`.
 
 ## Examples
 
 <Playground>
-	<Text as="div" bold>
-		Bold text
+	<Text as="h1" size="xl" lineHeight={1.3}>
+		Extra-large text with a smaller line height
 	</Text>
-	<Text as="div" dimmed lineHeight={2}>
-		Dimmed text with a line height of 2
+	<Text dimmed as="p">
+		A dimmed subtitle with a{' '}
+		<Text bold dimmed={false}>
+			non-dimmed segment
+		</Text>
 	</Text>
-	<Text as="h1" size="xl">
-		Extra-large text
+	<Text bold as="p" mt="m">
+		Bold text with some nested <Text bold={false}>non-bold</Text> text
 	</Text>
-	<Text as="div" caps="all">
+	<Text as="p" caps="all" mt="m">
 		this text is all-lowercase, but displays in uppercase
 	</Text>
-	<Text as="div" caps="first">
-		this text is all-lowercase, but is displayed in title-case
+	<Text as="p" caps="first">
+		this text is all-lowercase, but is displayed in title-case{' '}
+		<Text caps={false}>(unless overwritten)</Text>
 	</Text>
-	<Text as="div" overflow="wrap" mt="m">
-		An overflow value of 'wrap' will make long words with no spaces break into a new line.
+	<Text as="p" overflow="wrap" mt="m">
+		OverflowWrapWillMakeLongWordsWithNoSpacesForExampleUrlsBreakIntoANewLineInsteadOfGoingOnAndBreakingOutOfTheirContainerWhichUsuallyDoesntLookVeryGood.
 	</Text>
-	<Text as="div" overflow="ellipsis" mt="m">
-		An overflow value of 'ellipsis' will prevent line-breaks and cut off overflowing text with an ellipsis (…)
+	<Text display="block" overflow="ellipsis" mt="m">
+		An overflow value of 'ellipsis' will prevent line-breaks and cut off
+		overflowing text with an ellipsis (…). This only works with
+		"block-level" elements (e.g. div, p). If you want to use it with a
+		non-block element like `span`, set the `display` prop to 'block'.
 	</Text>
 </Playground>
 

src/Text/index.js

@@ -1,23 +1,33 @@
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import {textProps, marginProps, paddingProps} from '../styleProps';
+import {
+	displayProps,
+	textProps,
+	marginProps,
+	paddingProps,
+} from '../styleProps';
 
 const Text = styled.span`
+	${displayProps}
 	${props =>
 		textProps({
 			...props,
-			textAlign: props.align,
-			fontSize: props.size,
+			textAlign: props.align || props.textAlign,
+			fontSize: props.size || props.fontSize,
 		})}
 	${marginProps}
 	${paddingProps}
 `;
 
 Text.propTypes = {
 	bold: PropTypes.bool,
-	caps: PropTypes.oneOf(['all', 'first']),
+	caps: PropTypes.oneOfType([
+		PropTypes.oneOf(['all', 'first']),
+		PropTypes.bool,
+	]),
 	dimmed: PropTypes.bool,
+	display: PropTypes.oneOf(['block', 'inline', 'inline-block']),
 	fontSize: PropTypes.string,
 	lineHeight: PropTypes.number,
 	overflow: PropTypes.oneOf(['ellipsis', 'wrap']),

src/styleProps/displayProps.js

@@ -0,0 +1,21 @@
+const supportedDisplayValues = ['block', 'inline', 'inline-block'];
+
+function displayProps(props) {
+	const {display} = props;
+
+	if (!display) return null;
+
+	if (supportedDisplayValues.includes(display)) {
+		return {
+			display,
+		};
+	} else {
+		console.warn(
+			`Only 'block', 'inline', and 'inline-block' are supported for
+			the 'display' styling prop. Please use 'base5-ui/Flex' or custom CSS
+			for more complex styling.`
+		);
+	}
+}
+
+export default displayProps;

src/styleProps/index.js

@@ -1,4 +1,5 @@
 import borderProps from './borderProps';
+import displayProps from './displayProps';
 import flexProps from './flexProps';
 import paddingProps from './paddingProps';
 import positionProps from './positionProps';
@@ -7,6 +8,7 @@ import textProps from './textProps';
 
 export {
 	borderProps,
+	displayProps,
 	flexProps,
 	paddingProps,
 	positionProps,

src/styleProps/textProps.js

@@ -1,21 +1,15 @@
 import {alpha} from '../utils/colors';
 import {checkTheme} from '../utils/theme';
-import {ellipsis, overflowWrap} from '../mixins';
+import {ellipsis, overflowWrap as wrap} from '../mixins';
 
 const textTransformMap = {
 	all: 'uppercase',
 	first: 'capitalize',
 };
 
 const overflowStylesMap = {
-	ellipsis: {
-		display: 'block',
-		...ellipsis,
-	},
-	wrap: {
-		display: 'block',
-		...overflowWrap,
-	},
+	ellipsis,
+	wrap,
 };
 
 function textProps(props) {
@@ -33,22 +27,21 @@ function textProps(props) {
 
 	checkTheme(theme);
 
-	let alignStyles;
-	if (textAlign) {
-		alignStyles = {
-			display: 'block',
-			width: '100%',
-			textAlign,
-		};
-	}
-
 	return {
-		...alignStyles,
+		textAlign,
 		fontSize: fontSize ? theme.globals.typeScale[fontSize] : undefined,
-		fontWeight: bold ? 'bold' : undefined,
+		fontWeight: bold ? 'bold' : bold === false ? 'normal' : undefined,
 		lineHeight,
-		textTransform: caps ? textTransformMap[caps] : undefined,
-		color: dimmed ? alpha(theme.text, theme.textDimStrength) : undefined,
+		textTransform: caps
+			? textTransformMap[caps]
+			: caps === false
+			? 'none'
+			: undefined,
+		color: dimmed
+			? alpha(theme.text, theme.textDimStrength)
+			: dimmed === false
+			? theme.text
+			: undefined,
 		...(overflow ? overflowStylesMap[overflow] : undefined),
 	};
 }