Rename isToggled to isPressed for the Button component

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 ) {

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' ) }

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

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 /> );

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>
 	);

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,

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>

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 }%

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>

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.

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,

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>

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>
 	);
 };
 

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', () => {

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',

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;
 		}

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]}

packages/components/src/color-palette/test/index.js

@@ -29,15 +29,15 @@ 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 );
 		expect( onChange ).toHaveBeenCalledWith( undefined );
 	} );
 
 	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 );

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;

packages/components/src/date-time/test/__snapshots__/time.js.snap

@@ -323,15 +323,15 @@ 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
         </ForwardRef(Button)>
         <ForwardRef(Button)
           className="components-datetime__time-pm-button"
           isDefault={true}
-          isToggled={true}
+          isPressed={true}
           onClick={[Function]}
         >
           PM
@@ -504,15 +504,15 @@ 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
         </ForwardRef(Button)>
         <ForwardRef(Button)
           className="components-datetime__time-pm-button"
           isDefault={true}
-          isToggled={true}
+          isPressed={true}
           onClick={[Function]}
         >
           PM

packages/components/src/date-time/time.js

@@ -303,15 +303,15 @@ class TimePicker extends Component {
 								<Button
 									isDefault
 									className="components-datetime__time-am-button"
-									isToggled={ am === 'AM' }
+									isPressed={ am === 'AM' }
 									onClick={ this.updateAmPm( 'AM' ) }
 								>
 									{ __( 'AM' ) }
 								</Button>
 								<Button
 									isDefault
 									className="components-datetime__time-pm-button"
-									isToggled={ am === 'PM' }
+									isPressed={ am === 'PM' }
 									onClick={ this.updateAmPm( 'PM' ) }
 								>
 									{ __( 'PM' ) }