carbon-react 152.0.1 → 152.1.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 (11) hide show
  1. package/esm/components/button/button-types.style.d.ts +1 -1
  2. package/esm/components/button/button-types.style.js +38 -5
  3. package/esm/components/button/button.component.d.ts +2 -0
  4. package/esm/components/button/button.component.js +2 -0
  5. package/esm/components/button/button.style.js +9 -8
  6. package/lib/components/button/button-types.style.d.ts +1 -1
  7. package/lib/components/button/button-types.style.js +38 -5
  8. package/lib/components/button/button.component.d.ts +2 -0
  9. package/lib/components/button/button.component.js +2 -0
  10. package/lib/components/button/button.style.js +9 -8
  11. package/package.json +1 -1
package/esm/components/button/button-types.style.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- declare const _default: (isDisabled?: boolean, destructive?: boolean) => {
1
+ declare const _default: (isDisabled?: boolean, destructive?: boolean, isWhite?: boolean) => {
2
2
  primary: string;
3
3
  secondary: string;
4
4
  tertiary: string;
package/esm/components/button/button-types.style.js CHANGED
@@ -32,7 +32,7 @@ const gradientSharedStyle = `
32
32
  background: linear-gradient(to right, #d6f8df, #d9f2ff, #ede2ff) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
33
33
  }
34
34
  `;
35
- export default (isDisabled, destructive) => ({
35
+ export default (isDisabled, destructive, isWhite) => ({
36
36
  primary: `
37
37
  background: var(--colorsActionMajor500);
38
38
  border-color: transparent;
@@ -85,7 +85,7 @@ export default (isDisabled, destructive) => ({
85
85
  ${makeColors("var(--colorsSemanticNegativeYang100)")};
86
86
  }
87
87
  ` : ""}
88
-
88
+
89
89
  ${isDisabled ? `
90
90
  border-color: var(--colorsActionDisabled500);
91
91
  ${makeColors("var(--colorsActionMajorYin030)")};
@@ -96,6 +96,39 @@ export default (isDisabled, destructive) => ({
96
96
  }
97
97
  ${disabledImageStyle}
98
98
  ` : ""}
99
+
100
+ ${isWhite ? `
101
+ border-color: var(--colorsActionMajorYang100);
102
+ ${makeColors("var(--colorsActionMajorYang100)")}
103
+ &:hover {
104
+ background: var(--colorsActionMajorYang100);
105
+ ${makeColors("var(--colorsUtilityYin100)")};
106
+ }
107
+
108
+
109
+ ${destructive ? `
110
+ border-color: var(--colorsSemanticNegative450);
111
+ ${makeColors("var(--colorsSemanticNegative450)")}
112
+ &:hover {
113
+ background: var(--colorsSemanticNegative600);
114
+ border-color: var(--colorsSemanticNegativeTransparent);
115
+ ${makeColors("var(--colorsSemanticNegativeYang100)")};
116
+ }
117
+ ` : ""}
118
+
119
+ ${isDisabled ? `
120
+ border-color: #4B4B4B;
121
+ ${makeColors("#4B4B4B")};
122
+ &:hover {
123
+ background: transparent;
124
+ border-color: #4B4B4B;
125
+ ${makeColors("#4B4B4B")};
126
+
127
+ }
128
+ ${disabledImageStyle}
129
+ ` : ""}
130
+ }
131
+ ` : ""}
99
132
  `,
100
133
  tertiary: `
101
134
  background: transparent;
@@ -131,7 +164,7 @@ export default (isDisabled, destructive) => ({
131
164
  background: var(--colorsActionMajor600);
132
165
  ${makeColors("var(--colorsActionMajorYang100)")}
133
166
  }
134
-
167
+
135
168
  ${isDisabled ? `
136
169
  background: var(--colorsActionDisabled500);
137
170
  ${makeColors("var(--colorsActionMajorYin030)")};
@@ -144,13 +177,13 @@ export default (isDisabled, destructive) => ({
144
177
  `,
145
178
  "gradient-grey": `
146
179
  ${isDisabled ? gradientDisabledStyle : `
147
- background: linear-gradient(#F2F5F6, #F2F5F6) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
180
+ background: linear-gradient(#F2F5F6, #F2F5F6) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
148
181
  ${gradientSharedStyle}
149
182
  `}
150
183
  `,
151
184
  "gradient-white": `
152
185
  ${isDisabled ? gradientDisabledStyle : `
153
- background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
186
+ background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
154
187
  ${gradientSharedStyle}
155
188
  `}
156
189
  `
package/esm/components/button/button.component.d.ts CHANGED
@@ -40,6 +40,8 @@ export interface ButtonProps extends SpaceProps, TagProps {
40
40
  iconType?: IconType;
41
41
  /** id attribute */
42
42
  id?: string;
43
+ /** Whether to use the white-on-dark colour variant */
44
+ isWhite?: boolean;
43
45
  /** If provided, the text inside a button will not wrap */
44
46
  noWrap?: boolean;
45
47
  /** Specify a callback triggered on blur */
package/esm/components/button/button.component.js CHANGED
@@ -70,6 +70,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
70
70
  iconTooltipMessage,
71
71
  iconTooltipPosition,
72
72
  iconType,
73
+ isWhite = false,
73
74
  m = 0,
74
75
  noWrap,
75
76
  onClick,
@@ -139,6 +140,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
139
140
  buttonType: buttonType,
140
141
  disabled: isDisabled,
141
142
  destructive: destructive,
143
+ isWhite: isWhite,
142
144
  type: href ? undefined : "button",
143
145
  iconType: iconType,
144
146
  size: size,
package/esm/components/button/button.style.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import styled, { css } from "styled-components";
2
2
  import { space } from "styled-system";
3
- import BaseTheme from "../../style/themes/base";
4
- import buttonTypes from "./button-types.style";
5
3
  import StyledIcon from "../icon/icon.style";
4
+ import BaseTheme from "../../style/themes/base";
6
5
  import addFocusStyling from "../../style/utils/add-focus-styling";
6
+ import buttonTypes from "./button-types.style";
7
7
  function additionalIconStyle(iconType) {
8
8
  if (iconType === "services") return "6px";
9
9
  return "20px";
@@ -21,8 +21,8 @@ function stylingForIconOnly(size) {
21
21
  dimension = "40px";
22
22
  }
23
23
  return `
24
- padding: 0px;
25
- width: ${dimension};
24
+ padding: 0px;
25
+ width: ${dimension};
26
26
  min-height: ${dimension}`;
27
27
  }
28
28
  function stylingForType({
@@ -30,10 +30,11 @@ function stylingForType({
30
30
  disabled,
31
31
  buttonType,
32
32
  size,
33
- destructive
33
+ destructive,
34
+ isWhite
34
35
  }) {
35
36
  return css`
36
- ${buttonTypes(disabled, destructive)[buttonType]};
37
+ ${buttonTypes(disabled, destructive, isWhite)[buttonType]};
37
38
 
38
39
  ${size === "small" && css`
39
40
  font-size: var(--fontSizes100);
@@ -44,7 +45,7 @@ function stylingForType({
44
45
  font-size: var(--fontSizes100);
45
46
  min-height: 40px;
46
47
  `}
47
-
48
+
48
49
  ${size === "large" && css`
49
50
  font-size: var(--fontSizes200);
50
51
  min-height: 48px;
@@ -84,7 +85,7 @@ const StyledButton = styled.button`
84
85
  }) => fullWidth && css`
85
86
  width: 100%;
86
87
  `}
87
-
88
+
88
89
  ${({
89
90
  iconOnly,
90
91
  iconPosition,
package/lib/components/button/button-types.style.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- declare const _default: (isDisabled?: boolean, destructive?: boolean) => {
1
+ declare const _default: (isDisabled?: boolean, destructive?: boolean, isWhite?: boolean) => {
2
2
  primary: string;
3
3
  secondary: string;
4
4
  tertiary: string;
package/lib/components/button/button-types.style.js CHANGED
@@ -39,7 +39,7 @@ const gradientSharedStyle = `
39
39
  background: linear-gradient(to right, #d6f8df, #d9f2ff, #ede2ff) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
40
40
  }
41
41
  `;
42
- var _default = (isDisabled, destructive) => ({
42
+ var _default = (isDisabled, destructive, isWhite) => ({
43
43
  primary: `
44
44
  background: var(--colorsActionMajor500);
45
45
  border-color: transparent;
@@ -92,7 +92,7 @@ var _default = (isDisabled, destructive) => ({
92
92
  ${makeColors("var(--colorsSemanticNegativeYang100)")};
93
93
  }
94
94
  ` : ""}
95
-
95
+
96
96
  ${isDisabled ? `
97
97
  border-color: var(--colorsActionDisabled500);
98
98
  ${makeColors("var(--colorsActionMajorYin030)")};
@@ -103,6 +103,39 @@ var _default = (isDisabled, destructive) => ({
103
103
  }
104
104
  ${disabledImageStyle}
105
105
  ` : ""}
106
+
107
+ ${isWhite ? `
108
+ border-color: var(--colorsActionMajorYang100);
109
+ ${makeColors("var(--colorsActionMajorYang100)")}
110
+ &:hover {
111
+ background: var(--colorsActionMajorYang100);
112
+ ${makeColors("var(--colorsUtilityYin100)")};
113
+ }
114
+
115
+
116
+ ${destructive ? `
117
+ border-color: var(--colorsSemanticNegative450);
118
+ ${makeColors("var(--colorsSemanticNegative450)")}
119
+ &:hover {
120
+ background: var(--colorsSemanticNegative600);
121
+ border-color: var(--colorsSemanticNegativeTransparent);
122
+ ${makeColors("var(--colorsSemanticNegativeYang100)")};
123
+ }
124
+ ` : ""}
125
+
126
+ ${isDisabled ? `
127
+ border-color: #4B4B4B;
128
+ ${makeColors("#4B4B4B")};
129
+ &:hover {
130
+ background: transparent;
131
+ border-color: #4B4B4B;
132
+ ${makeColors("#4B4B4B")};
133
+
134
+ }
135
+ ${disabledImageStyle}
136
+ ` : ""}
137
+ }
138
+ ` : ""}
106
139
  `,
107
140
  tertiary: `
108
141
  background: transparent;
@@ -138,7 +171,7 @@ var _default = (isDisabled, destructive) => ({
138
171
  background: var(--colorsActionMajor600);
139
172
  ${makeColors("var(--colorsActionMajorYang100)")}
140
173
  }
141
-
174
+
142
175
  ${isDisabled ? `
143
176
  background: var(--colorsActionDisabled500);
144
177
  ${makeColors("var(--colorsActionMajorYin030)")};
@@ -151,13 +184,13 @@ var _default = (isDisabled, destructive) => ({
151
184
  `,
152
185
  "gradient-grey": `
153
186
  ${isDisabled ? gradientDisabledStyle : `
154
- background: linear-gradient(#F2F5F6, #F2F5F6) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
187
+ background: linear-gradient(#F2F5F6, #F2F5F6) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
155
188
  ${gradientSharedStyle}
156
189
  `}
157
190
  `,
158
191
  "gradient-white": `
159
192
  ${isDisabled ? gradientDisabledStyle : `
160
- background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
193
+ background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
161
194
  ${gradientSharedStyle}
162
195
  `}
163
196
  `
package/lib/components/button/button.component.d.ts CHANGED
@@ -40,6 +40,8 @@ export interface ButtonProps extends SpaceProps, TagProps {
40
40
  iconType?: IconType;
41
41
  /** id attribute */
42
42
  id?: string;
43
+ /** Whether to use the white-on-dark colour variant */
44
+ isWhite?: boolean;
43
45
  /** If provided, the text inside a button will not wrap */
44
46
  noWrap?: boolean;
45
47
  /** Specify a callback triggered on blur */
package/lib/components/button/button.component.js CHANGED
@@ -79,6 +79,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({
79
79
  iconTooltipMessage,
80
80
  iconTooltipPosition,
81
81
  iconType,
82
+ isWhite = false,
82
83
  m = 0,
83
84
  noWrap,
84
85
  onClick,
@@ -148,6 +149,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({
148
149
  buttonType: buttonType,
149
150
  disabled: isDisabled,
150
151
  destructive: destructive,
152
+ isWhite: isWhite,
151
153
  type: href ? undefined : "button",
152
154
  iconType: iconType,
153
155
  size: size,
package/lib/components/button/button.style.js CHANGED
@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
6
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
- var _base = _interopRequireDefault(require("../../style/themes/base"));
10
- var _buttonTypes = _interopRequireDefault(require("./button-types.style"));
11
9
  var _icon = _interopRequireDefault(require("../icon/icon.style"));
10
+ var _base = _interopRequireDefault(require("../../style/themes/base"));
12
11
  var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-focus-styling"));
12
+ var _buttonTypes = _interopRequireDefault(require("./button-types.style"));
13
13
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
14
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
15
15
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -30,8 +30,8 @@ function stylingForIconOnly(size) {
30
30
  dimension = "40px";
31
31
  }
32
32
  return `
33
- padding: 0px;
34
- width: ${dimension};
33
+ padding: 0px;
34
+ width: ${dimension};
35
35
  min-height: ${dimension}`;
36
36
  }
37
37
  function stylingForType({
@@ -39,10 +39,11 @@ function stylingForType({
39
39
  disabled,
40
40
  buttonType,
41
41
  size,
42
- destructive
42
+ destructive,
43
+ isWhite
43
44
  }) {
44
45
  return (0, _styledComponents.css)`
45
- ${(0, _buttonTypes.default)(disabled, destructive)[buttonType]};
46
+ ${(0, _buttonTypes.default)(disabled, destructive, isWhite)[buttonType]};
46
47
 
47
48
  ${size === "small" && (0, _styledComponents.css)`
48
49
  font-size: var(--fontSizes100);
@@ -53,7 +54,7 @@ function stylingForType({
53
54
  font-size: var(--fontSizes100);
54
55
  min-height: 40px;
55
56
  `}
56
-
57
+
57
58
  ${size === "large" && (0, _styledComponents.css)`
58
59
  font-size: var(--fontSizes200);
59
60
  min-height: 48px;
@@ -93,7 +94,7 @@ const StyledButton = _styledComponents.default.button`
93
94
  }) => fullWidth && (0, _styledComponents.css)`
94
95
  width: 100%;
95
96
  `}
96
-
97
+
97
98
  ${({
98
99
  iconOnly,
99
100
  iconPosition,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "152.0.1",
3
+ "version": "152.1.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",