@team-monolith/cds 1.102.2 → 1.102.3

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 (3) hide show
  1. package/dist/components/Button.js +9 -5
  2. package/dist/components/SquareButton.js +89 -79
  3. package/package.json +1 -1
package/dist/components/Button.js CHANGED
@@ -220,11 +220,15 @@ export const Button = React.forwardRef(function Button(props, ref) {
220
220
  gap: 8px;
221
221
 
222
222
  border: none;
223
- cursor: pointer;
224
- &:disabled {
225
- cursor: default;
226
- pointer-events: none;
227
- }
223
+
224
+ ${disabled || loading
225
+ ? css `
226
+ cursor: default;
227
+ pointer-events: none;
228
+ `
229
+ : css `
230
+ cursor: pointer;
231
+ `}
228
232
 
229
233
  font-family: ${theme.fontFamily.ui};
230
234
  text-decoration: none;
package/dist/components/SquareButton.js CHANGED
@@ -15,79 +15,85 @@ import { css, useTheme } from "@emotion/react";
15
15
  import React from "react";
16
16
  import { HOVER } from "../utils/hover";
17
17
  import { Spinner } from "./Spinner";
18
- const COLOR_TO_BUTTON_STYLE = (theme, color) => ({
19
- danger: css `
20
- background: ${theme.color.background.danger};
21
- color: ${theme.color.foreground.neutralAlt};
22
- ${HOVER(css `
23
- background: ${theme.color.background.dangerActive};
24
- color: ${theme.color.foreground.neutralAltActive};
25
- `)}
26
- &:disabled {
27
- background: ${theme.color.background.dangerDisabled};
28
- color: ${theme.color.foreground.neutralAltDisabled};
29
- }
30
- `,
31
- grey: css `
32
- background: ${theme.color.background.neutralAlt};
33
- color: ${theme.color.foreground.neutralBase};
34
- ${HOVER(css `
35
- background: ${theme.color.background.neutralAltActive};
36
- color: ${theme.color.foreground.neutralBaseActive};
37
- `)}
38
- &:disabled {
39
- background: ${theme.color.background.neutralAltDisabled};
40
- color: ${theme.color.foreground.neutralBaseDisabled};
41
- }
42
- `,
43
- primary: css `
44
- background: ${theme.color.background.primary};
45
- color: ${theme.color.foreground.neutralAlt};
46
- ${HOVER(css `
47
- background: ${theme.color.background.primaryActive};
48
- color: ${theme.color.foreground.neutralAltActive};
49
- `)}
50
- &:disabled {
51
- background: ${theme.color.background.primaryDisabled};
52
- color: ${theme.color.foreground.neutralAltDisabled};
53
- }
54
- `,
55
- icon: css `
56
- background: none;
57
- color: ${theme.color.foreground.neutralBase};
58
- ${HOVER(css `
59
- background: ${theme.color.blanket.neutralLight};
60
- color: ${theme.color.foreground.neutralBaseActive};
61
- `)}
62
- &:disabled {
63
- background: none;
64
- color: ${theme.color.foreground.neutralBaseDisabled};
65
- }
66
- `,
67
- black: css `
68
- background: ${theme.color.background.inverse};
69
- color: ${theme.color.foreground.neutralAlt};
70
- ${HOVER(css `
71
- background: ${theme.color.background.inverseActive};
72
- color: ${theme.color.foreground.neutralAltActive};
73
- `)}
74
- &:disabled {
75
- background: ${theme.color.background.inverseDisabled};
76
- color: ${theme.color.foreground.neutralAltDisabled};
77
- }
78
- `,
79
- white: css `
80
- background: ${theme.color.background.neutralBase};
81
- color: ${theme.color.foreground.neutralBase};
82
- ${HOVER(css `
83
- background: ${theme.color.background.neutralAltActive};
84
- color: ${theme.color.foreground.neutralBaseActive};
85
- `)}
86
- &:disabled {
87
- background: ${theme.color.background.neutralAltDisabled};
88
- color: ${theme.color.foreground.neutralBaseDisabled};
89
- }
90
- `,
18
+ const COLOR_TO_BUTTON_STYLE = (theme, color, disabled) => ({
19
+ danger: disabled
20
+ ? css `
21
+ background: ${theme.color.background.dangerDisabled};
22
+ color: ${theme.color.foreground.neutralAltDisabled};
23
+ `
24
+ : css `
25
+ background: ${theme.color.background.danger};
26
+ color: ${theme.color.foreground.neutralAlt};
27
+ ${HOVER(css `
28
+ background: ${theme.color.background.dangerActive};
29
+ color: ${theme.color.foreground.neutralAltActive};
30
+ `)}
31
+ `,
32
+ grey: disabled
33
+ ? css `
34
+ background: ${theme.color.background.neutralAltDisabled};
35
+ color: ${theme.color.foreground.neutralBaseDisabled};
36
+ `
37
+ : css `
38
+ background: ${theme.color.background.neutralAlt};
39
+ color: ${theme.color.foreground.neutralBase};
40
+ ${HOVER(css `
41
+ background: ${theme.color.background.neutralAltActive};
42
+ color: ${theme.color.foreground.neutralBaseActive};
43
+ `)}
44
+ `,
45
+ primary: disabled
46
+ ? css `
47
+ background: ${theme.color.background.primaryDisabled};
48
+ color: ${theme.color.foreground.neutralAltDisabled};
49
+ `
50
+ : css `
51
+ background: ${theme.color.background.primary};
52
+ color: ${theme.color.foreground.neutralAlt};
53
+ ${HOVER(css `
54
+ background: ${theme.color.background.primaryActive};
55
+ color: ${theme.color.foreground.neutralAltActive};
56
+ `)}
57
+ `,
58
+ icon: disabled
59
+ ? css `
60
+ background: none;
61
+ color: ${theme.color.foreground.neutralBaseDisabled};
62
+ `
63
+ : css `
64
+ background: none;
65
+ color: ${theme.color.foreground.neutralBase};
66
+ ${HOVER(css `
67
+ background: ${theme.color.blanket.neutralLight};
68
+ color: ${theme.color.foreground.neutralBaseActive};
69
+ `)}
70
+ `,
71
+ black: disabled
72
+ ? css `
73
+ background: ${theme.color.background.inverseDisabled};
74
+ color: ${theme.color.foreground.neutralAltDisabled};
75
+ `
76
+ : css `
77
+ background: ${theme.color.background.inverse};
78
+ color: ${theme.color.foreground.neutralAlt};
79
+ ${HOVER(css `
80
+ background: ${theme.color.background.inverseActive};
81
+ color: ${theme.color.foreground.neutralAltActive};
82
+ `)}
83
+ `,
84
+ white: disabled
85
+ ? css `
86
+ background: ${theme.color.background.neutralAltDisabled};
87
+ color: ${theme.color.foreground.neutralBaseDisabled};
88
+ `
89
+ : css `
90
+ background: ${theme.color.background.neutralBase};
91
+ color: ${theme.color.foreground.neutralBase};
92
+ ${HOVER(css `
93
+ background: ${theme.color.background.neutralAltActive};
94
+ color: ${theme.color.foreground.neutralBaseActive};
95
+ `)}
96
+ `,
91
97
  })[color];
92
98
  const SIZE_TO_BUTTON_STYLE = {
93
99
  large: css `
@@ -144,13 +150,17 @@ export const SquareButton = React.forwardRef(function SquareButton(props, ref) {
144
150
  return (_jsx(Component, Object.assign({ type: Component === "button" || Component === "input" ? "button" : undefined }, other, { ref: ref, className: className, css: [
145
151
  css `
146
152
  border: none;
147
- cursor: pointer;
148
- &:disabled {
149
- cursor: default;
150
- pointer-events: none;
151
- }
153
+
154
+ ${disabled || loading
155
+ ? css `
156
+ cursor: default;
157
+ pointer-events: none;
158
+ `
159
+ : css `
160
+ cursor: pointer;
161
+ `}
152
162
  `,
153
- COLOR_TO_BUTTON_STYLE(theme, color),
163
+ COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled || loading)),
154
164
  SIZE_TO_BUTTON_STYLE[size],
155
165
  ], disabled: disabled || loading, onClick: onClick }, { children: loading ? _jsx(Spinner, {}) : icon })));
156
166
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@team-monolith/cds",
3
- "version": "1.102.2",
3
+ "version": "1.102.3",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "sideEffects": false,