Merge branch 'spark-70/update-link-component' of https://github.com/StackExchange/Stacks into spark-70/update-link-component

Author: ttaylor-stack

MIGRATION_GUIDE.md

@@ -33,6 +33,9 @@
 
 ### Components
 
+#### Anchors
+- Removed `.s-anchors__default` in favor of appling those styles as the default for `.s-anchors`
+
 #### Badge
 - `.s-badge__xs` removed
 - `.s-badge__filled` removed
@@ -54,6 +57,9 @@
 - The Award Bling component has been renamed to Bling.
 - Bling no longer accepts children elements besides those for screen readers. Please include any visually represented strings (such as counts) as siblings to the bling component.
 
+#### Block Link
+- The Block Link component has been removed.
+
 #### Buttons
 - The secondary style `outlined` has been removed i.e. `.s-btn__outlined`
 - The default button style is `filled`, use `.s-btn__clear` to use a clear style of a button

packages/stacks-classic/lib/components/anchor/anchor.a11y.test.ts

@@ -12,7 +12,6 @@ describe("anchors", () => {
         baseClass: "s-anchors",
         modifiers: {
             primary: [
-                "default",
                 "grayscale",
                 "muted",
                 "danger",
@@ -28,8 +27,5 @@ describe("anchors", () => {
                 false
             )}.`,
         },
-        options: {
-            includeNullModifier: false,
-        },
     });
 });

packages/stacks-classic/lib/components/anchor/anchor.less

@@ -1,9 +1,14 @@
 .s-anchors {
-    // CUSTOM PROPERTIED DEFINED WITHIN VARIANTS
-    // --_an-a-fc
-    // --_an-a-fc-hover
-    // --_an-a-fc-visited
-    // --_an-a-fc-hover-visited
+    --_an-a-fc: var(--theme-link-color, var(--black-600));
+    --_an-a-fc-hover: var(--theme-link-color-hover, var(--blue-400));
+    --_an-a-fc-visited: var(--theme-link-color-visited, var(--black-400));
+
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        a[href] {
+            text-decoration: underline;
+        }
+    });
 
     // MODIFIERS
     &&__underlined {
@@ -14,30 +19,15 @@
     }
 
     // VARIANTS
-    &&__danger,
-    &&__grayscale,
-    &&__inherit,
-    &&__muted {
-        --_an-a-fc-hover-visited: var(--_an-a-fc-hover);
-    }
-
     &&__danger {
         --_an-a-fc: var(--red-400);
         --_an-a-fc-hover: var(--red-500);
         --_an-a-fc-visited: var(--red-600);
     }
 
-    &&__default {
-        --_an-a-fc: var(--theme-link-color, var(--black-600));
-        --_an-a-fc-hover: var(--theme-link-color-hover, var(--blue-400));
-        --_an-a-fc-visited: var(--theme-link-color-visited, var(--black-500));
-        --_an-a-fc-hover-visited: var(--theme-link-color-visited, var(--black-500));
-    }
-
     &&__grayscale {
         --_an-a-fc: var(--black-500);
         --_an-a-fc-hover: var(--black-600);
-        --_an-a-fc-visited: var(--black-400);
     }
 
     &&__inherit {
@@ -55,32 +45,30 @@
 
     &&__muted {
         --_an-a-fc: var(--black-400);
-        --_an-a-fc-hover: var(--blue-400);
-        --_an-a-fc-visited: var(--black-500);
     }
 
-    &&__danger,
-    &&__default,
-    &&__grayscale,
-    &&__inherit,
-    &&__muted,
-    &&__underlined {
-        a:not(.s-link),
-        .s-btn.s-btn__link {
-            &:active,
-            &:hover {
-                color: var(--_an-a-fc-hover);
-            }
+    p& > a[href],
+    p > a[href] {
+        text-decoration: underline;
+    }
 
-            color: var(--_an-a-fc, inherit);
+    a:not(.s-link),
+    .s-btn.s-btn__link {
+        &:active,
+        &:hover {
+            color: var(--_an-a-fc-hover);
+            text-decoration: underline;
         }
 
-        a:not(.s-link):visited {
-            &:hover {
-                color: var(--_an-a-fc-hover-visited, inherit);
-            }
+        color: var(--_an-a-fc, inherit);
+        text-decoration: none;
+    }
 
-            color: var(--_an-a-fc-visited, inherit);
+    a:not(.s-link):visited {
+        &:hover {
+            color: var(--_an-a-fc-hover, inherit);
         }
+
+        color: var(--_an-a-fc-visited, inherit);
     }
 }

packages/stacks-classic/lib/components/anchor/anchor.visual.test.ts

@@ -19,7 +19,6 @@ describe("anchors", () => {
         baseClass: "s-anchors",
         modifiers: {
             primary: [
-                "default",
                 "grayscale",
                 "muted",
                 "danger",
@@ -35,9 +34,6 @@ describe("anchors", () => {
                 <div class="s-card s-anchors s-anchors__muted mt4">Muted: ${links}</div>
             `,
         },
-        options: {
-            includeNullModifier: false,
-        },
         template: ({ component, testid }) => html`
             <div data-testid="${testid}" class="s-card ws3 fc-green-500">
                 ${testid}: ${component}

packages/stacks-classic/lib/components/avatar/avatar.less

@@ -102,5 +102,6 @@
     background-size: 100%;
     display: inline-block; // Make sure the avatar has structure regardless of the element eg. span vs. div
     position: relative;
+    text-decoration: none;
     vertical-align: bottom; // Make our avatars play more nicely with text next to it.
 }

packages/stacks-classic/lib/components/link-preview/link-preview.less

@@ -105,23 +105,15 @@
     & a&--title {
         &:active,
         &:hover {
-            color: var(--theme-link-color-hover, var(--theme-secondary-500));
-        }
-
-        &:active,
-        &:hover,
-        &.s-link__visited:active,
-        &.s-link__visited:hover,
-        &.s-link__visited:visited {
             .highcontrast-mode({
                 text-decoration: underline;
             });
 
+            color: var(--theme-link-color-hover, var(--theme-secondary-500));
             text-decoration: none;
         }
 
-        &:visited,
-        &.s-link__visited {
+        &:visited {
             &:hover {
                 color: var(--theme-link-color, var(--purple-600));
             }

packages/stacks-classic/lib/components/link/link.a11y.test.ts

@@ -6,14 +6,7 @@ describe("link", () => {
     runA11yTests({
         baseClass: "s-link",
         modifiers: {
-            primary: [
-                "grayscale",
-                "muted",
-                "danger",
-                "inherit",
-                "underlined",
-                "visited",
-            ],
+            primary: ["grayscale", "muted", "danger", "inherit", "underlined"],
             secondary: ["dropdown"],
         },
         children: {

packages/stacks-classic/lib/components/link/link.less

@@ -1,43 +1,13 @@
-// Reset browser default underline for Stacks component anchors (e.g. .s-navigation--item).
-// Without this components that use <a> but don't use .s-link would inherit underline.
-a[class*="s-"] {
-    text-decoration: none;
-}
-
-// Base link styles shared by .s-link and by bare <a> inside .s-prose.
-.s-link,
-.s-prose a:not([class*="s-"]) {
+.s-link {
     --_li-fc: var(--theme-link-color, var(--black-600));
     --_li-fc-hover: var(--theme-link-color-hover, var(--blue-400));
     --_li-fc-visited: var(--theme-link-color-visited, var(--black-400));
-    --_li-fc-hover-visited: var(--theme-link-color-visited, var(--black-400));
 
+    // CONTEXTUAL STYLES
     .highcontrast-mode({
         text-decoration: underline;
     });
 
-    color: var(--_li-fc);
-    cursor: pointer;
-    text-decoration: none;
-    user-select: auto;
-
-    // INTERACTION
-    &:active,
-    &:hover {
-        --_li-fc: var(--_li-fc-hover);
-        text-decoration: underline !important;
-    }
-    &:visited {
-        color: var(--_li-fc-visited);
-    }
-
-    &:hover:visited {
-        color: var(--_li-fc-hover-visited);
-        text-decoration: underline !important;
-    }
-}
-
-.s-link {
     // MODIFIERS
     &__dropdown {
         &:after {
@@ -62,21 +32,7 @@ a[class*="s-"] {
         text-decoration: underline !important;
     }
 
-    &__visited { // TODO can we get rid of this? It's only in 3 places in Core and seems to me it doesn't even serve a purpose.
-        --_li-fc: var(--theme-link-color-visited, var(--black-500));
-        --_li-fc-hover: var(--theme-link-color-hover, var(--black-600));
-        --_li-fc-visited: var(--theme-link-color-visited, var(--black-500));
-        --_li-fc-hover-visited: var(--theme-link-color-visited, var(--black-500));
-    }
-
     // VARIANTS
-    &__danger,
-    &__grayscale,
-    &__inherit,
-    &__muted {
-        --_li-fc-hover-visited: var(--_li-fc-visited);
-    }
-
     &__danger {
         --_li-fc: var(--red-400);
         --_li-fc-hover: var(--red-500);
@@ -86,7 +42,6 @@ a[class*="s-"] {
     &__grayscale {
         --_li-fc: var(--black-500);
         --_li-fc-hover: var(--black-600);
-        --_li-fc-visited: var(--black-400);
     }
 
     &__inherit {
@@ -97,10 +52,9 @@ a[class*="s-"] {
 
     &__muted {
         --_li-fc: var(--black-400);
-        --_li-fc-hover: var(--blue-400);
-        --_li-fc-visited: var(--black-400);
     }
 
+    // MODIFIERS
     fieldset[disabled] & {
         box-shadow: none !important;
         opacity: var(--_o-disabled-static);
@@ -120,4 +74,28 @@ a[class*="s-"] {
         padding: 0;
         user-select: auto;
     }
+
+    p & {
+        text-decoration: underline;
+    }
+
+    // INTERACTION
+    &:active,
+    &:hover {
+        --_li-fc: var(--_li-fc-hover);
+        text-decoration: underline;
+    }
+
+    &:visited {
+        &:hover {
+            color: var(--_li-fc-hover);
+        }
+
+        color: var(--_li-fc-visited);
+    }
+
+    color: var(--_li-fc);
+    cursor: pointer;
+    text-decoration: none;
+    user-select: auto;
 }

packages/stacks-classic/lib/components/link/link.visual.test.ts

@@ -7,14 +7,7 @@ describe("link", () => {
     runVisualTests({
         baseClass: "s-link",
         modifiers: {
-            primary: [
-                "grayscale",
-                "muted",
-                "danger",
-                "inherit",
-                "underlined",
-                "visited",
-            ],
+            primary: ["grayscale", "muted", "danger", "inherit", "underlined"],
             secondary: ["dropdown"],
         },
         children: {
@@ -33,14 +26,7 @@ describe("link", () => {
     runVisualTests({
         baseClass: "s-link",
         modifiers: {
-            primary: [
-                "grayscale",
-                "muted",
-                "danger",
-                "inherit",
-                "underlined",
-                "visited",
-            ],
+            primary: ["grayscale", "muted", "danger", "inherit", "underlined"],
             secondary: ["dropdown"],
         },
         children: {

packages/stacks-classic/lib/components/navigation/navigation.less

@@ -23,6 +23,10 @@
     .highcontrast-mode({
         --_na-item-bg-hover: var(--black-500);
         --_na-item-fc-hover: var(--black-225);
+
+        a[href].s-navigation--item {
+            text-decoration: underline;
+        }
     });
 
     // MODIFIERS
@@ -126,6 +130,7 @@
         cursor: pointer;
         display: flex;
         position: relative;
+        text-decoration: none;
         user-select: auto;
     }