carbon-react 123.5.0 → 123.6.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.component.js +1 -1
  2. package/esm/components/toast/toast.component.d.ts +4 -1
  3. package/esm/components/toast/toast.component.js +4 -0
  4. package/esm/components/toast/toast.style.d.ts +2 -0
  5. package/esm/components/toast/toast.style.js +37 -12
  6. package/lib/components/button/button.component.js +1 -1
  7. package/lib/components/toast/toast.component.d.ts +4 -1
  8. package/lib/components/toast/toast.component.js +4 -0
  9. package/lib/components/toast/toast.style.d.ts +2 -0
  10. package/lib/components/toast/toast.style.js +37 -12
  11. package/package.json +1 -1
package/esm/components/button/button.component.js CHANGED
@@ -143,7 +143,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
143
143
  buttonType: buttonType,
144
144
  disabled: disabled,
145
145
  destructive: destructive,
146
- role: inSplitButton ? "menu-item" : "button",
146
+ role: inSplitButton ? "menuitem" : "button",
147
147
  type: href ? undefined : "button",
148
148
  iconType: iconType,
149
149
  size: size,
package/esm/components/toast/toast.component.d.ts CHANGED
@@ -1,9 +1,12 @@
1
1
  import React from "react";
2
2
  declare type ToastVariants = "error" | "info" | "success" | "warning" | "notice" | "neutral" | "notification";
3
3
  declare type AlignOptions = "left" | "center" | "right";
4
+ declare type AlignYOptions = "top" | "center" | "bottom";
4
5
  export interface ToastProps {
5
- /** Sets the alignment of the component. */
6
+ /** Sets the horizontal alignment of the component. */
6
7
  align?: AlignOptions;
8
+ /** Sets the vertical alignment of the component */
9
+ alignY?: AlignYOptions;
7
10
  /** The rendered children of the component. */
8
11
  children: React.ReactNode;
9
12
  /** Customizes the appearance in the DLS theme */
package/esm/components/toast/toast.component.js CHANGED
@@ -13,6 +13,7 @@ import Logger from "../../__internal__/utils/logger";
13
13
  let isDeprecationWarningTriggered = false;
14
14
  const Toast = /*#__PURE__*/React.forwardRef(({
15
15
  align,
16
+ alignY,
16
17
  children,
17
18
  className,
18
19
  id,
@@ -121,6 +122,7 @@ const Toast = /*#__PURE__*/React.forwardRef(({
121
122
  nodeRef: toastContentNodeRef
122
123
  }, /*#__PURE__*/React.createElement(ToastStyle, _extends({
123
124
  align: align,
125
+ alignY: alignY,
124
126
  isNotice: isNotice,
125
127
  isNotification: isNotification,
126
128
  className: className
@@ -145,6 +147,7 @@ const Toast = /*#__PURE__*/React.forwardRef(({
145
147
  return /*#__PURE__*/React.createElement(StyledPortal, {
146
148
  id: targetPortalId,
147
149
  align: align,
150
+ alignY: alignY,
148
151
  isCenter: isCenter,
149
152
  isNotice: isNotice
150
153
  }, /*#__PURE__*/React.createElement(ToastWrapper, {
@@ -156,6 +159,7 @@ const Toast = /*#__PURE__*/React.forwardRef(({
156
159
  });
157
160
  Toast.propTypes = {
158
161
  "align": PropTypes.oneOf(["center", "left", "right"]),
162
+ "alignY": PropTypes.oneOf(["bottom", "center", "top"]),
159
163
  "children": PropTypes.node,
160
164
  "className": PropTypes.string,
161
165
  "data-component": PropTypes.string,
package/esm/components/toast/toast.style.d.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  import TypeIcon from "../message/type-icon/type-icon.style";
3
3
  declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
4
4
  align?: "left" | "right" | "center" | undefined;
5
+ alignY?: "bottom" | "top" | "center" | undefined;
5
6
  isCenter?: boolean | undefined;
6
7
  isNotice?: boolean | undefined;
7
8
  }, never>;
@@ -10,6 +11,7 @@ declare const ToastStyle: import("styled-components").StyledComponent<"div", any
10
11
  transparent?: boolean | undefined;
11
12
  } & import("styled-system").MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
12
13
  align?: "left" | "right" | "center" | undefined;
14
+ alignY?: "bottom" | "top" | "center" | undefined;
13
15
  maxWidth?: string | undefined;
14
16
  isCenter?: boolean | undefined;
15
17
  isNotice?: boolean | undefined;
package/esm/components/toast/toast.style.js CHANGED
@@ -11,7 +11,8 @@ const StyledPortal = styled(Portal)`
11
11
  theme,
12
12
  isCenter,
13
13
  isNotice,
14
- align
14
+ align,
15
+ alignY
15
16
  }) => css`
16
17
  position: fixed;
17
18
  top: 0;
@@ -24,8 +25,8 @@ const StyledPortal = styled(Portal)`
24
25
  `}
25
26
 
26
27
  ${align === "left" && css`
27
- left: 12%;
28
- transform: translateX(-50%);
28
+ left: 0;
29
+ transform: translateX(50%);
29
30
  `}
30
31
 
31
32
  ${align === "center" && css`
@@ -34,7 +35,6 @@ const StyledPortal = styled(Portal)`
34
35
  `}
35
36
 
36
37
  ${align === "right" && css`
37
- display: flex;
38
38
  right: 0;
39
39
  transform: translateX(-50%);
40
40
  `}
@@ -43,6 +43,23 @@ const StyledPortal = styled(Portal)`
43
43
  bottom: 0;
44
44
  top: auto;
45
45
  width: 100%;
46
+ `}
47
+
48
+ ${alignY === "top" && css`
49
+ top: 0;
50
+ bottom: auto;
51
+ `}
52
+
53
+ ${alignY === "center" && css`
54
+ top: 50%;
55
+ transform: translate(${align === "left" ? "50%" : "-50%"}, -50%);
56
+ `}
57
+
58
+ ${alignY === "bottom" && css`
59
+ bottom: 0;
60
+ top: auto;
61
+ display: flex;
62
+ flex-direction: column-reverse;
46
63
  `}
47
64
  `}
48
65
  `;
@@ -56,15 +73,19 @@ const ToastStyle = styled(MessageStyle)`
56
73
  maxWidth,
57
74
  isCenter,
58
75
  align,
59
- isNotification
76
+ isNotification,
77
+ alignY,
78
+ isNotice
60
79
  }) => css`
61
80
  box-shadow: 0 10px 30px 0 rgba(0, 20, 29, 0.1),
62
81
  0 30px 60px 0 rgba(0, 20, 29, 0.1);
63
82
  line-height: 22px;
64
- margin-top: 30px;
83
+ margin-top: ${alignY === "top" && isNotice || alignY === "center" ? "0" : "30px"};
84
+ margin-bottom: ${alignY === "bottom" && !isNotice ? "30px" : "0"};
65
85
  max-width: ${!maxWidth ? "300px" : maxWidth};
66
86
  position: relative;
67
87
  margin-right: ${isCenter || align === "right" ? "auto" : "30px"};
88
+ margin-left: ${isCenter || align === "left" ? "auto" : "30px"};
68
89
 
69
90
  ${isNotification && css`
70
91
  border: 1px solid var(--colorsSemanticInfo500);
@@ -91,7 +112,10 @@ const ToastStyle = styled(MessageStyle)`
91
112
 
92
113
  &${animationName}-exit${animationName}-exit-active {
93
114
  opacity: 0;
94
- margin-top: -40px;
115
+
116
+ ${({
117
+ alignY
118
+ }) => alignY === "bottom" ? "margin-bottom: -40px" : "margin-top: -40px"};
95
119
  transition: all 150ms ease-out;
96
120
  }
97
121
 
@@ -103,7 +127,8 @@ const ToastStyle = styled(MessageStyle)`
103
127
  }
104
128
 
105
129
  ${({
106
- isNotice
130
+ isNotice,
131
+ alignY
107
132
  }) => isNotice && css`
108
133
  background-color: var(--colorsUtilityMajor400);
109
134
  border: none;
@@ -120,24 +145,24 @@ const ToastStyle = styled(MessageStyle)`
120
145
  }
121
146
 
122
147
  &${alternativeAnimationName}-appear, &${alternativeAnimationName}-enter {
123
- bottom: -40px;
148
+ ${alignY === "top" ? "top: -40px" : "bottom: -40px"};
124
149
  opacity: 0;
125
150
  }
126
151
 
127
152
  &${alternativeAnimationName}-exit {
128
- bottom: 0;
153
+ ${alignY === "top" ? "top: 0" : "bottom: 0"};
129
154
  opacity: 1;
130
155
  }
131
156
 
132
157
  &${alternativeAnimationName}-appear${alternativeAnimationName}-appear-active,
133
158
  &${alternativeAnimationName}-enter${alternativeAnimationName}-enter-active {
134
- bottom: 0;
159
+ ${alignY === "top" ? "top: 0" : "bottom: 0"};
135
160
  opacity: 1;
136
161
  transition: all 400ms ease;
137
162
  }
138
163
 
139
164
  &${alternativeAnimationName}-exit${alternativeAnimationName}-exit-active {
140
- bottom: -40px;
165
+ ${alignY === "top" ? "top: -40px" : "bottom: -40px"};
141
166
  opacity: 0;
142
167
  transition: all 200ms ease;
143
168
  }
package/lib/components/button/button.component.js CHANGED
@@ -152,7 +152,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({
152
152
  buttonType: buttonType,
153
153
  disabled: disabled,
154
154
  destructive: destructive,
155
- role: inSplitButton ? "menu-item" : "button",
155
+ role: inSplitButton ? "menuitem" : "button",
156
156
  type: href ? undefined : "button",
157
157
  iconType: iconType,
158
158
  size: size,
package/lib/components/toast/toast.component.d.ts CHANGED
@@ -1,9 +1,12 @@
1
1
  import React from "react";
2
2
  declare type ToastVariants = "error" | "info" | "success" | "warning" | "notice" | "neutral" | "notification";
3
3
  declare type AlignOptions = "left" | "center" | "right";
4
+ declare type AlignYOptions = "top" | "center" | "bottom";
4
5
  export interface ToastProps {
5
- /** Sets the alignment of the component. */
6
+ /** Sets the horizontal alignment of the component. */
6
7
  align?: AlignOptions;
8
+ /** Sets the vertical alignment of the component */
9
+ alignY?: AlignYOptions;
7
10
  /** The rendered children of the component. */
8
11
  children: React.ReactNode;
9
12
  /** Customizes the appearance in the DLS theme */
package/lib/components/toast/toast.component.js CHANGED
@@ -22,6 +22,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
22
22
  let isDeprecationWarningTriggered = false;
23
23
  const Toast = /*#__PURE__*/_react.default.forwardRef(({
24
24
  align,
25
+ alignY,
25
26
  children,
26
27
  className,
27
28
  id,
@@ -130,6 +131,7 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
130
131
  nodeRef: toastContentNodeRef
131
132
  }, /*#__PURE__*/_react.default.createElement(_toast.ToastStyle, _extends({
132
133
  align: align,
134
+ alignY: alignY,
133
135
  isNotice: isNotice,
134
136
  isNotification: isNotification,
135
137
  className: className
@@ -154,6 +156,7 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
154
156
  return /*#__PURE__*/_react.default.createElement(_toast.StyledPortal, {
155
157
  id: targetPortalId,
156
158
  align: align,
159
+ alignY: alignY,
157
160
  isCenter: isCenter,
158
161
  isNotice: isNotice
159
162
  }, /*#__PURE__*/_react.default.createElement(_toast.ToastWrapper, {
@@ -166,6 +169,7 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
166
169
  exports.Toast = Toast;
167
170
  Toast.propTypes = {
168
171
  "align": _propTypes.default.oneOf(["center", "left", "right"]),
172
+ "alignY": _propTypes.default.oneOf(["bottom", "center", "top"]),
169
173
  "children": _propTypes.default.node,
170
174
  "className": _propTypes.default.string,
171
175
  "data-component": _propTypes.default.string,
package/lib/components/toast/toast.style.d.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  import TypeIcon from "../message/type-icon/type-icon.style";
3
3
  declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
4
4
  align?: "left" | "right" | "center" | undefined;
5
+ alignY?: "bottom" | "top" | "center" | undefined;
5
6
  isCenter?: boolean | undefined;
6
7
  isNotice?: boolean | undefined;
7
8
  }, never>;
@@ -10,6 +11,7 @@ declare const ToastStyle: import("styled-components").StyledComponent<"div", any
10
11
  transparent?: boolean | undefined;
11
12
  } & import("styled-system").MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
12
13
  align?: "left" | "right" | "center" | undefined;
14
+ alignY?: "bottom" | "top" | "center" | undefined;
13
15
  maxWidth?: string | undefined;
14
16
  isCenter?: boolean | undefined;
15
17
  isNotice?: boolean | undefined;
package/lib/components/toast/toast.style.js CHANGED
@@ -26,7 +26,8 @@ const StyledPortal = (0, _styledComponents.default)(_portal.default)`
26
26
  theme,
27
27
  isCenter,
28
28
  isNotice,
29
- align
29
+ align,
30
+ alignY
30
31
  }) => (0, _styledComponents.css)`
31
32
  position: fixed;
32
33
  top: 0;
@@ -39,8 +40,8 @@ const StyledPortal = (0, _styledComponents.default)(_portal.default)`
39
40
  `}
40
41
 
41
42
  ${align === "left" && (0, _styledComponents.css)`
42
- left: 12%;
43
- transform: translateX(-50%);
43
+ left: 0;
44
+ transform: translateX(50%);
44
45
  `}
45
46
 
46
47
  ${align === "center" && (0, _styledComponents.css)`
@@ -49,7 +50,6 @@ const StyledPortal = (0, _styledComponents.default)(_portal.default)`
49
50
  `}
50
51
 
51
52
  ${align === "right" && (0, _styledComponents.css)`
52
- display: flex;
53
53
  right: 0;
54
54
  transform: translateX(-50%);
55
55
  `}
@@ -58,6 +58,23 @@ const StyledPortal = (0, _styledComponents.default)(_portal.default)`
58
58
  bottom: 0;
59
59
  top: auto;
60
60
  width: 100%;
61
+ `}
62
+
63
+ ${alignY === "top" && (0, _styledComponents.css)`
64
+ top: 0;
65
+ bottom: auto;
66
+ `}
67
+
68
+ ${alignY === "center" && (0, _styledComponents.css)`
69
+ top: 50%;
70
+ transform: translate(${align === "left" ? "50%" : "-50%"}, -50%);
71
+ `}
72
+
73
+ ${alignY === "bottom" && (0, _styledComponents.css)`
74
+ bottom: 0;
75
+ top: auto;
76
+ display: flex;
77
+ flex-direction: column-reverse;
61
78
  `}
62
79
  `}
63
80
  `;
@@ -72,15 +89,19 @@ const ToastStyle = (0, _styledComponents.default)(_message.default)`
72
89
  maxWidth,
73
90
  isCenter,
74
91
  align,
75
- isNotification
92
+ isNotification,
93
+ alignY,
94
+ isNotice
76
95
  }) => (0, _styledComponents.css)`
77
96
  box-shadow: 0 10px 30px 0 rgba(0, 20, 29, 0.1),
78
97
  0 30px 60px 0 rgba(0, 20, 29, 0.1);
79
98
  line-height: 22px;
80
- margin-top: 30px;
99
+ margin-top: ${alignY === "top" && isNotice || alignY === "center" ? "0" : "30px"};
100
+ margin-bottom: ${alignY === "bottom" && !isNotice ? "30px" : "0"};
81
101
  max-width: ${!maxWidth ? "300px" : maxWidth};
82
102
  position: relative;
83
103
  margin-right: ${isCenter || align === "right" ? "auto" : "30px"};
104
+ margin-left: ${isCenter || align === "left" ? "auto" : "30px"};
84
105
 
85
106
  ${isNotification && (0, _styledComponents.css)`
86
107
  border: 1px solid var(--colorsSemanticInfo500);
@@ -107,7 +128,10 @@ const ToastStyle = (0, _styledComponents.default)(_message.default)`
107
128
 
108
129
  &${animationName}-exit${animationName}-exit-active {
109
130
  opacity: 0;
110
- margin-top: -40px;
131
+
132
+ ${({
133
+ alignY
134
+ }) => alignY === "bottom" ? "margin-bottom: -40px" : "margin-top: -40px"};
111
135
  transition: all 150ms ease-out;
112
136
  }
113
137
 
@@ -119,7 +143,8 @@ const ToastStyle = (0, _styledComponents.default)(_message.default)`
119
143
  }
120
144
 
121
145
  ${({
122
- isNotice
146
+ isNotice,
147
+ alignY
123
148
  }) => isNotice && (0, _styledComponents.css)`
124
149
  background-color: var(--colorsUtilityMajor400);
125
150
  border: none;
@@ -136,24 +161,24 @@ const ToastStyle = (0, _styledComponents.default)(_message.default)`
136
161
  }
137
162
 
138
163
  &${alternativeAnimationName}-appear, &${alternativeAnimationName}-enter {
139
- bottom: -40px;
164
+ ${alignY === "top" ? "top: -40px" : "bottom: -40px"};
140
165
  opacity: 0;
141
166
  }
142
167
 
143
168
  &${alternativeAnimationName}-exit {
144
- bottom: 0;
169
+ ${alignY === "top" ? "top: 0" : "bottom: 0"};
145
170
  opacity: 1;
146
171
  }
147
172
 
148
173
  &${alternativeAnimationName}-appear${alternativeAnimationName}-appear-active,
149
174
  &${alternativeAnimationName}-enter${alternativeAnimationName}-enter-active {
150
- bottom: 0;
175
+ ${alignY === "top" ? "top: 0" : "bottom: 0"};
151
176
  opacity: 1;
152
177
  transition: all 400ms ease;
153
178
  }
154
179
 
155
180
  &${alternativeAnimationName}-exit${alternativeAnimationName}-exit-active {
156
- bottom: -40px;
181
+ ${alignY === "top" ? "top: -40px" : "bottom: -40px"};
157
182
  opacity: 0;
158
183
  transition: all 200ms ease;
159
184
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "123.5.0",
3
+ "version": "123.6.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",