diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx
index 91f6186a2..932f58024 100644
--- a/src/components/Button/index.jsx
+++ b/src/components/Button/index.jsx
@@ -16,10 +16,6 @@ const Button = props => {
{
'btn-inverse': inverse && !/btn-inverse/.test(className),
'btn-large': size === 'large' || _.includes(['lg', 'large'], bsSize),
- 'aui--btn-default':
- (!bsStyle || bsStyle === 'default') &&
- (!className ||
- ['btn-default', 'btn-inverse', 'btn-default btn-inverse', 'btn-inverse btn-default'].includes(className)),
[`btn-${bsStyle}`]: !_.isEmpty(bsStyle),
'has-anchor': href,
},
@@ -84,6 +80,7 @@ Button.defaultProps = {
inverse: false,
isLoading: false,
size: 'small',
+ bsStyle: 'default',
};
export default Button;
diff --git a/src/components/Button/index.spec.jsx b/src/components/Button/index.spec.jsx
index d8749a133..8acebbcb7 100644
--- a/src/components/Button/index.spec.jsx
+++ b/src/components/Button/index.spec.jsx
@@ -23,7 +23,7 @@ describe('', () => {
it('should support legacy classname btn-inverse for non-breaking change', () => {
const { getByTestId } = render();
- expect(getByTestId('button-wrapper')).toHaveClass('aui--button btn-inverse aui--btn-default');
+ expect(getByTestId('button-wrapper')).toHaveClass('aui--button btn-inverse btn-default');
});
it('should support className prop', () => {
@@ -43,17 +43,17 @@ describe('', () => {
Test
);
- expect(getByTestId('button-wrapper')).toHaveClass('aui--button btn-inverse aui--btn-default');
+ expect(getByTestId('button-wrapper')).toHaveClass('aui--button btn-inverse btn-default');
});
it('should render inverse button with btn-inverse class', () => {
const { getByTestId } = render();
- expect(getByTestId('button-wrapper')).toHaveClass('aui--button btn-inverse aui--btn-default');
+ expect(getByTestId('button-wrapper')).toHaveClass('aui--button btn-inverse btn-default');
});
it('should render large button with btn-large class', () => {
const { getByTestId } = render();
- expect(getByTestId('button-wrapper')).toHaveClass('aui--button btn-large aui--btn-default');
+ expect(getByTestId('button-wrapper')).toHaveClass('aui--button btn-large btn-default');
});
it('should support data-test-selectors', () => {
@@ -75,9 +75,4 @@ describe('', () => {
const { getByTestId } = render();
expect(getByTestId('spinner')).toHaveClass('spinner-medium');
});
-
- it('should render classname with "aui--btn-default" when the style has been explicitly defined', () => {
- const { getByTestId } = render();
- expect(getByTestId('button-wrapper')).not.toHaveClass('aui--btn-default');
- });
});
diff --git a/src/components/Button/styles.scss b/src/components/Button/styles.scss
index bc465731a..5fe153a10 100644
--- a/src/components/Button/styles.scss
+++ b/src/components/Button/styles.scss
@@ -64,7 +64,7 @@
border-color: $color-button-default-hover-border;
}
- &.aui--btn-default {
+ &.btn-default {
background-color: $color-white;
border-color: $color-gray-light;
color: $color-gray-dark;
@@ -156,7 +156,8 @@
}
}
- &.btn-link {
+ &.btn-link,
+ &.btn-link.btn-default {
background-color: transparent;
border-color: transparent;
color: $color-button-link-color;
diff --git a/src/styles/bootstrapOverrides/Button.scss b/src/styles/bootstrapOverrides/Button.scss
index 886cb65fe..a8ab3eed0 100644
--- a/src/styles/bootstrapOverrides/Button.scss
+++ b/src/styles/bootstrapOverrides/Button.scss
@@ -40,7 +40,7 @@
background-color: $color-background-highlighted;
}
- &.aui--btn-default {
+ &.btn-default {
@include button-inverse($color-gray-dark);
border-color: $color-gray-light;
@@ -86,7 +86,7 @@
transform: translateY(1px);
}
- &.aui--btn-default {
+ &.btn-default {
@include aui--button-variant($color-gray-dark, $btn-default-bg, $color-gray-light);
}
diff --git a/www/containers/props.json b/www/containers/props.json
index 1af1a4f12..4777ac186 100644
--- a/www/containers/props.json
+++ b/www/containers/props.json
@@ -656,7 +656,11 @@
]
},
"required": false,
- "description": "PropTypes.oneOf(['primary', 'success', 'info', 'warning', 'danger', 'link'])"
+ "description": "PropTypes.oneOf(['primary', 'success', 'info', 'warning', 'danger', 'link'])",
+ "defaultValue": {
+ "value": "'default'",
+ "computed": false
+ }
},
"className": {
"type": {
diff --git a/www/examples/Button.mdx b/www/examples/Button.mdx
index 6c99844f5..2e1f8b5c4 100644
--- a/www/examples/Button.mdx
+++ b/www/examples/Button.mdx
@@ -13,6 +13,9 @@ import DesignNotes from '../containers/DesignNotes.jsx';
Error
+