From 71d69af25c8d7a7f9acd6eb35d0663f3d1ac2a19 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Fri, 6 Dec 2019 13:41:06 +0100
Subject: [PATCH] Rename isToggled to isPressed for the Button component

---
 packages/base-styles/_z-index.scss            |  6 ++---
 .../src/components/media-placeholder/index.js |  2 +-
 .../src/components/url-input/button.js        |  2 +-
 .../src/components/url-input/test/button.js   |  8 +++----
 .../src/heading/heading-level-icon.js         |  4 ++--
 .../src/heading/heading-toolbar.js            |  2 +-
 packages/block-library/src/html/edit.js       |  4 ++--
 packages/block-library/src/image/edit.js      |  4 ++--
 .../src/legacy-widget/edit/index.js           |  4 ++--
 packages/components/src/button/README.md      |  2 +-
 packages/components/src/button/index.js       |  6 ++---
 .../components/src/button/index.native.js     | 10 ++++----
 .../components/src/button/stories/index.js    |  6 ++---
 packages/components/src/button/test/index.js  |  8 +++----
 .../src/circular-option-picker/index.js       |  2 +-
 .../src/circular-option-picker/style.scss     |  6 ++---
 .../test/__snapshots__/index.js.snap          |  8 +++----
 .../src/color-palette/test/index.js           |  4 ++--
 packages/components/src/date-time/style.scss  |  4 ++--
 .../date-time/test/__snapshots__/time.js.snap |  8 +++----
 packages/components/src/date-time/time.js     |  4 ++--
 .../components/src/primitives/svg/index.js    |  4 ++--
 .../src/primitives/svg/index.native.js        |  4 ++--
 .../src/primitives/svg/style.native.scss      |  2 +-
 .../components/src/toolbar-button/index.js    |  2 +-
 .../components/src/toolbar-button/style.scss  |  6 ++---
 .../__snapshots__/plugins-api.test.js.snap    |  4 ++--
 .../edit-post/src/components/header/index.js  |  2 +-
 .../header/pinned-plugins/style.scss          | 14 +++++------
 .../src/components/header/style.scss          |  6 ++---
 .../sidebar/plugin-sidebar/index.js           |  4 ++--
 storybook/test/__snapshots__/index.js.snap    | 24 +++++++++----------
 32 files changed, 88 insertions(+), 88 deletions(-)

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index e60186330ca309..9bdedb9fe09d17 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -121,9 +121,9 @@ $z-layers: (
 	// Needs to appear bellow other color circular picker related UI elements.
 	".components-circular-option-picker__option-wrapper::before": -1,
 
-	".components-circular-option-picker__option.is-toggled": 1,
-	// Needs to be higher than .components-circular-option-picker__option.is-toggled.
-	".components-circular-option-picker__option.is-toggled + .dashicons-saved": 2
+	".components-circular-option-picker__option.is-pressed": 1,
+	// Needs to be higher than .components-circular-option-picker__option.is-pressed.
+	".components-circular-option-picker__option.is-pressed + .dashicons-saved": 2
 );
 
 @function z-index( $key ) {
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index d4e98de6179b12..cb5fc3806f0301 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -272,7 +272,7 @@ export class MediaPlaceholder extends Component {
 				<Button
 					className="editor-media-placeholder__button block-editor-media-placeholder__button"
 					onClick={ this.openURLInput }
-					isToggled={ isURLInputVisible }
+					isPressed={ isURLInputVisible }
 					isLarge
 				>
 					{ __( 'Insert from URL' ) }
diff --git a/packages/block-editor/src/components/url-input/button.js b/packages/block-editor/src/components/url-input/button.js
index 8a00472b6cd54c..a1b57e5d3d6548 100644
--- a/packages/block-editor/src/components/url-input/button.js
+++ b/packages/block-editor/src/components/url-input/button.js
@@ -41,7 +41,7 @@ class URLInputButton extends Component {
 					label={ buttonLabel }
 					onClick={ this.toggle }
 					className="components-toolbar__control"
-					isToggled={ !! url }
+					isPressed={ !! url }
 				/>
 				{ expanded &&
 					<form
diff --git a/packages/block-editor/src/components/url-input/test/button.js b/packages/block-editor/src/components/url-input/test/button.js
index 2829c1d5432b64..78a1e5f9fa562a 100644
--- a/packages/block-editor/src/components/url-input/test/button.js
+++ b/packages/block-editor/src/components/url-input/test/button.js
@@ -20,13 +20,13 @@ describe( 'URLInputButton', () => {
 		const wrapper = shallow( <URLInputButton /> );
 		expect( wrapper.hasClass( 'block-editor-url-input__button' ) ).toBe( true );
 	} );
-	it( 'should have isToggled props set to false when url prop not defined', () => {
+	it( 'should have isPressed props set to false when url prop not defined', () => {
 		const wrapper = shallow( <URLInputButton /> );
-		expect( wrapper.find( 'ForwardRef(IconButton)' ).prop( 'isToggled' ) ).toBe( false );
+		expect( wrapper.find( 'ForwardRef(IconButton)' ).prop( 'isPressed' ) ).toBe( false );
 	} );
-	it( 'should have isToggled prop set to true if url prop defined', () => {
+	it( 'should have isPressed prop set to true if url prop defined', () => {
 		const wrapper = shallow( <URLInputButton url="https://example.com" /> );
-		expect( wrapper.find( 'ForwardRef(IconButton)' ).prop( 'isToggled' ) ).toBe( true );
+		expect( wrapper.find( 'ForwardRef(IconButton)' ).prop( 'isPressed' ) ).toBe( true );
 	} );
 	it( 'should have hidden form by default', () => {
 		const wrapper = shallow( <URLInputButton /> );
diff --git a/packages/block-library/src/heading/heading-level-icon.js b/packages/block-library/src/heading/heading-level-icon.js
index 6c4580bd81ddf8..4780430c3ffed1 100644
--- a/packages/block-library/src/heading/heading-level-icon.js
+++ b/packages/block-library/src/heading/heading-level-icon.js
@@ -3,7 +3,7 @@
  */
 import { Path, SVG } from '@wordpress/components';
 
-export default function HeadingLevelIcon( { level, isToggled = false } ) {
+export default function HeadingLevelIcon( { level, isPressed = false } ) {
 	const levelToPath = {
 		1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z',
 		2: 'M7 5h2v10H7v-4H3v4H1V5h2v4h4V5zm8 8c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6V15h8v-2H15z',
@@ -17,7 +17,7 @@ export default function HeadingLevelIcon( { level, isToggled = false } ) {
 	}
 
 	return (
-		<SVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" isToggled={ isToggled } >
+		<SVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" isPressed={ isPressed } >
 			<Path d={ levelToPath[ level ] } />
 		</SVG>
 	);
diff --git a/packages/block-library/src/heading/heading-toolbar.js b/packages/block-library/src/heading/heading-toolbar.js
index 81717a1c105e26..0d836193a33b9f 100644
--- a/packages/block-library/src/heading/heading-toolbar.js
+++ b/packages/block-library/src/heading/heading-toolbar.js
@@ -19,7 +19,7 @@ class HeadingToolbar extends Component {
 	createLevelControl( targetLevel, selectedLevel, onChange ) {
 		const isActive = targetLevel === selectedLevel;
 		return {
-			icon: <HeadingLevelIcon level={ targetLevel } isToggled={ isActive } />,
+			icon: <HeadingLevelIcon level={ targetLevel } isPressed={ isActive } />,
 			// translators: %s: heading level e.g: "1", "2", "3"
 			title: sprintf( __( 'Heading %d' ), targetLevel ),
 			isActive,
diff --git a/packages/block-library/src/html/edit.js b/packages/block-library/src/html/edit.js
index 5cff1146080d56..5f9d42c61baefa 100644
--- a/packages/block-library/src/html/edit.js
+++ b/packages/block-library/src/html/edit.js
@@ -65,14 +65,14 @@ class HTMLEdit extends Component {
 					<ToolbarGroup>
 						<Button
 							className="components-tab-button"
-							isToggled={ ! isPreview }
+							isPressed={ ! isPreview }
 							onClick={ this.switchToHTML }
 						>
 							<span>HTML</span>
 						</Button>
 						<Button
 							className="components-tab-button"
-							isToggled={ isPreview }
+							isPressed={ isPreview }
 							onClick={ this.switchToPreview }
 						>
 							<span>{ __( 'Preview' ) }</span>
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index cda44940d01aa9..2579cbca8d82d9 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -619,7 +619,7 @@ export class ImageEdit extends Component {
 							<IconButton
 								className="components-toolbar__control"
 								label={ __( 'Edit image' ) }
-								isToggled={ this.state.isEditing }
+								isPressed={ this.state.isEditing }
 								onClick={ this.toggleIsEditing }
 								icon={ editImageIcon }
 							/>
@@ -768,7 +768,7 @@ export class ImageEdit extends Component {
 													key={ scale }
 													isSmall
 													isPrimary={ isCurrent }
-													isToggled={ isCurrent }
+													isPressed={ isCurrent }
 													onClick={ this.updateDimensions( scaledWidth, scaledHeight ) }
 												>
 													{ scale }%
diff --git a/packages/block-library/src/legacy-widget/edit/index.js b/packages/block-library/src/legacy-widget/edit/index.js
index ec8da240a38b68..fdcb51e092a993 100644
--- a/packages/block-library/src/legacy-widget/edit/index.js
+++ b/packages/block-library/src/legacy-widget/edit/index.js
@@ -100,14 +100,14 @@ class LegacyWidgetEdit extends Component {
 							<>
 								<Button
 									className="components-tab-button"
-									isToggled={ ! isPreview }
+									isPressed={ ! isPreview }
 									onClick={ this.switchToEdit }
 								>
 									<span>{ __( 'Edit' ) }</span>
 								</Button>
 								<Button
 									className="components-tab-button"
-									isToggled={ isPreview }
+									isPressed={ isPreview }
 									onClick={ this.switchToPreview }
 								>
 									<span>{ __( 'Preview' ) }</span>
diff --git a/packages/components/src/button/README.md b/packages/components/src/button/README.md
index 722740d443af54..284f1fba6b0bd2 100644
--- a/packages/components/src/button/README.md
+++ b/packages/components/src/button/README.md
@@ -134,7 +134,7 @@ Name | Type | Default | Description
 `isDestructive` | `bool` | `false` | Renders a red text-based button style to indicate destructive behavior.
 `isLarge` | `bool` | `false` | Increases the size of the button.
 `isSmall` | `bool` | `false` | Decreases the size of the button.
-`isToggled` | `bool` | `false` | Renders a toggled button style.
+`isPressed` | `bool` | `false` | Renders a pressed button style.
 `isBusy` | `bool` | `false` | Indicates activity while a action is being performed.
 `isLink` | `bool` | `false` | Renders a button with an anchor style.
 `focus` | `bool` | `false` | Whether the button is focused.
diff --git a/packages/components/src/button/index.js b/packages/components/src/button/index.js
index 75383b36a5dfb7..57de08de8bf79e 100644
--- a/packages/components/src/button/index.js
+++ b/packages/components/src/button/index.js
@@ -16,7 +16,7 @@ export function Button( props, ref ) {
 		isLarge,
 		isSmall,
 		isTertiary,
-		isToggled,
+		isPressed,
 		isBusy,
 		isDefault,
 		isLink,
@@ -33,7 +33,7 @@ export function Button( props, ref ) {
 		'is-large': isLarge,
 		'is-small': isSmall,
 		'is-tertiary': isTertiary,
-		'is-toggled': isToggled,
+		'is-pressed': isPressed,
 		'is-busy': isBusy,
 		'is-link': isLink,
 		'is-destructive': isDestructive,
@@ -42,7 +42,7 @@ export function Button( props, ref ) {
 	const tag = href !== undefined && ! disabled ? 'a' : 'button';
 	const tagProps = tag === 'a' ?
 		{ href, target } :
-		{ type: 'button', disabled, 'aria-pressed': isToggled };
+		{ type: 'button', disabled, 'aria-pressed': isPressed };
 
 	return createElement( tag, {
 		...tagProps,
diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js
index e593e37ddd2f64..8d4ac26995c797 100644
--- a/packages/components/src/button/index.native.js
+++ b/packages/components/src/button/index.native.js
@@ -67,7 +67,7 @@ export function Button( props ) {
 		hint,
 		fixedRatio = true,
 		getStylesFromColorScheme,
-		isToggled,
+		isPressed,
 		'aria-disabled': ariaDisabled,
 		'aria-label': ariaLabel,
 		'data-subscript': subscript,
@@ -78,11 +78,11 @@ export function Button( props ) {
 	const buttonViewStyle = {
 		opacity: isDisabled ? 0.3 : 1,
 		...( fixedRatio && styles.fixedRatio ),
-		...( isToggled ? styles.buttonActive : styles.buttonInactive ),
+		...( isPressed ? styles.buttonActive : styles.buttonInactive ),
 	};
 
 	const states = [];
-	if ( isToggled ) {
+	if ( isPressed ) {
 		states.push( 'selected' );
 	}
 
@@ -93,7 +93,7 @@ export function Button( props ) {
 	const subscriptInactive = getStylesFromColorScheme( styles.subscriptInactive, styles.subscriptInactiveDark );
 
 	const newChildren = Children.map( children, ( child ) => {
-		return child ? cloneElement( child, { colorScheme: props.preferredColorScheme, isToggled } ) : child;
+		return child ? cloneElement( child, { colorScheme: props.preferredColorScheme, isPressed } ) : child;
 	} );
 
 	return (
@@ -111,7 +111,7 @@ export function Button( props ) {
 			<View style={ buttonViewStyle }>
 				<View style={ { flexDirection: 'row' } }>
 					{ newChildren }
-					{ subscript && ( <Text style={ isToggled ? styles.subscriptActive : subscriptInactive }>{ subscript }</Text> ) }
+					{ subscript && ( <Text style={ isPressed ? styles.subscriptActive : subscriptInactive }>{ subscript }</Text> ) }
 				</View>
 			</View>
 		</TouchableOpacity>
diff --git a/packages/components/src/button/stories/index.js b/packages/components/src/button/stories/index.js
index ee73df4a786e2d..5d60381ed1768f 100644
--- a/packages/components/src/button/stories/index.js
+++ b/packages/components/src/button/stories/index.js
@@ -50,11 +50,11 @@ export const small = () => {
 	);
 };
 
-export const toggled = () => {
-	const label = text( 'Label', 'Toggled Button' );
+export const pressed = () => {
+	const label = text( 'Label', 'Pressed Button' );
 
 	return (
-		<Button isToggled>{ label }</Button>
+		<Button isPressed>{ label }</Button>
 	);
 };
 
diff --git a/packages/components/src/button/test/index.js b/packages/components/src/button/test/index.js
index 05e3580bfacbe6..27c5a24f490e87 100644
--- a/packages/components/src/button/test/index.js
+++ b/packages/components/src/button/test/index.js
@@ -21,7 +21,7 @@ describe( 'Button', () => {
 			expect( button.hasClass( 'components-button' ) ).toBe( true );
 			expect( button.hasClass( 'is-large' ) ).toBe( false );
 			expect( button.hasClass( 'is-primary' ) ).toBe( false );
-			expect( button.hasClass( 'is-toggled' ) ).toBe( false );
+			expect( button.hasClass( 'is-pressed' ) ).toBe( false );
 			expect( button.prop( 'disabled' ) ).toBeUndefined();
 			expect( button.prop( 'type' ) ).toBe( 'button' );
 			expect( button.type() ).toBe( 'button' );
@@ -56,10 +56,10 @@ describe( 'Button', () => {
 			expect( button.hasClass( 'is-primary' ) ).toBe( false );
 		} );
 
-		it( 'should render a button element with is-toggled without button class', () => {
-			const button = shallow( <Button isToggled /> );
+		it( 'should render a button element with is-pressed without button class', () => {
+			const button = shallow( <Button isPressed /> );
 			expect( button.hasClass( 'is-button' ) ).toBe( false );
-			expect( button.hasClass( 'is-toggled' ) ).toBe( true );
+			expect( button.hasClass( 'is-pressed' ) ).toBe( true );
 		} );
 
 		it( 'should add a disabled prop to the button', () => {
diff --git a/packages/components/src/circular-option-picker/index.js b/packages/components/src/circular-option-picker/index.js
index b53aa2fcb61e4c..97e048b25ca7e6 100644
--- a/packages/components/src/circular-option-picker/index.js
+++ b/packages/components/src/circular-option-picker/index.js
@@ -19,7 +19,7 @@ function Option( {
 } ) {
 	const optionButton = (
 		<Button
-			isToggled={ isSelected }
+			isPressed={ isSelected }
 			className={ classnames(
 				className,
 				'components-circular-option-picker__option',
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index 07b26785937b8c..deee7969feb612 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -66,17 +66,17 @@ $color-palette-circle-spacing: 12px;
 	@include reduce-motion("transition");
 	cursor: pointer;
 
-	&.is-toggled {
+	&.is-pressed {
 		box-shadow: inset 0 0 0 4px;
 		position: relative;
-		z-index: z-index(".components-circular-option-picker__option.is-toggled");
+		z-index: z-index(".components-circular-option-picker__option.is-pressed");
 
 		& + .dashicons-saved {
 			position: absolute;
 			left: 4px;
 			top: 4px;
 			border-radius: 50%;
-			z-index: z-index(".components-circular-option-picker__option.is-toggled + .dashicons-saved");
+			z-index: z-index(".components-circular-option-picker__option.is-pressed + .dashicons-saved");
 			background: $white;
 			pointer-events: none;
 		}
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
index 597eba2ae0144d..4f182217c8a13e 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -286,7 +286,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
             <ForwardRef(Button)
               aria-label="Color: red"
               className="components-circular-option-picker__option"
-              isToggled={true}
+              isPressed={true}
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -302,7 +302,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
               <button
                 aria-label="Color: red"
                 aria-pressed={true}
-                className="components-button components-circular-option-picker__option is-toggled"
+                className="components-button components-circular-option-picker__option is-pressed"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -374,7 +374,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
             <ForwardRef(Button)
               aria-label="Color: white"
               className="components-circular-option-picker__option"
-              isToggled={false}
+              isPressed={false}
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -429,7 +429,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
             <ForwardRef(Button)
               aria-label="Color: blue"
               className="components-circular-option-picker__option"
-              isToggled={false}
+              isPressed={false}
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
diff --git a/packages/components/src/color-palette/test/index.js b/packages/components/src/color-palette/test/index.js
index b8e9db7fcf61df..c4022ba48c4c7b 100644
--- a/packages/components/src/color-palette/test/index.js
+++ b/packages/components/src/color-palette/test/index.js
@@ -29,7 +29,7 @@ describe( 'ColorPalette', () => {
 	} );
 
 	test( 'should call onClick on an active button with undefined', () => {
-		const activeButton = buttons.findWhere( ( button ) => button.hasClass( 'is-toggled' ) );
+		const activeButton = buttons.findWhere( ( button ) => button.hasClass( 'is-pressed' ) );
 		activeButton.simulate( 'click' );
 
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
@@ -37,7 +37,7 @@ describe( 'ColorPalette', () => {
 	} );
 
 	test( 'should call onClick on an inactive button', () => {
-		const inactiveButton = buttons.findWhere( ( button ) => ! button.hasClass( 'is-toggled' ) ).first();
+		const inactiveButton = buttons.findWhere( ( button ) => ! button.hasClass( 'is-pressed' ) ).first();
 		inactiveButton.simulate( 'click' );
 
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss
index 75100900d0ad03..d797a695f28e25 100644
--- a/packages/components/src/date-time/style.scss
+++ b/packages/components/src/date-time/style.scss
@@ -140,8 +140,8 @@
 			z-index: 1;
 		}
 
-		.components-datetime__time-am-button.is-toggled,
-		.components-datetime__time-pm-button.is-toggled {
+		.components-datetime__time-am-button.is-pressed,
+		.components-datetime__time-pm-button.is-pressed {
 			background: $light-gray-300;
 			border-color: $dark-gray-100;
 			box-shadow: inset 0 2px 5px -3px $dark-gray-500;
diff --git a/packages/components/src/date-time/test/__snapshots__/time.js.snap b/packages/components/src/date-time/test/__snapshots__/time.js.snap
index 77c480312d4a87..b0e421cea3ff5f 100644
--- a/packages/components/src/date-time/test/__snapshots__/time.js.snap
+++ b/packages/components/src/date-time/test/__snapshots__/time.js.snap
@@ -323,7 +323,7 @@ exports[`TimePicker matches the snapshot when the is12hour prop is specified 1`]
         <ForwardRef(Button)
           className="components-datetime__time-am-button"
           isDefault={true}
-          isToggled={false}
+          isPressed={false}
           onClick={[Function]}
         >
           AM
@@ -331,7 +331,7 @@ exports[`TimePicker matches the snapshot when the is12hour prop is specified 1`]
         <ForwardRef(Button)
           className="components-datetime__time-pm-button"
           isDefault={true}
-          isToggled={true}
+          isPressed={true}
           onClick={[Function]}
         >
           PM
@@ -504,7 +504,7 @@ exports[`TimePicker matches the snapshot when the is12hour prop is true 1`] = `
         <ForwardRef(Button)
           className="components-datetime__time-am-button"
           isDefault={true}
-          isToggled={false}
+          isPressed={false}
           onClick={[Function]}
         >
           AM
@@ -512,7 +512,7 @@ exports[`TimePicker matches the snapshot when the is12hour prop is true 1`] = `
         <ForwardRef(Button)
           className="components-datetime__time-pm-button"
           isDefault={true}
-          isToggled={true}
+          isPressed={true}
           onClick={[Function]}
         >
           PM
diff --git a/packages/components/src/date-time/time.js b/packages/components/src/date-time/time.js
index 7a0a3af107ea03..e2dc04386618e1 100644
--- a/packages/components/src/date-time/time.js
+++ b/packages/components/src/date-time/time.js
@@ -303,7 +303,7 @@ class TimePicker extends Component {
 								<Button
 									isDefault
 									className="components-datetime__time-am-button"
-									isToggled={ am === 'AM' }
+									isPressed={ am === 'AM' }
 									onClick={ this.updateAmPm( 'AM' ) }
 								>
 									{ __( 'AM' ) }
@@ -311,7 +311,7 @@ class TimePicker extends Component {
 								<Button
 									isDefault
 									className="components-datetime__time-pm-button"
-									isToggled={ am === 'PM' }
+									isPressed={ am === 'PM' }
 									onClick={ this.updateAmPm( 'PM' ) }
 								>
 									{ __( 'PM' ) }
diff --git a/packages/components/src/primitives/svg/index.js b/packages/components/src/primitives/svg/index.js
index 02a32e0658b3e2..efebe49b2896b0 100644
--- a/packages/components/src/primitives/svg/index.js
+++ b/packages/components/src/primitives/svg/index.js
@@ -14,10 +14,10 @@ export const Path = ( props ) => createElement( 'path', props );
 export const Polygon = ( props ) => createElement( 'polygon', props );
 export const Rect = ( props ) => createElement( 'rect', props );
 
-export const SVG = ( { className, isToggled, ...props } ) => {
+export const SVG = ( { className, isPressed, ...props } ) => {
 	const appliedProps = {
 		...props,
-		className: classnames( className, { 'is-toggled': isToggled } ) || undefined,
+		className: classnames( className, { 'is-pressed': isPressed } ) || undefined,
 		role: 'img',
 		'aria-hidden': 'true',
 		focusable: 'false',
diff --git a/packages/components/src/primitives/svg/index.native.js b/packages/components/src/primitives/svg/index.native.js
index a76deb04d92200..aa619dc61e4913 100644
--- a/packages/components/src/primitives/svg/index.native.js
+++ b/packages/components/src/primitives/svg/index.native.js
@@ -16,10 +16,10 @@ export {
 	Rect,
 } from 'react-native-svg';
 
-export const SVG = ( { className = '', isToggled, ...props } ) => {
+export const SVG = ( { className = '', isPressed, ...props } ) => {
 	const colorScheme = props.colorScheme || 'light';
 	const stylesFromClasses = className.split( ' ' ).map( ( element ) => styles[ element ] ).filter( Boolean );
-	const defaultStyle = isToggled ? styles[ 'is-toggled' ] : styles[ 'components-toolbar__control-' + colorScheme ];
+	const defaultStyle = isPressed ? styles[ 'is-pressed' ] : styles[ 'components-toolbar__control-' + colorScheme ];
 	const styleValues = Object.assign( {}, props.style, defaultStyle, ...stylesFromClasses );
 
 	const appliedProps = { ...props, style: styleValues };
diff --git a/packages/components/src/primitives/svg/style.native.scss b/packages/components/src/primitives/svg/style.native.scss
index f682a0353f675f..674c01c3bea4c5 100644
--- a/packages/components/src/primitives/svg/style.native.scss
+++ b/packages/components/src/primitives/svg/style.native.scss
@@ -11,7 +11,7 @@
 }
 
 .dashicon-active,
-.is-toggled {
+.is-pressed {
 	color: #fff;
 	fill: currentColor;
 }
diff --git a/packages/components/src/toolbar-button/index.js b/packages/components/src/toolbar-button/index.js
index 418ab2a7b9f4f0..2fb46662797ba5 100644
--- a/packages/components/src/toolbar-button/index.js
+++ b/packages/components/src/toolbar-button/index.js
@@ -49,7 +49,7 @@ function ToolbarButton( {
 				'components-toolbar__control',
 				className,
 			) }
-			isToggled={ isActive }
+			isPressed={ isActive }
 			disabled={ isDisabled }
 			{ ...extraProps }
 		/>
diff --git a/packages/components/src/toolbar-button/style.scss b/packages/components/src/toolbar-button/style.scss
index dce1de2ed2f568..f73782b4bab4f3 100644
--- a/packages/components/src/toolbar-button/style.scss
+++ b/packages/components/src/toolbar-button/style.scss
@@ -18,16 +18,16 @@
 		bottom: 10px;
 	}
 
-	&:not(:disabled).is-toggled[data-subscript]::after {
+	&:not(:disabled).is-pressed[data-subscript]::after {
 		color: $white;
 	}
 
-	&.is-toggled {
+	&.is-pressed {
 		padding: 3px;
 		outline: none;
 	}
 
-	&.is-toggled > svg {
+	&.is-pressed > svg {
 		padding: 5px;
 		border-radius: $radius-round-rectangle;
 		height: 30px;
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap
index d602230e790d1b..beb4e9b8a206e5 100644
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap
+++ b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap
@@ -2,6 +2,6 @@
 
 exports[`Using Plugins API Document Setting Custom Panel Should render a custom panel inside Document Setting sidebar 1`] = `"My Custom Panel"`;
 
-exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header edit-post-sidebar-header__small\\"><span class=\\"edit-post-sidebar-header__title\\">(no title)</span><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel__header edit-post-sidebar-header\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-label=\\"Unpin from toolbar\\" aria-expanded=\\"true\\" class=\\"components-button components-icon-button is-toggled\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-star-filled\\"><path d=\\"M10 1l3 6 6 .75-4.12 4.62L16 19l-6-3-6 3 1.13-6.63L1 7.75 7 7z\\"></path></svg></button><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"editor-plain-text block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-button is-primary\\">Reset</button></div></div></div>"`;
+exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header edit-post-sidebar-header__small\\"><span class=\\"edit-post-sidebar-header__title\\">(no title)</span><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel__header edit-post-sidebar-header\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-label=\\"Unpin from toolbar\\" aria-expanded=\\"true\\" class=\\"components-button components-icon-button is-pressed\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-star-filled\\"><path d=\\"M10 1l3 6 6 .75-4.12 4.62L16 19l-6-3-6 3 1.13-6.63L1 7.75 7 7z\\"></path></svg></button><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"editor-plain-text block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-button is-primary\\">Reset</button></div></div></div>"`;
 
-exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header edit-post-sidebar-header__small\\"><span class=\\"edit-post-sidebar-header__title\\">(no title)</span><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel__header edit-post-sidebar-header\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-label=\\"Unpin from toolbar\\" aria-expanded=\\"true\\" class=\\"components-button components-icon-button is-toggled\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-star-filled\\"><path d=\\"M10 1l3 6 6 .75-4.12 4.62L16 19l-6-3-6 3 1.13-6.63L1 7.75 7 7z\\"></path></svg></button><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"editor-plain-text block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-button is-primary\\">Reset</button></div></div></div>"`;
+exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header edit-post-sidebar-header__small\\"><span class=\\"edit-post-sidebar-header__title\\">(no title)</span><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel__header edit-post-sidebar-header\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-label=\\"Unpin from toolbar\\" aria-expanded=\\"true\\" class=\\"components-button components-icon-button is-pressed\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-star-filled\\"><path d=\\"M10 1l3 6 6 .75-4.12 4.62L16 19l-6-3-6 3 1.13-6.63L1 7.75 7 7z\\"></path></svg></button><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"editor-plain-text block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-button is-primary\\">Reset</button></div></div></div>"`;
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index 52d9245be0a157..26dd1812d6b5ea 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -60,7 +60,7 @@ function Header( {
 					icon="admin-generic"
 					label={ __( 'Settings' ) }
 					onClick={ toggleGeneralSidebar }
-					isToggled={ isEditorSidebarOpened }
+					isPressed={ isEditorSidebarOpened }
 					aria-expanded={ isEditorSidebarOpened }
 					shortcut={ shortcuts.toggleSidebar }
 				/>
diff --git a/packages/edit-post/src/components/header/pinned-plugins/style.scss b/packages/edit-post/src/components/header/pinned-plugins/style.scss
index ea87a514227eaa..bd5268c0ea77c2 100644
--- a/packages/edit-post/src/components/header/pinned-plugins/style.scss
+++ b/packages/edit-post/src/components/header/pinned-plugins/style.scss
@@ -8,7 +8,7 @@
 	.components-icon-button {
 		margin-left: 4px;
 
-		&.is-toggled {
+		&.is-pressed {
 			margin-left: 5px;
 		}
 
@@ -19,18 +19,18 @@
 	}
 
 	// Colorize plugin icons to ensure contrast and cohesion, but allow plugin developers to override.
-	.components-icon-button:not(.is-toggled) svg,
-	.components-icon-button:not(.is-toggled) svg * {
+	.components-icon-button:not(.is-pressed) svg,
+	.components-icon-button:not(.is-pressed) svg * {
 		stroke: $dark-gray-500;
 		fill: $dark-gray-500;
 		stroke-width: 0; // !important is omitted here, so stroke-only icons can override easily.
 	}
 
 	// Forcefully colorize hover and toggled plugin icon states to ensure legibility and consistency.
-	.components-icon-button.is-toggled svg,
-	.components-icon-button.is-toggled svg *,
-	.components-icon-button.is-toggled:hover svg,
-	.components-icon-button.is-toggled:hover svg * {
+	.components-icon-button.is-pressed svg,
+	.components-icon-button.is-pressed svg *,
+	.components-icon-button.is-pressed:hover svg,
+	.components-icon-button.is-pressed:hover svg * {
 		stroke: $white !important;
 		fill: $white !important;
 		stroke-width: 0; // !important is omitted here, so stroke-only icons can override easily.
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index b5eaa5049e058f..45e5eb1893b5b3 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -49,14 +49,14 @@
 
 .edit-post-header .components-button {
 	// Header toggle buttons.
-	&.is-toggled {
+	&.is-pressed {
 		color: $white;
 		background: $dark-gray-500;
 	}
 
 	// The !important in this ruleset need to override the pile of :not() selectors used in the icon-button.
-	&.is-toggled:hover,
-	&.is-toggled:focus {
+	&.is-pressed:hover,
+	&.is-pressed:focus {
 		box-shadow: 0 0 0 $border-width $dark-gray-500, inset 0 0 0 $border-width $white !important;
 		color: $white !important;
 		background: $dark-gray-500 !important;
diff --git a/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js b/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js
index a112ea053b2df4..94754a4dc05405 100644
--- a/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js
@@ -36,7 +36,7 @@ function PluginSidebar( props ) {
 						icon={ icon }
 						label={ title }
 						onClick={ toggleSidebar }
-						isToggled={ isActive }
+						isPressed={ isActive }
 						aria-expanded={ isActive }
 					/> }
 				</PinnedPlugins>
@@ -51,7 +51,7 @@ function PluginSidebar( props ) {
 							icon={ isPinned ? 'star-filled' : 'star-empty' }
 							label={ isPinned ? __( 'Unpin from toolbar' ) : __( 'Pin to toolbar' ) }
 							onClick={ togglePin }
-							isToggled={ isPinned }
+							isPressed={ isPinned }
 							aria-expanded={ isPinned }
 						/>
 					) }
diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
index a6f53cc9beb2a5..707b97a8e35f95 100644
--- a/storybook/test/__snapshots__/index.js.snap
+++ b/storybook/test/__snapshots__/index.js.snap
@@ -336,31 +336,31 @@ exports[`Storyshots Components|Button Link 1`] = `
 </a>
 `;
 
-exports[`Storyshots Components|Button Primary 1`] = `
+exports[`Storyshots Components|Button Pressed 1`] = `
 <button
-  className="components-button is-button is-primary"
+  aria-pressed={true}
+  className="components-button is-pressed"
   type="button"
 >
-  Primary Button
+  Pressed Button
 </button>
 `;
 
-exports[`Storyshots Components|Button Small 1`] = `
+exports[`Storyshots Components|Button Primary 1`] = `
 <button
-  className="components-button is-button is-default is-small"
+  className="components-button is-button is-primary"
   type="button"
 >
-  Small Button
+  Primary Button
 </button>
 `;
 
-exports[`Storyshots Components|Button Toggled 1`] = `
+exports[`Storyshots Components|Button Small 1`] = `
 <button
-  aria-pressed={true}
-  className="components-button is-toggled"
+  className="components-button is-button is-default is-small"
   type="button"
 >
-  Toggled Button
+  Small Button
 </button>
 `;
 
@@ -3728,7 +3728,7 @@ exports[`Storyshots Components|ToolbarGroup Default 1`] = `
     <button
       aria-label="Bold"
       aria-pressed={true}
-      className="components-button components-icon-button components-toolbar__control is-toggled"
+      className="components-button components-icon-button components-toolbar__control is-pressed"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -3822,7 +3822,7 @@ exports[`Storyshots Components|ToolbarGroup With Controls Prop 1`] = `
     <button
       aria-label="Bold"
       aria-pressed={true}
-      className="components-button components-icon-button components-toolbar__control is-toggled"
+      className="components-button components-icon-button components-toolbar__control is-pressed"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}