Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Components: Remove global button styles from Post Comment Actions #45344

Merged
merged 7 commits into from
Sep 24, 2020
Merged

Components: Remove global button styles from Post Comment Actions #45344

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5431470
Post Comment Actions: use Button instead of button
sarayourfriend Sep 2, 2020
f62f608
Simplify Button wrapper
sarayourfriend Sep 3, 2020
a393c17
Components: Use Button bare for post comment actions
sarayourfriend Sep 4, 2020
5b873f0
Fix read more button color
sarayourfriend Sep 4, 2020
683c21b
Use new propname for plain button
sarayourfriend Sep 14, 2020
4822370
Use WP components button
sarayourfriend Sep 16, 2020
982ea2d
Comments: Remove built-in height from action buttons
tyxla Sep 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 20 additions & 15 deletions client/blocks/comments/comment-actions.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -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', {
Expand Down
48 changes: 25 additions & 23 deletions client/blocks/comments/comment-actions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This style conflicts with the one that gives the "Read more" button the primary color:

.comments__comment-actions .comments__comment-actions-read-more {
	color: var( --color-primary );
}

That causes the coloring issue that @tyxla reports in #45344 (review)

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,
Expand Down Expand Up @@ -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;
}
9 changes: 7 additions & 2 deletions client/blocks/comments/comment-approve-action.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand All @@ -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>
);
};

Expand Down
2 changes: 1 addition & 1 deletion client/blocks/comments/comment-approve-action.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.comments__comment-actions-approve {
.comments__comment-actions-approve.components-button {
.gridicon .gridicon-checkmark,
&.is-approved {
color: var( --color-success );
Expand Down