Components: Remove global button styles from Post Comment Actions (#4…

…5344) * Post Comment Actions: use Button instead of button * Simplify Button wrapper * Components: Use Button bare for post comment actions * Fix read more button color * Use new propname for plain button * Use WP components button * Comments: Remove built-in height from action buttons Co-authored-by: Marin Atanasov <[email protected]>
Automattic · Sep 24, 2020 · 1177305 · 1177305
1 parent a426a9e
commit 1177305
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 41 deletions.
diff --git a/client/blocks/comments/comment-actions.jsx b/client/blocks/comments/comment-actions.jsx
@@ -8,6 +8,11 @@ import Gridicon from 'components/gridicon';
 import classnames from 'classnames';
 import { noop } from 'lodash';
 
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
@@ -55,53 +60,53 @@ const CommentActions = ( {
 	return (
 		<div className="comments__comment-actions">
 			{ showReadMore && (
-				<button className="comments__comment-actions-read-more" onClick={ onReadMore }>
+				<Button className="comments__comment-actions-read-more" onClick={ onReadMore }>
 					<Gridicon
 						icon="chevron-down"
 						size={ 18 }
 						className="comments__comment-actions-read-more-icon"
 					/>
 					{ translate( 'Read More' ) }
-				</button>
+				</Button>
 			) }
 			{ showReplyButton && (
-				<button className="comments__comment-actions-reply" onClick={ handleReply }>
+				<Button className="comments__comment-actions-reply" onClick={ handleReply }>
 					<Gridicon icon="reply" size={ 18 } />
 					<span className="comments__comment-actions-reply-label">{ translate( 'Reply' ) }</span>
-				</button>
+				</Button>
 			) }
 			{ showCancelReplyButton && (
-				<button className="comments__comment-actions-cancel-reply" onClick={ onReplyCancel }>
+				<Button className="comments__comment-actions-cancel-reply" onClick={ onReplyCancel }>
 					{ translate( 'Cancel reply' ) }
-				</button>
+				</Button>
 			) }
 			{ showCancelEditButton && (
-				<button className="comments__comment-actions-cancel-reply" onClick={ editCommentCancel }>
+				<Button className="comments__comment-actions-cancel-reply" onClick={ editCommentCancel }>
 					{ translate( 'Cancel' ) }
-				</button>
+				</Button>
 			) }
 			<CommentLikeButtonContainer
 				className="comments__comment-actions-like"
-				tagName="button"
+				tagName={ Button }
 				siteId={ post.site_ID }
 				postId={ post.ID }
 				commentId={ commentId }
 			/>
 			{ showModerationTools && (
 				<div className="comments__comment-actions-moderation-tools">
 					<CommentApproveAction { ...{ status, approveComment, unapproveComment } } />
-					<button className="comments__comment-actions-trash" onClick={ trashComment }>
+					<Button className="comments__comment-actions-trash" onClick={ trashComment }>
 						<Gridicon icon="trash" size={ 18 } />
 						<span className="comments__comment-actions-like-label">{ translate( 'Trash' ) }</span>
-					</button>
-					<button className="comments__comment-actions-spam" onClick={ spamComment }>
+					</Button>
+					<Button className="comments__comment-actions-spam" onClick={ spamComment }>
 						<Gridicon icon="spam" size={ 18 } />
 						<span className="comments__comment-actions-like-label">{ translate( 'Spam' ) }</span>
-					</button>
-					<button className="comments__comment-actions-edit" onClick={ editComment }>
+					</Button>
+					<Button className="comments__comment-actions-edit" onClick={ editComment }>
 						<Gridicon icon="pencil" size={ 18 } />
 						<span className="comments__comment-actions-like-label">{ translate( 'Edit' ) }</span>
-					</button>
+					</Button>
 					<EllipsisMenu toggleTitle={ translate( 'More' ) }>
 						<PopoverMenuItem
 							className={ classnames( 'comments__comment-actions-approve', {

diff --git a/client/blocks/comments/comment-actions.scss b/client/blocks/comments/comment-actions.scss
@@ -4,59 +4,71 @@
 	font-size: $font-body-small;
 	list-style: none;
 	margin-top: -6px;
-
-	button {
+	
+	.components-button {
 		display: inline-block;
-	color: var( --color-text-subtle );
+		color: var( --color-text-subtle );
 		padding: 4px;
+		height: auto;
 		margin-right: 8px;
-		margin-top: 0;
 		cursor: pointer;
 		font-size: $font-body-small;
-
+		font-weight: 400;
+
+		.is-compact.gridicon,
 		.gridicon {
 			position: relative;
 			top: 4px;
 			margin-right: 4px;
 		}
-
+		
 		.gridicons-star,
 		.gridicons-star-outline {
 			top: 3px;
 		}
-
+		
 		.like-button__like-icons {
 			margin-right: 18px;
 		}
-
+		
 		&.comments__comment-actions-reply {
 			margin-left: -7px;
 		}
-
+		
 		&.like-button {
 			.gridicon {
 				position: absolute;
 			}
 		}
-
+		
 		&:hover {
 			color: var( --color-primary );
 		}
-
+		
 		&.comments__comment-actions-cancel-reply {
 			float: right;
 			margin-top: 4px;
 			margin-right: 0;
 			padding-right: 0;
 		}
-	}
 
+		&.comments__comment-actions-read-more {
+			color: var( --color-primary );
+			margin: 0 10px 0 -3px;
+			padding-left: 0;
+
+			.comments__comment-actions-read-more-icon {
+				fill: var( --color-primary );
+			}
+		}
+	}
+
 	// Aligns Like icon to comment text when it's by itself
 	> :only-child {
 		left: -3px;
 		top: 3px;
 	}
-
+	
 	.comments__comment-actions-approve,
 	.comments__comment-actions-trash,
 	.comments__comment-actions-spam,
@@ -84,16 +96,6 @@
 	}
 }
 
-.comments__comment-actions .comments__comment-actions-read-more {
-	color: var( --color-primary );
-	margin: 0 10px 0 -3px;
-	padding-left: 0;
-}
-
-.comments__comment-actions-read-more-icon {
-	fill: var( --color-primary );
-}
-
 .comments__comment-actions-moderation-tools {
 	display: inline-block;
 }
diff --git a/client/blocks/comments/comment-approve-action.jsx b/client/blocks/comments/comment-approve-action.jsx
@@ -9,6 +9,11 @@ import { localize } from 'i18n-calypso';
 import Gridicon from 'components/gridicon';
 import classnames from 'classnames';
 
+/**
+ * Internal dependencies
+ */
+import { Button } from '@wordpress/components';
+
 /**
  * Style dependencies
  */
@@ -21,12 +26,12 @@ const CommentApproveAction = ( { translate, status, approveComment, unapproveCom
 	} );
 
 	return (
-		<button className={ buttonStyle } onClick={ ! isApproved ? approveComment : unapproveComment }>
+		<Button className={ buttonStyle } onClick={ ! isApproved ? approveComment : unapproveComment }>
 			<Gridicon icon="checkmark" size={ 18 } />
 			<span className="comments__comment-actions-like-label">
 				{ isApproved ? translate( 'Approved' ) : translate( 'Approve' ) }
 			</span>
-		</button>
+		</Button>
 	);
 };
 

diff --git a/client/blocks/comments/comment-approve-action.scss b/client/blocks/comments/comment-approve-action.scss
@@ -1,4 +1,4 @@
-.comments__comment-actions-approve {
+.comments__comment-actions-approve.components-button {
 	.gridicon .gridicon-checkmark,
 	&.is-approved {
 		color: var( --color-success );