From 414d850fe607c6e206a44ad2afda1c18c78fc64b Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 30 Apr 2018 15:09:32 +0200
Subject: [PATCH] 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.
---
 components/button/style.scss                |  4 +--
 components/clipboard-button/index.js        |  6 ++---
 editor/components/post-permalink/index.js   | 29 ++++++++++++---------
 editor/components/post-permalink/style.scss |  7 ++---
 4 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/components/button/style.scss b/components/button/style.scss
index f891e353530881..5f35afa9c610dc 100644
--- 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
index 79f550acc60cb6..fea57957b70c7d 100644
--- 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
index 962ea6a7d83bb8..8c1ded94d5ea90 100644
--- 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,7 +57,8 @@ 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;
@@ -60,15 +66,13 @@ class PostPermalink extends Component {
 
 		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
index f539b70ce6120c..646f22098b9df4 100644
--- 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 {