Components: Start using isToggled prop for all Button components

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-active": 1,
-	// Needs to be higher than .components-circular-option-picker__option.is-active.
-	".components-circular-option-picker__option.is-active + .dashicons-saved": 2
+	".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
 );
 
 @function z-index( $key ) {

packages/block-editor/src/components/url-input/button.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -45,9 +40,8 @@ class URLInputButton extends Component {
 					icon="admin-links"
 					label={ buttonLabel }
 					onClick={ this.toggle }
-					className={ classnames( 'components-toolbar__control', {
-						'is-active': url,
-					} ) }
+					className="components-toolbar__control"
+					isToggled={ !! 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 not have is-active class when url prop not defined', () => {
+	it( 'should have isToggled props set to false when url prop not defined', () => {
 		const wrapper = shallow( <URLInputButton /> );
-		expect( wrapper.find( 'ForwardRef(IconButton)' ).hasClass( 'is-active' ) ).toBe( false );
+		expect( wrapper.find( 'ForwardRef(IconButton)' ).prop( 'isToggled' ) ).toBe( false );
 	} );
-	it( 'should have is-active class name if url prop defined', () => {
+	it( 'should have isToggled prop set to true if url prop defined', () => {
 		const wrapper = shallow( <URLInputButton url="https://example.com" /> );
-		expect( wrapper.find( 'ForwardRef(IconButton)' ).hasClass( 'is-active' ) ).toBe( true );
+		expect( wrapper.find( 'ForwardRef(IconButton)' ).prop( 'isToggled' ) ).toBe( true );
 	} );
 	it( 'should have hidden form by default', () => {
 		const wrapper = shallow( <URLInputButton /> );

packages/block-library/src/code/editor.scss

@@ -12,57 +12,3 @@
 		box-shadow: none;
 	}
 }
-
-// We should extract this to a separate components-toolbar
-.components-tab-button {
-	display: inline-flex;
-	align-items: flex-end;
-	margin: 0;
-	padding: 3px;
-	background: none;
-	outline: none;
-	color: $dark-gray-500;
-	cursor: pointer;
-	position: relative;
-	height: $icon-button-size;
-	font-family: $default-font;
-	font-size: $default-font-size;
-	font-weight: 500;
-	border: 0;
-
-	&.is-active,
-	&.is-active:hover {
-		color: $white;
-	}
-
-	&:disabled {
-		cursor: default;
-	}
-
-	& > span {
-		border: $border-width solid transparent;
-		padding: 0 6px;
-		box-sizing: content-box;
-		height: 28px;
-		line-height: 28px;
-	}
-
-	&:hover > span,
-	&:focus > span {
-		color: $dark-gray-500;
-	}
-
-	&:not(:disabled) {
-		&.is-active > span,
-		&:hover > span,
-		&:focus > span {
-			border: $border-width solid $dark-gray-500;
-		}
-	}
-
-	&.is-active > span,
-	&.is-active:hover > span {
-		background-color: $dark-gray-500;
-		color: $white;
-	}
-}

packages/block-library/src/html/edit.js

@@ -64,13 +64,15 @@ class HTMLEdit extends Component {
 				<BlockControls>
 					<ToolbarGroup>
 						<Button
-							className={ `components-tab-button ${ ! isPreview ? 'is-active' : '' }` }
+							className="components-tab-button"
+							isToggled={ ! isPreview }
 							onClick={ this.switchToHTML }
 						>
 							<span>HTML</span>
 						</Button>
 						<Button
-							className={ `components-tab-button ${ isPreview ? 'is-active' : '' }` }
+							className="components-tab-button"
+							isToggled={ isPreview }
 							onClick={ this.switchToPreview }
 						>
 							<span>{ __( 'Preview' ) }</span>

packages/block-library/src/image/edit.js

@@ -617,7 +617,7 @@ export class ImageEdit extends Component {
 					<>
 						<ToolbarGroup>
 							<IconButton
-								className={ classnames( 'components-icon-button components-toolbar__control', { 'is-active': this.state.isEditing } ) }
+								className="components-toolbar__control"
 								label={ __( 'Edit image' ) }
 								isToggled={ this.state.isEditing }
 								onClick={ this.toggleIsEditing }

packages/block-library/src/legacy-widget/edit/index.js

@@ -99,13 +99,15 @@ class LegacyWidgetEdit extends Component {
 						{ hasEditForm && (
 							<>
 								<Button
-									className={ `components-tab-button ${ ! isPreview ? 'is-active' : '' }` }
+									className="components-tab-button"
+									isToggled={ ! isPreview }
 									onClick={ this.switchToEdit }
 								>
 									<span>{ __( 'Edit' ) }</span>
 								</Button>
 								<Button
-									className={ `components-tab-button ${ isPreview ? 'is-active' : '' }` }
+									className="components-tab-button"
+									isToggled={ isPreview }
 									onClick={ this.switchToPreview }
 								>
 									<span>{ __( 'Preview' ) }</span>

packages/components/src/circular-option-picker/index.js

@@ -19,11 +19,10 @@ function Option( {
 } ) {
 	const optionButton = (
 		<Button
-			aria-pressed={ isSelected }
+			isToggled={ isSelected }
 			className={ classnames(
 				className,
 				'components-circular-option-picker__option',
-				{ 'is-active': isSelected }
 			) }
 			{ ...additionalProps }
 		/>

packages/components/src/circular-option-picker/style.scss

@@ -66,17 +66,17 @@ $color-palette-circle-spacing: 12px;
 	@include reduce-motion("transition");
 	cursor: pointer;
 
-	&.is-active {
+	&.is-toggled {
 		box-shadow: inset 0 0 0 4px;
 		position: relative;
-		z-index: z-index(".components-circular-option-picker__option.is-active");
+		z-index: z-index(".components-circular-option-picker__option.is-toggled");
 
 		& + .dashicons-saved {
 			position: absolute;
 			left: 4px;
 			top: 4px;
 			border-radius: 50%;
-			z-index: z-index(".components-circular-option-picker__option.is-active + .dashicons-saved");
+			z-index: z-index(".components-circular-option-picker__option.is-toggled + .dashicons-saved");
 			background: $white;
 			pointer-events: none;
 		}

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

@@ -285,8 +285,8 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           >
             <ForwardRef(Button)
               aria-label="Color: red"
-              aria-pressed={true}
-              className="components-circular-option-picker__option is-active"
+              className="components-circular-option-picker__option"
+              isToggled={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-active"
+                className="components-button components-circular-option-picker__option is-toggled"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -373,8 +373,8 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           >
             <ForwardRef(Button)
               aria-label="Color: white"
-              aria-pressed={false}
               className="components-circular-option-picker__option"
+              isToggled={false}
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -428,8 +428,8 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           >
             <ForwardRef(Button)
               aria-label="Color: blue"
-              aria-pressed={false}
               className="components-circular-option-picker__option"
+              isToggled={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-active' ) );
+		const activeButton = buttons.findWhere( ( button ) => button.hasClass( 'is-toggled' ) );
 		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-active' ) ).first();
+		const inactiveButton = buttons.findWhere( ( button ) => ! button.hasClass( 'is-toggled' ) ).first();
 		inactiveButton.simulate( 'click' );
 
 		expect( onChange ).toHaveBeenCalledTimes( 1 );

packages/components/src/primitives/svg/index.native.js

@@ -19,7 +19,7 @@ export {
 export const SVG = ( { className = '', isToggled, ...props } ) => {
 	const colorScheme = props.colorScheme || 'light';
 	const stylesFromClasses = className.split( ' ' ).map( ( element ) => styles[ element ] ).filter( Boolean );
-	const defaultStyle = isToggled ? styles[ 'is-active' ] : styles[ 'components-toolbar__control-' + colorScheme ];
+	const defaultStyle = isToggled ? styles[ 'is-toggled' ] : styles[ 'components-toolbar__control-' + colorScheme ];
 	const styleValues = Object.assign( {}, props.style, defaultStyle, ...stylesFromClasses );
 
 	const appliedProps = { ...props, style: styleValues };

packages/components/src/primitives/svg/style.native.scss

@@ -11,7 +11,7 @@
 }
 
 .dashicon-active,
-.is-active {
+.is-toggled {
 	color: #fff;
 	fill: currentColor;
 }

packages/components/src/toolbar-button/index.js

@@ -48,7 +48,6 @@ function ToolbarButton( {
 			className={ classnames(
 				'components-toolbar__control',
 				className,
-				{ 'is-active': isActive }
 			) }
 			isToggled={ isActive }
 			disabled={ isDisabled }

packages/components/src/toolbar-button/style.scss

@@ -18,16 +18,16 @@
 		bottom: 10px;
 	}
 
-	&:not(:disabled).is-active[data-subscript]::after {
+	&:not(:disabled).is-toggled[data-subscript]::after {
 		color: $white;
 	}
 
-	&.is-active {
+	&.is-toggled {
 		padding: 3px;
 		outline: none;
 	}
 
-	&.is-active > svg {
+	&.is-toggled > svg {
 		padding: 5px;
 		border-radius: $radius-round-rectangle;
 		height: 30px;
@@ -36,4 +36,3 @@
 		@include formatting-button-style__active;
 	}
 }
-

packages/edit-post/src/components/header/style.scss

@@ -52,8 +52,6 @@
 	&.is-toggled {
 		color: $white;
 		background: $dark-gray-500;
-		margin: 1px;
-		padding: 7px;
 	}
 
 	// The !important in this ruleset need to override the pile of :not() selectors used in the icon-button.

storybook/test/__snapshots__/index.js.snap

@@ -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-active is-toggled"
+      className="components-button components-icon-button components-toolbar__control is-toggled"
       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-active is-toggled"
+      className="components-button components-icon-button components-toolbar__control is-toggled"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}