1.0.0-beta7

Author: unknown

README.txt

@@ -1,6 +1,6 @@
 MDB 5 React
 
-Version: FREE 1.0.0-beta5
+Version: FREE 1.0.0-beta7
 
 Documentation:
 https://mdbootstrap.com/docs/b5/react/

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-react-ui-kit-demo",
-  "version": "1.0.0-beta5",
+  "version": "1.0.0-beta7",
   "main": "index.js",
   "repository": {
     "type": "git",

app/src/components/Button/Button.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import clsx from 'clsx';
 import type { ButtonProps } from './types';
+import MDBRipple from '../../methods/Ripple/Ripple';
 
 const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, ButtonProps>(
   (
@@ -17,6 +18,7 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
       block,
       active,
       toggle,
+      noRipple,
       tag: Tag,
       ...props
     },
@@ -25,6 +27,7 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
     const [isActive, setActive] = useState(active ? active : false);
 
     let btnColor;
+    const waveColor = (color && ['light', 'link'].includes(color as string)) || outline ? 'dark' : 'light';
 
     if (color !== 'none') {
       if (outline) {
@@ -58,7 +61,7 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
       Tag = 'a';
     }
 
-    return (
+    return ['hr', 'img', 'input'].includes(Tag) || noRipple ? (
       <Tag
         className={classes}
         onClick={
@@ -75,10 +78,29 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
       >
         {children}
       </Tag>
+    ) : (
+      <MDBRipple
+        rippleTag={Tag}
+        rippleColor={waveColor}
+        className={classes}
+        onClick={
+          toggle
+            ? () => {
+                setActive(!isActive);
+              }
+            : undefined
+        }
+        disabled={disabled && Tag === 'button' ? true : undefined}
+        href={href}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </MDBRipple>
     );
   }
 );
 
-MDBBtn.defaultProps = { tag: 'button', type: 'button', role: 'button' };
+MDBBtn.defaultProps = { tag: 'button', type: 'button', role: 'button', color: 'primary' };
 
 export default MDBBtn;

app/src/components/Button/index.d.ts

@@ -16,6 +16,7 @@ declare const MDBBtn: React.FunctionComponent<{
   toggle?: boolean;
   target?: string;
   value?: string | number;
+  noRipple?: boolean;
   tag?: React.ComponentProps<any>;
   [rest: string]: any;
 }>;

app/src/components/Button/types.tsx

@@ -14,6 +14,7 @@ type ButtonProps = {
   toggle?: boolean;
   target?: string;
   value?: string | number;
+  noRipple?: boolean;
   tag?: React.ComponentProps<any>;
   [rest: string]: any;
 };

app/src/components/Popover/Popover.tsx

@@ -120,7 +120,7 @@ const MDBPopover: React.FC<PopoverProps> = ({
 MDBPopover.defaultProps = {
   tag: MDBBtn,
   popperTag: 'div',
-  placement: 'top',
+  placement: 'bottom',
 };
 
 export default MDBPopover;

app/src/methods/Ripple/Ripple.tsx

@@ -229,6 +229,6 @@ const MDBRipple: React.FC<RippleProps> = React.forwardRef<HTMLAllCollection, Rip
   }
 );
 
-MDBRipple.defaultProps = { rippleTag: MDBBtn, rippleDuration: 500, rippleRadius: 0, rippleColor: 'dark' };
+MDBRipple.defaultProps = { rippleTag: 'div', rippleDuration: 500, rippleRadius: 0, rippleColor: 'dark' };
 
 export default MDBRipple;

dist/css/mdb.min.css

@@ -53,6 +53,7 @@ declare const MDBBtn: React$1.FunctionComponent<{
   toggle?: boolean;
   target?: string;
   value?: string | number;
+  noRipple?: boolean;
   tag?: React$1.ComponentProps<any>;
   [rest: string]: any;
 }>;