Merge pull request #1107 from Adslot/fix-button-classname-error

fix: default button classname bug
Adslot · Dec 8, 2020 · ab056fa · ab056fa
2 parents d4fee4a + 442f2f4
commit ab056fa
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 18 deletions.
diff --git 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
@@ -23,7 +23,7 @@ describe('<Button />', () => {
 
   it('should support legacy classname btn-inverse for non-breaking change', () => {
     const { getByTestId } = render(<Button className="btn-inverse">Test</Button>);
-    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('<Button />', () => {
         Test
       </Button>
     );
-    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(<Button inverse>Test</Button>);
-    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(<Button size="large">Test</Button>);
-    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('<Button />', () => {
     const { getByTestId } = render(<Button isLoading bsSize="lg" />);
     expect(getByTestId('spinner')).toHaveClass('spinner-medium');
   });
-
-  it('should render classname with "aui--btn-default" when the style has been explicitly defined', () => {
-    const { getByTestId } = render(<Button className="btn-primary btn-inverse btn-default">Button</Button>);
-    expect(getByTestId('button-wrapper')).not.toHaveClass('aui--btn-default');
-  });
 });
diff --git 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
@@ -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
@@ -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
@@ -13,6 +13,9 @@ import DesignNotes from '../containers/DesignNotes.jsx';
     Error
   </Button>
   <Button bsStyle="default">Default</Button>
+  <Button bsStyle="default" className="some class">
+    Default with Class
+  </Button>
   <Button disabled>Disabled</Button>
   <Button bsStyle="warning" isLoading>
     Loading