Merge pull request #584 from Kajabi/SAGE-497_qj-label-spec-update

[SAGE-497] Label - align to spec
Kajabi · Jul 19, 2021 · 2fce833 · 2fce833
2 parents bdd7d44 + bdd4a48
commit 2fce833
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 18 deletions.
diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -174,7 +174,12 @@ $-btn-interactive-label-icon-size: rem(24px);
     right: 0;
     width: $-btn-interactive-label-icon-size;
     margin: auto 0;
-    border-radius: 0 sage-border(radius) sage-border(radius) 0;
+    border-radius: 0 sage-border(radius-x-large) sage-border(radius-x-large) 0;
+
+    &::before {
+      transform: translateY(1px); /* needed as sage-font-size(sm) equates to 13px, not 14px. This 1px is accounting for that 1px */
+      font-size: sage-font-size(sm);
+    }
 
     &::after {
       width: $-btn-interactive-label-icon-size;
@@ -186,10 +191,6 @@ $-btn-interactive-label-icon-size: rem(24px);
       margin-right: sage-spacing(xs);
     }
 
-    &:last-child:not(:first-child) {
-      margin-left: sage-spacing(xs);
-    }
-
     + & {
       margin-left: 0;
     }

diff --git a/packages/sage-assets/lib/stylesheets/components/_label.scss b/packages/sage-assets/lib/stylesheets/components/_label.scss
@@ -6,7 +6,7 @@
 
 
 $-label-interactive-icon-size: rem(24px);
-$-label-interactive-icon-size-small: rem(28px);
+$-label-interactive-icon-size-decor: rem(28px);
 $-label-padding: 0 sage-spacing(xs);
 $-label-border-radius: sage-border(radius-x-large);
 $-label-inset-border: 0 0 0 1px inset;
@@ -89,7 +89,7 @@ $-label-inset-border: 0 0 0 1px inset;
 
   #{$-color-modifier}.sage-label--interactive {
     &.sage-label--interactive-right-cta-affordance .sage-label__value {
-      padding-right: $-label-interactive-icon-size-small;
+      padding-right: $-label-interactive-icon-size-decor;
     }
 
     .sage-label__value {
@@ -109,36 +109,29 @@ $-label-inset-border: 0 0 0 1px inset;
       color: sage-color-combo($-color-name, default, foreground);
 
       &:hover {
-        background-color: sage-color-combo($-color-name, default, icon-background-accent);
+        background-color: sage-color-combo($-color-name, default, background-accent);
       }
 
       &:focus {
         @include sage-focus-outline--update-color( sage-color-combo($-color-name, default, foreground) );
       }
     }
 
-    &:hover {
-      .sage-label__value {
-        background-color: sage-color-combo($-color-name, default, background-accent);
-      }
-
-      .sage-btn::before {
-        color: sage-color-combo($-color-name, default, foreground-accent);
-      }
+    .sage-label__value:hover {
+      background-color: sage-color-combo($-color-name, default, background-accent);
     }
 
     .sage-label__decor-icon {
       display: flex;
       justify-content: center;
       position: absolute;
       right: 0;
-      width: $-label-interactive-icon-size-small;
+      width: $-label-interactive-icon-size-decor;
       min-height: $-label-interactive-icon-size;
       margin: auto 0;
       border-radius: 0 $-label-border-radius $-label-border-radius 0;
 
       &::before {
-        font-weight: sage-font-weight(bold);
         color: sage-color-combo($-color-name, default, foreground);
       }