Redesign the Switch

blocks/library/gallery/block.js

@@ -105,6 +105,10 @@ class GalleryBlock extends Component {
 		this.props.setAttributes( { imageCrop: ! this.props.attributes.imageCrop } );
 	}
 
+	getImageCropHelp( checked ) {
+		return checked ? __( 'Thumbnails are cropped to align.' ) : __( 'Thumbnails are not cropped.' );
+	}
+
 	setImageAttributes( index, attributes ) {
 		const { attributes: { images }, setAttributes } = this.props;
 		if ( ! images[ index ] ) {
@@ -219,6 +223,7 @@ class GalleryBlock extends Component {
 							label={ __( 'Crop Images' ) }
 							checked={ !! imageCrop }
 							onChange={ this.toggleImageCrop }
+							help={ this.getImageCropHelp }
 						/>
 						<SelectControl
 							label={ __( 'Link to' ) }

components/form-toggle/index.js

@@ -4,21 +4,16 @@
 import classnames from 'classnames';
 import { noop } from 'lodash';
 
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
 import './style.scss';
 
-function FormToggle( { className, checked, id, onChange = noop, showHint = true, ...props } ) {
+function FormToggle( { className, checked, id, onChange = noop, ...props } ) {
 	const wrapperClasses = classnames(
 		'components-form-toggle',
 		className,
-		{ 'is-checked': checked }
+		{ 'is-checked': checked },
 	);
 
 	return (
@@ -33,10 +28,8 @@ function FormToggle( { className, checked, id, onChange = noop, showHint = true,
 			/>
 			<span className="components-form-toggle__track"></span>
 			<span className="components-form-toggle__thumb"></span>
-			{ showHint &&
-				<span className="components-form-toggle__hint" aria-hidden>
-					{ checked ? __( 'On' ) : __( 'Off' ) }
-				</span>
+			{ checked ?
+				<svg className="components-form-toggle__on" width="2" height="6" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 6"><path d="M0 0h2v6H0z" /></svg> : <svg className="components-form-toggle__off" width="6" height="6" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z" /></svg>
 			}
 		</span>
 	);

components/form-toggle/style.scss

@@ -1,32 +1,44 @@
-$toggle-width: 32px;
+$toggle-width: 36px;
 $toggle-height: 18px;
 $toggle-border-width: 2px;
 
 .components-form-toggle {
 	position: relative;
 
+	// On/Off icon indicators
+	.components-form-toggle__on,
+	.components-form-toggle__off {
+		position: absolute;
+		top: $toggle-border-width * 3;
+	}
+
+	.components-form-toggle__off {
+		color: $dark-gray-300;
+		fill: currentColor;
+		right: $toggle-border-width * 3;
+	}
+
+	.components-form-toggle__on {
+		left: $toggle-border-width * 3 + 2px; // indent 2px extra because icon is thinner
+		filter: invert( 100% ) contrast( 500% ); // this makes the icon white, and it makes it dark blue in Windows High Contrast Mode
+		outline: 1px solid transparent; // this makes the dark blue all black in Windows High Contrast Mode
+		outline-offset: -1px;
+	}
+
+	// unchecked state
 	.components-form-toggle__track {
 		content: '';
 		display: inline-block;
 		vertical-align: top;
 		box-sizing: border-box;
 		background-color: $white;
-		border: $toggle-border-width solid $dark-gray-500;
+		border: $toggle-border-width solid $dark-gray-300;
 		width: $toggle-width;
 		height: $toggle-height;
 		border-radius: $toggle-height / 2;
 		transition: 0.2s background ease;
 	}
 
-	&:hover .components-form-toggle__track {
-		background-color: $light-gray-500;
-	}
-
-	&.is-checked .components-form-toggle__track {
-		background-color: $blue-medium-400;
-		border: $toggle-border-width solid $blue-medium-400;
-	}
-
 	.components-form-toggle__thumb {
 		display: block;
 		position: absolute;
@@ -35,25 +47,41 @@ $toggle-border-width: 2px;
 		width: $toggle-height - ( $toggle-border-width * 4 );
 		height: $toggle-height - ( $toggle-border-width * 4 );
 		border-radius: 50%;
-		border: 2px solid $dark-gray-500;
-		background: $white;
 		transition: 0.1s transform ease;
+		background-color: $dark-gray-300;
+		border: 5px solid $dark-gray-300; // has explicit border to act as a fill in Windows High Contrast Mode
 	}
 
-	&__input:focus {
-		& + .components-form-toggle__track {
-			box-shadow: 0 0 0 1px $white, 0 0 0 2px $blue-medium-400, 0 0 2px 2px $blue-medium-400;
+	&:hover {
+		.components-form-toggle__track {
+			border: $toggle-border-width solid $dark-gray-500;
+		}
+
+		.components-form-toggle__thumb {
+			background-color: $dark-gray-500;
+			border: 5px solid $dark-gray-300; // has explicit border to act as a fill in Windows High Contrast Mode
+		}
 
-			 & + .components-form-toggle__thumb {
-				 border-width: 5px;
-			 }
+		.components-form-toggle__off {
+			color: $dark-gray-500;
 		}
 	}
 
+	// checked state
+	&.is-checked .components-form-toggle__track {
+		background-color: $blue-medium-400;
+		border: $toggle-border-width solid $blue-medium-400;
+		border: #{ $toggle-height / 2 } solid transparent; // expand the border to fake a solid in Windows High Contrast Mode
+	}
+
+	&__input:focus + .components-form-toggle__track {
+		@include switch-style__focus-active();
+	}
+
 	&.is-checked {
 		.components-form-toggle__thumb {
-			border: 2px solid $white;
-			background-color: $blue-medium-500;
+			background-color: $white;
+			border-width: 0; // zero out the border color to make the thumb invisible in Windows High Contrast Mode
 			transform: translateX( $toggle-width - ( $toggle-border-width * 4 ) - ( $toggle-height - ( $toggle-border-width * 4 ) ) );
 		}
 
@@ -75,10 +103,3 @@ $toggle-border-width: 2px;
 	padding: 0;
 	z-index: z-index( '.components-form-toggle__input' );
 }
-
-.components-form-toggle__hint {
-	display: inline-block;
-	min-width: 24px;	// This prevents a position jog when the control is right aligned, and the width of the label changes
-	margin-left: 10px;
-	font-weight: 500;
-}

components/form-toggle/test/index.js

@@ -16,16 +16,12 @@ describe( 'FormToggle', () => {
 			expect( formToggle.hasClass( 'components-form-toggle' ) ).toBe( true );
 			expect( formToggle.hasClass( 'is-checked' ) ).toBe( false );
 			expect( formToggle.type() ).toBe( 'span' );
-			expect( formToggle.find( '.components-form-toggle__input' ).prop( 'checked' ) ).toBeUndefined();
-			expect( formToggle.find( '.components-form-toggle__hint' ).text() ).toBe( 'Off' );
-			expect( formToggle.find( '.components-form-toggle__hint' ).prop( 'aria-hidden' ) ).toBe( true );
 		} );
 
 		it( 'should render a checked checkbox and change the accessibility text to On when providing checked prop', () => {
 			const formToggle = shallow( <FormToggle checked /> );
 			expect( formToggle.hasClass( 'is-checked' ) ).toBe( true );
 			expect( formToggle.find( '.components-form-toggle__input' ).prop( 'checked' ) ).toBe( true );
-			expect( formToggle.find( '.components-form-toggle__hint' ).text() ).toBe( 'On' );
 		} );
 
 		it( 'should render with an additional className', () => {
@@ -50,12 +46,5 @@ describe( 'FormToggle', () => {
 			const checkBox = formToggle.prop( 'children' ).find( child => 'input' === child.type && 'checkbox' === child.props.type );
 			expect( checkBox.props.onChange ).toBe( testFunction );
 		} );
-
-		it( 'should not render the hint when showHint is set to false', () => {
-			const formToggle = shallow( <FormToggle showHint={ false } /> );
-
-			// When showHint is not provided this element is not rendered.
-			expect( formToggle.find( '.components-form-toggle__hint' ).exists() ).toBe( false );
-		} );
 	} );
 } );

components/toggle-control/README.md

@@ -11,6 +11,7 @@ Render a user interface to change fixed background setting.
 	<ToggleControl
 		label={ __( 'Fixed Background' ) }
 		checked={ !! hasParallax }
+		help={ ( checked ) => checked ? __( 'Has fixed background.' ) : __( 'No fixed background.' ) } 
 		onChange={ toggleParallax }
 	/>
 ```
@@ -30,7 +31,7 @@ If this property is added, a label will be generated using label property as the
 
 If this property is added, a help text will be generated using help property as the content.
 
-- Type: `String`
+- Type: `String` | `Function`
 - Required: No
 
 ### checked

components/toggle-control/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { isFunction } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -28,16 +33,17 @@ class ToggleControl extends Component {
 		const { label, checked, help, instanceId } = this.props;
 		const id = `inspector-toggle-control-${ instanceId }`;
 
-		let describedBy;
+		let describedBy, helpLabel;
 		if ( help ) {
 			describedBy = id + '__help';
+			helpLabel = isFunction( help ) ? help( checked ) : help;
 		}
 
 		return (
 			<BaseControl
 				label={ label }
 				id={ id }
-				help={ help }
+				help={ helpLabel }
 				className="components-toggle-control"
 			>
 				<FormToggle

edit-post/assets/stylesheets/_admin-schemes.scss

@@ -42,13 +42,8 @@ $scheme-sunrise__spot-color: #de823f;
 				border-color: $spot-color;
 			}
 
-			.components-form-toggle__thumb {
-				background-color: $spot-color;
-			}
-
 			&:before {
 				background-color: $spot-color;
-				border-color: $spot-color;
 			}
 		}
 

edit-post/assets/stylesheets/_mixins.scss

@@ -146,6 +146,15 @@ $float-margin: calc( 50% - #{ $content-width-padding / 2 } );
 	outline-offset: -2px;
 }
 
+// Switch
+@mixin switch-style__focus-active() {
+	box-shadow: 0 0 0 2px $white, 0 0 0 3px $dark-gray-300;
+
+	// Windows High Contrast mode will show this outline, but not the box-shadow
+	outline: 2px solid transparent;
+	outline-offset: 2px;
+}
+
 // Formatting Buttons
 @mixin formatting-button-style__hover {
 	color: $dark-gray-500;

editor/components/post-comments/index.js

@@ -26,7 +26,6 @@ function PostComments( { commentStatus = 'open', instanceId, ...props } ) {
 			key="toggle"
 			checked={ commentStatus === 'open' }
 			onChange={ onToggleComments }
-			showHint={ false }
 			id={ commentsToggleId }
 		/>,
 	];
@@ -42,4 +41,3 @@ export default connect(
 		editPost,
 	}
 )( withInstanceId( PostComments ) );
-

editor/components/post-pending-status/index.js

@@ -31,7 +31,6 @@ export function PostPendingStatus( { instanceId, status, onUpdateStatus } ) {
 				id={ pendingId }
 				checked={ status === 'pending' }
 				onChange={ togglePendingStatus }
-				showHint={ false }
 			/>
 		</PostPendingStatusCheck>
 	);

editor/components/post-pingbacks/index.js

@@ -26,7 +26,6 @@ function PostPingbacks( { pingStatus = 'open', instanceId, ...props } ) {
 			key="toggle"
 			checked={ pingStatus === 'open' }
 			onChange={ onTogglePingback }
-			showHint={ false }
 			id={ pingbacksToggleId }
 		/>,
 	];
@@ -42,4 +41,3 @@ export default connect(
 		editPost,
 	}
 )( withInstanceId( PostPingbacks ) );
-

editor/components/post-sticky/index.js

@@ -27,7 +27,6 @@ export function PostSticky( { onUpdateSticky, postSticky = false, instanceId } )
 				key="toggle"
 				checked={ postSticky }
 				onChange={ () => onUpdateSticky( ! postSticky ) }
-				showHint={ false }
 				id={ stickyToggleId }
 			/>
 		</PostStickyCheck>