cozy-ui 62.10.0 → 62.11.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 +7 -0
- package/package.json +1 -1
- package/react/DropdownText/Readme.md +53 -0
- package/react/DropdownText/index.jsx +79 -0
- package/react/__snapshots__/examples.spec.jsx.snap +336 -229
- package/react/examples.spec.jsx +1 -0
- package/react/index.js +1 -0
- package/transpiled/react/DropdownText/index.js +80 -0
- package/transpiled/react/index.js +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# [62.11.0](https://github.com/cozy/cozy-ui/compare/v62.10.0...v62.11.0) (2022-04-22)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* Add dropdown ([ee214f8](https://github.com/cozy/cozy-ui/commit/ee214f8))
|
|
7
|
+
|
|
1
8
|
# [62.10.0](https://github.com/cozy/cozy-ui/compare/v62.9.1...v62.10.0) (2022-04-21)
|
|
2
9
|
|
|
3
10
|
|
package/package.json
CHANGED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
This component can be used as a trigger to open menus, for example an ActionMenu component. There is also `DropdownButton` which offers the same possibilities, but with the added button wrapper.
|
|
2
|
+
|
|
3
|
+
```jsx
|
|
4
|
+
import DropdownText from 'cozy-ui/transpiled/react/DropdownText'
|
|
5
|
+
import Typography from 'cozy-ui/transpiled/react/Typography'
|
|
6
|
+
import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
|
|
7
|
+
|
|
8
|
+
const variants = [
|
|
9
|
+
'h1',
|
|
10
|
+
'h2',
|
|
11
|
+
'h3',
|
|
12
|
+
'h4',
|
|
13
|
+
'h5',
|
|
14
|
+
'subtitle1',
|
|
15
|
+
'subtitle2',
|
|
16
|
+
'body1',
|
|
17
|
+
'body2',
|
|
18
|
+
'caption'
|
|
19
|
+
]
|
|
20
|
+
|
|
21
|
+
;
|
|
22
|
+
|
|
23
|
+
<>
|
|
24
|
+
<Grid container>
|
|
25
|
+
<Grid item xs={6}>
|
|
26
|
+
Default
|
|
27
|
+
{variants.map((variant, index) => (
|
|
28
|
+
<div key={index} className='u-mb-1'>
|
|
29
|
+
<DropdownText variant={variant}>
|
|
30
|
+
{variant}
|
|
31
|
+
</DropdownText>
|
|
32
|
+
</div>
|
|
33
|
+
))}
|
|
34
|
+
</Grid>
|
|
35
|
+
<Grid item xs={6}>
|
|
36
|
+
Disabled
|
|
37
|
+
{variants.map((variant, index) => (
|
|
38
|
+
<div key={index} className='u-mb-1'>
|
|
39
|
+
<DropdownText variant={variant} disabled>
|
|
40
|
+
{variant}
|
|
41
|
+
</DropdownText>
|
|
42
|
+
</div>
|
|
43
|
+
))}
|
|
44
|
+
</Grid>
|
|
45
|
+
</Grid>
|
|
46
|
+
<DropdownText spaceBetween style={{ border: '1px solid var(--borderMainColor)', width: '100%', marginBottom: '1rem' }}>
|
|
47
|
+
Space between text and icon
|
|
48
|
+
</DropdownText>
|
|
49
|
+
<DropdownText style={{ border: '1px solid var(--borderMainColor)' }}>
|
|
50
|
+
Text with<br />breaking spaces<br />inside content
|
|
51
|
+
</DropdownText>
|
|
52
|
+
</>
|
|
53
|
+
```
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import { makeStyles } from '@material-ui/core/styles'
|
|
4
|
+
|
|
5
|
+
import Typography from '../Typography'
|
|
6
|
+
import Icon from '../Icon'
|
|
7
|
+
import BottomIcon from '../Icons/Bottom'
|
|
8
|
+
|
|
9
|
+
const useStyles = makeStyles(theme => ({
|
|
10
|
+
endIcon: {
|
|
11
|
+
marginLeft: '5px'
|
|
12
|
+
},
|
|
13
|
+
typography: {
|
|
14
|
+
display: 'flex',
|
|
15
|
+
alignItems: 'center',
|
|
16
|
+
width: '100%',
|
|
17
|
+
justifyContent: ({ spaceBetween }) =>
|
|
18
|
+
spaceBetween ? 'space-between' : 'left',
|
|
19
|
+
color: ({ disabled }) =>
|
|
20
|
+
theme.palette.text[disabled ? 'disabled' : 'primary']
|
|
21
|
+
}
|
|
22
|
+
}))
|
|
23
|
+
|
|
24
|
+
const endIconSizeByVariant = {
|
|
25
|
+
h1: 24,
|
|
26
|
+
h2: 17,
|
|
27
|
+
h3: 15,
|
|
28
|
+
h4: 14,
|
|
29
|
+
h5: 13,
|
|
30
|
+
h6: 12,
|
|
31
|
+
body1: 12,
|
|
32
|
+
body2: 11,
|
|
33
|
+
caption: 10,
|
|
34
|
+
subtitle1: 11,
|
|
35
|
+
subtitle2: 10
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
const DropdownText = forwardRef(
|
|
39
|
+
(
|
|
40
|
+
{
|
|
41
|
+
spaceBetween = false,
|
|
42
|
+
variant = 'body1',
|
|
43
|
+
disabled = false,
|
|
44
|
+
children,
|
|
45
|
+
...props
|
|
46
|
+
},
|
|
47
|
+
ref
|
|
48
|
+
) => {
|
|
49
|
+
const styles = useStyles({ spaceBetween, disabled })
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<Typography
|
|
53
|
+
ref={ref}
|
|
54
|
+
classes={{ root: styles.typography }}
|
|
55
|
+
variant={variant}
|
|
56
|
+
{...props}
|
|
57
|
+
>
|
|
58
|
+
{children}
|
|
59
|
+
<Icon
|
|
60
|
+
className={styles.endIcon}
|
|
61
|
+
icon={BottomIcon}
|
|
62
|
+
size={endIconSizeByVariant[variant]}
|
|
63
|
+
/>
|
|
64
|
+
</Typography>
|
|
65
|
+
)
|
|
66
|
+
}
|
|
67
|
+
)
|
|
68
|
+
|
|
69
|
+
DropdownText.propTypes = {
|
|
70
|
+
/** Whether there is a space between the label and the icon */
|
|
71
|
+
spaceBetween: PropTypes.bool,
|
|
72
|
+
/** Variant used by Typography component */
|
|
73
|
+
variant: PropTypes.string,
|
|
74
|
+
/** Whether the component is disabled */
|
|
75
|
+
disabled: PropTypes.bool,
|
|
76
|
+
children: PropTypes.node
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
export default DropdownText
|