Skip to content

Commit

Permalink
fix(link): remove visited styles by default (#5239)
Browse files Browse the repository at this point in the history
  • Loading branch information
tw15egan authored Feb 3, 2020
1 parent af33d29 commit 3c6bff6
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 6 deletions.
12 changes: 10 additions & 2 deletions packages/components/src/components/link/_link.scss
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,11 @@
}

&:visited {
color: $visited-link;
color: $link-01;
}

&:visited:hover {
color: $hover-primary-text;
color: $link-01;
}
}

Expand All @@ -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;

Expand Down
11 changes: 8 additions & 3 deletions packages/components/src/components/link/link.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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>
1 change: 1 addition & 0 deletions packages/react/src/components/Link/Link-story.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
16 changes: 15 additions & 1 deletion packages/react/src/components/Link/Link.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -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;

0 comments on commit 3c6bff6

Please sign in to comment.