carbon-react 110.1.2 → 110.1.3

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 (7) hide show
  1. package/esm/__internal__/form-field/form-field.component.d.ts +5 -1
  2. package/esm/__internal__/form-field/form-field.component.js +8 -5
  3. package/esm/__internal__/utils/helpers/tags/tags.d.ts +5 -2
  4. package/lib/__internal__/form-field/form-field.component.d.ts +5 -1
  5. package/lib/__internal__/form-field/form-field.component.js +8 -5
  6. package/lib/__internal__/utils/helpers/tags/tags.d.ts +5 -2
  7. package/package.json +1 -1
package/esm/__internal__/form-field/form-field.component.d.ts CHANGED
@@ -32,6 +32,10 @@ interface CommonFormFieldProps extends MarginProps, ValidationProps {
32
32
  reverse?: boolean;
33
33
  /** Id of the validation icon */
34
34
  validationIconId?: string;
35
+ /**
36
+ * @private @ignore
37
+ * Flag dedicating if latest validation design should be used */
38
+ validationRedesignOptIn?: boolean;
35
39
  }
36
40
  export interface FormFieldProps extends CommonFormFieldProps, TagProps {
37
41
  /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
@@ -53,7 +57,7 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
53
57
  useValidationIcon?: boolean;
54
58
  }
55
59
  declare const FormField: {
56
- ({ children, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, ...rest }: FormFieldProps): JSX.Element;
60
+ ({ children, "data-component": dataComponent, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): JSX.Element;
57
61
  displayName: string;
58
62
  };
59
63
  export default FormField;
package/esm/__internal__/form-field/form-field.component.js CHANGED
@@ -13,6 +13,7 @@ import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint"
13
13
 
14
14
  const FormField = ({
15
15
  children,
16
+ "data-component": dataComponent,
16
17
  disabled,
17
18
  fieldHelp: fieldHelpContent,
18
19
  fieldHelpInline,
@@ -36,6 +37,7 @@ const FormField = ({
36
37
  adaptiveLabelBreakpoint,
37
38
  isRequired,
38
39
  validationIconId,
40
+ validationRedesignOptIn,
39
41
  ...rest
40
42
  }) => {
41
43
  const invalidValidationProp = useMemo(() => {
@@ -71,15 +73,15 @@ const FormField = ({
71
73
  labelWidth: labelWidth,
72
74
  id: fieldHelpId
73
75
  }, fieldHelpContent) : null;
74
- return /*#__PURE__*/React.createElement(FormFieldStyle, _extends({}, tagComponent(rest["data-component"], rest), marginProps), /*#__PURE__*/React.createElement(FieldLineStyle, {
76
+ return /*#__PURE__*/React.createElement(FormFieldStyle, _extends({}, tagComponent(dataComponent, rest), marginProps), /*#__PURE__*/React.createElement(FieldLineStyle, {
75
77
  inline: inlineLabel
76
78
  }, reverse && children, label && /*#__PURE__*/React.createElement(Label, {
77
79
  labelId: labelId,
78
80
  align: labelAlign,
79
81
  disabled: disabled,
80
- error: !rest.validationRedesignOptIn && error,
81
- warning: !rest.validationRedesignOptIn && warning,
82
- info: !rest.validationRedesignOptIn && info,
82
+ error: !validationRedesignOptIn && error,
83
+ warning: !validationRedesignOptIn && warning,
84
+ info: !validationRedesignOptIn && info,
83
85
  help: labelHelp,
84
86
  tooltipId: tooltipId,
85
87
  htmlFor: id,
@@ -98,7 +100,7 @@ const FormField = ({
98
100
  FormField.propTypes = {
99
101
  "adaptiveLabelBreakpoint": PropTypes.number,
100
102
  "children": PropTypes.node,
101
- "data-component": PropTypes.string.isRequired,
103
+ "data-component": PropTypes.string,
102
104
  "data-element": PropTypes.string,
103
105
  "data-role": PropTypes.string,
104
106
  "disabled": PropTypes.bool,
@@ -276,6 +278,7 @@ FormField.propTypes = {
276
278
  "tooltipId": PropTypes.string,
277
279
  "useValidationIcon": PropTypes.bool,
278
280
  "validationIconId": PropTypes.string,
281
+ "validationRedesignOptIn": PropTypes.bool,
279
282
  "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
280
283
  };
281
284
  FormField.displayName = "FormField";
package/esm/__internal__/utils/helpers/tags/tags.d.ts CHANGED
@@ -1,13 +1,16 @@
1
1
  interface DataProps {
2
+ /** Identifier used for testing purposes, applied to the root element of the component. */
2
3
  "data-element"?: string;
4
+ /** Identifier used for testing purposes, applied to the root element of the component. */
3
5
  "data-role"?: string;
4
6
  [restKeys: string]: any;
5
7
  }
6
8
  export interface TagProps extends DataProps {
7
- "data-component": string;
9
+ /** Identifier used for testing purposes, applied to the root element of the component. */
10
+ "data-component"?: string;
8
11
  }
9
12
  /**
10
13
  * Builds props object containing top level data tags
11
14
  */
12
- declare function tagComponent(componentName: string, props: DataProps): TagProps;
15
+ declare function tagComponent(componentName: string | undefined, props: DataProps): TagProps;
13
16
  export default tagComponent;
package/lib/__internal__/form-field/form-field.component.d.ts CHANGED
@@ -32,6 +32,10 @@ interface CommonFormFieldProps extends MarginProps, ValidationProps {
32
32
  reverse?: boolean;
33
33
  /** Id of the validation icon */
34
34
  validationIconId?: string;
35
+ /**
36
+ * @private @ignore
37
+ * Flag dedicating if latest validation design should be used */
38
+ validationRedesignOptIn?: boolean;
35
39
  }
36
40
  export interface FormFieldProps extends CommonFormFieldProps, TagProps {
37
41
  /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
@@ -53,7 +57,7 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
53
57
  useValidationIcon?: boolean;
54
58
  }
55
59
  declare const FormField: {
56
- ({ children, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, ...rest }: FormFieldProps): JSX.Element;
60
+ ({ children, "data-component": dataComponent, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): JSX.Element;
57
61
  displayName: string;
58
62
  };
59
63
  export default FormField;
package/lib/__internal__/form-field/form-field.component.js CHANGED
@@ -35,6 +35,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
35
35
 
36
36
  const FormField = ({
37
37
  children,
38
+ "data-component": dataComponent,
38
39
  disabled,
39
40
  fieldHelp: fieldHelpContent,
40
41
  fieldHelpInline,
@@ -58,6 +59,7 @@ const FormField = ({
58
59
  adaptiveLabelBreakpoint,
59
60
  isRequired,
60
61
  validationIconId,
62
+ validationRedesignOptIn,
61
63
  ...rest
62
64
  }) => {
63
65
  const invalidValidationProp = (0, _react.useMemo)(() => {
@@ -93,15 +95,15 @@ const FormField = ({
93
95
  labelWidth: labelWidth,
94
96
  id: fieldHelpId
95
97
  }, fieldHelpContent) : null;
96
- return /*#__PURE__*/_react.default.createElement(_formField.default, _extends({}, (0, _tags.default)(rest["data-component"], rest), marginProps), /*#__PURE__*/_react.default.createElement(_formField.FieldLineStyle, {
98
+ return /*#__PURE__*/_react.default.createElement(_formField.default, _extends({}, (0, _tags.default)(dataComponent, rest), marginProps), /*#__PURE__*/_react.default.createElement(_formField.FieldLineStyle, {
97
99
  inline: inlineLabel
98
100
  }, reverse && children, label && /*#__PURE__*/_react.default.createElement(_label.default, {
99
101
  labelId: labelId,
100
102
  align: labelAlign,
101
103
  disabled: disabled,
102
- error: !rest.validationRedesignOptIn && error,
103
- warning: !rest.validationRedesignOptIn && warning,
104
- info: !rest.validationRedesignOptIn && info,
104
+ error: !validationRedesignOptIn && error,
105
+ warning: !validationRedesignOptIn && warning,
106
+ info: !validationRedesignOptIn && info,
105
107
  help: labelHelp,
106
108
  tooltipId: tooltipId,
107
109
  htmlFor: id,
@@ -120,7 +122,7 @@ const FormField = ({
120
122
  FormField.propTypes = {
121
123
  "adaptiveLabelBreakpoint": _propTypes.default.number,
122
124
  "children": _propTypes.default.node,
123
- "data-component": _propTypes.default.string.isRequired,
125
+ "data-component": _propTypes.default.string,
124
126
  "data-element": _propTypes.default.string,
125
127
  "data-role": _propTypes.default.string,
126
128
  "disabled": _propTypes.default.bool,
@@ -298,6 +300,7 @@ FormField.propTypes = {
298
300
  "tooltipId": _propTypes.default.string,
299
301
  "useValidationIcon": _propTypes.default.bool,
300
302
  "validationIconId": _propTypes.default.string,
303
+ "validationRedesignOptIn": _propTypes.default.bool,
301
304
  "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
302
305
  };
303
306
  FormField.displayName = "FormField";
package/lib/__internal__/utils/helpers/tags/tags.d.ts CHANGED
@@ -1,13 +1,16 @@
1
1
  interface DataProps {
2
+ /** Identifier used for testing purposes, applied to the root element of the component. */
2
3
  "data-element"?: string;
4
+ /** Identifier used for testing purposes, applied to the root element of the component. */
3
5
  "data-role"?: string;
4
6
  [restKeys: string]: any;
5
7
  }
6
8
  export interface TagProps extends DataProps {
7
- "data-component": string;
9
+ /** Identifier used for testing purposes, applied to the root element of the component. */
10
+ "data-component"?: string;
8
11
  }
9
12
  /**
10
13
  * Builds props object containing top level data tags
11
14
  */
12
- declare function tagComponent(componentName: string, props: DataProps): TagProps;
15
+ declare function tagComponent(componentName: string | undefined, props: DataProps): TagProps;
13
16
  export default tagComponent;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "110.1.2",
3
+ "version": "110.1.3",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "engineStrict": true,
6
6
  "engines": {