Skip to content

Commit ba4a9af

Browse files
author
unknown
committed
1.0.0-beta7
1 parent 4275b83 commit ba4a9af

File tree

142 files changed

+1982
-1553
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

142 files changed

+1982
-1553
lines changed

‎README.txt

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MDB 5 React
22

3-
Version: FREE 1.0.0-beta5
3+
Version: FREE 1.0.0-beta7
44

55
Documentation:
66
https://mdbootstrap.com/docs/b5/react/

‎app/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mdb-react-ui-kit-demo",
3-
"version": "1.0.0-beta5",
3+
"version": "1.0.0-beta7",
44
"main": "index.js",
55
"repository": {
66
"type": "git",

‎app/src/components/Button/Button.tsx

+24-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState } from 'react';
22
import clsx from 'clsx';
33
import type { ButtonProps } from './types';
4+
import MDBRipple from '../../methods/Ripple/Ripple';
45

56
const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, ButtonProps>(
67
(
@@ -17,6 +18,7 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
1718
block,
1819
active,
1920
toggle,
21+
noRipple,
2022
tag: Tag,
2123
...props
2224
},
@@ -25,6 +27,7 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
2527
const [isActive, setActive] = useState(active ? active : false);
2628

2729
let btnColor;
30+
const waveColor = (color && ['light', 'link'].includes(color as string)) || outline ? 'dark' : 'light';
2831

2932
if (color !== 'none') {
3033
if (outline) {
@@ -58,7 +61,7 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
5861
Tag = 'a';
5962
}
6063

61-
return (
64+
return ['hr', 'img', 'input'].includes(Tag) || noRipple ? (
6265
<Tag
6366
className={classes}
6467
onClick={
@@ -75,10 +78,29 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
7578
>
7679
{children}
7780
</Tag>
81+
) : (
82+
<MDBRipple
83+
rippleTag={Tag}
84+
rippleColor={waveColor}
85+
className={classes}
86+
onClick={
87+
toggle
88+
? () => {
89+
setActive(!isActive);
90+
}
91+
: undefined
92+
}
93+
disabled={disabled && Tag === 'button' ? true : undefined}
94+
href={href}
95+
ref={ref}
96+
{...props}
97+
>
98+
{children}
99+
</MDBRipple>
78100
);
79101
}
80102
);
81103

82-
MDBBtn.defaultProps = { tag: 'button', type: 'button', role: 'button' };
104+
MDBBtn.defaultProps = { tag: 'button', type: 'button', role: 'button', color: 'primary' };
83105

84106
export default MDBBtn;

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

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ declare const MDBBtn: React.FunctionComponent<{
1616
toggle?: boolean;
1717
target?: string;
1818
value?: string | number;
19+
noRipple?: boolean;
1920
tag?: React.ComponentProps<any>;
2021
[rest: string]: any;
2122
}>;

‎app/src/components/Button/types.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ type ButtonProps = {
1414
toggle?: boolean;
1515
target?: string;
1616
value?: string | number;
17+
noRipple?: boolean;
1718
tag?: React.ComponentProps<any>;
1819
[rest: string]: any;
1920
};

‎app/src/components/Popover/Popover.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ const MDBPopover: React.FC<PopoverProps> = ({
120120
MDBPopover.defaultProps = {
121121
tag: MDBBtn,
122122
popperTag: 'div',
123-
placement: 'top',
123+
placement: 'bottom',
124124
};
125125

126126
export default MDBPopover;

‎app/src/methods/Ripple/Ripple.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,6 @@ const MDBRipple: React.FC<RippleProps> = React.forwardRef<HTMLAllCollection, Rip
229229
}
230230
);
231231

232-
MDBRipple.defaultProps = { rippleTag: MDBBtn, rippleDuration: 500, rippleRadius: 0, rippleColor: 'dark' };
232+
MDBRipple.defaultProps = { rippleTag: 'div', rippleDuration: 500, rippleRadius: 0, rippleColor: 'dark' };
233233

234234
export default MDBRipple;

‎dist/css/mdb.min.css

+5-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ declare const MDBBtn: React$1.FunctionComponent<{
5353
toggle?: boolean;
5454
target?: string;
5555
value?: string | number;
56+
noRipple?: boolean;
5657
tag?: React$1.ComponentProps<any>;
5758
[rest: string]: any;
5859
}>;

‎dist/mdb-react-ui-kit.esm.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/mdb-react-ui-kit.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/scss/bootstrap-rtl-fix/_accordion.scss

+28-31
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,17 @@
1010
padding: $accordion-button-padding-y $accordion-button-padding-x;
1111
@include font-size($font-size-base);
1212
color: $accordion-button-color;
13+
text-align: left; // Reset button style
1314
background-color: $accordion-button-bg;
14-
border: $accordion-border-width solid $accordion-border-color;
15+
border: 0;
1516
@include border-radius(0);
1617
overflow-anchor: none;
1718
@include transition($accordion-transition);
1819

19-
&.collapsed {
20-
border-bottom-width: 0;
21-
}
22-
2320
&:not(.collapsed) {
2421
color: $accordion-button-active-color;
2522
background-color: $accordion-button-active-bg;
23+
box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;
2624

2725
&::after {
2826
background-image: escape-svg($accordion-button-active-icon);
@@ -60,33 +58,37 @@
6058
}
6159

6260
.accordion-item {
61+
background-color: $accordion-bg;
62+
border: $accordion-border-width solid $accordion-border-color;
63+
6364
&:first-of-type {
65+
@include border-top-radius($accordion-border-radius);
66+
6467
.accordion-button {
65-
@include border-top-radius($accordion-border-radius);
68+
@include border-top-radius($accordion-inner-border-radius);
6669
}
6770
}
6871

72+
&:not(:first-of-type) {
73+
border-top: 0;
74+
}
75+
76+
// Only set a border-radius on the last item if the accordion is collapsed
6977
&:last-of-type {
78+
@include border-bottom-radius($accordion-border-radius);
79+
7080
.accordion-button {
71-
// Only set a border-radius on the last item if the accordion is collapsed
7281
&.collapsed {
73-
border-bottom-width: $accordion-border-width;
74-
@include border-bottom-radius($accordion-border-radius);
82+
@include border-bottom-radius($accordion-inner-border-radius);
7583
}
7684
}
7785

7886
.accordion-collapse {
79-
border-bottom-width: $accordion-border-width;
8087
@include border-bottom-radius($accordion-border-radius);
8188
}
8289
}
8390
}
8491

85-
.accordion-collapse {
86-
border: solid $accordion-border-color;
87-
border-width: 0 $accordion-border-width;
88-
}
89-
9092
.accordion-body {
9193
padding: $accordion-body-padding-y $accordion-body-padding-x;
9294
}
@@ -96,29 +98,24 @@
9698
// Remove borders and border-radius to keep accordion items edge-to-edge.
9799

98100
.accordion-flush {
99-
.accordion-button {
100-
border-right: 0;
101-
border-left: 0;
102-
@include border-radius(0);
103-
}
104-
105101
.accordion-collapse {
106102
border-width: 0;
107103
}
108104

109105
.accordion-item {
110-
&:first-of-type {
111-
.accordion-button {
112-
border-top-width: 0;
113-
@include border-top-radius(0);
114-
}
106+
border-right: 0;
107+
border-left: 0;
108+
@include border-radius(0);
109+
110+
&:first-child {
111+
border-top: 0;
112+
}
113+
&:last-child {
114+
border-bottom: 0;
115115
}
116116

117-
&:last-of-type {
118-
.accordion-button.collapsed {
119-
border-bottom-width: 0;
120-
@include border-bottom-radius(0);
121-
}
117+
.accordion-button {
118+
@include border-radius(0);
122119
}
123120
}
124121
}

‎dist/scss/bootstrap-rtl-fix/_alert.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,14 @@
4242
// Generate contextual modifier classes for colorizing the alert.
4343

4444
@each $state, $value in $theme-colors {
45-
$background: shift-color($value, $alert-bg-scale);
46-
$border: shift-color($value, $alert-border-scale);
47-
$color: shift-color($value, $alert-color-scale);
48-
@if (contrast-ratio($background, $color) < $min-contrast-ratio) {
49-
$color: mix($value, color-contrast($background), abs($alert-color-scale));
45+
$alert-background: shift-color($value, $alert-bg-scale);
46+
$alert-border: shift-color($value, $alert-border-scale);
47+
$alert-color: shift-color($value, $alert-color-scale);
48+
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
49+
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
5050
}
5151
.alert-#{$state} {
52-
@include alert-variant($background, $border, $color);
52+
@include alert-variant($alert-background, $alert-border, $alert-color);
5353
}
5454
}
5555
// scss-docs-end alert-modifiers

‎dist/scss/bootstrap-rtl-fix/_breadcrumb.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,10 @@
1818
float: left; // Suppress inline spacings and underlining of the separator
1919
padding-right: $breadcrumb-item-padding-x;
2020
color: $breadcrumb-divider-color;
21-
content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{'/*!rtl:'}
22-
var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{'*/'};
21+
content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{'/*!rtl:'} var(
22+
--#{$variable-prefix}breadcrumb-divider,
23+
escape-svg($breadcrumb-divider-flipped)
24+
) #{'*/'};
2325
}
2426
}
2527

‎dist/scss/bootstrap-rtl-fix/_buttons.scss

+4-12
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
// Alternate buttons
5555
//
5656

57+
// scss-docs-start btn-variant-loops
5758
@each $color, $value in $theme-colors {
5859
.btn-#{$color} {
5960
@include button-variant($value, $value);
@@ -65,6 +66,7 @@
6566
@include button-outline-variant($value);
6667
}
6768
}
69+
// scss-docs-end btn-variant-loops
6870

6971
//
7072
// Link buttons
@@ -98,19 +100,9 @@
98100
//
99101

100102
.btn-lg {
101-
@include button-size(
102-
$btn-padding-y-lg,
103-
$btn-padding-x-lg,
104-
$btn-font-size-lg,
105-
$btn-border-radius-lg
106-
);
103+
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
107104
}
108105

109106
.btn-sm {
110-
@include button-size(
111-
$btn-padding-y-sm,
112-
$btn-padding-x-sm,
113-
$btn-font-size-sm,
114-
$btn-border-radius-sm
115-
);
107+
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
116108
}

‎dist/scss/bootstrap-rtl-fix/_card.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,7 @@
6969
}
7070

7171
+ .card-link {
72-
/*!rtl:ignore*/
73-
margin-left: 5px;
72+
margin-left: $card-spacer-x;
7473
}
7574
}
7675

0 commit comments

Comments
 (0)