fix(link): remove visited styles by default (#5239)

carbon-design-system · Feb 3, 2020 · 3c6bff6 · 3c6bff6
1 parent af33d29
commit 3c6bff6
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 6 deletions.
diff --git a/packages/components/src/components/link/_link.scss b/packages/components/src/components/link/_link.scss
@@ -53,11 +53,11 @@
  }
 
  &:visited {
- color: $visited-link;
+ color: $link-01;
  }
 
  &:visited:hover {
- color: $hover-primary-text;
+ color: $link-01;
  }
  }
 
@@ -70,6 +70,14 @@
  cursor: not-allowed;
  }
 
+ .#{$prefix}--link.#{$prefix}--link--visited:visited {
+ color: $visited-link;
+ }
+
+ .#{$prefix}--link.#{$prefix}--link--visited:visited:hover {
+ color: $hover-primary-text;
+ }
+
  .#{$prefix}--link.#{$prefix}--link--inline {
  text-decoration: underline;
 

diff --git a/packages/components/src/components/link/link.hbs b/packages/components/src/components/link/link.hbs
@@ -5,9 +5,14 @@
  LICENSE file in the root directory of this source tree.
 -->
 
-<a href="#" class="{{@root.prefix}}--link{{#if inline}} {{@root.prefix}}--link--inline{{/if}}">Link</a>
-<a class="{{@root.prefix}}--link{{#if inline}} {{@root.prefix}}--link--inline{{/if}}" aria-disabled="true">Placeholder link</a>
+<a href="#"
+ class="{{@root.prefix}}--link{{#if inline}} {{@root.prefix}}--link--inline{{/if}}{{#if visited}} {{@root.prefix}}--link--inline{{/if}}">Link</a>
+<a href="http://www.google.com"
+ class="{{@root.prefix}}--link {{@root.prefix}}--link--visited {{#if inline}} {{@root.prefix}}--link--inline{{/if}}">Link</a>
+<a class="{{@root.prefix}}--link{{#if inline}} {{@root.prefix}}--link--inline{{/if}}" aria-disabled="true">Placeholder
+ link</a>
 <p class="{{@root.prefix}}--link--disabled{{#if inline}} {{@root.prefix}}--link--inline{{/if}}">Disabled Link</p>
 <div style="width:200px">
- <a href="#" class="{{@root.prefix}}--link{{#if inline}} {{@root.prefix}}--link--inline{{/if}}">Text wrap example for hover, focus, and active state testing.</a>
+ <a href="#" class="{{@root.prefix}}--link{{#if inline}} {{@root.prefix}}--link--inline{{/if}}">Text wrap example for
+ hover, focus, and active state testing.</a>
 </div>
diff --git a/packages/react/src/components/Link/Link-story.js b/packages/react/src/components/Link/Link-story.js
@@ -17,6 +17,7 @@ const props = () => ({
  className: 'some-class',
  href: text('The link href (href)', '#'),
  inline: boolean('Use the in-line variant (inline)', false),
+ visited: boolean('Allow visited styles', false),
  onClick: (handler => evt => {
  evt.preventDefault(); // Prevent link from being followed for demo purpose
  handler(evt);

diff --git a/packages/react/src/components/Link/Link.js b/packages/react/src/components/Link/Link.js
@@ -12,10 +12,19 @@ import { settings } from 'carbon-components';
 
 const { prefix } = settings;
 
-const Link = ({ children, className, href, disabled, inline, ...other }) => {
+const Link = ({
+ children,
+ className,
+ href,
+ disabled,
+ inline,
+ visited,
+ ...other
+}) => {
  const classNames = classnames(`${prefix}--link`, className, {
  [`${prefix}--link--disabled`]: disabled,
  [`${prefix}--link--inline`]: inline,
+ [`${prefix}--link--visited`]: visited,
  });
  const Tag = disabled ? 'p' : 'a';
  return (
@@ -50,6 +59,11 @@ Link.propTypes = {
  * Specify whether you want the inline version of this control
  */
  inline: PropTypes.bool,
+
+ /**
+ * Specify whether you want the link to receive visited styles after the link has been clicked
+ */
+ visited: PropTypes.bool,
 };
 
 export default Link;