carbon-react 126.1.0 → 126.2.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.
Files changed (15) hide show
  1. package/esm/components/button/button-types.style.d.ts +2 -0
  2. package/esm/components/button/button-types.style.js +100 -60
  3. package/esm/components/button/button.component.d.ts +1 -1
  4. package/esm/components/button/button.component.js +13 -11
  5. package/esm/components/button/button.config.js +1 -1
  6. package/esm/components/button/button.style.d.ts +1 -0
  7. package/esm/components/button/button.style.js +4 -0
  8. package/lib/components/button/button-types.style.d.ts +2 -0
  9. package/lib/components/button/button-types.style.js +100 -60
  10. package/lib/components/button/button.component.d.ts +1 -1
  11. package/lib/components/button/button.component.js +12 -10
  12. package/lib/components/button/button.config.js +1 -1
  13. package/lib/components/button/button.style.d.ts +1 -0
  14. package/lib/components/button/button.style.js +5 -1
  15. package/package.json +1 -1
package/esm/components/button/button-types.style.d.ts CHANGED
@@ -4,5 +4,7 @@ declare const _default: (isDisabled?: boolean, destructive?: boolean) => {
4
4
  tertiary: string;
5
5
  dashed: string;
6
6
  darkBackground: string;
7
+ "gradient-grey": string;
8
+ "gradient-white": string;
7
9
  };
8
10
  export default _default;
package/esm/components/button/button-types.style.js CHANGED
@@ -11,6 +11,27 @@ function makeColors(color) {
11
11
  }
12
12
  `;
13
13
  }
14
+ const disabledImageStyle = `
15
+ img, svg {
16
+ opacity: 0.3;
17
+ }
18
+ `;
19
+ const gradientDisabledStyle = `
20
+ background: transparent;
21
+ border-color: var(--colorsActionDisabled500);
22
+ ${makeColors("var(--colorsActionMajorYin030)")};
23
+ &:hover {
24
+ border-color: var(--colorsActionDisabled500);
25
+ ${makeColors("var(--colorsActionMajorYin030)")};
26
+ }
27
+ ${disabledImageStyle}
28
+ `;
29
+ const gradientSharedStyle = `
30
+ border: 2px solid transparent;
31
+ &:hover {
32
+ background: linear-gradient(to right, #d6f8df, #d9f2ff, #ede2ff) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
33
+ }
34
+ `;
14
35
  export default ((isDisabled, destructive) => ({
15
36
  primary: `
16
37
  background: var(--colorsActionMajor500);
@@ -21,26 +42,29 @@ export default ((isDisabled, destructive) => ({
21
42
  }
22
43
 
23
44
  ${isDisabled ? `
24
- background: var(--colorsActionDisabled500);
25
- ${makeColors("var(--colorsActionMajorYin030)")};
26
- &:hover {
27
- background: var(--colorsActionDisabled500);
28
- }
29
- ` : ""}
45
+ background: var(--colorsActionDisabled500);
46
+ ${makeColors("var(--colorsActionMajorYin030)")};
47
+ &:hover {
48
+ background: var(--colorsActionDisabled500);
49
+ }
50
+ ${disabledImageStyle}
51
+ ` : ""}
30
52
 
31
- ${destructive ? `background: var(--colorsSemanticNegative500);
32
- ${makeColors("var(--colorsSemanticNegativeYang100)")};
33
- &:hover {
34
- background: var(--colorsSemanticNegative600);
35
- }
53
+ ${destructive ? `
54
+ background: var(--colorsSemanticNegative500);
55
+ ${makeColors("var(--colorsSemanticNegativeYang100)")};
56
+ &:hover {
57
+ background: var(--colorsSemanticNegative600);
58
+ }
36
59
 
37
60
  ${isDisabled ? `
38
- background: var(--colorsActionDisabled500);
39
- ${makeColors("var(--colorsActionMajorYin030)")};
40
- &:hover {
41
- background: var(--colorsActionDisabled500);
42
- }
43
- ` : ""}` : ""}
61
+ background: var(--colorsActionDisabled500);
62
+ ${makeColors("var(--colorsActionMajorYin030)")};
63
+ &:hover {
64
+ background: var(--colorsActionDisabled500);
65
+ }
66
+ ${disabledImageStyle}
67
+ ` : ""}` : ""}
44
68
  `,
45
69
  secondary: `
46
70
  background: transparent;
@@ -53,24 +77,25 @@ export default ((isDisabled, destructive) => ({
53
77
  }
54
78
 
55
79
  ${destructive ? `
56
- border-color: var(--colorsSemanticNegative500);
57
- ${makeColors("var(--colorsSemanticNegative500)")}
58
- &:hover {
59
- background: var(--colorsSemanticNegative600);
60
- border-color: var(--colorsSemanticNegativeTransparent);
61
- ${makeColors("var(--colorsSemanticNegativeYang100)")};
62
- }
63
- ` : ""}
80
+ border-color: var(--colorsSemanticNegative500);
81
+ ${makeColors("var(--colorsSemanticNegative500)")}
82
+ &:hover {
83
+ background: var(--colorsSemanticNegative600);
84
+ border-color: var(--colorsSemanticNegativeTransparent);
85
+ ${makeColors("var(--colorsSemanticNegativeYang100)")};
86
+ }
87
+ ` : ""}
64
88
 
65
89
  ${isDisabled ? `
66
- border-color: var(--colorsActionDisabled500);
67
- ${makeColors("var(--colorsActionMajorYin030)")};
68
- &:hover {
69
- background: transparent;
70
- border-color: var(--colorsActionDisabled500);
71
- ${makeColors("var(--colorsActionMajorYin030)")};
72
- }
73
- ` : ""}
90
+ border-color: var(--colorsActionDisabled500);
91
+ ${makeColors("var(--colorsActionMajorYin030)")};
92
+ &:hover {
93
+ background: transparent;
94
+ border-color: var(--colorsActionDisabled500);
95
+ ${makeColors("var(--colorsActionMajorYin030)")};
96
+ }
97
+ ${disabledImageStyle}
98
+ ` : ""}
74
99
  `,
75
100
  tertiary: `
76
101
  background: transparent;
@@ -82,20 +107,21 @@ export default ((isDisabled, destructive) => ({
82
107
  }
83
108
 
84
109
  ${destructive ? `
85
- ${makeColors("var(--colorsSemanticNegative500)")};
86
- &:hover {
87
- background: var(--colorsSemanticNegative600);
88
- ${makeColors("var(--colorsSemanticNegativeYang100)")};
89
- }
90
- ` : ""}
110
+ ${makeColors("var(--colorsSemanticNegative500)")};
111
+ &:hover {
112
+ background: var(--colorsSemanticNegative600);
113
+ ${makeColors("var(--colorsSemanticNegativeYang100)")};
114
+ }
115
+ ` : ""}
91
116
 
92
117
  ${isDisabled ? `
93
- ${makeColors("var(--colorsActionMajorYin030)")};
94
- &:hover {
95
- background: var(--colorsActionMajorTransparent);
96
- ${makeColors("var(--colorsActionMajorYin030)")};
97
- }
98
- ` : ""}
118
+ ${makeColors("var(--colorsActionMajorYin030)")};
119
+ &:hover {
120
+ background: var(--colorsActionMajorTransparent);
121
+ ${makeColors("var(--colorsActionMajorYin030)")};
122
+ }
123
+ ${disabledImageStyle}
124
+ ` : ""}
99
125
  `,
100
126
  dashed: `
101
127
  background: transparent;
@@ -106,16 +132,17 @@ export default ((isDisabled, destructive) => ({
106
132
  }
107
133
 
108
134
  ${destructive ? `
109
- border-color: var(--colorsSemanticNegative500);
110
- ` : ""}
135
+ border-color: var(--colorsSemanticNegative500);
136
+ ` : ""}
111
137
 
112
138
  ${isDisabled ? `
113
- border-color: var(--colorsActionDisabled500);
114
- ${makeColors("var(--colorsActionMinorYin030)")};
115
- &:hover {
116
- background-color: transparent;
117
- }
118
- ` : ""}
139
+ border-color: var(--colorsActionDisabled500);
140
+ ${makeColors("var(--colorsActionMinorYin030)")};
141
+ &:hover {
142
+ background-color: transparent;
143
+ }
144
+ ${disabledImageStyle}
145
+ ` : ""}
119
146
  `,
120
147
  darkBackground: `
121
148
  background: var(--colorsActionMajorYang100);
@@ -127,12 +154,25 @@ export default ((isDisabled, destructive) => ({
127
154
  }
128
155
 
129
156
  ${isDisabled ? `
130
- background: var(--colorsActionDisabled500);
131
- ${makeColors("var(--colorsActionMajorYin030)")};
132
- &:hover {
133
- background: var(--colorsActionDisabled500);
134
- ${makeColors("var(--colorsActionMajorYin030)")};
135
- }
136
- ` : ""}
157
+ background: var(--colorsActionDisabled500);
158
+ ${makeColors("var(--colorsActionMajorYin030)")};
159
+ &:hover {
160
+ background: var(--colorsActionDisabled500);
161
+ ${makeColors("var(--colorsActionMajorYin030)")};
162
+ }
163
+ ${disabledImageStyle}
164
+ ` : ""}
165
+ `,
166
+ "gradient-grey": `
167
+ ${isDisabled ? gradientDisabledStyle : `
168
+ background: linear-gradient(#F2F5F6, #F2F5F6) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
169
+ ${gradientSharedStyle}
170
+ `}
171
+ `,
172
+ "gradient-white": `
173
+ ${isDisabled ? gradientDisabledStyle : `
174
+ background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
175
+ ${gradientSharedStyle}
176
+ `}
137
177
  `
138
178
  }));
package/esm/components/button/button.component.d.ts CHANGED
@@ -3,7 +3,7 @@ import { SpaceProps } from "styled-system";
3
3
  import { IconType } from "../icon";
4
4
  import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
5
5
  import { TooltipPositions } from "../tooltip/tooltip.config";
6
- export declare type ButtonTypes = "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground";
6
+ export declare type ButtonTypes = "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" | "gradient-grey" | "gradient-white";
7
7
  export declare type SizeOptions = "small" | "medium" | "large";
8
8
  export declare type ButtonIconPosition = "before" | "after";
9
9
  export interface ButtonProps extends SpaceProps, TagProps {
package/esm/components/button/button.component.js CHANGED
@@ -3,7 +3,7 @@ import React, { useCallback, useState, useContext } from "react";
3
3
  import PropTypes from "prop-types";
4
4
  import invariant from "invariant";
5
5
  import Icon from "../icon";
6
- import StyledButton, { StyledButtonSubtext } from "./button.style";
6
+ import StyledButton, { StyledButtonSubtext, StyledButtonMainText } from "./button.style";
7
7
  import tagComponent from "../../__internal__/utils/helpers/tags/tags";
8
8
  import { TooltipProvider } from "../../__internal__/tooltip-provider";
9
9
  import Logger from "../../__internal__/utils/logger";
@@ -22,24 +22,26 @@ function renderChildren({
22
22
  iconTooltipPosition,
23
23
  tooltipTarget
24
24
  }) {
25
- const iconColorMap = {
26
- primary: "--colorsActionMajorYang100",
27
- secondary: "--colorsActionMajor500",
28
- tertiary: "--colorsActionMajor500",
29
- darkBackground: "--colorsActionMajor500",
30
- dashed: "--colorsActionMajor500"
25
+ const iconColor = () => {
26
+ if (buttonType === "primary") {
27
+ return "--colorsActionMajorYang100";
28
+ }
29
+ if (buttonType.includes("gradient")) {
30
+ return "--colorsActionMinorYin090";
31
+ }
32
+ return "--colorsActionMajor500";
31
33
  };
32
34
  const iconProps = {
33
35
  "aria-hidden": true,
34
36
  disabled,
35
- color: iconColorMap[buttonType],
37
+ color: iconColor(),
36
38
  bg: "transparent",
37
39
  bgSize: "extra-small"
38
40
  };
39
41
  const isValidChildren = children !== undefined && children !== false;
40
42
  return /*#__PURE__*/React.createElement(React.Fragment, null, iconType && iconPosition === "before" && isValidChildren && /*#__PURE__*/React.createElement(Icon, _extends({
41
43
  type: iconType
42
- }, iconProps)), isValidChildren && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
44
+ }, iconProps)), isValidChildren && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(StyledButtonMainText, {
43
45
  "data-element": "main-text"
44
46
  }, children), size === "large" && /*#__PURE__*/React.createElement(StyledButtonSubtext, {
45
47
  "data-element": "subtext"
@@ -174,7 +176,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
174
176
  });
175
177
  Button.propTypes = {
176
178
  "aria-label": PropTypes.string,
177
- "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
179
+ "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "gradient-grey", "gradient-white", "primary", "secondary", "tertiary"]),
178
180
  "children": PropTypes.node,
179
181
  "data-component": PropTypes.string,
180
182
  "data-element": PropTypes.string,
@@ -524,7 +526,7 @@ const ButtonWithForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => {
524
526
  });
525
527
  ButtonWithForwardRef.propTypes = {
526
528
  "aria-label": PropTypes.string,
527
- "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
529
+ "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "gradient-grey", "gradient-white", "primary", "secondary", "tertiary"]),
528
530
  "children": PropTypes.node,
529
531
  "data-component": PropTypes.string,
530
532
  "data-element": PropTypes.string,
package/esm/components/button/button.config.js CHANGED
@@ -1,3 +1,3 @@
1
- export const BUTTON_VARIANTS = ["primary", "secondary", "tertiary", "dashed", "darkBackground"];
1
+ export const BUTTON_VARIANTS = ["primary", "secondary", "tertiary", "dashed", "darkBackground", "gradient-white", "gradient-grey"];
2
2
  export const BUTTON_SIZES = ["small", "medium", "large"];
3
3
  export const BUTTON_ICON_POSITIONS = ["before", "after"];
package/esm/components/button/button.style.d.ts CHANGED
@@ -4,4 +4,5 @@ declare const StyledButton: import("styled-components").StyledComponent<"button"
4
4
  iconOnly?: boolean | undefined;
5
5
  }, never>;
6
6
  export declare const StyledButtonSubtext: import("styled-components").StyledComponent<"span", any, {}, never>;
7
+ export declare const StyledButtonMainText: import("styled-components").StyledComponent<"span", any, {}, never>;
7
8
  export default StyledButton;
package/esm/components/button/button.style.js CHANGED
@@ -110,6 +110,10 @@ export const StyledButtonSubtext = styled.span`
110
110
  font-weight: 400;
111
111
  display: block;
112
112
  `;
113
+ export const StyledButtonMainText = styled.span`
114
+ display: flex;
115
+ align-items: center;
116
+ `;
113
117
  StyledButton.defaultProps = {
114
118
  theme: BaseTheme
115
119
  };
package/lib/components/button/button-types.style.d.ts CHANGED
@@ -4,5 +4,7 @@ declare const _default: (isDisabled?: boolean, destructive?: boolean) => {
4
4
  tertiary: string;
5
5
  dashed: string;
6
6
  darkBackground: string;
7
+ "gradient-grey": string;
8
+ "gradient-white": string;
7
9
  };
8
10
  export default _default;
package/lib/components/button/button-types.style.js CHANGED
@@ -18,6 +18,27 @@ function makeColors(color) {
18
18
  }
19
19
  `;
20
20
  }
21
+ const disabledImageStyle = `
22
+ img, svg {
23
+ opacity: 0.3;
24
+ }
25
+ `;
26
+ const gradientDisabledStyle = `
27
+ background: transparent;
28
+ border-color: var(--colorsActionDisabled500);
29
+ ${makeColors("var(--colorsActionMajorYin030)")};
30
+ &:hover {
31
+ border-color: var(--colorsActionDisabled500);
32
+ ${makeColors("var(--colorsActionMajorYin030)")};
33
+ }
34
+ ${disabledImageStyle}
35
+ `;
36
+ const gradientSharedStyle = `
37
+ border: 2px solid transparent;
38
+ &:hover {
39
+ background: linear-gradient(to right, #d6f8df, #d9f2ff, #ede2ff) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
40
+ }
41
+ `;
21
42
  var _default = (isDisabled, destructive) => ({
22
43
  primary: `
23
44
  background: var(--colorsActionMajor500);
@@ -28,26 +49,29 @@ var _default = (isDisabled, destructive) => ({
28
49
  }
29
50
 
30
51
  ${isDisabled ? `
31
- background: var(--colorsActionDisabled500);
32
- ${makeColors("var(--colorsActionMajorYin030)")};
33
- &:hover {
34
- background: var(--colorsActionDisabled500);
35
- }
36
- ` : ""}
52
+ background: var(--colorsActionDisabled500);
53
+ ${makeColors("var(--colorsActionMajorYin030)")};
54
+ &:hover {
55
+ background: var(--colorsActionDisabled500);
56
+ }
57
+ ${disabledImageStyle}
58
+ ` : ""}
37
59
 
38
- ${destructive ? `background: var(--colorsSemanticNegative500);
39
- ${makeColors("var(--colorsSemanticNegativeYang100)")};
40
- &:hover {
41
- background: var(--colorsSemanticNegative600);
42
- }
60
+ ${destructive ? `
61
+ background: var(--colorsSemanticNegative500);
62
+ ${makeColors("var(--colorsSemanticNegativeYang100)")};
63
+ &:hover {
64
+ background: var(--colorsSemanticNegative600);
65
+ }
43
66
 
44
67
  ${isDisabled ? `
45
- background: var(--colorsActionDisabled500);
46
- ${makeColors("var(--colorsActionMajorYin030)")};
47
- &:hover {
48
- background: var(--colorsActionDisabled500);
49
- }
50
- ` : ""}` : ""}
68
+ background: var(--colorsActionDisabled500);
69
+ ${makeColors("var(--colorsActionMajorYin030)")};
70
+ &:hover {
71
+ background: var(--colorsActionDisabled500);
72
+ }
73
+ ${disabledImageStyle}
74
+ ` : ""}` : ""}
51
75
  `,
52
76
  secondary: `
53
77
  background: transparent;
@@ -60,24 +84,25 @@ var _default = (isDisabled, destructive) => ({
60
84
  }
61
85
 
62
86
  ${destructive ? `
63
- border-color: var(--colorsSemanticNegative500);
64
- ${makeColors("var(--colorsSemanticNegative500)")}
65
- &:hover {
66
- background: var(--colorsSemanticNegative600);
67
- border-color: var(--colorsSemanticNegativeTransparent);
68
- ${makeColors("var(--colorsSemanticNegativeYang100)")};
69
- }
70
- ` : ""}
87
+ border-color: var(--colorsSemanticNegative500);
88
+ ${makeColors("var(--colorsSemanticNegative500)")}
89
+ &:hover {
90
+ background: var(--colorsSemanticNegative600);
91
+ border-color: var(--colorsSemanticNegativeTransparent);
92
+ ${makeColors("var(--colorsSemanticNegativeYang100)")};
93
+ }
94
+ ` : ""}
71
95
 
72
96
  ${isDisabled ? `
73
- border-color: var(--colorsActionDisabled500);
74
- ${makeColors("var(--colorsActionMajorYin030)")};
75
- &:hover {
76
- background: transparent;
77
- border-color: var(--colorsActionDisabled500);
78
- ${makeColors("var(--colorsActionMajorYin030)")};
79
- }
80
- ` : ""}
97
+ border-color: var(--colorsActionDisabled500);
98
+ ${makeColors("var(--colorsActionMajorYin030)")};
99
+ &:hover {
100
+ background: transparent;
101
+ border-color: var(--colorsActionDisabled500);
102
+ ${makeColors("var(--colorsActionMajorYin030)")};
103
+ }
104
+ ${disabledImageStyle}
105
+ ` : ""}
81
106
  `,
82
107
  tertiary: `
83
108
  background: transparent;
@@ -89,20 +114,21 @@ var _default = (isDisabled, destructive) => ({
89
114
  }
90
115
 
91
116
  ${destructive ? `
92
- ${makeColors("var(--colorsSemanticNegative500)")};
93
- &:hover {
94
- background: var(--colorsSemanticNegative600);
95
- ${makeColors("var(--colorsSemanticNegativeYang100)")};
96
- }
97
- ` : ""}
117
+ ${makeColors("var(--colorsSemanticNegative500)")};
118
+ &:hover {
119
+ background: var(--colorsSemanticNegative600);
120
+ ${makeColors("var(--colorsSemanticNegativeYang100)")};
121
+ }
122
+ ` : ""}
98
123
 
99
124
  ${isDisabled ? `
100
- ${makeColors("var(--colorsActionMajorYin030)")};
101
- &:hover {
102
- background: var(--colorsActionMajorTransparent);
103
- ${makeColors("var(--colorsActionMajorYin030)")};
104
- }
105
- ` : ""}
125
+ ${makeColors("var(--colorsActionMajorYin030)")};
126
+ &:hover {
127
+ background: var(--colorsActionMajorTransparent);
128
+ ${makeColors("var(--colorsActionMajorYin030)")};
129
+ }
130
+ ${disabledImageStyle}
131
+ ` : ""}
106
132
  `,
107
133
  dashed: `
108
134
  background: transparent;
@@ -113,16 +139,17 @@ var _default = (isDisabled, destructive) => ({
113
139
  }
114
140
 
115
141
  ${destructive ? `
116
- border-color: var(--colorsSemanticNegative500);
117
- ` : ""}
142
+ border-color: var(--colorsSemanticNegative500);
143
+ ` : ""}
118
144
 
119
145
  ${isDisabled ? `
120
- border-color: var(--colorsActionDisabled500);
121
- ${makeColors("var(--colorsActionMinorYin030)")};
122
- &:hover {
123
- background-color: transparent;
124
- }
125
- ` : ""}
146
+ border-color: var(--colorsActionDisabled500);
147
+ ${makeColors("var(--colorsActionMinorYin030)")};
148
+ &:hover {
149
+ background-color: transparent;
150
+ }
151
+ ${disabledImageStyle}
152
+ ` : ""}
126
153
  `,
127
154
  darkBackground: `
128
155
  background: var(--colorsActionMajorYang100);
@@ -134,13 +161,26 @@ var _default = (isDisabled, destructive) => ({
134
161
  }
135
162
 
136
163
  ${isDisabled ? `
137
- background: var(--colorsActionDisabled500);
138
- ${makeColors("var(--colorsActionMajorYin030)")};
139
- &:hover {
140
- background: var(--colorsActionDisabled500);
141
- ${makeColors("var(--colorsActionMajorYin030)")};
142
- }
143
- ` : ""}
164
+ background: var(--colorsActionDisabled500);
165
+ ${makeColors("var(--colorsActionMajorYin030)")};
166
+ &:hover {
167
+ background: var(--colorsActionDisabled500);
168
+ ${makeColors("var(--colorsActionMajorYin030)")};
169
+ }
170
+ ${disabledImageStyle}
171
+ ` : ""}
172
+ `,
173
+ "gradient-grey": `
174
+ ${isDisabled ? gradientDisabledStyle : `
175
+ background: linear-gradient(#F2F5F6, #F2F5F6) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
176
+ ${gradientSharedStyle}
177
+ `}
178
+ `,
179
+ "gradient-white": `
180
+ ${isDisabled ? gradientDisabledStyle : `
181
+ background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
182
+ ${gradientSharedStyle}
183
+ `}
144
184
  `
145
185
  });
146
186
  exports.default = _default;
package/lib/components/button/button.component.d.ts CHANGED
@@ -3,7 +3,7 @@ import { SpaceProps } from "styled-system";
3
3
  import { IconType } from "../icon";
4
4
  import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
5
5
  import { TooltipPositions } from "../tooltip/tooltip.config";
6
- export declare type ButtonTypes = "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground";
6
+ export declare type ButtonTypes = "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" | "gradient-grey" | "gradient-white";
7
7
  export declare type SizeOptions = "small" | "medium" | "large";
8
8
  export declare type ButtonIconPosition = "before" | "after";
9
9
  export interface ButtonProps extends SpaceProps, TagProps {
package/lib/components/button/button.component.js CHANGED
@@ -31,24 +31,26 @@ function renderChildren({
31
31
  iconTooltipPosition,
32
32
  tooltipTarget
33
33
  }) {
34
- const iconColorMap = {
35
- primary: "--colorsActionMajorYang100",
36
- secondary: "--colorsActionMajor500",
37
- tertiary: "--colorsActionMajor500",
38
- darkBackground: "--colorsActionMajor500",
39
- dashed: "--colorsActionMajor500"
34
+ const iconColor = () => {
35
+ if (buttonType === "primary") {
36
+ return "--colorsActionMajorYang100";
37
+ }
38
+ if (buttonType.includes("gradient")) {
39
+ return "--colorsActionMinorYin090";
40
+ }
41
+ return "--colorsActionMajor500";
40
42
  };
41
43
  const iconProps = {
42
44
  "aria-hidden": true,
43
45
  disabled,
44
- color: iconColorMap[buttonType],
46
+ color: iconColor(),
45
47
  bg: "transparent",
46
48
  bgSize: "extra-small"
47
49
  };
48
50
  const isValidChildren = children !== undefined && children !== false;
49
51
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconType && iconPosition === "before" && isValidChildren && /*#__PURE__*/_react.default.createElement(_icon.default, _extends({
50
52
  type: iconType
51
- }, iconProps)), isValidChildren && /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", {
53
+ }, iconProps)), isValidChildren && /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_button.StyledButtonMainText, {
52
54
  "data-element": "main-text"
53
55
  }, children), size === "large" && /*#__PURE__*/_react.default.createElement(_button.StyledButtonSubtext, {
54
56
  "data-element": "subtext"
@@ -183,7 +185,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({
183
185
  });
184
186
  Button.propTypes = {
185
187
  "aria-label": _propTypes.default.string,
186
- "buttonType": _propTypes.default.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
188
+ "buttonType": _propTypes.default.oneOf(["darkBackground", "dashed", "gradient-grey", "gradient-white", "primary", "secondary", "tertiary"]),
187
189
  "children": _propTypes.default.node,
188
190
  "data-component": _propTypes.default.string,
189
191
  "data-element": _propTypes.default.string,
@@ -533,7 +535,7 @@ const ButtonWithForwardRef = exports.ButtonWithForwardRef = /*#__PURE__*/_react.
533
535
  });
534
536
  ButtonWithForwardRef.propTypes = {
535
537
  "aria-label": _propTypes.default.string,
536
- "buttonType": _propTypes.default.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
538
+ "buttonType": _propTypes.default.oneOf(["darkBackground", "dashed", "gradient-grey", "gradient-white", "primary", "secondary", "tertiary"]),
537
539
  "children": _propTypes.default.node,
538
540
  "data-component": _propTypes.default.string,
539
541
  "data-element": _propTypes.default.string,
package/lib/components/button/button.config.js CHANGED
@@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.BUTTON_VARIANTS = exports.BUTTON_SIZES = exports.BUTTON_ICON_POSITIONS = void 0;
7
- const BUTTON_VARIANTS = exports.BUTTON_VARIANTS = ["primary", "secondary", "tertiary", "dashed", "darkBackground"];
7
+ const BUTTON_VARIANTS = exports.BUTTON_VARIANTS = ["primary", "secondary", "tertiary", "dashed", "darkBackground", "gradient-white", "gradient-grey"];
8
8
  const BUTTON_SIZES = exports.BUTTON_SIZES = ["small", "medium", "large"];
9
9
  const BUTTON_ICON_POSITIONS = exports.BUTTON_ICON_POSITIONS = ["before", "after"];
package/lib/components/button/button.style.d.ts CHANGED
@@ -4,4 +4,5 @@ declare const StyledButton: import("styled-components").StyledComponent<"button"
4
4
  iconOnly?: boolean | undefined;
5
5
  }, never>;
6
6
  export declare const StyledButtonSubtext: import("styled-components").StyledComponent<"span", any, {}, never>;
7
+ export declare const StyledButtonMainText: import("styled-components").StyledComponent<"span", any, {}, never>;
7
8
  export default StyledButton;
package/lib/components/button/button.style.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.StyledButtonSubtext = void 0;
6
+ exports.default = exports.StyledButtonSubtext = exports.StyledButtonMainText = void 0;
7
7
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
8
8
  var _styledSystem = require("styled-system");
9
9
  var _base = _interopRequireDefault(require("../../style/themes/base"));
@@ -119,6 +119,10 @@ const StyledButtonSubtext = exports.StyledButtonSubtext = _styledComponents.defa
119
119
  font-weight: 400;
120
120
  display: block;
121
121
  `;
122
+ const StyledButtonMainText = exports.StyledButtonMainText = _styledComponents.default.span`
123
+ display: flex;
124
+ align-items: center;
125
+ `;
122
126
  StyledButton.defaultProps = {
123
127
  theme: _base.default
124
128
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "126.1.0",
3
+ "version": "126.2.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",