carbon-react 152.0.0 → 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 (19) 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/esm/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.js +7 -1
  7. package/esm/components/text-editor/__internal__/plugins/Toolbar/buttons/bold.component.js +2 -1
  8. package/esm/components/text-editor/__internal__/plugins/Toolbar/buttons/italic.component.js +2 -1
  9. package/esm/components/text-editor/__internal__/plugins/Toolbar/buttons/list.component.js +4 -2
  10. package/lib/components/button/button-types.style.d.ts +1 -1
  11. package/lib/components/button/button-types.style.js +38 -5
  12. package/lib/components/button/button.component.d.ts +2 -0
  13. package/lib/components/button/button.component.js +2 -0
  14. package/lib/components/button/button.style.js +9 -8
  15. package/lib/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.js +7 -1
  16. package/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/bold.component.js +2 -1
  17. package/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/italic.component.js +2 -1
  18. package/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/list.component.js +4 -2
  19. 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/esm/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.js CHANGED
@@ -26,7 +26,13 @@ const ContentEditor = ({
26
26
  "aria-labelledby": `${namespace}-label`,
27
27
  className: `${namespace}-editable`,
28
28
  "data-role": `${namespace}-editable`,
29
- onFocus: focusAtEnd
29
+ onFocus: event => {
30
+ // If the related target is not a toolbar button, focus at the end of the editor
31
+ /* istanbul ignore next */
32
+ if (!event.relatedTarget || !event.relatedTarget.classList.contains("toolbar-button")) {
33
+ focusAtEnd(event);
34
+ }
35
+ }
30
36
  /** The following are automatically added by Lexical but violate WCAG 4.1.2 Name, Role, Value and so have been overriden */,
31
37
  "aria-autocomplete": undefined,
32
38
  "aria-readonly": undefined
package/esm/components/text-editor/__internal__/plugins/Toolbar/buttons/bold.component.js CHANGED
@@ -34,7 +34,8 @@ const BoldButton = ({
34
34
  isActive: isActive,
35
35
  "aria-pressed": isActive,
36
36
  "data-role": `${namespace}-bold-button`,
37
- tabIndex: 0
37
+ tabIndex: 0,
38
+ className: "toolbar-button"
38
39
  });
39
40
  };
40
41
  export default BoldButton;
package/esm/components/text-editor/__internal__/plugins/Toolbar/buttons/italic.component.js CHANGED
@@ -34,7 +34,8 @@ const ItalicButton = ({
34
34
  isActive: isActive,
35
35
  "aria-pressed": isActive,
36
36
  "data-role": `${namespace}-italic-button`,
37
- tabIndex: -1
37
+ tabIndex: -1,
38
+ className: "toolbar-button"
38
39
  });
39
40
  };
40
41
  export default ItalicButton;
package/esm/components/text-editor/__internal__/plugins/Toolbar/buttons/list.component.js CHANGED
@@ -300,7 +300,8 @@ const ListControls = ({
300
300
  isActive: isULActive,
301
301
  "aria-pressed": isULActive,
302
302
  "data-role": `${namespace}-unordered-list-button`,
303
- tabIndex: -1
303
+ tabIndex: -1,
304
+ className: "toolbar-button"
304
305
  }), /*#__PURE__*/React.createElement(FormattingButton, {
305
306
  size: "small",
306
307
  "aria-label": locale.textEditor.orderedListAria(),
@@ -310,7 +311,8 @@ const ListControls = ({
310
311
  isActive: isOLActive,
311
312
  "aria-pressed": isOLActive,
312
313
  "data-role": `${namespace}-ordered-list-button`,
313
- tabIndex: -1
314
+ tabIndex: -1,
315
+ className: "toolbar-button"
314
316
  }));
315
317
  };
316
318
  export default ListControls;
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/lib/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.js CHANGED
@@ -34,7 +34,13 @@ const ContentEditor = ({
34
34
  "aria-labelledby": `${namespace}-label`,
35
35
  className: `${namespace}-editable`,
36
36
  "data-role": `${namespace}-editable`,
37
- onFocus: focusAtEnd
37
+ onFocus: event => {
38
+ // If the related target is not a toolbar button, focus at the end of the editor
39
+ /* istanbul ignore next */
40
+ if (!event.relatedTarget || !event.relatedTarget.classList.contains("toolbar-button")) {
41
+ focusAtEnd(event);
42
+ }
43
+ }
38
44
  /** The following are automatically added by Lexical but violate WCAG 4.1.2 Name, Role, Value and so have been overriden */,
39
45
  "aria-autocomplete": undefined,
40
46
  "aria-readonly": undefined
package/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/bold.component.js CHANGED
@@ -41,7 +41,8 @@ const BoldButton = ({
41
41
  isActive: isActive,
42
42
  "aria-pressed": isActive,
43
43
  "data-role": `${namespace}-bold-button`,
44
- tabIndex: 0
44
+ tabIndex: 0,
45
+ className: "toolbar-button"
45
46
  });
46
47
  };
47
48
  var _default = exports.default = BoldButton;
package/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/italic.component.js CHANGED
@@ -40,7 +40,8 @@ const ItalicButton = ({
40
40
  isActive: isActive,
41
41
  "aria-pressed": isActive,
42
42
  "data-role": `${namespace}-italic-button`,
43
- tabIndex: -1
43
+ tabIndex: -1,
44
+ className: "toolbar-button"
44
45
  });
45
46
  };
46
47
  var _default = exports.default = ItalicButton;
package/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/list.component.js CHANGED
@@ -308,7 +308,8 @@ const ListControls = ({
308
308
  isActive: isULActive,
309
309
  "aria-pressed": isULActive,
310
310
  "data-role": `${namespace}-unordered-list-button`,
311
- tabIndex: -1
311
+ tabIndex: -1,
312
+ className: "toolbar-button"
312
313
  }), /*#__PURE__*/_react.default.createElement(_toolbar.FormattingButton, {
313
314
  size: "small",
314
315
  "aria-label": locale.textEditor.orderedListAria(),
@@ -318,7 +319,8 @@ const ListControls = ({
318
319
  isActive: isOLActive,
319
320
  "aria-pressed": isOLActive,
320
321
  "data-role": `${namespace}-ordered-list-button`,
321
- tabIndex: -1
322
+ tabIndex: -1,
323
+ className: "toolbar-button"
322
324
  }));
323
325
  };
324
326
  var _default = exports.default = ListControls;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "152.0.0",
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",