@wordpress/components 21.3.0 → 22.0.0

package/src/button/README.md

@@ -127,7 +127,6 @@ Whether the button is disabled. If `true`, this will force a `button` element to
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### href
 
@@ -135,7 +134,6 @@ If provided, renders `a` instead of `button`.
 
 -   Type: `String`
 -   Required: No
--   Default: `undefined`
 
 #### variant
 
@@ -143,7 +141,6 @@ Specifies the button's style. The accepted values are `'primary'` (the primary b
 
 -   Type: `String`
 -   Required: No
--   Default: `undefined`
 
 #### isDestructive
 
@@ -151,7 +148,6 @@ Renders a red text-based button style to indicate destructive behavior.
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### isSmall
 
@@ -159,7 +155,6 @@ Decreases the size of the button.
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### isPressed
 
@@ -167,7 +162,6 @@ Renders a pressed button style.
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### isBusy
 
@@ -175,7 +169,6 @@ Indicates activity while a action is being performed.
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### focus
 
@@ -183,7 +176,6 @@ Whether the button is focused.
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### target
 
@@ -205,15 +197,13 @@ If provided, renders an [Icon](/packages/components/src/icon/README.md) componen
 
 -   Type: `String|Function|WPComponent|null`
 -   Required: No
--   Default: `null`
 
 #### iconSize
 
-If provided with `icon`, sets the icon size.
+If provided with `icon`, sets the icon size. Please refer to the [Icon](/packages/components/src/icon/README.md) component for more details regarding the default value of its `size` prop.
 
 -   Type: `Number`
 -   Required: No
--   Default: `20 when a Dashicon is rendered, 24 for all other icons.`
 
 #### iconPosition
 
@@ -236,15 +226,13 @@ If provided, renders a [Tooltip](/packages/components/src/tooltip/README.md) com
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### tooltipPosition
 
-If provided with`showTooltip`, sets the position of the tooltip.
+If provided with`showTooltip`, sets the position of the tooltip. Please refer to the [Tooltip](/packages/components/src/tooltip/README.md) component for more details regarding the defaults.
 
 -   Type: `String`
 -   Require: No
--   Default:`top center`
 
 #### shortcut
 
@@ -252,7 +240,6 @@ If provided with `showTooltip`, appends the Shortcut label to the tooltip conten
 
 -   Type: `String|Object`
 -   Required: No
--   Default: `undefined`
 
 #### label
 

package/src/button/stories/index.js

@@ -1,15 +1,10 @@
-/**
- * External dependencies
- */
-import { text, number, boolean } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
 import {
 	formatBold,
 	formatItalic,
-	link as linkIcon,
+	link,
 	more,
 	wordpress,
 } from '@wordpress/icons';
@@ -23,142 +18,120 @@ import Button from '../';
 export default {
 	title: 'Components/Button',
 	component: Button,
+	argTypes: {
+		label: {
+			control: { type: 'text' },
+			description:
+				'Sets the `aria-label` of the component, if none is provided. Sets the Tooltip content if `showTooltip` is provided.',
+		},
+		children: {
+			control: { type: 'text' },
+		},
+		href: {
+			control: { type: 'text' },
+			description: 'If provided, renders `a` instead of `button`.',
+		},
+		icon: {
+			control: { type: 'select' },
+			description:
+				'If provided, renders an `Icon` component inside the button.',
+			options: [ 'wordpress', 'link', 'more' ],
+			mapping: {
+				wordpress,
+				link,
+				more,
+			},
+		},
+		iconSize: {
+			control: { type: 'number' },
+			description: 'If provided with `icon`, sets the icon size.',
+		},
+		iconPosition: {
+			control: { type: 'select' },
+			description:
+				'If provided with `icon`, sets the position of icon relative to the `text`. Available options are `left|right`.',
+			options: [ 'left', 'right' ],
+			table: {
+				defaultValue: { summary: `left` },
+			},
+		},
+		isBusy: {
+			control: 'boolean',
+			description:
+				'Indicates activity while a action is being performed.',
+		},
+		isDestructive: {
+			control: 'boolean',
+			description:
+				'Renders a red text-based button style to indicate destructive behavior.',
+		},
+		isPressed: {
+			control: 'boolean',
+			description: 'Renders a pressed button style.',
+		},
+		isSmall: {
+			control: 'boolean',
+			description: 'Decreases the size of the button.',
+		},
+		disabled: {
+			control: 'boolean',
+			description:
+				'Whether the button is disabled. If `true`, this will force a `button` element to be rendered.',
+		},
+		shortcut: {
+			control: { type: 'text' },
+			description:
+				'If provided with `showTooltip`, appends the Shortcut label to the tooltip content. If an `Object` is provided, it should contain `display` and `ariaLabel` keys.',
+		},
+		showTooltip: {
+			control: 'boolean',
+			description:
+				'If provided, renders a `Tooltip` component for the button.',
+		},
+		tooltipPosition: {
+			control: { type: 'text' },
+			description:
+				'If provided with `showTooltip`, sets the position of the tooltip.',
+		},
+		text: {
+			control: { type: 'text' },
+			description:
+				'If provided, displays the given text inside the button. If the button contains `children` elements, the text is displayed before them.',
+		},
+		target: {
+			control: { type: 'text' },
+			description:
+				'If provided with `href`, sets the `target` attribute to the `a`.',
+		},
+		variant: {
+			control: { type: 'select' },
+			description: "Specifies the button's style.",
+			options: [ 'primary', 'secondary', 'tertiary', 'link' ],
+		},
+		__experimentalIsFocusable: {
+			control: 'boolean',
+			description: 'Makes the button focusable even when disabled',
+		},
+	},
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 
-export const _default = () => {
-	const label = text( 'Label', 'Default Button' );
-
-	return <Button>{ label }</Button>;
-};
-
-export const primary = () => {
-	const label = text( 'Label', 'Primary Button' );
-
-	return <Button variant="primary">{ label }</Button>;
-};
-
-export const secondary = () => {
-	const label = text( 'Label', 'Secondary Button' );
-
-	return <Button variant="secondary">{ label }</Button>;
-};
-
-export const tertiary = () => {
-	const label = text( 'Label', 'Tertiary Button' );
-
-	return <Button variant="tertiary">{ label }</Button>;
-};
-
-export const isDestructive = () => {
-	const label = text( 'Label', 'Destructive Button' );
-	const isSmall = boolean( 'isSmall', false );
-	const disabled = boolean( 'disabled', false );
+function Template( { children, ...props } ) {
+	return <Button { ...props }>{ children }</Button>;
+}
 
-	return (
-		<Button isDestructive isSmall={ isSmall } disabled={ disabled }>
-			{ label }
-		</Button>
-	);
-};
-
-export const isPrimaryDestructive = () => {
-	const label = text( 'Label', 'Destructive Primary Button' );
-	const isSmall = boolean( 'isSmall', false );
-	const disabled = boolean( 'disabled', false );
-
-	return (
-		<Button
-			variant="primary"
-			isDestructive
-			isSmall={ isSmall }
-			disabled={ disabled }
-		>
-			{ label }
-		</Button>
-	);
-};
-
-export const small = () => {
-	const label = text( 'Label', 'Small Button' );
-
-	return <Button isSmall>{ label }</Button>;
-};
-
-export const pressed = () => {
-	const label = text( 'Label', 'Pressed Button' );
-
-	return <Button isPressed>{ label }</Button>;
+export const Default = Template.bind( {} );
+Default.args = {
+	children: 'Code is poetry',
 };
 
-export const disabled = () => {
-	const label = text( 'Label', 'Disabled Button' );
-
-	return <Button disabled>{ label }</Button>;
-};
-
-export const disabledFocusable = () => {
-	const label = text( 'Label', 'Disabled Button' );
-
-	return (
-		<Button disabled __experimentalIsFocusable>
-			{ label }
-		</Button>
-	);
-};
-
-export const link = () => {
-	const label = text( 'Label', 'Link Button' );
-
-	return (
-		<Button href="https://wordpress.org/" target="_blank">
-			{ label }
-		</Button>
-	);
-};
-
-export const disabledLink = () => {
-	const label = text( 'Label', 'Disabled Link Button' );
-
-	return (
-		<Button href="https://wordpress.org/" target="_blank" disabled>
-			{ label }
-		</Button>
-	);
-};
-
-export const destructiveLink = () => {
-	const label = text( 'Label', 'Destructive Link' );
-
-	return (
-		<Button isDestructive variant="link">
-			{ label }
-		</Button>
-	);
-};
-
-export const icon = () => {
-	const label = text( 'Label', 'Code is poetry' );
-	const size = number( 'Size', 24 );
-
-	return <Button icon={ wordpress } label={ label } iconSize={ size } />;
-};
-
-export const disabledFocusableIcon = () => {
-	const label = text( 'Label', 'Code is poetry' );
-	const size = number( 'Size', 24 );
-
-	return (
-		<Button
-			icon={ wordpress }
-			label={ label }
-			iconSize={ size }
-			disabled
-			__experimentalIsFocusable
-		/>
-	);
+export const Icon = Template.bind( {} );
+Icon.args = {
+	label: 'Code is poetry',
+	icon: 'wordpress',
 };
 
 export const groupedIcons = () => {
@@ -170,49 +143,7 @@ export const groupedIcons = () => {
 		<GroupContainer>
 			<Button icon={ formatBold } label="Bold" />
 			<Button icon={ formatItalic } label="Italic" />
-			<Button icon={ linkIcon } label="Link" />
+			<Button icon={ link } label="Link" />
 		</GroupContainer>
 	);
 };
-
-export const buttons = () => {
-	return (
-		<div style={ { padding: '20px' } }>
-			<h2>Small Buttons</h2>
-			<div className="story-buttons-container">
-				<Button isSmall>Button</Button>
-				<Button variant="primary" isSmall>
-					Primary Button
-				</Button>
-				<Button variant="secondary" isSmall>
-					Secondary Button
-				</Button>
-				<Button variant="tertiary" isSmall>
-					Tertiary Button
-				</Button>
-				<Button isSmall icon={ more } />
-				<Button isSmall variant="primary" icon={ more } />
-				<Button isSmall variant="secondary" icon={ more } />
-				<Button isSmall variant="tertiary" icon={ more } />
-				<Button isSmall variant="primary" icon={ more }>
-					Icon & Text
-				</Button>
-			</div>
-
-			<h2>Regular Buttons</h2>
-			<div className="story-buttons-container">
-				<Button>Button</Button>
-				<Button variant="primary">Primary Button</Button>
-				<Button variant="secondary">Secondary Button</Button>
-				<Button variant="tertiary">Tertiary Button</Button>
-				<Button icon={ more } />
-				<Button variant="primary" icon={ more } />
-				<Button variant="secondary" icon={ more } />
-				<Button variant="tertiary" icon={ more } />
-				<Button variant="primary" icon={ more }>
-					Icon & Text
-				</Button>
-			</div>
-		</div>
-	);
-};

package/src/button/style.scss

@@ -171,52 +171,30 @@
 	/**
 	 * Destructive buttons.
 	 */
-
 	&.is-destructive {
-		color: $alert-red;
-		box-shadow: inset 0 0 0 $border-width $alert-red;
-
-		&:hover:not(:disabled) {
-			color: darken($alert-red, 20%);
-			box-shadow: inset 0 0 0 $border-width darken($alert-red, 20%);
-		}
-
-		&:focus:not(:disabled) {
-			color: $components-color-accent;
-		}
-
-		&:active:not(:disabled) {
-			background: $gray-400;
-		}
-	}
+		--wp-components-color-accent: #{$alert-red};
+		--wp-components-color-accent-darker-10: #{darken($alert-red, 10%)};
+		--wp-components-color-accent-darker-20: #{darken($alert-red, 20%)};
 
-	&.is-destructive.is-primary {
-		color: #fff;
-		background: $alert-red;
-		box-shadow: inset 0 0 0 $border-width $alert-red;
-
-		&:hover:not(:disabled) {
-			color: #fff;
-			background: darken($alert-red, 20%);
-			box-shadow: inset 0 0 0 $border-width darken($alert-red, 20%);
-		}
-	}
+		// Only the default variant is styled differently from the non-destructive counterparts.
+		&:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link) {
+			color: $alert-red;
+			box-shadow: inset 0 0 0 $border-width $alert-red;
 
-	&.is-destructive.is-tertiary {
-		box-shadow: none;
+			&:hover:not(:disabled) {
+				color: darken($alert-red, 20%);
+			}
 
-		&:hover:not(:disabled) {
-			box-shadow: inset 0 0 0 $border-width $alert-red;
-			color: $alert-red;
-		}
+			&:focus:not(:disabled) {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $alert-red;
+			}
 
-		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $alert-red;
-			color: $alert-red;
+			&:active:not(:disabled) {
+				background: $gray-400;
+			}
 		}
 	}
 
-
 	/**
 	 * Link buttons.
 	 */
@@ -241,21 +219,6 @@
 		&:focus {
 			border-radius: $radius-block-ui;
 		}
-
-		// Link buttons that are red to indicate destructive behavior.
-		&.is-destructive {
-			color: $alert-red;
-
-			&:active:not(:disabled),
-			&:hover:not(:disabled) {
-				color: darken($alert-red, 20%);
-				background: none;
-			}
-
-			&:focus:not(:disabled) {
-				color: $components-color-accent;
-			}
-		}
 	}
 
 	&:not([aria-disabled="true"]):active {
@@ -315,7 +278,7 @@
 		}
 
 		&.has-text {
-			justify-content: left;
+			justify-content: start;
 		}
 
 		&.has-text svg {

package/src/card/stories/index.tsx

@@ -40,36 +40,32 @@ const meta: ComponentMeta< typeof Card > = {
 
 export default meta;
 
-const Template: ComponentStory< typeof Card > = ( args ) => {
-	return (
-		<div style={ { maxWidth: '280px' } }>
-			<Card { ...args }>
-				<CardHeader>
-					<Heading>CardHeader</Heading>
-				</CardHeader>
-				<CardBody>
-					<Text>CardBody</Text>
-				</CardBody>
-				<CardBody>
-					<Text>CardBody (before CardDivider)</Text>
-				</CardBody>
-				<CardDivider />
-				<CardBody>
-					<Text>CardBody (after CardDivider)</Text>
-				</CardBody>
-				<CardMedia>
-					<img
-						alt="Card Media"
-						src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
-					/>
-				</CardMedia>
-				<CardFooter>
-					<Text>CardFooter</Text>
-					<Button variant="secondary">Action Button</Button>
-				</CardFooter>
-			</Card>
-		</div>
-	);
-};
+const Template: ComponentStory< typeof Card > = ( args ) => (
+	<Card { ...args }>
+		<CardHeader>
+			<Heading>CardHeader</Heading>
+		</CardHeader>
+		<CardBody>
+			<Text>CardBody</Text>
+		</CardBody>
+		<CardBody>
+			<Text>CardBody (before CardDivider)</Text>
+		</CardBody>
+		<CardDivider />
+		<CardBody>
+			<Text>CardBody (after CardDivider)</Text>
+		</CardBody>
+		<CardMedia>
+			<img
+				alt="Card Media"
+				src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
+			/>
+		</CardMedia>
+		<CardFooter>
+			<Text>CardFooter</Text>
+			<Button variant="secondary">Action Button</Button>
+		</CardFooter>
+	</Card>
+);
 
 export const Default: ComponentStory< typeof Card > = Template.bind( {} );

package/src/card/test/__snapshots__/index.tsx.snap

@@ -90,27 +90,27 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -5,18 +5,18 @@
-  >
-    <div
-      class="css-mgwsf4-View-Content e19lxcc00"
+@@ -6,18 +6,18 @@
     >
       <div
--       class="components-flex components-card__header components-card-header css-3fkkv8-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
-+       class="components-flex components-card__header components-card-header css-2feznw-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="CardHeader"
-      >
-        Header
-      </div>
-      <div
--       class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
-+       class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="CardBody"
+        class="css-mgwsf4-View-Content e19lxcc00"
       >
-        Code is Poetry
-      </div>
+        <div
+-         class="components-flex components-card__header components-card-header css-3fkkv8-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
++         class="components-flex components-card__header components-card-header css-2feznw-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="CardHeader"
+        >
+          Header
+        </div>
+        <div
+-         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
++         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="CardBody"
+        >
+          Code is Poetry
+        </div>
 `;
 
 exports[`Card Card component should add rounded border when the isRounded prop is true 1`] = `
@@ -768,24 +768,25 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -8,16 +8,16 @@
-    >
-      Code is Poetry
+@@ -9,17 +9,17 @@
+      >
+        Code is Poetry
+      </div>
+      <div
+        aria-hidden="true"
+-       class="components-elevation css-1lsfy80-View-Elevation-sx-Base-elevationClassName e19lxcc00"
++       class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
+        data-wp-c16t="true"
+        data-wp-component="Elevation"
+      />
+      <div
+        aria-hidden="true"
+-       class="components-elevation css-18cl04p-View-Elevation-sx-Base-elevationClassName e19lxcc00"
++       class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
+        data-wp-c16t="true"
+        data-wp-component="Elevation"
+      />
     </div>
-    <div
-      aria-hidden="true"
--     class="components-elevation css-1lsfy80-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-+     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-      data-wp-c16t="true"
-      data-wp-component="Elevation"
-    />
-    <div
-      aria-hidden="true"
--     class="components-elevation css-18cl04p-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-+     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-      data-wp-c16t="true"
-      data-wp-component="Elevation"
-    />
   </div>
 `;
 

package/src/card/test/index.tsx

@@ -70,9 +70,7 @@ describe( 'Card', () => {
 				<Card>Code is Poetry</Card>
 			);
 
-			expect( withElevation.firstChild ).toMatchDiffSnapshot(
-				withoutElevation.firstChild
-			);
+			expect( withElevation ).toMatchDiffSnapshot( withoutElevation );
 		} );
 
 		it( 'should add different amounts of white space when using the size prop', () => {
@@ -90,9 +88,7 @@ describe( 'Card', () => {
 				</Card>
 			);
 
-			expect( withSizeDefault.firstChild ).toMatchDiffSnapshot(
-				withSizeLarge.firstChild
-			);
+			expect( withSizeDefault ).toMatchDiffSnapshot( withSizeLarge );
 		} );
 
 		it( 'should warn when the isElevated prop is passed', () => {