Changed link styling to use the parent selector for the disabled stat…

…e. Re-worded link example text, updated changelog
elastic · Oct 17, 2019 · 5a8de38 · 5a8de38
1 parent 1c34c6c
commit 5a8de38
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added ability for `EuiColorStops` to accept user-defined range bounds ([#2396](https://github.com/elastic/eui/pull/2396))
+- Changed `EuiLink` to appear non interactive when passed the `disabled` prop and an `onClick` handler ([#2423](https://github.com/elastic/eui/pull/2423))
 
 ## [`14.6.0`](https://github.com/elastic/eui/tree/v14.6.0)
 
@@ -10,7 +11,6 @@
 
 - Fixed missing misc. button and link type definition exports ([#2434](https://github.com/elastic/eui/pull/2434))
 - Strip custom semantics from `EuiSideNav` ([#2429](https://github.com/elastic/eui/pull/2429))
-- Changed `EuiLink` to appear non interactive when passed the `disabled` prop and an `onClick` handler ([#2423](https://github.com/elastic/eui/pull/2423))
 
 ## [`14.5.0`](https://github.com/elastic/eui/tree/v14.5.0)
 

diff --git a/src-docs/src/views/link/link_example.js b/src-docs/src/views/link/link_example.js
@@ -65,10 +65,11 @@ export const LinkExample = {
       ],
       text: (
         <p>
-          When an <EuiCode>EuiLink</EuiCode> is passed an onClick method, and is
-          not passed an <EuiCode>href</EuiCode>, it can optionally be set to
+          When an <EuiCode>EuiLink</EuiCode> is passed an{' '}
+          <EuiCode>onClick</EuiCode> method, and is not passed an{' '}
+          <EuiCode>href</EuiCode>, it can optionally be set to
           <EuiCode>disabled</EuiCode> which disables the click behavior, and
-          hides the link.
+          removes the link styling.
         </p>
       ),
       props: { EuiLink },

diff --git a/src/components/link/_link.scss b/src/components/link/_link.scss
@@ -1,7 +1,3 @@
-.euiLink {
-  @include euiLink;
-}
-
 $textColors: (
   subdued: $euiColorDarkShade,
   primary: $euiColorPrimary,
@@ -13,24 +9,29 @@ $textColors: (
   ghost: $euiColorGhost,
 );
 
-// Create color modifiers based on the map
-@each $name, $color in $textColors {
-  .euiLink.euiLink--#{$name} {
-    color: $color;
+.euiLink {
+  @include euiLink;
 
-    &:hover {
-      color: darken($color, 10%);
-    }
+  &.euiLink-disabled {
+    text-decoration: none;
+    cursor: default;
+  }
+
+  // Create color modifiers based on the map
+  @each $name, $color in $textColors {
+    &.euiLink--#{$name} {
+      color: $color;
 
-    &:focus {
-      outline: solid 3px transparentize($color, .9);
-      background-color: transparentize($color, .9);
+      &:hover {
+        color: darken($color, 10%);
+      }
+
+      &:focus {
+        outline: solid 3px transparentize($color, .9);
+        background-color: transparentize($color, .9);
+      }
     }
   }
 }
 
-.euiLink.euilink-disabled {
-  text-decoration: none;
-  cursor: text;
-}