carbon-react 147.7.1 → 147.8.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 (13) hide show
  1. package/esm/components/badge/badge.component.d.ts +1 -1
  2. package/esm/components/message/message.component.d.ts +11 -9
  3. package/esm/components/message/message.component.js +4 -1
  4. package/esm/components/message/message.style.d.ts +1 -0
  5. package/esm/components/message/message.style.js +4 -0
  6. package/esm/components/switch/switch.component.js +7 -4
  7. package/lib/components/badge/badge.component.d.ts +1 -1
  8. package/lib/components/message/message.component.d.ts +11 -9
  9. package/lib/components/message/message.component.js +4 -1
  10. package/lib/components/message/message.style.d.ts +1 -0
  11. package/lib/components/message/message.style.js +4 -0
  12. package/lib/components/switch/switch.component.js +7 -4
  13. package/package.json +1 -1
package/esm/components/badge/badge.component.d.ts CHANGED
@@ -6,7 +6,7 @@ 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 */
9
+ /** Prop to specify the color of the component */
10
10
  color?: string;
11
11
  /** Callback fired when badge is clicked */
12
12
  onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
package/esm/components/message/message.component.d.ts CHANGED
@@ -2,24 +2,26 @@ import React from "react";
2
2
  import { MarginProps } from "styled-system";
3
3
  export declare type MessageVariant = "error" | "info" | "success" | "warning" | "neutral";
4
4
  export interface MessageProps extends MarginProps {
5
- /** set content to component */
5
+ /** Set the component's content */
6
6
  children?: React.ReactNode;
7
- /** set custom aria label for message close button */
7
+ /** Set custom aria-label for component's close button */
8
8
  closeButtonAriaLabel?: string;
9
- /** set custom id to component root */
9
+ /** Set custom id to component root */
10
10
  id?: string;
11
- /** function runs when user click dismiss button */
11
+ /** Callback triggered on dismiss */
12
12
  onDismiss?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
13
- /** show message component */
13
+ /** Flag to determine if the message is rendered */
14
14
  open?: boolean;
15
- /** determines if the close icon is shown */
15
+ /** Flag to determine if the close button is rendered */
16
16
  showCloseIcon?: boolean;
17
- /** set message title */
17
+ /** Set message title */
18
18
  title?: React.ReactNode;
19
- /** set background to be invisible */
19
+ /** Set transparent styling */
20
20
  transparent?: boolean;
21
- /** set type of message based on new DLS standard */
21
+ /** Set the component's variant */
22
22
  variant?: MessageVariant;
23
+ /** Set the component's width, accepts any valid css string */
24
+ width?: string;
23
25
  }
24
26
  export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
25
27
  export default Message;
package/esm/components/message/message.component.js CHANGED
@@ -20,6 +20,7 @@ const Message = /*#__PURE__*/React.forwardRef(({
20
20
  id,
21
21
  closeButtonAriaLabel,
22
22
  showCloseIcon = true,
23
+ width,
23
24
  ...props
24
25
  }, ref) => {
25
26
  const messageRef = useRef(null);
@@ -40,6 +41,7 @@ const Message = /*#__PURE__*/React.forwardRef(({
40
41
  transparent: transparent,
41
42
  variant: variant,
42
43
  id: id,
44
+ width: width,
43
45
  ref: refToPass
44
46
  }, marginProps, {
45
47
  tabIndex: -1
@@ -218,7 +220,8 @@ if (process.env.NODE_ENV !== "production") {
218
220
  "showCloseIcon": PropTypes.bool,
219
221
  "title": PropTypes.node,
220
222
  "transparent": PropTypes.bool,
221
- "variant": PropTypes.oneOf(["error", "info", "neutral", "success", "warning"])
223
+ "variant": PropTypes.oneOf(["error", "info", "neutral", "success", "warning"]),
224
+ "width": PropTypes.string
222
225
  };
223
226
  }
224
227
  export { Message };
package/esm/components/message/message.style.d.ts CHANGED
@@ -3,6 +3,7 @@ import { MessageVariant } from "./message.component";
3
3
  declare type MessageStyleProps = {
4
4
  variant?: MessageVariant;
5
5
  transparent?: boolean;
6
+ width?: string;
6
7
  };
7
8
  declare const MessageStyle: import("styled-components").StyledComponent<"div", any, MessageStyleProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
8
9
  export default MessageStyle;
package/esm/components/message/message.style.js CHANGED
@@ -40,6 +40,10 @@ const MessageStyle = styled.div`
40
40
  transform: translateY(-50%);
41
41
  }
42
42
 
43
+ ${({
44
+ width
45
+ }) => width && `width: ${width};`}
46
+
43
47
  ${margin}
44
48
  `;
45
49
  MessageStyle.defaultProps = {
package/esm/components/switch/switch.component.js CHANGED
@@ -185,6 +185,7 @@ const Switch = /*#__PURE__*/React.forwardRef(({
185
185
  const errorMargin = error || warning ? defaultInputWrapperMargin : defaultMargin;
186
186
  const direction = labelInline ? "row" : "column";
187
187
  const reverseDirection = labelInline ? "row-reverse" : "column";
188
+ const labelWrapperAlignSelf = labelInline && !error && !warning && !info ? "center" : "";
188
189
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSwitch, switchStylePropsForNewValidation, /*#__PURE__*/React.createElement(Box, {
189
190
  "data-role": "field-reverse-wrapper",
190
191
  display: "flex",
@@ -193,7 +194,8 @@ const Switch = /*#__PURE__*/React.forwardRef(({
193
194
  flexDirection: !reverse ? reverseDirection : direction,
194
195
  width: labelInline ? "100%" : "auto"
195
196
  }, /*#__PURE__*/React.createElement(Box, {
196
- "data-role": "label-wrapper"
197
+ "data-role": "label-wrapper",
198
+ alignSelf: labelWrapperAlignSelf
197
199
  }, /*#__PURE__*/React.createElement(Label, {
198
200
  isDarkBackground: isDarkBackground,
199
201
  labelId: labelId.current,
@@ -210,10 +212,11 @@ const Switch = /*#__PURE__*/React.forwardRef(({
210
212
  id: inputHintId.current,
211
213
  isDarkBackground: isDarkBackground
212
214
  }, labelHelp))), /*#__PURE__*/React.createElement(Box, {
213
- ml: reverse ? errorMargin : defaultInputWrapperMargin,
214
- mr: !reverse ? errorMargin : defaultInputWrapperMargin,
215
+ ml: reverse ? errorMargin : 0,
216
+ mr: !reverse ? errorMargin : 0,
215
217
  position: "relative",
216
- id: "input-wrapper"
218
+ id: "input-wrapper",
219
+ "data-role": "input-wrapper"
217
220
  }, /*#__PURE__*/React.createElement(ValidationMessage, {
218
221
  error: error,
219
222
  warning: warning,
package/lib/components/badge/badge.component.d.ts CHANGED
@@ -6,7 +6,7 @@ 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 */
9
+ /** Prop to specify the color of the component */
10
10
  color?: string;
11
11
  /** Callback fired when badge is clicked */
12
12
  onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
package/lib/components/message/message.component.d.ts CHANGED
@@ -2,24 +2,26 @@ import React from "react";
2
2
  import { MarginProps } from "styled-system";
3
3
  export declare type MessageVariant = "error" | "info" | "success" | "warning" | "neutral";
4
4
  export interface MessageProps extends MarginProps {
5
- /** set content to component */
5
+ /** Set the component's content */
6
6
  children?: React.ReactNode;
7
- /** set custom aria label for message close button */
7
+ /** Set custom aria-label for component's close button */
8
8
  closeButtonAriaLabel?: string;
9
- /** set custom id to component root */
9
+ /** Set custom id to component root */
10
10
  id?: string;
11
- /** function runs when user click dismiss button */
11
+ /** Callback triggered on dismiss */
12
12
  onDismiss?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
13
- /** show message component */
13
+ /** Flag to determine if the message is rendered */
14
14
  open?: boolean;
15
- /** determines if the close icon is shown */
15
+ /** Flag to determine if the close button is rendered */
16
16
  showCloseIcon?: boolean;
17
- /** set message title */
17
+ /** Set message title */
18
18
  title?: React.ReactNode;
19
- /** set background to be invisible */
19
+ /** Set transparent styling */
20
20
  transparent?: boolean;
21
- /** set type of message based on new DLS standard */
21
+ /** Set the component's variant */
22
22
  variant?: MessageVariant;
23
+ /** Set the component's width, accepts any valid css string */
24
+ width?: string;
23
25
  }
24
26
  export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
25
27
  export default Message;
package/lib/components/message/message.component.js CHANGED
@@ -29,6 +29,7 @@ const Message = exports.Message = /*#__PURE__*/_react.default.forwardRef(({
29
29
  id,
30
30
  closeButtonAriaLabel,
31
31
  showCloseIcon = true,
32
+ width,
32
33
  ...props
33
34
  }, ref) => {
34
35
  const messageRef = (0, _react.useRef)(null);
@@ -49,6 +50,7 @@ const Message = exports.Message = /*#__PURE__*/_react.default.forwardRef(({
49
50
  transparent: transparent,
50
51
  variant: variant,
51
52
  id: id,
53
+ width: width,
52
54
  ref: refToPass
53
55
  }, marginProps, {
54
56
  tabIndex: -1
@@ -227,7 +229,8 @@ if (process.env.NODE_ENV !== "production") {
227
229
  "showCloseIcon": _propTypes.default.bool,
228
230
  "title": _propTypes.default.node,
229
231
  "transparent": _propTypes.default.bool,
230
- "variant": _propTypes.default.oneOf(["error", "info", "neutral", "success", "warning"])
232
+ "variant": _propTypes.default.oneOf(["error", "info", "neutral", "success", "warning"]),
233
+ "width": _propTypes.default.string
231
234
  };
232
235
  }
233
236
  Message.displayName = "Message";
package/lib/components/message/message.style.d.ts CHANGED
@@ -3,6 +3,7 @@ import { MessageVariant } from "./message.component";
3
3
  declare type MessageStyleProps = {
4
4
  variant?: MessageVariant;
5
5
  transparent?: boolean;
6
+ width?: string;
6
7
  };
7
8
  declare const MessageStyle: import("styled-components").StyledComponent<"div", any, MessageStyleProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
8
9
  export default MessageStyle;
package/lib/components/message/message.style.js CHANGED
@@ -49,6 +49,10 @@ const MessageStyle = _styledComponents.default.div`
49
49
  transform: translateY(-50%);
50
50
  }
51
51
 
52
+ ${({
53
+ width
54
+ }) => width && `width: ${width};`}
55
+
52
56
  ${_styledSystem.margin}
53
57
  `;
54
58
  MessageStyle.defaultProps = {
package/lib/components/switch/switch.component.js CHANGED
@@ -194,6 +194,7 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
194
194
  const errorMargin = error || warning ? defaultInputWrapperMargin : defaultMargin;
195
195
  const direction = labelInline ? "row" : "column";
196
196
  const reverseDirection = labelInline ? "row-reverse" : "column";
197
+ const labelWrapperAlignSelf = labelInline && !error && !warning && !info ? "center" : "";
197
198
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_switch.default, switchStylePropsForNewValidation, /*#__PURE__*/_react.default.createElement(_box.default, {
198
199
  "data-role": "field-reverse-wrapper",
199
200
  display: "flex",
@@ -202,7 +203,8 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
202
203
  flexDirection: !reverse ? reverseDirection : direction,
203
204
  width: labelInline ? "100%" : "auto"
204
205
  }, /*#__PURE__*/_react.default.createElement(_box.default, {
205
- "data-role": "label-wrapper"
206
+ "data-role": "label-wrapper",
207
+ alignSelf: labelWrapperAlignSelf
206
208
  }, /*#__PURE__*/_react.default.createElement(_label.default, {
207
209
  isDarkBackground: isDarkBackground,
208
210
  labelId: labelId.current,
@@ -219,10 +221,11 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
219
221
  id: inputHintId.current,
220
222
  isDarkBackground: isDarkBackground
221
223
  }, labelHelp))), /*#__PURE__*/_react.default.createElement(_box.default, {
222
- ml: reverse ? errorMargin : defaultInputWrapperMargin,
223
- mr: !reverse ? errorMargin : defaultInputWrapperMargin,
224
+ ml: reverse ? errorMargin : 0,
225
+ mr: !reverse ? errorMargin : 0,
224
226
  position: "relative",
225
- id: "input-wrapper"
227
+ id: "input-wrapper",
228
+ "data-role": "input-wrapper"
226
229
  }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
227
230
  error: error,
228
231
  warning: warning,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "147.7.1",
3
+ "version": "147.8.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",