diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx
index 53c1cae581..5e542aa70a 100644
--- a/src/components/Button/Button.jsx
+++ b/src/components/Button/Button.jsx
@@ -6,7 +6,7 @@ import safeRest from '../../safeRest'
import styles from './Button.modules.scss'
-export const getClassName = (variant, invert) => {
+const getClassName = (variant, invert) => {
if (variant === 'primary' && invert) {
warn('Button', 'Primary buttons cannot be inverted.')
@@ -20,7 +20,7 @@ export const getClassName = (variant, invert) => {
return styles[variant]
}
-export const preventDisabling = ({ disabled, ...props }) => {
+const preventDisabling = ({ disabled, ...props }) => {
if (disabled) {
warn('Button', 'Buttons are not able to be disabled.')
}
diff --git a/src/components/Link/ButtonLink/ButtonLink.jsx b/src/components/Link/ButtonLink/ButtonLink.jsx
index 63e32c7d8b..d13ee6b371 100644
--- a/src/components/Link/ButtonLink/ButtonLink.jsx
+++ b/src/components/Link/ButtonLink/ButtonLink.jsx
@@ -1,26 +1,39 @@
import React from 'react'
import PropTypes from 'prop-types'
-
import { Link as ReactRouterLink } from 'react-router-dom'
+import { warn } from '../../../warn'
import safeRest from '../../../safeRest'
-import { getClassName, preventDisabling } from '../../Button/Button'
+
+import styles from './ButtonLink.modules.scss'
+
+const getClassName = (variant, invert) => {
+ if (variant === 'primary' && invert) {
+ warn('Button', 'Primary buttons cannot be inverted.')
+
+ return styles.primary
+ }
+
+ if (invert) {
+ return styles[`${variant}Inverted`]
+ }
+
+ return styles[variant]
+}
/**
* new! v0.21.0
*/
-const ButtonLink = ({ variant, invert, children, ...rest }) => {
- const restNoDisabled = preventDisabling(rest)
-
- return React.createElement(
+const ButtonLink = ({ variant, invert, children, ...rest }) => (
+ React.createElement(
rest.to ? ReactRouterLink : 'a',
{
- ...safeRest(restNoDisabled),
+ ...safeRest(rest),
className: getClassName(variant, invert)
},
children
)
-}
+)
ButtonLink.propTypes = {
/**
* The style.
diff --git a/src/components/Link/ButtonLink/ButtonLink.modules.scss b/src/components/Link/ButtonLink/ButtonLink.modules.scss
new file mode 100644
index 0000000000..5ef2d5aa83
--- /dev/null
+++ b/src/components/Link/ButtonLink/ButtonLink.modules.scss
@@ -0,0 +1,17 @@
+@import '../../Button/Button.modules.scss';
+
+.button {
+ composes: button from '../../Button/Button.modules.scss';
+}
+
+.primary {
+ &:visited {
+ color: inherit;
+ }
+}
+
+.inverted {
+ &:visited {
+ color: $text-color;
+ }
+}
diff --git a/src/components/Link/ButtonLink/__tests__/ButtonLink.spec.jsx b/src/components/Link/ButtonLink/__tests__/ButtonLink.spec.jsx
index 3ae2e7c677..f70adec72d 100644
--- a/src/components/Link/ButtonLink/__tests__/ButtonLink.spec.jsx
+++ b/src/components/Link/ButtonLink/__tests__/ButtonLink.spec.jsx
@@ -58,16 +58,9 @@ describe('Link.Button', () => {
})
it('can not be inverted for primary variant', () => {
- const button = doShallow({ variant: 'primary', invert: true })
+ const primaryButton = doShallow({ variant: 'primary', invert: true })
- expect(button).toHaveClassName('primary')
- expect(warn).toHaveBeenCalled()
- })
-
- it('can not be disabled', () => {
- const button = doShallow({ disabled: true })
-
- expect(button).not.toHaveProp('disabled')
+ expect(primaryButton).toHaveClassName('primary')
expect(warn).toHaveBeenCalled()
})
diff --git a/src/components/Link/ChevronLink/ChevronLink.md b/src/components/Link/ChevronLink/ChevronLink.md
index ec2effce9f..0a5379b066 100644
--- a/src/components/Link/ChevronLink/ChevronLink.md
+++ b/src/components/Link/ChevronLink/ChevronLink.md
@@ -36,7 +36,7 @@ const PurpleBlock = require('../../__docs__/PurpleBlock').default;
### Using Chevron Link for navigation in a multi-step operation
-Chevron Link can be used as a "back" button by specifying the `direction`.
+Chevron Link can be used as a "back" button by specifying the `direction`. These are not suitable for breadcrumb navigation due to the chevron's hover animation.
```
Plans