Add common Styled System props to v6 components

components/accordion/accordion-header.jsx

@@ -5,6 +5,7 @@ import { Text } from '../Text';
 import { Box } from '../Box';
 import { UtilityButton } from '../button';
 import { ChevronRight, ChevronDown } from '../icons/12px';
+import { typography } from '../../theme/system';
 import { useAccordionContext, useAccordionItemContext } from './accordion-util';
 
 export function AccordionHeader({
@@ -56,7 +57,7 @@ export function AccordionHeader({
 	}, [headerId, focusableChildList]);
 
 	return (
-		<Box
+		<HeaderBox
 			display="flex"
 			gridArea="header"
 			borderTop={1}
@@ -117,7 +118,7 @@ export function AccordionHeader({
 					{renderCustomIndicator({ isExpanded, onExpansion: handleExpansion })}
 				</Box>
 			) : null}
-		</Box>
+		</HeaderBox>
 	);
 }
 
@@ -131,8 +132,11 @@ AccordionHeader.propTypes = {
 	/** Receives an isExpanded boolean value. */
 	renderCustomIndicator: PropTypes.func,
 	...Box.propTypes,
+	...typography.propTypes,
 };
 
+const HeaderBox = styled(Box)(typography);
+
 const Heading = styled.header.attrs(({ ariaLevel }) => ({
 	role: 'heading',
 	'aria-level': ariaLevel,

components/accordion/accordion-item.jsx

@@ -1,10 +1,12 @@
 import React, { useCallback, useMemo } from 'react';
+import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useId } from '../shared-hooks';
 import { Box } from '../Box';
+import { typography } from '../../theme/system';
 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);
@@ -29,15 +31,16 @@ export function AccordionItem({ children, index, pinned: isPinned }) {
 	);
 
 	return (
-		<Box
+		<ItemBox
 			display="grid"
 			gridTemplateAreas={`
 				'header'
 				'panel'
 			`}
+			{...otherProps}
 		>
 			<AccordionItemContextProvider value={context}>{children}</AccordionItemContextProvider>
-		</Box>
+		</ItemBox>
 	);
 }
 
@@ -46,4 +49,10 @@ 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,
+	...typography.propTypes,
 };
+
+const ItemBox = styled(Box)(typography);

components/accordion/accordion-panel.jsx

@@ -6,6 +6,7 @@ import { Collapse } from '../collapse';
 import { Box } from '../Box';
 import { useAccordionItemContext } from './accordion-util';
 import { useAccordionContext } from './accordion-util';
+import { typography } from '../../theme/system';
 
 export function AccordionPanel({ children, mountOnEnter, unmountOnExit, ...props }) {
 	const ctx = useAccordionContext();
@@ -32,6 +33,7 @@ AccordionPanel.propTypes = {
 	/** true if panel contents should be unmounted when the section is closed **/
 	unmountOnExit: PropTypes.bool,
 	...Box.propTypes,
+	...typography.propTypes,
 };
 
 export const Panel = styled(Box).attrs(({ headerId, panelId }) => ({
@@ -51,4 +53,5 @@ export const Panel = styled(Box).attrs(({ headerId, panelId }) => ({
 			},
 		},
 	}),
+	typography,
 );

components/accordion/accordion.jsx

@@ -5,6 +5,7 @@ import { system } from 'styled-system';
 import { propType as styledPropType } from '@styled-system/prop-types';
 import { Box } from '../Box';
 import { useKeyboardNav, AccordionContextProvider } from './accordion-util';
+import { typography } from '../../theme/system';
 import { Panel } from './accordion-panel';
 
 export function Accordion({
@@ -95,6 +96,7 @@ Accordion.propTypes = {
 	/** Overrides the `padding` style on all nested `Accordion.Panel`s */
 	panelPadding: styledPropType,
 	...Box.propTypes,
+	...typography.propTypes,
 };
 
 const AccordionBox = styled(Box)`
@@ -106,4 +108,6 @@ const AccordionBox = styled(Box)`
 			},
 		})}
 	}
+
+	${typography}
 `;

components/button/Button.js

@@ -141,6 +141,8 @@ const SegmentedButtonGroup = styled(Box).attrs(({ border }) => ({
 			border-bottom-right-radius: 0;
 		}
 	}
+
+	${typography}
 `;
 
 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, typography } from '../../theme/system';
 
 /** Styled checkbox control with consistent styling across platforms */
 export const Checkbox = function Checkbox({
@@ -67,6 +68,8 @@ Checkbox.propTypes = {
 	/** Disables automatic blur. */
 	disableAutoBlur: PropTypes.bool,
 	disabled: PropTypes.bool,
+	...common.propTypes,
+	...typography.propTypes,
 };
 
 Checkbox.defaultProps = {

components/check-box/styled.jsx

@@ -1,7 +1,8 @@
 import styled, { css } from 'styled-components';
-import { position, space, layout } from 'styled-system';
+import { position, layout } from 'styled-system';
 import { resetStyles } from '../utils';
 import { Box } from '../Box';
+import { common, typography } from '../../theme/system';
 
 export const CheckboxDiv = styled(Box)`
 	display: inline;
@@ -19,8 +20,8 @@ export const CheckboxDiv = styled(Box)`
 			background-color: ${theme.colors.checkbox.disabledBackground};
 		`}
 
+	${common}
 	${position}
-	${space}
 	${layout}
 `;
 
@@ -64,6 +65,9 @@ export const CheckboxContainer = styled.button`
 			box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.checkbox.shadowFocused};
 		}
 	}
+
+	${common}
+	${typography}
 `;
 
 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-picker/component.jsx

@@ -1,8 +1,10 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Caret } from '../icons';
-import { colors } from '../shared-styles';
+import { theme } from '../../theme';
+import { DefaultThemeProvider } from '../DefaultThemeProvider';
 import { dateFunctionProps } from './date-function-props';
+import { common, typography } from '../../theme/system';
 import * as Styled from './styled';
 import { CalendarWeek } from './calendar-week';
 
@@ -55,6 +57,8 @@ export class DatePicker extends Component {
 		dateFunctions: dateFunctionProps,
 		minDate: PropTypes.instanceOf(Date),
 		maxDate: PropTypes.instanceOf(Date),
+		...common.propTypes,
+		...typography.propTypes,
 	};
 
 	UNSAFE_componentWillMount() {
@@ -126,63 +130,65 @@ export class DatePicker extends Component {
 		const { currentMonth, weeks } = this.state;
 
 		return (
-			<Fragment>
-				<Styled.Header>
-					<Styled.ChangeMonth
-						onClick={this.decrementMonth}
-						visuallyDisabled={!this.canDecrementMonth(weeks)}
-						tabIndex="0"
-					>
-						<Caret
-							style={{
-								transform: 'scaleX(-1)',
-								color: colors.gray66,
-								visibility: this.canDecrementMonth(weeks) ? 'visible' : 'hidden',
-							}}
-						/>
-					</Styled.ChangeMonth>
-
-					<Styled.MonthLabel>{dateFunctions.format(currentMonth, 'MMMM yyyy')}</Styled.MonthLabel>
-					<Styled.ChangeMonth
-						onClick={this.incrementMonth}
-						visuallyDisabled={!this.canIncrementMonth(weeks)}
-						tabIndex="0"
-					>
-						<Caret
-							style={{
-								color: colors.gray66,
-								visibility: this.canIncrementMonth(weeks) ? 'visible' : 'hidden',
-							}}
-						/>
-					</Styled.ChangeMonth>
-				</Styled.Header>
-				<Styled.Week>
-					<Styled.WeekDay>S</Styled.WeekDay>
-					<Styled.WeekDay>M</Styled.WeekDay>
-					<Styled.WeekDay>T</Styled.WeekDay>
-					<Styled.WeekDay>W</Styled.WeekDay>
-					<Styled.WeekDay>T</Styled.WeekDay>
-					<Styled.WeekDay>F</Styled.WeekDay>
-					<Styled.WeekDay>S</Styled.WeekDay>
-				</Styled.Week>
-				<Styled.Month>
-					{weeks.map(week => (
-						<CalendarWeek
-							currentMonth={dateFunctions.getMonth(currentMonth)}
-							days={week}
-							key={`week-${week[0]}`}
-							selectedDate={asDateRangePicker ? null : selectedDate}
-							selectedDateRange={asDateRangePicker ? selectedDateRange : null}
-							asDateRangePicker={asDateRangePicker}
-							setSelectedDate={this.setSelectedDate}
-							validate={validate}
-							dateFunctions={dateFunctions}
-							minDate={minDate}
-							maxDate={maxDate}
-						/>
-					))}
-				</Styled.Month>
-			</Fragment>
+			<DefaultThemeProvider>
+				<Styled.Container>
+					<Styled.Header>
+						<Styled.ChangeMonth
+							onClick={this.decrementMonth}
+							visuallyDisabled={!this.canDecrementMonth(weeks)}
+							tabIndex="0"
+						>
+							<Caret
+								style={{
+									transform: 'scaleX(-1)',
+									color: theme.colors.gray66,
+									visibility: this.canDecrementMonth(weeks) ? 'visible' : 'hidden',
+								}}
+							/>
+						</Styled.ChangeMonth>
+
+						<Styled.MonthLabel>{dateFunctions.format(currentMonth, 'MMMM yyyy')}</Styled.MonthLabel>
+						<Styled.ChangeMonth
+							onClick={this.incrementMonth}
+							visuallyDisabled={!this.canIncrementMonth(weeks)}
+							tabIndex="0"
+						>
+							<Caret
+								style={{
+									color: theme.colors.gray66,
+									visibility: this.canIncrementMonth(weeks) ? 'visible' : 'hidden',
+								}}
+							/>
+						</Styled.ChangeMonth>
+					</Styled.Header>
+					<Styled.Week>
+						<Styled.WeekDay>S</Styled.WeekDay>
+						<Styled.WeekDay>M</Styled.WeekDay>
+						<Styled.WeekDay>T</Styled.WeekDay>
+						<Styled.WeekDay>W</Styled.WeekDay>
+						<Styled.WeekDay>T</Styled.WeekDay>
+						<Styled.WeekDay>F</Styled.WeekDay>
+						<Styled.WeekDay>S</Styled.WeekDay>
+					</Styled.Week>
+					<Styled.Month>
+						{weeks.map(week => (
+							<CalendarWeek
+								currentMonth={dateFunctions.getMonth(currentMonth)}
+								days={week}
+								key={`week-${week[0]}`}
+								selectedDate={asDateRangePicker ? null : selectedDate}
+								selectedDateRange={asDateRangePicker ? selectedDateRange : null}
+								asDateRangePicker={asDateRangePicker}
+								setSelectedDate={this.setSelectedDate}
+								validate={validate}
+								dateFunctions={dateFunctions}
+								minDate={minDate}
+								maxDate={maxDate}
+							/>
+						))}
+					</Styled.Month>
+				</Styled.Container>
+			</DefaultThemeProvider>
 		);
 	}
 }