From 69a6bfdbff9c56455502c3b9cb2f6892062f9c8b Mon Sep 17 00:00:00 2001
From: Alexandre Lara <allexandrelara@gmail.com>
Date: Mon, 10 Oct 2022 11:39:32 -0300
Subject: [PATCH] Set default style to link-button mixin (#7340)

It was identified that we currently have 3 different behaviors for links used in the application. In issue #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
---
 assets/css/abstracts/_mixins.scss                        | 8 ++++++++
 assets/js/base/components/filter-reset-button/style.scss | 6 +-----
 assets/js/blocks/active-filters/style.scss               | 3 +--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/assets/css/abstracts/_mixins.scss b/assets/css/abstracts/_mixins.scss
index 906e72a2bce..16e485395b0 100644
--- a/assets/css/abstracts/_mixins.scss
+++ b/assets/css/abstracts/_mixins.scss
@@ -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.
diff --git a/assets/js/base/components/filter-reset-button/style.scss b/assets/js/base/components/filter-reset-button/style.scss
index e9ac580bc4b..8e9ba08352c 100644
--- a/assets/js/base/components/filter-reset-button/style.scss
+++ b/assets/js/base/components/filter-reset-button/style.scss
@@ -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;
 	}
diff --git a/assets/js/blocks/active-filters/style.scss b/assets/js/blocks/active-filters/style.scss
index f86703aa223..48191078d68 100644
--- a/assets/js/blocks/active-filters/style.scss
+++ b/assets/js/blocks/active-filters/style.scss
@@ -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;