Replace "Size" with "Padding"

"Size" is somewhat ambiguous. "Padding" is more explicit.

packages/components/src/card/README.md

@@ -20,7 +20,7 @@ Name | Type | Default | Description
 --- | --- | --- | ---
 `isBorderless` | `boolean` | `false` | Determines the border style of the card.
 `isElevated` | `boolean` | `false` | Determines the elevation style of the card.
-`size` | `string` | `medium` | Determines the amount of padding within the card.
+`padding` | `string` | `medium` | Determines the amount of padding within the card.
 
 ## Sub-Components
 
@@ -68,30 +68,30 @@ const Example = () => (
 
 ### Context
 
-`<Card />`'s sub-components are connected to `<Card />` using [Context](https://reactjs.org/docs/context.html). Certain props like `size` and `variant` are passed through to the sub-components.
+`<Card />`'s sub-components are connected to `<Card />` using [Context](https://reactjs.org/docs/context.html). Certain props like `padding` and `variant` are passed through to the sub-components.
 
-In the following example, the `<CardBody />` will render with a size of `small`:
+In the following example, the `<CardBody />` will render with a padding of `small`:
 
 ```jsx
 import { Card, CardBody } from '@wordpress/components';
 
 const Example = () => (
-	<Card size="small">
+	<Card padding="small">
 		<CardBody>...</CardBody>
 	</Card>
 );
 ```
 
-These sub-components are designed to be flexible. The Context props can be overridden by the sub-component(s) as required. In the following example, the last `<CardBody />` will render it's specified size:
+These sub-components are designed to be flexible. The Context props can be overridden by the sub-component(s) as required. In the following example, the last `<CardBody />` will render it's specified padding:
 
 ```jsx
 import { Card, CardBody } from '@wordpress/components';
 
 const Example = () => (
-	<Card size="small">
+	<Card padding="small">
 		<CardBody>...</CardBody>
 		<CardBody>...</CardBody>
-		<CardBody size="large">...</CardBody>
+		<CardBody padding="large">...</CardBody>
 	</Card>
 );
 ```

packages/components/src/card/body.js

@@ -11,18 +11,18 @@ import { useCardContext } from './context';
 
 export const defaultProps = {
 	isShady: false,
-	size: 'medium',
+	padding: 'medium',
 };
 
 export function CardBody( props ) {
 	const { className, isShady, ...additionalProps } = props;
 	const mergedProps = { ...defaultProps, ...useCardContext(), ...props };
-	const { size } = mergedProps;
+	const { padding } = mergedProps;
 
 	const classes = classnames(
 		'components-card__body',
 		isShady && 'is-shady',
-		size && `is-size-${ size }`,
+		padding && `is-padding-${ padding }`,
 		className
 	);
 

packages/components/src/card/docs/body.md

@@ -19,6 +19,6 @@ const Example = () => (
 Name | Type | Default | Description
 --- | --- | --- | ---
 `isShady` | `boolean` | `false` | Renders with a light gray background color.
-`size` | `string` | `medium` | Determines the amount of padding within the component.
+`padding` | `string` | `medium` | Determines the amount of padding within the component.
 
 Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from context.

packages/components/src/card/docs/footer.md

@@ -21,6 +21,6 @@ Name | Type | Default | Description
 `isBorderless` | `boolean` | `false` | Determines the border style of the card.
 `isElevated` | `boolean` | `false` | Determines the elevation style of the card.
 `isShady` | `boolean` | `false` | Renders with a light gray background color.
-`size` | `string` | `medium` | Determines the amount of padding within the component.
+`padding` | `string` | `medium` | Determines the amount of padding within the component.
 
 Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from context.

packages/components/src/card/docs/header.md

@@ -21,6 +21,6 @@ Name | Type | Default | Description
 `isBorderless` | `boolean` | `false` | Determines the border style of the card.
 `isElevated` | `boolean` | `false` | Determines the elevation style of the card.
 `isShady` | `boolean` | `false` | Renders with a light gray background color.
-`size` | `string` | `medium` | Determines the amount of padding within the component.
+`padding` | `string` | `medium` | Determines the amount of padding within the component.
 
 Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from context.

packages/components/src/card/footer.js

@@ -12,19 +12,19 @@ import { useCardContext } from './context';
 export const defaultProps = {
 	isBorderless: false,
 	isShady: false,
-	size: 'medium',
+	padding: 'medium',
 };
 
 export function CardFooter( props ) {
 	const { className, isShady, ...additionalProps } = props;
 	const mergedProps = { ...defaultProps, ...useCardContext(), ...props };
-	const { isBorderless, size } = mergedProps;
+	const { isBorderless, padding } = mergedProps;
 
 	const classes = classnames(
 		'components-card__footer',
 		isBorderless && 'is-borderless',
 		isShady && 'is-shady',
-		size && `is-size-${ size }`,
+		padding && `is-padding-${ padding }`,
 		className
 	);
 

packages/components/src/card/header.js

@@ -12,19 +12,19 @@ import { useCardContext } from './context';
 export const defaultProps = {
 	isBorderless: false,
 	isShady: false,
-	size: 'medium',
+	padding: 'medium',
 };
 
 export function CardHeader( props ) {
 	const { className, isShady, ...additionalProps } = props;
 	const mergedProps = { ...defaultProps, ...useCardContext(), ...props };
-	const { isBorderless, size } = mergedProps;
+	const { isBorderless, padding } = mergedProps;
 
 	const classes = classnames(
 		'components-card__header',
 		isBorderless && 'is-borderless',
 		isShady && 'is-shady',
-		size && `is-size-${ size }`,
+		padding && `is-padding-${ padding }`,
 		className
 	);
 

packages/components/src/card/index.js

@@ -12,30 +12,30 @@ import { CardUI } from './styles/card-styles';
 export const defaultProps = {
 	isBorderless: false,
 	isElevated: false,
-	size: 'medium',
+	padding: 'medium',
 };
 
 export function Card( props ) {
 	const {
 		className,
 		isBorderless,
 		isElevated,
-		size,
+		padding,
 		...additionalProps
 	} = props;
 	const { Provider } = CardContext;
 
 	const contextProps = {
 		isBorderless,
 		isElevated,
-		size,
+		padding,
 	};
 
 	const classes = classnames(
 		'components-card',
 		isBorderless && 'is-borderless',
 		isElevated && 'is-elevated',
-		size && `is-size-${ size }`,
+		padding && `is-padding-${ padding }`,
 		className
 	);
 

packages/components/src/card/stories/_utils.js

@@ -6,20 +6,20 @@ import { boolean, select } from '@storybook/addon-knobs';
 /* eslint-enable import/no-extraneous-dependencies */
 
 export const getCardProps = ( props = {} ) => {
-	const { size } = props;
+	const { padding } = props;
 
 	return {
 		isBorderless: boolean( 'Card: isBorderless', false ),
 		isElevated: boolean( 'Card: isElevated', false ),
-		size: select(
-			'Card: size',
+		padding: select(
+			'Card: padding',
 			{
 				large: 'large',
 				medium: 'medium',
 				small: 'small',
 				extraSmall: 'extraSmall',
 			},
-			size || 'medium'
+			padding || 'medium'
 		),
 	};
 };

packages/components/src/card/styles/card-styles.js

@@ -46,7 +46,7 @@ export const HeaderUI = styled.div`
 		border-bottom: none;
 	}
 
-	${headerFooterSizes};
+	${headerFooterPaddings};
 	${handleBorderless};
 	${handleShady};
 `;
@@ -77,7 +77,7 @@ export const MediaUI = styled.div`
 export const BodyUI = styled.div`
 	box-sizing: border-box;
 
-	${bodySize};
+	${bodyPadding};
 	${handleShady};
 `;
 
@@ -91,7 +91,7 @@ export const FooterUI = styled.div`
 		border-top: none;
 	}
 
-	${headerFooterSizes};
+	${headerFooterPaddings};
 	${handleBorderless};
 	${handleShady};
 `;
@@ -105,9 +105,9 @@ export const DividerUI = styled( HorizontalRule )`
 	width: 100%;
 `;
 
-export function bodySize() {
+export function bodyPadding() {
 	return `
-		&.is-size {
+		&.is-padding {
 			&-large {
 				padding: 28px;
 			}
@@ -124,9 +124,9 @@ export function bodySize() {
 	`;
 }
 
-export function headerFooterSizes() {
+export function headerFooterPaddings() {
 	return `
-		&.is-size {
+		&.is-padding {
 			&-large {
 				padding: 20px 28px;
 			}

packages/components/src/card/test/body.js

@@ -31,11 +31,11 @@ describe( 'CardBody', () => {
 	} );
 
 	describe( 'modifiers', () => {
-		test( 'should be able to render size modifier', () => {
-			const wrapper = shallow( <CardBody size="large" /> );
+		test( 'should be able to render padding modifier', () => {
+			const wrapper = shallow( <CardBody padding="large" /> );
 			const cardBody = wrapper.find( '.components-card__body' );
 
-			expect( cardBody.hasClass( 'is-size-large' ) ).toBe( true );
+			expect( cardBody.hasClass( 'is-padding-large' ) ).toBe( true );
 		} );
 
 		test( 'should be able to render shady modifier', () => {

packages/components/src/card/test/footer.js

@@ -31,11 +31,11 @@ describe( 'CardFooter', () => {
 	} );
 
 	describe( 'modifiers', () => {
-		test( 'should be able to render size modifier', () => {
-			const wrapper = shallow( <CardFooter size="large" /> );
+		test( 'should be able to render padding modifier', () => {
+			const wrapper = shallow( <CardFooter padding="large" /> );
 			const cardFooter = wrapper.find( '.components-card__footer' );
 
-			expect( cardFooter.hasClass( 'is-size-large' ) ).toBe( true );
+			expect( cardFooter.hasClass( 'is-padding-large' ) ).toBe( true );
 		} );
 
 		test( 'should be able to render shady modifier', () => {

packages/components/src/card/test/header.js

@@ -31,11 +31,11 @@ describe( 'CardHeader', () => {
 	} );
 
 	describe( 'modifiers', () => {
-		test( 'should be able to render size modifier', () => {
-			const wrapper = shallow( <CardHeader size="large" /> );
+		test( 'should be able to render padding modifier', () => {
+			const wrapper = shallow( <CardHeader padding="large" /> );
 			const cardHeader = wrapper.find( '.components-card__header' );
 
-			expect( cardHeader.hasClass( 'is-size-large' ) ).toBe( true );
+			expect( cardHeader.hasClass( 'is-padding-large' ) ).toBe( true );
 		} );
 
 		test( 'should be able to render shady modifier', () => {

packages/components/src/card/test/index.js

@@ -66,24 +66,24 @@ describe( 'Card', () => {
 
 		test( 'should receive modifier props from context', () => {
 			const card = mount(
-				<Card size="extraSmall">
+				<Card padding="extraSmall">
 					<CardBody>Hello</CardBody>
 				</Card>
 			);
 			const cardBody = card.find( '.components-card__body' ).first();
 
-			expect( cardBody.hasClass( 'is-size-extraSmall' ) ).toBe( true );
+			expect( cardBody.hasClass( 'is-padding-extraSmall' ) ).toBe( true );
 		} );
 
 		test( 'should be able to override props from context', () => {
 			const card = mount(
-				<Card size="extraSmall">
-					<CardBody size="large">Hello</CardBody>
+				<Card padding="extraSmall">
+					<CardBody padding="large">Hello</CardBody>
 				</Card>
 			);
 			const cardBody = card.find( '.components-card__body' ).first();
 
-			expect( cardBody.hasClass( 'is-size-large' ) ).toBe( true );
+			expect( cardBody.hasClass( 'is-padding-large' ) ).toBe( true );
 		} );
 	} );
 
@@ -102,27 +102,27 @@ describe( 'Card', () => {
 
 		test( 'should receive modifier props from context', () => {
 			const card = mount(
-				<Card size="extraSmall" isBorderless={ true }>
+				<Card padding="extraSmall" isBorderless={ true }>
 					<CardHeader>Hello</CardHeader>
 				</Card>
 			);
 			const cardHeader = card.find( '.components-card__header' ).first();
 
-			expect( cardHeader.hasClass( 'is-size-extraSmall' ) ).toBe( true );
+			expect( cardHeader.hasClass( 'is-padding-extraSmall' ) ).toBe( true );
 			expect( cardHeader.hasClass( 'is-borderless' ) ).toBe( true );
 		} );
 
 		test( 'should be able to override props from context', () => {
 			const card = mount(
-				<Card size="extraSmall" isBorderless={ true }>
-					<CardHeader size="large" isBorderless={ false }>
+				<Card padding="extraSmall" isBorderless={ true }>
+					<CardHeader padding="large" isBorderless={ false }>
 						Hello
 					</CardHeader>
 				</Card>
 			);
 			const cardHeader = card.find( '.components-card__header' ).first();
 
-			expect( cardHeader.hasClass( 'is-size-large' ) ).toBe( true );
+			expect( cardHeader.hasClass( 'is-padding-large' ) ).toBe( true );
 			expect( cardHeader.hasClass( 'is-borderless' ) ).toBe( false );
 		} );
 	} );
@@ -142,27 +142,27 @@ describe( 'Card', () => {
 
 		test( 'should receive modifier props from context', () => {
 			const card = mount(
-				<Card size="extraSmall" isBorderless={ true }>
+				<Card padding="extraSmall" isBorderless={ true }>
 					<CardFooter>Hello</CardFooter>
 				</Card>
 			);
 			const cardFooter = card.find( '.components-card__footer' ).first();
 
-			expect( cardFooter.hasClass( 'is-size-extraSmall' ) ).toBe( true );
+			expect( cardFooter.hasClass( 'is-padding-extraSmall' ) ).toBe( true );
 			expect( cardFooter.hasClass( 'is-borderless' ) ).toBe( true );
 		} );
 
 		test( 'should be able to override props from context', () => {
 			const card = mount(
-				<Card size="extraSmall" isBorderless={ true }>
-					<CardFooter size="large" isBorderless={ false }>
+				<Card padding="extraSmall" isBorderless={ true }>
+					<CardFooter padding="large" isBorderless={ false }>
 						Hello
 					</CardFooter>
 				</Card>
 			);
 			const cardFooter = card.find( '.components-card__footer' ).first();
 
-			expect( cardFooter.hasClass( 'is-size-large' ) ).toBe( true );
+			expect( cardFooter.hasClass( 'is-padding-large' ) ).toBe( true );
 			expect( cardFooter.hasClass( 'is-borderless' ) ).toBe( false );
 		} );
 	} );