carbon-react 123.10.3 → 123.11.1

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/badge/badge.component.d.ts +3 -1
  2. package/esm/components/badge/badge.component.js +3 -1
  3. package/esm/components/badge/badge.style.d.ts +4 -1
  4. package/esm/components/badge/badge.style.js +20 -4
  5. package/esm/components/menu/menu-full-screen/menu-full-screen.component.js +8 -2
  6. package/lib/components/badge/badge.component.d.ts +3 -1
  7. package/lib/components/badge/badge.component.js +3 -1
  8. package/lib/components/badge/badge.style.d.ts +4 -1
  9. package/lib/components/badge/badge.style.js +21 -5
  10. package/lib/components/menu/menu-full-screen/menu-full-screen.component.js +8 -2
  11. package/package.json +1 -1
package/esm/components/badge/badge.component.d.ts CHANGED
@@ -6,8 +6,10 @@ export interface BadgeProps {
6
6
  children: React.ReactNode;
7
7
  /** The number rendered in the badge component */
8
8
  counter?: string | number;
9
+ /** Prop to specify the colour of the component */
10
+ color?: string;
9
11
  /** Callback fired when badge is clicked */
10
12
  onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
11
13
  }
12
- export declare const Badge: ({ "aria-label": ariaLabel, children, counter, onClick, }: BadgeProps) => React.JSX.Element;
14
+ export declare const Badge: ({ "aria-label": ariaLabel, children, counter, color, onClick, }: BadgeProps) => React.JSX.Element;
13
15
  export default Badge;
package/esm/components/badge/badge.component.js CHANGED
@@ -6,6 +6,7 @@ export const Badge = ({
6
6
  "aria-label": ariaLabel,
7
7
  children,
8
8
  counter = 0,
9
+ color = "--colorsActionMajor500",
9
10
  onClick
10
11
  }) => {
11
12
  const shouldDisplayCounter = counter > 0;
@@ -19,7 +20,8 @@ export const Badge = ({
19
20
  };
20
21
  if (shouldDisplayCounter) {
21
22
  return /*#__PURE__*/React.createElement(StyledBadge, _extends({
22
- "data-component": "badge"
23
+ "data-component": "badge",
24
+ color: color
23
25
  }, props), onClick && /*#__PURE__*/React.createElement(StyledCrossIcon, {
24
26
  "data-element": "badge-cross-icon",
25
27
  type: "cross"
package/esm/components/badge/badge.style.d.ts CHANGED
@@ -1,8 +1,11 @@
1
1
  /// <reference types="react" />
2
2
  declare const StyledBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
3
3
  declare const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
4
+ interface StyledBadgeProps {
5
+ color: string;
6
+ }
4
7
  declare const StyledBadge: import("styled-components").StyledComponent<"span", any, {
5
8
  as: import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>> | undefined;
6
- }, "as">;
9
+ } & StyledBadgeProps, "as">;
7
10
  declare const StyledCrossIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
8
11
  export { StyledBadge, StyledBadgeWrapper, StyledCrossIcon, StyledCounter };
package/esm/components/badge/badge.style.js CHANGED
@@ -2,6 +2,8 @@ import styled, { css } from "styled-components";
2
2
  import StyledIcon from "../icon/icon.style";
3
3
  import Button from "../button";
4
4
  import Icon from "../icon";
5
+ import baseTheme from "../../style/themes/base";
6
+ import { toColor } from "../../style/utils/color";
5
7
  const commonStyles = `
6
8
  overflow: hidden;
7
9
  border-radius: var(--borderRadiusCircle);
@@ -34,15 +36,23 @@ const StyledBadge = styled.span.attrs(({
34
36
  width: 22px;
35
37
  min-height: 22px;
36
38
  border: solid 2px transparent;
37
- border-color: var(--colorsActionMajor500);
38
- color: var(--colorsActionMajor500);
39
+
40
+ ${({
41
+ color,
42
+ theme
43
+ }) => css`
44
+ border-color: ${toColor(theme, color)};
45
+ color: ${toColor(theme, color)};
46
+ `};
39
47
 
40
48
  ::-moz-focus-inner {
41
49
  border: none;
42
50
  }
43
51
 
44
52
  ${({
45
- onClick
53
+ onClick,
54
+ color,
55
+ theme
46
56
  }) => css`
47
57
  ${onClick && `
48
58
  ${commonStyles}
@@ -54,9 +64,12 @@ const StyledBadge = styled.span.attrs(({
54
64
  border: none;
55
65
  }
56
66
 
67
+ border-color: ${toColor(theme, color)};
68
+ color: ${toColor(theme, color)};
69
+
57
70
  &:hover,
58
71
  &:focus {
59
- background: var(--colorsActionMajor500);
72
+ background: ${toColor(theme, color)};
60
73
  border: none;
61
74
  ${StyledCounter} {
62
75
  display: none;
@@ -81,4 +94,7 @@ const StyledCrossIcon = styled(Icon)`
81
94
  margin: 0;
82
95
  display: none;
83
96
  `;
97
+ StyledBadge.defaultProps = {
98
+ theme: baseTheme
99
+ };
84
100
  export { StyledBadge, StyledBadgeWrapper, StyledCrossIcon, StyledCounter };
package/esm/components/menu/menu-full-screen/menu-full-screen.component.js CHANGED
@@ -45,7 +45,13 @@ export const MenuFullscreen = ({
45
45
  }
46
46
  }
47
47
  };
48
- const filteredChildren = React.Children.toArray(children).filter(c => /*#__PURE__*/React.isValidElement(c));
48
+ const flattenedChildren = React.Children.toArray(children);
49
+ const childArray = React.Children.toArray(flattenedChildren.map((child, index) => {
50
+ if (index < flattenedChildren.length - 1) {
51
+ return /*#__PURE__*/React.createElement(React.Fragment, null, child, /*#__PURE__*/React.createElement(MenuDivider, null));
52
+ }
53
+ return child;
54
+ }));
49
55
  return /*#__PURE__*/React.createElement("li", {
50
56
  "aria-label": "menu-fullscreen"
51
57
  }, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(FocusTrap, {
@@ -89,6 +95,6 @@ export const MenuFullscreen = ({
89
95
  openSubmenuId: null,
90
96
  setOpenSubmenuId: /* istanbul ignore next */() => {}
91
97
  }
92
- }, filteredChildren.map((child, index) => /*#__PURE__*/React.createElement(React.Fragment, null, child, index < filteredChildren.length - 1 ? /*#__PURE__*/React.createElement(MenuDivider, null) : null)))))))));
98
+ }, childArray)))))));
93
99
  };
94
100
  export default MenuFullscreen;
package/lib/components/badge/badge.component.d.ts CHANGED
@@ -6,8 +6,10 @@ export interface BadgeProps {
6
6
  children: React.ReactNode;
7
7
  /** The number rendered in the badge component */
8
8
  counter?: string | number;
9
+ /** Prop to specify the colour of the component */
10
+ color?: string;
9
11
  /** Callback fired when badge is clicked */
10
12
  onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
11
13
  }
12
- export declare const Badge: ({ "aria-label": ariaLabel, children, counter, onClick, }: BadgeProps) => React.JSX.Element;
14
+ export declare const Badge: ({ "aria-label": ariaLabel, children, counter, color, onClick, }: BadgeProps) => React.JSX.Element;
13
15
  export default Badge;
package/lib/components/badge/badge.component.js CHANGED
@@ -13,6 +13,7 @@ const Badge = ({
13
13
  "aria-label": ariaLabel,
14
14
  children,
15
15
  counter = 0,
16
+ color = "--colorsActionMajor500",
16
17
  onClick
17
18
  }) => {
18
19
  const shouldDisplayCounter = counter > 0;
@@ -26,7 +27,8 @@ const Badge = ({
26
27
  };
27
28
  if (shouldDisplayCounter) {
28
29
  return /*#__PURE__*/_react.default.createElement(_badge.StyledBadge, _extends({
29
- "data-component": "badge"
30
+ "data-component": "badge",
31
+ color: color
30
32
  }, props), onClick && /*#__PURE__*/_react.default.createElement(_badge.StyledCrossIcon, {
31
33
  "data-element": "badge-cross-icon",
32
34
  type: "cross"
package/lib/components/badge/badge.style.d.ts CHANGED
@@ -1,8 +1,11 @@
1
1
  /// <reference types="react" />
2
2
  declare const StyledBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
3
3
  declare const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
4
+ interface StyledBadgeProps {
5
+ color: string;
6
+ }
4
7
  declare const StyledBadge: import("styled-components").StyledComponent<"span", any, {
5
8
  as: import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>> | undefined;
6
- }, "as">;
9
+ } & StyledBadgeProps, "as">;
7
10
  declare const StyledCrossIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
8
11
  export { StyledBadge, StyledBadgeWrapper, StyledCrossIcon, StyledCounter };
package/lib/components/badge/badge.style.js CHANGED
@@ -8,6 +8,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
8
8
  var _icon = _interopRequireDefault(require("../icon/icon.style"));
9
9
  var _button = _interopRequireDefault(require("../button"));
10
10
  var _icon2 = _interopRequireDefault(require("../icon"));
11
+ var _base = _interopRequireDefault(require("../../style/themes/base"));
12
+ var _color = require("../../style/utils/color");
11
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
14
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
13
15
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -45,15 +47,23 @@ const StyledBadge = _styledComponents.default.span.attrs(({
45
47
  width: 22px;
46
48
  min-height: 22px;
47
49
  border: solid 2px transparent;
48
- border-color: var(--colorsActionMajor500);
49
- color: var(--colorsActionMajor500);
50
+
51
+ ${({
52
+ color,
53
+ theme
54
+ }) => (0, _styledComponents.css)`
55
+ border-color: ${(0, _color.toColor)(theme, color)};
56
+ color: ${(0, _color.toColor)(theme, color)};
57
+ `};
50
58
 
51
59
  ::-moz-focus-inner {
52
60
  border: none;
53
61
  }
54
62
 
55
63
  ${({
56
- onClick
64
+ onClick,
65
+ color,
66
+ theme
57
67
  }) => (0, _styledComponents.css)`
58
68
  ${onClick && `
59
69
  ${commonStyles}
@@ -65,9 +75,12 @@ const StyledBadge = _styledComponents.default.span.attrs(({
65
75
  border: none;
66
76
  }
67
77
 
78
+ border-color: ${(0, _color.toColor)(theme, color)};
79
+ color: ${(0, _color.toColor)(theme, color)};
80
+
68
81
  &:hover,
69
82
  &:focus {
70
- background: var(--colorsActionMajor500);
83
+ background: ${(0, _color.toColor)(theme, color)};
71
84
  border: none;
72
85
  ${StyledCounter} {
73
86
  display: none;
@@ -93,4 +106,7 @@ const StyledCrossIcon = (0, _styledComponents.default)(_icon2.default)`
93
106
  margin: 0;
94
107
  display: none;
95
108
  `;
96
- exports.StyledCrossIcon = StyledCrossIcon;
109
+ exports.StyledCrossIcon = StyledCrossIcon;
110
+ StyledBadge.defaultProps = {
111
+ theme: _base.default
112
+ };
package/lib/components/menu/menu-full-screen/menu-full-screen.component.js CHANGED
@@ -54,7 +54,13 @@ const MenuFullscreen = ({
54
54
  }
55
55
  }
56
56
  };
57
- const filteredChildren = _react.default.Children.toArray(children).filter(c => /*#__PURE__*/_react.default.isValidElement(c));
57
+ const flattenedChildren = _react.default.Children.toArray(children);
58
+ const childArray = _react.default.Children.toArray(flattenedChildren.map((child, index) => {
59
+ if (index < flattenedChildren.length - 1) {
60
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, child, /*#__PURE__*/_react.default.createElement(_menuDivider.default, null));
61
+ }
62
+ return child;
63
+ }));
58
64
  return /*#__PURE__*/_react.default.createElement("li", {
59
65
  "aria-label": "menu-fullscreen"
60
66
  }, /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
@@ -98,7 +104,7 @@ const MenuFullscreen = ({
98
104
  openSubmenuId: null,
99
105
  setOpenSubmenuId: /* istanbul ignore next */() => {}
100
106
  }
101
- }, filteredChildren.map((child, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, child, index < filteredChildren.length - 1 ? /*#__PURE__*/_react.default.createElement(_menuDivider.default, null) : null)))))))));
107
+ }, childArray)))))));
102
108
  };
103
109
  exports.MenuFullscreen = MenuFullscreen;
104
110
  var _default = MenuFullscreen;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "123.10.3",
3
+ "version": "123.11.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",