Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add filter-link-button mixin (https://github.com/woocommerce/woocommerce-blocks/pull/7357) 

* Set default style to link-button mixin

It was identified that we currently have 3 different behaviors for links used in the application. In issue woocommerce/woocommerce-blocks#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

* Add new mixin for links in filter blocks

* Revert change to link-button mixin to prevent it to affect link buttons on Checkout page

* Add filter-link-button mixin that can be used in filter blocks

* Remove link-button styles that were moved to filter-link-button mixin

By default, link-button mixin styles should have only styles from the text-button mixin and also be underlined.

The styles for link button in filter blocks should reside in filter-link-button mixin.
This commit is contained in:
Alexandre Lara 2022-10-10 14:26:15 -03:00 committed by GitHub
parent 0e5b912dcf
commit 9245934eb8
3 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss
View File

@ -163,6 +163,12 @@ $fontSizes: (
// Reset <button> style so we can use link style for action buttons. // Reset <button> style so we can use link style for action buttons.
@mixin link-button() { @mixin link-button() {
@include text-button(); @include text-button();
text-decoration: underline;
}
// Reset <button> style so we can use link style for action buttons in filter blocks
@mixin filter-link-button() {
@include link-button();
@include font-size(small); @include font-size(small);
text-decoration: underline; text-decoration: underline;
font-weight: normal; font-weight: normal;

2
plugins/woocommerce-blocks/assets/js/base/components/filter-reset-button/style.scss
View File

@ -1,5 +1,5 @@
.wc-block-components-filter-reset-button { .wc-block-components-filter-reset-button {
@include link-button(); @include filter-link-button();
cursor: pointer; cursor: pointer;
&[disabled] { &[disabled] {

2
plugins/woocommerce-blocks/assets/js/blocks/active-filters/style.scss
View File

@ -20,7 +20,7 @@
overflow: hidden; overflow: hidden;
.wc-block-active-filters__clear-all { .wc-block-active-filters__clear-all {
@include link-button(); @include filter-link-button();
border: none; border: none;
margin-top: 15px; margin-top: 15px;
padding: 0; padding: 0;