Merge pull request #3167 from oswaldoacauan/fix-button

Fix HTML5 Button component className inheritance

bigbluebutton-html5/imports/ui/components/button/component.jsx

@@ -122,6 +122,7 @@ export default class Button extends BaseButton {
       tagName,
       className,
       iconRight,
+      ...otherProps,
     } = this.props;
 
     const Component = tagName;
@@ -134,7 +135,7 @@ export default class Button extends BaseButton {
     return (
       <Component
         className={cx(this._getClassNames(), className)}
-        {...this.props}>
+        {...otherProps}>
         {this[renderLeftFuncName]()}
         {this[renderRightFuncName]()}
       </Component>
@@ -147,12 +148,13 @@ export default class Button extends BaseButton {
       className,
       size,
       iconRight,
+      ...otherProps,
     } = this.props;
 
     const Component = tagName;
 
     return (
-      <span className={cx(styles[size], styles.buttonWrapper, className)} {...this.props}>
+      <span className={cx(styles[size], styles.buttonWrapper, className)} {...otherProps}>
         {!iconRight ? null : this.renderLabel(true)}
         <Component className={cx(this._getClassNames())} aria-labelledby={this.labelId}>
           {this.renderIcon()}

bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx

@@ -38,6 +38,7 @@ class NavBar extends Component {
           ghost={true}
           circle={true}
           icon={'user'}
+          className={styles.btn}
         />
         </div>
         <div className={styles.center}>

bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss

@@ -35,3 +35,7 @@
   margin: 0;
   padding: 0;
 }
+
+.btn {
+  border: 10px solid red;
+}