@wordpress/components 21.2.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

@@ -20,7 +20,7 @@
 
 	&[aria-expanded="true"],
 	&:hover {
-		color: var(--wp-admin-theme-color);
+		color: $components-color-accent;
 	}
 
 	// Unset some hovers, instead of adding :not specificity.
@@ -31,7 +31,7 @@
 	// Focus.
 	// See https://github.com/WordPress/gutenberg/issues/13267 for more context on these selectors.
 	&:focus:not(:disabled) {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 3px solid transparent;
@@ -43,7 +43,7 @@
 
 	&.is-primary {
 		white-space: nowrap;
-		background: var(--wp-admin-theme-color);
+		background: $components-color-accent;
 		color: $white;
 		text-decoration: none;
 		text-shadow: none;
@@ -52,18 +52,18 @@
 		outline: 1px solid transparent;
 
 		&:hover:not(:disabled) {
-			background: var(--wp-admin-theme-color-darker-10);
+			background: $components-color-accent-darker-10;
 			color: $white;
 		}
 
 		&:active:not(:disabled) {
-			background: var(--wp-admin-theme-color-darker-20);
-			border-color: var(--wp-admin-theme-color-darker-20);
+			background: $components-color-accent-darker-20;
+			border-color: $components-color-accent-darker-20;
 			color: $white;
 		}
 
 		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		}
 
 		&:disabled,
@@ -72,15 +72,15 @@
 		&[aria-disabled="true"]:enabled, // This catches a situation where a Button is aria-disabled, but not disabled.
 		&[aria-disabled="true"]:active:enabled {
 			color: rgba($white, 0.4);
-			background: var(--wp-admin-theme-color);
-			border-color: var(--wp-admin-theme-color);
+			background: $components-color-accent;
+			border-color: $components-color-accent;
 			opacity: 1;
 			outline: none;
 
 			&:focus:enabled {
 				box-shadow:
 					0 0 0 $border-width $white,
-					0 0 0 3px var(--wp-admin-theme-color);
+					0 0 0 3px $components-color-accent;
 			}
 		}
 
@@ -93,13 +93,13 @@
 			/* stylelint-disable */
 			background-image: linear-gradient(
 				-45deg,
-				var(--wp-admin-theme-color) 33%,
-				var(--wp-admin-theme-color-darker-20) 33%,
-				var(--wp-admin-theme-color-darker-20) 70%,
-				var(--wp-admin-theme-color) 70%
+				$components-color-accent 33%,
+				$components-color-accent-darker-20 33%,
+				$components-color-accent-darker-20 70%,
+				$components-color-accent 70%
 			);
 			/* stylelint-enable */
-			border-color: var(--wp-admin-theme-color);
+			border-color: $components-color-accent;
 		}
 	}
 
@@ -114,13 +114,13 @@
 
 		&:active:not(:disabled) {
 			background: $gray-300;
-			color: var(--wp-admin-theme-color-darker-10);
+			color: $components-color-accent-darker-10;
 			box-shadow: none;
 		}
 
 		&:hover:not(:disabled) {
-			color: var(--wp-admin-theme-color-darker-10);
-			box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color-darker-10);
+			color: $components-color-accent-darker-10;
+			box-shadow: inset 0 0 0 $border-width $components-color-accent-darker-10;
 		}
 
 		&:disabled,
@@ -140,10 +140,10 @@
 	 */
 
 	&.is-secondary {
-		box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 $border-width $components-color-accent;
 		outline: 1px solid transparent; // Shown in high contrast mode.
 		white-space: nowrap;
-		color: var(--wp-admin-theme-color);
+		color: $components-color-accent;
 		background: transparent;
 	}
 
@@ -153,7 +153,7 @@
 
 	&.is-tertiary {
 		white-space: nowrap;
-		color: var(--wp-admin-theme-color);
+		color: $components-color-accent;
 		background: transparent;
 		padding: $grid-unit-15 * 0.5; // This reduces the horizontal padding on tertiary/text buttons, so as to space them optically.
 
@@ -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: var(--wp-admin-theme-color);
-		}
-
-		&: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.
 	 */
@@ -230,7 +208,7 @@
 		background: none;
 		outline: none;
 		text-align: left;
-		color: var(--wp-admin-theme-color);
+		color: $components-color-accent;
 		text-decoration: underline;
 		transition-property: border, background, color;
 		transition-duration: 0.05s;
@@ -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: var(--wp-admin-theme-color);
-			}
-		}
 	}
 
 	&:not([aria-disabled="true"]):active {
@@ -315,7 +278,7 @@
 		}
 
 		&.has-text {
-			justify-content: left;
+			justify-content: start;
 		}
 
 		&.has-text svg {
@@ -333,7 +296,7 @@
 		background: $gray-900;
 
 		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: 2px solid transparent;

package/src/button/test/index.js

@@ -27,7 +27,7 @@ describe( 'Button', () => {
 			expect( button ).not.toHaveClass( 'is-large' );
 			expect( button ).not.toHaveClass( 'is-primary' );
 			expect( button ).not.toHaveClass( 'is-pressed' );
-			expect( button ).not.toHaveAttribute( 'disabled' );
+			expect( button ).toBeEnabled();
 			expect( button ).not.toHaveAttribute( 'aria-disabled' );
 			expect( button ).toHaveAttribute( 'type', 'button' );
 		} );
@@ -114,16 +114,14 @@ describe( 'Button', () => {
 		it( 'should add a disabled prop to the button', () => {
 			render( <Button disabled /> );
 
-			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
-				'disabled'
-			);
+			expect( screen.getByRole( 'button' ) ).toBeDisabled();
 		} );
 
 		it( 'should add only aria-disabled attribute when disabled and isFocusable are true', () => {
 			render( <Button disabled __experimentalIsFocusable /> );
 			const button = screen.getByRole( 'button' );
 
-			expect( button ).not.toHaveAttribute( 'disabled' );
+			expect( button ).toBeEnabled();
 			expect( button ).toHaveAttribute( 'aria-disabled' );
 		} );