carbon-react 147.7.2 → 147.8.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/accordion/accordion.component.js +2 -2
  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/lib/components/accordion/accordion.component.js +2 -2
  7. package/lib/components/message/message.component.d.ts +11 -9
  8. package/lib/components/message/message.component.js +4 -1
  9. package/lib/components/message/message.style.d.ts +1 -0
  10. package/lib/components/message/message.style.js +4 -0
  11. package/package.json +1 -1
package/esm/components/accordion/accordion.component.js CHANGED
@@ -86,11 +86,11 @@ const Accordion = /*#__PURE__*/React.forwardRef(({
86
86
  }, headerSpacing), /*#__PURE__*/React.createElement(StyledAccordionHeadingsContainer, {
87
87
  "data-element": "accordion-headings-container",
88
88
  hasValidationIcon: showValidationIcon
89
- }, /*#__PURE__*/React.createElement(StyledAccordionTitle, {
89
+ }, typeof title === "string" ? /*#__PURE__*/React.createElement(StyledAccordionTitle, {
90
90
  "data-element": "accordion-title",
91
91
  size: size,
92
92
  variant: variant
93
- }, getTitle()), variant !== "subtle" && /*#__PURE__*/React.createElement(React.Fragment, null, showValidationIcon && /*#__PURE__*/React.createElement(ValidationIcon, {
93
+ }, isExpanded ? openTitle || title : title) : getTitle(), variant !== "subtle" && /*#__PURE__*/React.createElement(React.Fragment, null, showValidationIcon && /*#__PURE__*/React.createElement(ValidationIcon, {
94
94
  error: error,
95
95
  warning: warning,
96
96
  info: info,
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/lib/components/accordion/accordion.component.js CHANGED
@@ -95,11 +95,11 @@ const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
95
95
  }, headerSpacing), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionHeadingsContainer, {
96
96
  "data-element": "accordion-headings-container",
97
97
  hasValidationIcon: showValidationIcon
98
- }, /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionTitle, {
98
+ }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionTitle, {
99
99
  "data-element": "accordion-title",
100
100
  size: size,
101
101
  variant: variant
102
- }, getTitle()), variant !== "subtle" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showValidationIcon && /*#__PURE__*/_react.default.createElement(_validations.default, {
102
+ }, isExpanded ? openTitle || title : title) : getTitle(), variant !== "subtle" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showValidationIcon && /*#__PURE__*/_react.default.createElement(_validations.default, {
103
103
  error: error,
104
104
  warning: warning,
105
105
  info: info,
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "147.7.2",
3
+ "version": "147.8.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",