cozy-ui 66.2.3 → 66.2.4

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/package.json +1 -1
  3. package/react/CircleButton/index.jsx +5 -1
  4. package/react/MuiCozyTheme/makeOverrides.js +30 -6
  5. package/transpiled/react/CircleButton/index.js +19 -13
  6. package/transpiled/react/MuiCozyTheme/makeOverrides.js +24 -6
package/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ ## [66.2.4](https://github.com/cozy/cozy-ui/compare/v66.2.3...v66.2.4) (2022-05-10)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * Buttons hover on mobile ([9407c76](https://github.com/cozy/cozy-ui/commit/9407c76))
7
+ * CircleButton hover on mobile ([ab9fa0e](https://github.com/cozy/cozy-ui/commit/ab9fa0e))
8
+
1
9
  ## [66.2.3](https://github.com/cozy/cozy-ui/compare/v66.2.2...v66.2.3) (2022-05-09)
2
10
 
3
11
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cozy-ui",
3
- "version": "66.2.3",
3
+ "version": "66.2.4",
4
4
  "description": "Cozy apps UI SDK",
5
5
  "main": "./index.js",
6
6
  "bin": {
package/react/CircleButton/index.jsx CHANGED
@@ -18,7 +18,11 @@ const useStyles = makeStyles(theme => ({
18
18
  active ? theme.palette.primary.contrastText : theme.palette.text.icon,
19
19
  '&:hover': {
20
20
  backgroundColor: ({ active }) =>
21
- active ? theme.palette.primary.dark : theme.palette.action.hover
21
+ active ? theme.palette.primary.dark : theme.palette.action.hover,
22
+ '@media (hover: none)': {
23
+ backgroundColor: ({ active }) =>
24
+ active ? theme.palette.primary.main : 'transparent'
25
+ }
22
26
  }
23
27
  },
24
28
  typography: {
package/react/MuiCozyTheme/makeOverrides.js CHANGED
@@ -106,7 +106,10 @@ const makeSecondaryButtonStyle = (theme, color) => ({
106
106
  backgroundColor: alpha(
107
107
  theme.palette[color].main,
108
108
  theme.palette.action.hoverOpacity
109
- )
109
+ ),
110
+ '@media (hover: none)': {
111
+ backgroundColor: 'transparent'
112
+ }
110
113
  },
111
114
  '&.ghost': {
112
115
  backgroundColor: alpha(
@@ -117,7 +120,13 @@ const makeSecondaryButtonStyle = (theme, color) => ({
117
120
  backgroundColor: alpha(
118
121
  theme.palette[color].main,
119
122
  theme.palette.action.hoverGhostOpacity
120
- )
123
+ ),
124
+ '@media (hover: none)': {
125
+ backgroundColor: alpha(
126
+ theme.palette[color].main,
127
+ theme.palette.action.ghostOpacity
128
+ )
129
+ }
121
130
  }
122
131
  }
123
132
  })
@@ -128,7 +137,10 @@ const makeTextButtonStyle = (theme, color) => ({
128
137
  backgroundColor: alpha(
129
138
  theme.palette[color].main,
130
139
  theme.palette.action.hoverOpacity
131
- )
140
+ ),
141
+ '@media (hover: none)': {
142
+ backgroundColor: 'transparent'
143
+ }
132
144
  }
133
145
  })
134
146
 
@@ -136,7 +148,10 @@ const makeContainedButtonStyle = (theme, color) => ({
136
148
  color: theme.palette[color].contrastText,
137
149
  backgroundColor: theme.palette[color].main,
138
150
  '&:hover': {
139
- backgroundColor: theme.palette[color].dark
151
+ backgroundColor: theme.palette[color].dark,
152
+ '@media (hover: none)': {
153
+ backgroundColor: theme.palette[color].main
154
+ }
140
155
  }
141
156
  })
142
157
 
@@ -207,7 +222,13 @@ const makeOverrides = theme => ({
207
222
  backgroundColor: alpha(
208
223
  theme.palette.primary.main,
209
224
  theme.palette.action.hoverGhostOpacity
210
- )
225
+ ),
226
+ '@media (hover: none)': {
227
+ backgroundColor: alpha(
228
+ theme.palette.primary.main,
229
+ theme.palette.action.ghostOpacity
230
+ )
231
+ }
211
232
  }
212
233
  },
213
234
  '&.customColor': {
@@ -215,7 +236,10 @@ const makeOverrides = theme => ({
215
236
  color: theme.palette.text.primary,
216
237
  borderColor: theme.palette.border.main,
217
238
  '&:hover': {
218
- backgroundColor: theme.palette.action.hover
239
+ backgroundColor: theme.palette.action.hover,
240
+ '@media (hover: none)': {
241
+ backgroundColor: 'transparent'
242
+ }
219
243
  },
220
244
  '&.ghost': {
221
245
  color: theme.palette.primary.main,
package/transpiled/react/CircleButton/index.js CHANGED
@@ -33,14 +33,20 @@ var useStyles = makeStyles(function (theme) {
33
33
  backgroundColor: function backgroundColor(_ref4) {
34
34
  var active = _ref4.active;
35
35
  return active ? theme.palette.primary.dark : theme.palette.action.hover;
36
+ },
37
+ '@media (hover: none)': {
38
+ backgroundColor: function backgroundColor(_ref5) {
39
+ var active = _ref5.active;
40
+ return active ? theme.palette.primary.main : 'transparent';
41
+ }
36
42
  }
37
43
  }
38
44
  },
39
45
  typography: {
40
46
  marginTop: '0.25rem',
41
- color: function color(_ref5) {
42
- var active = _ref5.active,
43
- disabled = _ref5.disabled;
47
+ color: function color(_ref6) {
48
+ var active = _ref6.active,
49
+ disabled = _ref6.disabled;
44
50
  return makeTypoColor({
45
51
  theme: theme,
46
52
  active: active,
@@ -51,16 +57,16 @@ var useStyles = makeStyles(function (theme) {
51
57
  };
52
58
  });
53
59
 
54
- var CircleButton = function CircleButton(_ref6) {
55
- var className = _ref6.className,
56
- label = _ref6.label,
57
- _ref6$variant = _ref6.variant,
58
- variant = _ref6$variant === void 0 ? 'default' : _ref6$variant,
59
- disabled = _ref6.disabled,
60
- _ref6$fullWidth = _ref6.fullWidth,
61
- fullWidth = _ref6$fullWidth === void 0 ? false : _ref6$fullWidth,
62
- children = _ref6.children,
63
- props = _objectWithoutProperties(_ref6, _excluded);
60
+ var CircleButton = function CircleButton(_ref7) {
61
+ var className = _ref7.className,
62
+ label = _ref7.label,
63
+ _ref7$variant = _ref7.variant,
64
+ variant = _ref7$variant === void 0 ? 'default' : _ref7$variant,
65
+ disabled = _ref7.disabled,
66
+ _ref7$fullWidth = _ref7.fullWidth,
67
+ fullWidth = _ref7$fullWidth === void 0 ? false : _ref7$fullWidth,
68
+ children = _ref7.children,
69
+ props = _objectWithoutProperties(_ref7, _excluded);
64
70
 
65
71
  var styles = useStyles({
66
72
  active: variant === 'active',
package/transpiled/react/MuiCozyTheme/makeOverrides.js CHANGED
@@ -79,12 +79,18 @@ var makeSecondaryButtonStyle = function makeSecondaryButtonStyle(theme, color) {
79
79
  color: theme.palette[color].main,
80
80
  borderColor: theme.palette[color].main,
81
81
  '&:hover': {
82
- backgroundColor: alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
82
+ backgroundColor: alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
83
+ '@media (hover: none)': {
84
+ backgroundColor: 'transparent'
85
+ }
83
86
  },
84
87
  '&.ghost': {
85
88
  backgroundColor: alpha(theme.palette[color].main, theme.palette.action.ghostOpacity),
86
89
  '&:hover': {
87
- backgroundColor: alpha(theme.palette[color].main, theme.palette.action.hoverGhostOpacity)
90
+ backgroundColor: alpha(theme.palette[color].main, theme.palette.action.hoverGhostOpacity),
91
+ '@media (hover: none)': {
92
+ backgroundColor: alpha(theme.palette[color].main, theme.palette.action.ghostOpacity)
93
+ }
88
94
  }
89
95
  }
90
96
  };
@@ -94,7 +100,10 @@ var makeTextButtonStyle = function makeTextButtonStyle(theme, color) {
94
100
  return {
95
101
  color: theme.palette[color].main,
96
102
  '&:hover': {
97
- backgroundColor: alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
103
+ backgroundColor: alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
104
+ '@media (hover: none)': {
105
+ backgroundColor: 'transparent'
106
+ }
98
107
  }
99
108
  };
100
109
  };
@@ -104,7 +113,10 @@ var makeContainedButtonStyle = function makeContainedButtonStyle(theme, color) {
104
113
  color: theme.palette[color].contrastText,
105
114
  backgroundColor: theme.palette[color].main,
106
115
  '&:hover': {
107
- backgroundColor: theme.palette[color].dark
116
+ backgroundColor: theme.palette[color].dark,
117
+ '@media (hover: none)': {
118
+ backgroundColor: theme.palette[color].main
119
+ }
108
120
  }
109
121
  };
110
122
  };
@@ -175,7 +187,10 @@ var makeOverrides = function makeOverrides(theme) {
175
187
  '&.ghost': {
176
188
  backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.ghostOpacity),
177
189
  '&:hover': {
178
- backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverGhostOpacity)
190
+ backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverGhostOpacity),
191
+ '@media (hover: none)': {
192
+ backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.ghostOpacity)
193
+ }
179
194
  }
180
195
  },
181
196
  '&.customColor': {
@@ -183,7 +198,10 @@ var makeOverrides = function makeOverrides(theme) {
183
198
  color: theme.palette.text.primary,
184
199
  borderColor: theme.palette.border.main,
185
200
  '&:hover': {
186
- backgroundColor: theme.palette.action.hover
201
+ backgroundColor: theme.palette.action.hover,
202
+ '@media (hover: none)': {
203
+ backgroundColor: 'transparent'
204
+ }
187
205
  },
188
206
  '&.ghost': {
189
207
  color: theme.palette.primary.main,