From 9245934eb81405a6b17b5d0804a6168b34743140 Mon Sep 17 00:00:00 2001
From: Alexandre Lara <allexandrelara@gmail.com>
Date: Mon, 10 Oct 2022 14:26:15 -0300
Subject: [PATCH] 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.
---
 .../woocommerce-blocks/assets/css/abstracts/_mixins.scss    | 6 ++++++
 .../js/base/components/filter-reset-button/style.scss       | 2 +-
 .../assets/js/blocks/active-filters/style.scss              | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss b/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss
index 16e485395b0..47f66c23bce 100644
--- a/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss
+++ b/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss
@@ -163,6 +163,12 @@ $fontSizes: (
 // Reset <button> style so we can use link style for action buttons.
 @mixin link-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);
 	text-decoration: underline;
 	font-weight: normal;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/filter-reset-button/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/filter-reset-button/style.scss
index 8e9ba08352c..7d5d0b73986 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/filter-reset-button/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/filter-reset-button/style.scss
@@ -1,5 +1,5 @@
 .wc-block-components-filter-reset-button {
-	@include link-button();
+	@include filter-link-button();
 	cursor: pointer;
 
 	&[disabled] {
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/style.scss
index 48191078d68..02d118dbf26 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/style.scss
@@ -20,7 +20,7 @@
 	overflow: hidden;
 
 	.wc-block-active-filters__clear-all {
-		@include link-button();
+		@include filter-link-button();
 		border: none;
 		margin-top: 15px;
 		padding: 0;