Add common Styled System props to v6 components

UpgradeGuide.md

@@ -11,6 +11,8 @@
   - Check your sizes, standalone props have been replaced by the `size` prop, such as `size=medium` instead of `medium`.
 - `Checkbox`
   - The old `theme` prop functionality has been replaced by the [global theme object](https://faithlife.github.io/styled-ui/#/theme) and Styled System props.
+- `DatePicker`
+  - `DatePicker` is now wrapped in a single `div` in the DOM, instead of being three separate DOM elements "wrapped" in a `React.Fragment`.
 - `DatePickerInput`
   - The `styleOverrides` prop has been removed in favor of Styled System props. Use style props for the input directly on the `DatePickerInput` component, and use style props for the calendar popover on a `DatePickerInput.Popover` child config component.
   - The `placement` prop has been removed—use `placement` on `DatePickerInput.Popover` instead.

components/Paragraph.js

@@ -9,11 +9,11 @@ export const Paragraph = styled.p`
 	display: block;
 	margin: 0;
 	color: ${themeGet('colors.foregroundPrimary')};
-	${themeGet('textStyles.c.16')};
+	${themeGet('textStyles.c.16')}
 
-	${textStyle};
-	${box};
-	${typography};
+	${textStyle}
+	${box}
+	${typography}
 `;
 
 Paragraph.defaultProps = { theme };

components/Text.js

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import systemPropTypes from '@styled-system/prop-types';
 import styled from 'styled-components';
 import { textStyle, layout, border } from 'styled-system';
@@ -10,20 +9,20 @@ export const Text = styled.span`
 	display: inline-flex;
 	align-items: baseline;
 	color: ${themeGet('colors.foregroundPrimary')};
-	${themeGet('textStyles.c.16')};
+	${themeGet('textStyles.c.16')}
 
-	${textStyle};
-	${common};
-	${layout};
-	${typography};
-	${border};
+	${textStyle}
+	${common}
+	${layout}
+	${typography}
+	${border}
 `;
 
 Text.defaultProps = { theme };
 Text.propTypes = {
 	...common.propTypes,
 	...typography.propTypes,
+	...systemPropTypes.textStyle,
 	...systemPropTypes.layout,
 	...systemPropTypes.border,
-	textStyle: PropTypes.string,
 };

components/accordion/accordion-item.jsx

@@ -4,7 +4,7 @@ import { useId } from '../shared-hooks';
 import { Box } from '../Box';
 import { useAccordionContext, AccordionItemContextProvider } from './accordion-util';
 
-export function AccordionItem({ children, index, pinned: isPinned }) {
+export function AccordionItem({ children, index, pinned: isPinned, ...otherProps }) {
 	const { expandedSections, onExpansion } = useAccordionContext();
 
 	const isExpanded = expandedSections.includes(index);
@@ -35,6 +35,7 @@ export function AccordionItem({ children, index, pinned: isPinned }) {
 				'header'
 				'panel'
 			`}
+			{...otherProps}
 		>
 			<AccordionItemContextProvider value={context}>{children}</AccordionItemContextProvider>
 		</Box>
@@ -46,4 +47,7 @@ AccordionItem.propTypes = {
 	children: PropTypes.node.isRequired,
 	/** This is supplied by the Accordion component. */
 	index: PropTypes.number,
+	/** If `true`, the item will remain permanenty expanded. */
+	pinned: PropTypes.bool,
+	...Box.propTypes,
 };

components/button/Button.js

@@ -1,12 +1,15 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import { variant, layout, flexbox, position, textStyle, border, background } from 'styled-system';
+import styledSystemPropTypes from '@styled-system/prop-types';
 import 'focus-visible';
 import { Box } from '../Box';
 import { common, typography } from '../../theme/system';
 import { buttonSizes, buttons } from '../../theme/buttons';
 import { theme } from '../../theme';
 import { LoadingSpinner } from '../loading-spinner';
+import { elementOfType } from '../utils';
 
 const sizeVariant = variant({
 	prop: 'size',
@@ -113,6 +116,33 @@ const Button = React.forwardRef(
 	),
 );
 
+Button.propTypes = {
+	children: PropTypes.node,
+	icon: PropTypes.element,
+	disabled: PropTypes.bool,
+	loading: PropTypes.bool,
+	active: PropTypes.bool,
+	size: PropTypes.oneOf(['small', 'medium', 'large']),
+	variant: PropTypes.oneOf([
+		'primary',
+		'secondary',
+		'minor',
+		'transparent',
+		'minorTransparent',
+		'link',
+		'danger',
+		'dangerSpecial',
+	]),
+	...common.propTypes,
+	...typography.propTypes,
+	...styledSystemPropTypes.textStyle,
+	...styledSystemPropTypes.layout,
+	...styledSystemPropTypes.flexbox,
+	...styledSystemPropTypes.position,
+	...styledSystemPropTypes.border,
+	...styledSystemPropTypes.background,
+};
+
 const SegmentedButtonGroup = styled(Box).attrs(({ border }) => ({
 	border: border ?? 1,
 	borderColor: 'button.segmentedButtonGroupBorder',
@@ -143,4 +173,9 @@ const SegmentedButtonGroup = styled(Box).attrs(({ border }) => ({
 	}
 `;
 
+SegmentedButtonGroup.propTypes = {
+	children: PropTypes.arrayOf(elementOfType(Button)).isRequired,
+	...Box.propTypes,
+};
+
 export { Button, SegmentedButtonGroup };

components/check-box/checkbox-content.jsx

@@ -4,6 +4,7 @@ import styledSystemPropTypes from '@styled-system/prop-types';
 import styled from 'styled-components';
 import { getConfigChild } from '../utils';
 import { Text } from '../Text';
+import { common } from '../../theme/system';
 import * as Styled from './styled';
 
 export function CheckboxContent({ isChecked, title, disabled, children, ...otherProps }) {
@@ -30,8 +31,8 @@ CheckboxContent.propTypes = {
 	title: PropTypes.string,
 	isChecked: PropTypes.oneOf([true, false, 'mixed']),
 	disabled: PropTypes.bool,
+	...common.propTypes,
 	...styledSystemPropTypes.position,
-	...styledSystemPropTypes.space,
 	...styledSystemPropTypes.layout,
 };
 
@@ -41,8 +42,8 @@ CheckboxContent.propTypes = {
  */
 export const CheckboxBox = props => null;
 CheckboxBox.propTypes = {
+	...common.propTypes,
 	...styledSystemPropTypes.position,
-	...styledSystemPropTypes.space,
 	...styledSystemPropTypes.layout,
 };
 CheckboxBox.childConfigComponent = 'CheckboxBox';

components/check-box/component.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { CheckboxContent } from './checkbox-content';
 import * as Styled from './styled';
 import { DefaultThemeProvider } from '../DefaultThemeProvider';
+import { common } from '../../theme/system';
 
 /** Styled checkbox control with consistent styling across platforms */
 export const Checkbox = function Checkbox({
@@ -67,6 +68,7 @@ Checkbox.propTypes = {
 	/** Disables automatic blur. */
 	disableAutoBlur: PropTypes.bool,
 	disabled: PropTypes.bool,
+	...common.propTypes,
 };
 
 Checkbox.defaultProps = {

components/check-box/styled.jsx

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
-import { position, space, layout } from 'styled-system';
+import { position, layout } from 'styled-system';
+import { common } from '../../theme/system';
 import { resetStyles } from '../utils';
 import { Box } from '../Box';
 
@@ -19,8 +20,8 @@ export const CheckboxDiv = styled(Box)`
 			background-color: ${theme.colors.checkbox.disabledBackground};
 		`}
 
+	${common}
 	${position}
-	${space}
 	${layout}
 `;
 
@@ -64,6 +65,8 @@ export const CheckboxContainer = styled.button`
 			box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.checkbox.shadowFocused};
 		}
 	}
+
+	${common}
 `;
 
 export const isCheckedStyles = css`

components/collapse/component.jsx

@@ -8,6 +8,7 @@ const propTypes = {
 	...Transition.propTypes,
 	isOpen: PropTypes.bool,
 	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+	...Box.propTypes,
 };
 
 const defaultProps = {

components/date-period-picker/component.jsx

@@ -4,6 +4,9 @@ import debounce from 'lodash.debounce';
 import { DatePicker } from '../date-picker';
 import { Input } from '../input';
 import { dateFunctionProps } from '../date-picker/date-function-props';
+import { filterProps } from '../utils';
+import { common } from '../../theme/system';
+import { DefaultThemeProvider } from '../DefaultThemeProvider';
 import * as Styled from './styled';
 
 const DATE_FORMAT_STRING = 'M/d/yyyy';
@@ -40,6 +43,7 @@ export class DatePeriodPicker extends PureComponent {
 		dateFunctions: dateFunctionProps,
 		/** Debounce value for date inputs. Defaults to 500ms */
 		debounce: PropTypes.number,
+		...common.propTypes,
 	};
 
 	static defaultProps = {
@@ -181,44 +185,45 @@ export class DatePeriodPicker extends PureComponent {
 
 	render() {
 		const { setSelectedDate, validate, dateFunctions } = this.props;
+		const { matchingProps: styleProps } = filterProps(this.props, common.propTypes);
 		const {
 			inputValues: { start, end },
 			selectedDateRange,
 		} = this.state;
 
 		return (
-			<Styled.Container>
-				{this.getUniqueDatePeriods().map(({ displayName, dateRange, originalIndex }) => (
-					<Styled.DatePeriod
-						key={displayName}
-						onClick={() => {
-							setSelectedDate(dateRange, originalIndex);
-						}}
-					>
-						{displayName}
-					</Styled.DatePeriod>
-				))}
-				<Styled.DateInputContainer>
-					<Styled.Label>
-						<Styled.LabelText>From</Styled.LabelText>
-						<Input
-							placeholder="mm/dd/yyyy"
-							value={start}
-							onChange={event => this.handleInputValueChange(event.target.value, 'start')}
-							small
-						/>
-					</Styled.Label>
-					<Styled.Label>
-						<Styled.LabelText>To</Styled.LabelText>
-						<Input
-							placeholder="mm/dd/yyyy"
-							value={end}
-							onChange={event => this.handleInputValueChange(event.target.value, 'end')}
-							small
-						/>
-					</Styled.Label>
-				</Styled.DateInputContainer>
-				<Styled.DatePickerContainer>
+			<DefaultThemeProvider>
+				<Styled.Container {...styleProps}>
+					{this.getUniqueDatePeriods().map(({ displayName, dateRange, originalIndex }) => (
+						<Styled.DatePeriod
+							key={displayName}
+							onClick={() => {
+								setSelectedDate(dateRange, originalIndex);
+							}}
+						>
+							{displayName}
+						</Styled.DatePeriod>
+					))}
+					<Styled.DateInputContainer>
+						<Styled.Label>
+							<Styled.LabelText>From</Styled.LabelText>
+							<Input
+								placeholder="mm/dd/yyyy"
+								value={start}
+								onChange={event => this.handleInputValueChange(event.target.value, 'start')}
+								small
+							/>
+						</Styled.Label>
+						<Styled.Label>
+							<Styled.LabelText>To</Styled.LabelText>
+							<Input
+								placeholder="mm/dd/yyyy"
+								value={end}
+								onChange={event => this.handleInputValueChange(event.target.value, 'end')}
+								small
+							/>
+						</Styled.Label>
+					</Styled.DateInputContainer>
 					<DatePicker
 						asDateRangePicker
 						selectedDateRange={selectedDateRange}
@@ -227,9 +232,10 @@ export class DatePeriodPicker extends PureComponent {
 						}
 						validate={validate}
 						dateFunctions={dateFunctions}
+						padding={3}
 					/>
-				</Styled.DatePickerContainer>
-			</Styled.Container>
+				</Styled.Container>
+			</DefaultThemeProvider>
 		);
 	}
 }