Skip to content

Commit

Permalink
Set default style to link-button mixin (woocommerce#7340)
Browse files Browse the repository at this point in the history
It was identified that we currently have 3 different behaviors for links used in the application. In issue woocommerce#1778, it was discussed a set of good practices that we should follow in order to obtain consistency between links.

Currently, the link-button mixin is already used by the 'Clear all' button in the Active Filters block, so the idea was to increment it with a common pattern (font size small, font-weight normal, underlined by default and not underlined when on hover) that can be reused by other components (for example FilterResetButton).

* Change link-button mixin to make it attend the expected default style for links

* Replace text-button with link-button mixin in FilterResetButton component
  • Loading branch information
thealexandrelara authored and senadir committed Nov 12, 2022
1 parent 31509bf commit 9a2a97a
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 7 deletions.
8 changes: 8 additions & 0 deletions assets/css/abstracts/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,15 @@ $fontSizes: (
// Reset <button> style so we can use link style for action buttons.
@mixin link-button() {
@include text-button();
@include font-size(small);
text-decoration: underline;
font-weight: normal;
color: inherit;

&:hover {
text-decoration: none;
color: inherit;
}
}

// Makes sure long words are broken if they overflow the container.
Expand Down
6 changes: 1 addition & 5 deletions assets/js/base/components/filter-reset-button/style.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
.wc-block-components-filter-reset-button {
@include text-button();
@include link-button();
cursor: pointer;

&:not([disabled]):hover {
text-decoration: underline;
}

&[disabled] {
cursor: not-allowed;
}
Expand Down
3 changes: 1 addition & 2 deletions assets/js/blocks/active-filters/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,10 @@
overflow: hidden;

.wc-block-active-filters__clear-all {
@include font-size(small);
@include link-button();
border: none;
margin-top: 15px;
padding: 0;
text-decoration: underline;
cursor: pointer;
float: right;

Expand Down

0 comments on commit 9a2a97a

Please sign in to comment.