Bugfix/2361 EuiLink disabled (#2423)

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Added ability for `EuiColorStops` to accept user-defined range bounds ([#2396](https://github.com/elastic/eui/pull/2396))
 - Added `external` prop to `EuiLink` ([#2442](https://github.com/elastic/eui/pull/2442))
 - Added disabled state to `EuiBadge` ([#2440](https://github.com/elastic/eui/pull/2440))
+- Changed `EuiLink` to appear non interactive when passed the `disabled` prop and an `onClick` handler ([#2423](https://github.com/elastic/eui/pull/2423))
 
 **Bug fixes**
 

src-docs/src/views/link/link_disable.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import {
+  EuiLink,
+  EuiSwitch,
+  EuiSpacer,
+  EuiTextColor,
+} from '../../../../src/components';
+
+export class LinkDisable extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      disableLink: true,
+    };
+  }
+
+  toggleLinkDisable = () => {
+    this.setState(prevState => ({ disableLink: !prevState.disableLink }));
+  };
+
+  render() {
+    return (
+      <div>
+        <EuiSwitch
+          label="Disable Links"
+          checked={this.state.disableLink}
+          onChange={this.toggleLinkDisable}
+        />
+        <EuiSpacer size="m" />
+        <p>
+          This{' '}
+          <EuiLink
+            color="accent"
+            disabled={this.state.disableLink}
+            onClick={() => window.alert('Button clicked')}>
+            paragraph
+          </EuiLink>{' '}
+          has two{this.state.disableLink ? ' disabled ' : ' enabled '}
+          <EuiLink
+            color="warning"
+            disabled={this.state.disableLink}
+            onClick={() => window.alert('Button clicked')}>
+            links
+          </EuiLink>{' '}
+          in it.
+        </p>
+        <EuiSpacer size="m" />
+        <EuiTextColor color="accent">
+          When links are disabled, they inherit the{' '}
+          <EuiLink
+            color="secondary"
+            disabled={this.state.disableLink}
+            onClick={() => window.alert('Button clicked')}>
+            color
+          </EuiLink>{' '}
+          of surrounding text.
+        </EuiTextColor>
+      </div>
+    );
+  }
+}

src-docs/src/views/link/link_example.js

@@ -7,8 +7,14 @@ import { GuideSectionTypes } from '../../components';
 import { EuiCode, EuiLink } from '../../../../src/components';
 
 import Link from './link';
+import { LinkDisable } from './link_disable';
+
 const linkSource = require('!!raw-loader!./link');
 const linkHtml = renderToHtml(Link);
+
+const linkDisableSource = require('!!raw-loader!./link_disable');
+const linkDisableHtml = renderToHtml(LinkDisable);
+
 const linkSnippet = [
   `<EuiLink href="#"><!-- Link text --></EuiLink>
 `,
@@ -45,5 +51,29 @@ export const LinkExample = {
       snippet: linkSnippet,
       demo: <Link />,
     },
+    {
+      title: 'Disabled Links',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: linkDisableSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: linkDisableHtml,
+        },
+      ],
+      text: (
+        <p>
+          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
+          removes the link styling.
+        </p>
+      ),
+      props: { EuiLink },
+      demo: <LinkDisable />,
+    },
   ],
 };

src/components/link/__snapshots__/link.test.tsx.snap

@@ -103,6 +103,14 @@ exports[`EuiLink supports children 1`] = `
 </a>
 `;
 
+exports[`EuiLink supports disabled 1`] = `
+<button
+  class="euiLink euiLink-disabled"
+  disabled=""
+  type="button"
+/>
+`;
+
 exports[`EuiLink supports href 1`] = `
 <a
   class="euiLink euiLink--primary"

src/components/link/_link.scss

@@ -1,11 +1,3 @@
-.euiLink {
-  @include euiLink;
-
-  .euiLink__externalIcon {
-    margin-left: $euiSizeXS;
-  }
-}
-
 $textColors: (
   subdued: $euiColorDarkShade,
   primary: $euiColorPrimary,
@@ -17,18 +9,33 @@ $textColors: (
   ghost: $euiColorGhost,
 );
 
-// Create color modifiers based on the map
-@each $name, $color in $textColors {
-  .euiLink.euiLink--#{$name} {
-    color: $color;
+.euiLink {
+  @include euiLink;
+
+  .euiLink__externalIcon {
+    margin-left: $euiSizeXS;
+  }
 
-    &: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;
+
+      &:hover {
+        color: darken($color, 10%);
+      }
 
-    &:focus {
-      outline: solid 3px transparentize($color, .9);
-      background-color: transparentize($color, .9);
+      &:focus {
+        outline: solid 3px transparentize($color, .9);
+        background-color: transparentize($color, .9);
+      }
     }
   }
 }
+
+

src/components/link/link.test.tsx

@@ -55,6 +55,13 @@ describe('EuiLink', () => {
     expect(component).toMatchSnapshot();
   });
 
+  test('supports disabled', () => {
+    const component = render(
+      <EuiLink disabled onClick={() => 'hello, world!'} />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
   test('if href is not specified, it renders a button of type=button', () => {
     const component = render(<EuiLink />);
     expect(component).toMatchSnapshot();

src/components/link/link.tsx

@@ -76,16 +76,11 @@ const EuiLink = React.forwardRef<
       rel,
       type = 'button',
       onClick,
+      disabled,
       ...rest
     },
     ref
   ) => {
-    const classes = classNames(
-      'euiLink',
-      colorsToClassNameMap[color],
-      className
-    );
-
     const externalLinkIcon = external ? (
       <EuiI18n token="euiLink.external.ariaLabel" default="External link">
         {(ariaLabel: string) => (
@@ -103,9 +98,14 @@ const EuiLink = React.forwardRef<
 
     if (href === undefined) {
       const buttonProps = {
-        className: classes,
+        className: classNames(
+          'euiLink',
+          disabled ? 'euiLink-disabled' : colorsToClassNameMap[color],
+          className
+        ),
         type,
         onClick,
+        disabled,
         ...rest,
       };
 
@@ -119,9 +119,8 @@ const EuiLink = React.forwardRef<
     }
 
     const secureRel = getSecureRelForTarget({ href, target, rel });
-
     const anchorProps = {
-      className: classes,
+      className: classNames('euiLink', colorsToClassNameMap[color], className),
       href,
       target,
       rel: secureRel,