Minor improvements for the permalink Copy to clipboard button (#6472)

* Permalink copy button minor improvements. * Reset focus/hover styles, use aria-disabled, and update the label when the permalink is copied.
WordPress · Apr 30, 2018 · 414d850 · 414d850
1 parent eabcb9b
commit 414d850
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 21 deletions.
diff --git a/components/button/style.scss b/components/button/style.scss
@@ -14,11 +14,11 @@
 		opacity: 0.3;
 	}
 
-	&:not( :disabled ) {
+	&:not( :disabled ):not( [aria-disabled="true"] ) {
 		cursor: pointer;
 	}
 
-	&:focus {
+	&:not( :disabled ):not( [aria-disabled="true"] ):focus {
 		@include button-style__focus-active;
 	}
 

diff --git a/components/clipboard-button/index.js b/components/clipboard-button/index.js
@@ -12,7 +12,7 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { Button } from '../';
+import IconButton from '../icon-button';
 
 class ClipboardButton extends Component {
 	constructor() {
@@ -82,9 +82,9 @@ class ClipboardButton extends Component {
 
 		return (
 			<span ref={ this.bindContainer }>
-				<Button { ...buttonProps } className={ classes }>
+				<IconButton { ...buttonProps } icon="admin-links" className={ classes }>
 					{ children }
-				</Button>
+				</IconButton>
 			</span>
 		);
 	}

diff --git a/editor/components/post-permalink/index.js b/editor/components/post-permalink/index.js
@@ -1,10 +1,15 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { withDispatch, withSelect } from '@wordpress/data';
 import { Component, compose } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Dashicon, ClipboardButton, Button, Tooltip } from '@wordpress/components';
+import { ClipboardButton, Button } from '@wordpress/components';
 
 /**
  * Internal Dependencies
@@ -21,7 +26,7 @@ class PostPermalink extends Component {
 		this.onVisibilityChange = this.onVisibilityChange.bind( this );
 
 		this.state = {
-			iconClass: '',
+			isCopied: false,
 			isEditingPermalink: false,
 		};
 	}
@@ -52,23 +57,22 @@ class PostPermalink extends Component {
 
 	render() {
 		const { isNew, previewLink, isEditable, samplePermalink, isPublished } = this.props;
-		const { iconClass, isEditingPermalink } = this.state;
+		const { isCopied, isEditingPermalink } = this.state;
+		const ariaLabel = isCopied ? __( 'Permalink copied' ) : __( 'Copy the permalink' );
 
 		if ( isNew || ! previewLink ) {
 			return null;
 		}
 
 		return (
 			<div className="editor-post-permalink">
-				<Tooltip text={ __( 'Copy the permalink to your clipboard' ) }>
-					<ClipboardButton
-						className="editor-post-permalink__copy"
-						text={ samplePermalink }
-						onCopy={ () => this.setState( { iconClass: 'is-copied' } ) }
-					>
-						<Dashicon icon="admin-links" className={ iconClass } />
-					</ClipboardButton>
-				</Tooltip>
+				<ClipboardButton
+					className={ classnames( 'editor-post-permalink__copy', { 'is-copied': isCopied } ) }
+					text={ samplePermalink }
+					label={ ariaLabel }
+					onCopy={ () => this.setState( { isCopied: true } ) }
+					aria-disabled={ isCopied }
+				/>
 
 				<span className="editor-post-permalink__label">{ __( 'Permalink:' ) }</span>
 
@@ -132,4 +136,3 @@ export default compose( [
 		return { refreshPost };
 	} ),
 ] )( PostPermalink );
-
diff --git a/editor/components/post-permalink/style.scss b/editor/components/post-permalink/style.scss
@@ -19,15 +19,16 @@
 }
 
 .editor-post-permalink__copy {
-	margin-top: 4px;
+	border-radius: 4px;
+	padding: 6px;
 }
 
-.editor-post-permalink__copy .is-copied {
+.editor-post-permalink__copy.is-copied {
 	opacity: 0.3;
 }
 
 .editor-post-permalink__label {
-	margin: 0 10px;
+	margin: 0 10px 0 5px;
 }
 
 .editor-post-permalink__link {