From a66d498e0b79053993c0517d97ebb0a3fe0c0c90 Mon Sep 17 00:00:00 2001
From: Will Ernest <wernest@vmware.com>
Date: Fri, 26 Jan 2024 09:43:42 -0800
Subject: [PATCH] fix(card): resolve clickable card hover shifting text (#1166)

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [X] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

When hovering over clickable card the border width animates from 1px to
2px, causing the text content contained within the card to noticeably
shift. This can be seen when hovering the clickable card on our
[website](https://clarity.design/documentation/card/code#clickable-cards)
and our
[storybook](https://storybook.clarity.design/?path=/story/card-card--default).

Issue Number: CDE-917

This changes the clickable border-width token to 1px (which is the
correct value for non-hovered clickable cards), and then uses the
box-shadow to set a 1px shadow around the element. Since both the
box-shadow and the border-color are the same color, and they're both 1px
by default, the result is a non-shifting 2px stroke on hover.

- [ ] Yes
- [X] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->
---
 projects/angular/src/layout/_card.clarity.scss    | 4 ++--
 projects/angular/src/layout/_properties.card.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/angular/src/layout/_card.clarity.scss b/projects/angular/src/layout/_card.clarity.scss
index e73d3b776e..b151d88939 100644
--- a/projects/angular/src/layout/_card.clarity.scss
+++ b/projects/angular/src/layout/_card.clarity.scss
@@ -22,10 +22,10 @@
 
   %clickable-card-transition {
     box-shadow: card-variables.$clr-card-clickable-box-shadow;
-    border: tokens.$cds-alias-object-border-width-200 solid card-variables.$clr-card-clickable-border-color;
+    border: tokens.$cds-alias-object-border-width-100 solid card-variables.$clr-card-clickable-border-color;
     cursor: pointer;
     text-decoration: none;
-    transition: border 0.2s ease, transform 0.2s ease;
+    transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
   }
 
   %card-space-between {
diff --git a/projects/angular/src/layout/_properties.card.scss b/projects/angular/src/layout/_properties.card.scss
index 1c408a09ea..db28c96da1 100644
--- a/projects/angular/src/layout/_properties.card.scss
+++ b/projects/angular/src/layout/_properties.card.scss
@@ -20,7 +20,7 @@
     --clr-card-border-color: #{tokens.$cds-alias-object-border-color};
     --clr-card-box-shadow: #{tokens.$cds-alias-object-shadow-300};
     --clr-card-clickable-border-color: #{tokens.$cds-alias-object-interaction-background-highlight};
-    --clr-card-clickable-box-shadow: #{tokens.$cds-alias-object-shadow-300};
+    --clr-card-clickable-box-shadow: 0 0 0 #{tokens.$cds-global-space-1} var(--clr-card-clickable-border-color);
     --clr-card-header-title-color: var(--clr-card-title-color);
     --clr-card-content-title-color: var(--clr-card-title-color);
     --clr-card-text-color: #{tokens.$cds-alias-typography-color-400};