cozy-ui 69.2.0 → 69.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/package.json +1 -1
- package/react/Chips/Readme.md +29 -18
- package/react/Chips/index.jsx +24 -17
- package/react/__snapshots__/examples.spec.jsx.snap +58 -44
- package/transpiled/react/Chips/index.js +9 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# [69.3.0](https://github.com/cozy/cozy-ui/compare/v69.2.0...v69.3.0) (2022-07-07)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* **Chips:** Using classname doesn't break style anymore ([3272df1](https://github.com/cozy/cozy-ui/commit/3272df1))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **Chips:** Add ref forwarding ([8d7513e](https://github.com/cozy/cozy-ui/commit/8d7513e))
|
|
12
|
+
|
|
1
13
|
# [69.2.0](https://github.com/cozy/cozy-ui/compare/v69.1.0...v69.2.0) (2022-07-07)
|
|
2
14
|
|
|
3
15
|
|
package/package.json
CHANGED
package/react/Chips/Readme.md
CHANGED
|
@@ -27,14 +27,14 @@ const initialVariants = [{ default: true, active: false, ghost: false }]
|
|
|
27
27
|
<Grid item xs={12} sm={6} className="u-mb-1" key={JSON.stringify(column)}>
|
|
28
28
|
<Stack spacing="s">
|
|
29
29
|
<Typography>{Object.values(column)[0]}</Typography>
|
|
30
|
-
<
|
|
30
|
+
<div>
|
|
31
31
|
<Chip
|
|
32
32
|
label="Simple chip"
|
|
33
33
|
disabled={Object.values(column)[1]}
|
|
34
34
|
variant={Object.keys(variant).find(key => variant[key])}
|
|
35
35
|
/>
|
|
36
|
-
</
|
|
37
|
-
<
|
|
36
|
+
</div>
|
|
37
|
+
<div>
|
|
38
38
|
<Chip
|
|
39
39
|
icon={<Icon icon={FileOutlineIcon} className="u-ml-half" />}
|
|
40
40
|
label="Clickable chip"
|
|
@@ -42,16 +42,16 @@ const initialVariants = [{ default: true, active: false, ghost: false }]
|
|
|
42
42
|
disabled={Object.values(column)[1]}
|
|
43
43
|
variant={Object.keys(variant).find(key => variant[key])}
|
|
44
44
|
/>
|
|
45
|
-
</
|
|
46
|
-
<
|
|
45
|
+
</div>
|
|
46
|
+
<div>
|
|
47
47
|
<Chip
|
|
48
48
|
avatar={<Avatar textId="Ada Lovelace" text="AL" size='xsmall' />}
|
|
49
49
|
label="Avatar chip"
|
|
50
50
|
disabled={Object.values(column)[1]}
|
|
51
51
|
variant={Object.keys(variant).find(key => variant[key])}
|
|
52
52
|
/>
|
|
53
|
-
</
|
|
54
|
-
<
|
|
53
|
+
</div>
|
|
54
|
+
<div>
|
|
55
55
|
<Chip
|
|
56
56
|
label="Deletable chip"
|
|
57
57
|
clickable
|
|
@@ -59,8 +59,8 @@ const initialVariants = [{ default: true, active: false, ghost: false }]
|
|
|
59
59
|
disabled={Object.values(column)[1]}
|
|
60
60
|
variant={Object.keys(variant).find(key => variant[key])}
|
|
61
61
|
/>
|
|
62
|
-
</
|
|
63
|
-
<
|
|
62
|
+
</div>
|
|
63
|
+
<div>
|
|
64
64
|
<Chip
|
|
65
65
|
icon={<Icon icon={FileOutlineIcon} className="u-ml-half" />}
|
|
66
66
|
label="Deletable chip with icon"
|
|
@@ -69,8 +69,8 @@ const initialVariants = [{ default: true, active: false, ghost: false }]
|
|
|
69
69
|
disabled={Object.values(column)[1]}
|
|
70
70
|
variant={Object.keys(variant).find(key => variant[key])}
|
|
71
71
|
/>
|
|
72
|
-
</
|
|
73
|
-
<
|
|
72
|
+
</div>
|
|
73
|
+
<div>
|
|
74
74
|
<Chip
|
|
75
75
|
icon={<Icon icon={FileOutlineIcon} className="u-ml-half" />}
|
|
76
76
|
label="1 invoice"
|
|
@@ -81,14 +81,25 @@ const initialVariants = [{ default: true, active: false, ghost: false }]
|
|
|
81
81
|
disabled={Object.values(column)[1]}
|
|
82
82
|
variant={Object.keys(variant).find(key => variant[key])}
|
|
83
83
|
/>
|
|
84
|
-
</
|
|
85
|
-
<
|
|
84
|
+
</div>
|
|
85
|
+
<div>
|
|
86
|
+
<Chip
|
|
87
|
+
className="u-ml-1"
|
|
88
|
+
icon={<Icon icon={FileOutlineIcon} className="u-ml-half" />}
|
|
89
|
+
label="Deletable chip with icon and class"
|
|
90
|
+
clickable
|
|
91
|
+
onDelete={() => alert('You clicked on delete icon')}
|
|
92
|
+
disabled={Object.values(column)[1]}
|
|
93
|
+
variant={Object.keys(variant).find(key => variant[key])}
|
|
94
|
+
/>
|
|
95
|
+
</div>
|
|
96
|
+
<div>
|
|
86
97
|
<Chip
|
|
87
98
|
icon={<Icon icon={RightIcon} />}
|
|
88
99
|
disabled={Object.values(column)[1]}
|
|
89
100
|
variant={Object.keys(variant).find(key => variant[key])}
|
|
90
101
|
/>
|
|
91
|
-
</
|
|
102
|
+
</div>
|
|
92
103
|
</Stack>
|
|
93
104
|
</Grid>
|
|
94
105
|
)}
|
|
@@ -124,7 +135,7 @@ const initialVariants = [{ default: true, active: false, ghost: false }]
|
|
|
124
135
|
<Grid item xs={12} sm={6} md={3} className="u-mb-1" key={JSON.stringify(color)}>
|
|
125
136
|
<Stack spacing="s">
|
|
126
137
|
<Typography>{color}</Typography>
|
|
127
|
-
<
|
|
138
|
+
<div>
|
|
128
139
|
<Chip
|
|
129
140
|
icon={<Icon icon={FileOutlineIcon} className="u-ml-half" />}
|
|
130
141
|
label="1 invoice"
|
|
@@ -135,8 +146,8 @@ const initialVariants = [{ default: true, active: false, ghost: false }]
|
|
|
135
146
|
color={color}
|
|
136
147
|
variant={Object.keys(variant).find(key => variant[key])}
|
|
137
148
|
/>
|
|
138
|
-
</
|
|
139
|
-
<
|
|
149
|
+
</div>
|
|
150
|
+
<div>
|
|
140
151
|
<Chip
|
|
141
152
|
icon={<Icon icon={FileOutlineIcon} className="u-ml-half" />}
|
|
142
153
|
label="1 invoice"
|
|
@@ -148,7 +159,7 @@ const initialVariants = [{ default: true, active: false, ghost: false }]
|
|
|
148
159
|
disabled
|
|
149
160
|
variant={Object.keys(variant).find(key => variant[key])}
|
|
150
161
|
/>
|
|
151
|
-
</
|
|
162
|
+
</div>
|
|
152
163
|
</Stack>
|
|
153
164
|
</Grid>
|
|
154
165
|
)}
|
package/react/Chips/index.jsx
CHANGED
|
@@ -1,28 +1,35 @@
|
|
|
1
|
-
import React from 'react'
|
|
1
|
+
import React, { forwardRef } from 'react'
|
|
2
2
|
import cx from 'classnames'
|
|
3
3
|
import PropTypes from 'prop-types'
|
|
4
4
|
import MuiChip from '@material-ui/core/Chip'
|
|
5
5
|
|
|
6
|
-
const Chips = (
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
6
|
+
const Chips = forwardRef(
|
|
7
|
+
(
|
|
8
|
+
{ label, variant = 'default', color = 'primary', className, ...props },
|
|
9
|
+
ref
|
|
10
|
+
) => {
|
|
11
|
+
return (
|
|
12
|
+
<MuiChip
|
|
13
|
+
ref={ref}
|
|
14
|
+
className={cx(className, {
|
|
15
|
+
noLabel: !label,
|
|
16
|
+
ghost: variant === 'ghost',
|
|
17
|
+
[`customColor-${color}`]: color
|
|
18
|
+
})}
|
|
19
|
+
label={label}
|
|
20
|
+
variant={variant === 'active' ? 'default' : 'outlined'}
|
|
21
|
+
color={variant === 'active' ? 'primary' : 'default'}
|
|
22
|
+
{...props}
|
|
23
|
+
/>
|
|
24
|
+
)
|
|
25
|
+
}
|
|
26
|
+
)
|
|
21
27
|
|
|
22
28
|
Chips.propTypes = {
|
|
23
29
|
label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
|
24
30
|
variant: PropTypes.oneOf(['default', 'active', 'ghost']),
|
|
25
|
-
color: PropTypes.oneOf(['primary', 'success', 'error', 'warning', 'info'])
|
|
31
|
+
color: PropTypes.oneOf(['primary', 'success', 'error', 'warning', 'info']),
|
|
32
|
+
className: PropTypes.string
|
|
26
33
|
}
|
|
27
34
|
|
|
28
35
|
export default Chips
|
|
@@ -630,85 +630,99 @@ exports[`Chips should render examples: Chips 1`] = `
|
|
|
630
630
|
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6\\">
|
|
631
631
|
<div class=\\"styles__Stack--s___22WMg\\">
|
|
632
632
|
<p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">default</p>
|
|
633
|
-
<
|
|
633
|
+
<div>
|
|
634
634
|
<div class=\\"MuiChip-root customColor-primary MuiChip-outlined\\"><span class=\\"MuiChip-label\\">Simple chip</span></div>
|
|
635
|
-
</
|
|
636
|
-
<
|
|
635
|
+
</div>
|
|
636
|
+
<div>
|
|
637
637
|
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined MuiChip-clickable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
638
638
|
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
639
639
|
</svg><span class=\\"MuiChip-label\\">Clickable chip</span></div>
|
|
640
|
-
</
|
|
641
|
-
<
|
|
640
|
+
</div>
|
|
641
|
+
<div>
|
|
642
642
|
<div class=\\"MuiChip-root customColor-primary MuiChip-outlined\\">
|
|
643
643
|
<div class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna MuiChip-avatar\\" style=\\"background-color: rgb(253, 116, 97); --circleSize: 16px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">AL</span></div><span class=\\"MuiChip-label\\">Avatar chip</span>
|
|
644
644
|
</div>
|
|
645
|
-
</
|
|
646
|
-
<
|
|
645
|
+
</div>
|
|
646
|
+
<div>
|
|
647
647
|
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><span class=\\"MuiChip-label\\">Deletable chip</span><svg class=\\"MuiSvgIcon-root MuiChip-deleteIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\">
|
|
648
648
|
<path d=\\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\\"></path>
|
|
649
649
|
</svg></div>
|
|
650
|
-
</
|
|
651
|
-
<
|
|
650
|
+
</div>
|
|
651
|
+
<div>
|
|
652
652
|
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
653
653
|
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
654
654
|
</svg><span class=\\"MuiChip-label\\">Deletable chip with icon</span><svg class=\\"MuiSvgIcon-root MuiChip-deleteIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\">
|
|
655
655
|
<path d=\\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\\"></path>
|
|
656
656
|
</svg></div>
|
|
657
|
-
</
|
|
658
|
-
<
|
|
657
|
+
</div>
|
|
658
|
+
<div>
|
|
659
659
|
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
660
660
|
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
661
661
|
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
662
662
|
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
663
663
|
</svg></div>
|
|
664
|
-
</
|
|
665
|
-
<
|
|
664
|
+
</div>
|
|
665
|
+
<div>
|
|
666
|
+
<div class=\\"MuiButtonBase-root MuiChip-root u-ml-1 customColor-primary MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
667
|
+
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
668
|
+
</svg><span class=\\"MuiChip-label\\">Deletable chip with icon and class</span><svg class=\\"MuiSvgIcon-root MuiChip-deleteIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\">
|
|
669
|
+
<path d=\\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\\"></path>
|
|
670
|
+
</svg></div>
|
|
671
|
+
</div>
|
|
672
|
+
<div>
|
|
666
673
|
<div class=\\"MuiChip-root noLabel customColor-primary MuiChip-outlined\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
667
674
|
<path fill-rule=\\"evenodd\\" d=\\"M12.707 7.293l-6-6a.999.999 0 10-1.414 1.414L10.586 8l-5.293 5.293a.999.999 0 101.414 1.414l6-6a.999.999 0 000-1.414\\"></path>
|
|
668
675
|
</svg><span class=\\"MuiChip-label\\"></span></div>
|
|
669
|
-
</
|
|
676
|
+
</div>
|
|
670
677
|
</div>
|
|
671
678
|
</div>
|
|
672
679
|
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6\\">
|
|
673
680
|
<div class=\\"styles__Stack--s___22WMg\\">
|
|
674
681
|
<p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">disabled</p>
|
|
675
|
-
<
|
|
682
|
+
<div>
|
|
676
683
|
<div class=\\"MuiChip-root customColor-primary MuiChip-outlined Mui-disabled\\" aria-disabled=\\"true\\"><span class=\\"MuiChip-label\\">Simple chip</span></div>
|
|
677
|
-
</
|
|
678
|
-
<
|
|
684
|
+
</div>
|
|
685
|
+
<div>
|
|
679
686
|
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined Mui-disabled MuiChip-clickable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
680
687
|
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
681
688
|
</svg><span class=\\"MuiChip-label\\">Clickable chip</span></div>
|
|
682
|
-
</
|
|
683
|
-
<
|
|
689
|
+
</div>
|
|
690
|
+
<div>
|
|
684
691
|
<div class=\\"MuiChip-root customColor-primary MuiChip-outlined Mui-disabled\\" aria-disabled=\\"true\\">
|
|
685
692
|
<div class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna MuiChip-avatar\\" style=\\"background-color: rgb(253, 116, 97); --circleSize: 16px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">AL</span></div><span class=\\"MuiChip-label\\">Avatar chip</span>
|
|
686
693
|
</div>
|
|
687
|
-
</
|
|
688
|
-
<
|
|
694
|
+
</div>
|
|
695
|
+
<div>
|
|
689
696
|
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><span class=\\"MuiChip-label\\">Deletable chip</span><svg class=\\"MuiSvgIcon-root MuiChip-deleteIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\">
|
|
690
697
|
<path d=\\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\\"></path>
|
|
691
698
|
</svg></div>
|
|
692
|
-
</
|
|
693
|
-
<
|
|
699
|
+
</div>
|
|
700
|
+
<div>
|
|
694
701
|
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
695
702
|
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
696
703
|
</svg><span class=\\"MuiChip-label\\">Deletable chip with icon</span><svg class=\\"MuiSvgIcon-root MuiChip-deleteIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\">
|
|
697
704
|
<path d=\\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\\"></path>
|
|
698
705
|
</svg></div>
|
|
699
|
-
</
|
|
700
|
-
<
|
|
706
|
+
</div>
|
|
707
|
+
<div>
|
|
701
708
|
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
702
709
|
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
703
710
|
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
704
711
|
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
705
712
|
</svg></div>
|
|
706
|
-
</
|
|
707
|
-
<
|
|
713
|
+
</div>
|
|
714
|
+
<div>
|
|
715
|
+
<div class=\\"MuiButtonBase-root MuiChip-root u-ml-1 customColor-primary MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
716
|
+
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
717
|
+
</svg><span class=\\"MuiChip-label\\">Deletable chip with icon and class</span><svg class=\\"MuiSvgIcon-root MuiChip-deleteIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\">
|
|
718
|
+
<path d=\\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\\"></path>
|
|
719
|
+
</svg></div>
|
|
720
|
+
</div>
|
|
721
|
+
<div>
|
|
708
722
|
<div class=\\"MuiChip-root noLabel customColor-primary MuiChip-outlined Mui-disabled\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
709
723
|
<path fill-rule=\\"evenodd\\" d=\\"M12.707 7.293l-6-6a.999.999 0 10-1.414 1.414L10.586 8l-5.293 5.293a.999.999 0 101.414 1.414l6-6a.999.999 0 000-1.414\\"></path>
|
|
710
724
|
</svg><span class=\\"MuiChip-label\\"></span></div>
|
|
711
|
-
</
|
|
725
|
+
</div>
|
|
712
726
|
</div>
|
|
713
727
|
</div>
|
|
714
728
|
</div>
|
|
@@ -725,77 +739,77 @@ exports[`Chips should render examples: Chips 2`] = `
|
|
|
725
739
|
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
|
|
726
740
|
<div class=\\"styles__Stack--s___22WMg\\">
|
|
727
741
|
<p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">success</p>
|
|
728
|
-
<
|
|
742
|
+
<div>
|
|
729
743
|
<div class=\\"MuiButtonBase-root MuiChip-root customColor-success MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
730
744
|
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
731
745
|
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
732
746
|
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
733
747
|
</svg></div>
|
|
734
|
-
</
|
|
735
|
-
<
|
|
748
|
+
</div>
|
|
749
|
+
<div>
|
|
736
750
|
<div class=\\"MuiButtonBase-root MuiChip-root customColor-success MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
737
751
|
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
738
752
|
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
739
753
|
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
740
754
|
</svg></div>
|
|
741
|
-
</
|
|
755
|
+
</div>
|
|
742
756
|
</div>
|
|
743
757
|
</div>
|
|
744
758
|
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
|
|
745
759
|
<div class=\\"styles__Stack--s___22WMg\\">
|
|
746
760
|
<p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">error</p>
|
|
747
|
-
<
|
|
761
|
+
<div>
|
|
748
762
|
<div class=\\"MuiButtonBase-root MuiChip-root customColor-error MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
749
763
|
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
750
764
|
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
751
765
|
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
752
766
|
</svg></div>
|
|
753
|
-
</
|
|
754
|
-
<
|
|
767
|
+
</div>
|
|
768
|
+
<div>
|
|
755
769
|
<div class=\\"MuiButtonBase-root MuiChip-root customColor-error MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
756
770
|
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
757
771
|
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
758
772
|
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
759
773
|
</svg></div>
|
|
760
|
-
</
|
|
774
|
+
</div>
|
|
761
775
|
</div>
|
|
762
776
|
</div>
|
|
763
777
|
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
|
|
764
778
|
<div class=\\"styles__Stack--s___22WMg\\">
|
|
765
779
|
<p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">warning</p>
|
|
766
|
-
<
|
|
780
|
+
<div>
|
|
767
781
|
<div class=\\"MuiButtonBase-root MuiChip-root customColor-warning MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
768
782
|
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
769
783
|
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
770
784
|
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
771
785
|
</svg></div>
|
|
772
|
-
</
|
|
773
|
-
<
|
|
786
|
+
</div>
|
|
787
|
+
<div>
|
|
774
788
|
<div class=\\"MuiButtonBase-root MuiChip-root customColor-warning MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
775
789
|
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
776
790
|
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
777
791
|
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
778
792
|
</svg></div>
|
|
779
|
-
</
|
|
793
|
+
</div>
|
|
780
794
|
</div>
|
|
781
795
|
</div>
|
|
782
796
|
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
|
|
783
797
|
<div class=\\"styles__Stack--s___22WMg\\">
|
|
784
798
|
<p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">info</p>
|
|
785
|
-
<
|
|
799
|
+
<div>
|
|
786
800
|
<div class=\\"MuiButtonBase-root MuiChip-root customColor-info MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
787
801
|
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
788
802
|
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
789
803
|
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
790
804
|
</svg></div>
|
|
791
|
-
</
|
|
792
|
-
<
|
|
805
|
+
</div>
|
|
806
|
+
<div>
|
|
793
807
|
<div class=\\"MuiButtonBase-root MuiChip-root customColor-info MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
794
808
|
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
795
809
|
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
796
810
|
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
797
811
|
</svg></div>
|
|
798
|
-
</
|
|
812
|
+
</div>
|
|
799
813
|
</div>
|
|
800
814
|
</div>
|
|
801
815
|
</div>
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
-
var _excluded = ["label", "variant", "color"];
|
|
5
|
-
import React from 'react';
|
|
4
|
+
var _excluded = ["label", "variant", "color", "className"];
|
|
5
|
+
import React, { forwardRef } from 'react';
|
|
6
6
|
import cx from 'classnames';
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
8
|
import MuiChip from '@material-ui/core/Chip';
|
|
9
|
-
|
|
10
|
-
var Chips = function Chips(_ref) {
|
|
9
|
+
var Chips = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
11
10
|
var label = _ref.label,
|
|
12
11
|
_ref$variant = _ref.variant,
|
|
13
12
|
variant = _ref$variant === void 0 ? 'default' : _ref$variant,
|
|
14
13
|
_ref$color = _ref.color,
|
|
15
14
|
color = _ref$color === void 0 ? 'primary' : _ref$color,
|
|
15
|
+
className = _ref.className,
|
|
16
16
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
17
17
|
|
|
18
18
|
return /*#__PURE__*/React.createElement(MuiChip, _extends({
|
|
19
|
-
|
|
19
|
+
ref: ref,
|
|
20
|
+
className: cx(className, _defineProperty({
|
|
20
21
|
noLabel: !label,
|
|
21
22
|
ghost: variant === 'ghost'
|
|
22
23
|
}, "customColor-".concat(color), color)),
|
|
@@ -24,11 +25,11 @@ var Chips = function Chips(_ref) {
|
|
|
24
25
|
variant: variant === 'active' ? 'default' : 'outlined',
|
|
25
26
|
color: variant === 'active' ? 'primary' : 'default'
|
|
26
27
|
}, props));
|
|
27
|
-
};
|
|
28
|
-
|
|
28
|
+
});
|
|
29
29
|
Chips.propTypes = {
|
|
30
30
|
label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
|
31
31
|
variant: PropTypes.oneOf(['default', 'active', 'ghost']),
|
|
32
|
-
color: PropTypes.oneOf(['primary', 'success', 'error', 'warning', 'info'])
|
|
32
|
+
color: PropTypes.oneOf(['primary', 'success', 'error', 'warning', 'info']),
|
|
33
|
+
className: PropTypes.string
|
|
33
34
|
};
|
|
34
35
|
export default Chips;
|