carbon-react 104.57.0 → 104.58.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.
- package/esm/__internal__/validations/validation-icon.component.js +3 -5
- package/esm/components/icon/icon.component.js +6 -1
- package/esm/components/icon/icon.d.ts +2 -0
- package/lib/__internal__/validations/validation-icon.component.js +3 -5
- package/lib/components/icon/icon.component.js +6 -1
- package/lib/components/icon/icon.d.ts +2 -0
- package/package.json +1 -1
|
@@ -57,10 +57,7 @@ const ValidationIcon = ({
|
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
return /*#__PURE__*/React.createElement(ValidationIconStyle, _extends({
|
|
60
|
-
id: iconId,
|
|
61
60
|
validationType: validationType,
|
|
62
|
-
role: "tooltip",
|
|
63
|
-
"aria-label": validationMessage,
|
|
64
61
|
onClick: onClick,
|
|
65
62
|
onMouseOver: () => setTriggeredByIcon(true),
|
|
66
63
|
onMouseLeave: () => setTriggeredByIcon(false),
|
|
@@ -84,8 +81,9 @@ const ValidationIcon = ({
|
|
|
84
81
|
tooltipFlipOverrides: isPartOfInput && !tooltipFlipOverrides ? ["top", "bottom"] : tooltipFlipOverrides,
|
|
85
82
|
isPartOfInput: isPartOfInput,
|
|
86
83
|
inputSize: size,
|
|
87
|
-
|
|
88
|
-
|
|
84
|
+
id: iconId,
|
|
85
|
+
ariaLabel: validationMessage,
|
|
86
|
+
focusable: tabIndex !== -1
|
|
89
87
|
}));
|
|
90
88
|
};
|
|
91
89
|
|
|
@@ -28,6 +28,7 @@ const Icon = /*#__PURE__*/React.forwardRef(({
|
|
|
28
28
|
tooltipFlipOverrides,
|
|
29
29
|
tooltipId,
|
|
30
30
|
tabIndex,
|
|
31
|
+
id,
|
|
31
32
|
isPartOfInput,
|
|
32
33
|
inputSize,
|
|
33
34
|
role,
|
|
@@ -87,6 +88,7 @@ const Icon = /*#__PURE__*/React.forwardRef(({
|
|
|
87
88
|
"aria-hidden": ariaHidden,
|
|
88
89
|
ref: ref,
|
|
89
90
|
key: "icon",
|
|
91
|
+
id: id,
|
|
90
92
|
className: className || null,
|
|
91
93
|
"data-element": iconType()
|
|
92
94
|
}, tagComponent("icon", rest), styleProps, {
|
|
@@ -199,7 +201,10 @@ Icon.propTypes = { ...marginPropTypes,
|
|
|
199
201
|
tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
200
202
|
|
|
201
203
|
/** @ignore @private */
|
|
202
|
-
focusable: PropTypes.bool
|
|
204
|
+
focusable: PropTypes.bool,
|
|
205
|
+
|
|
206
|
+
/** Id passed to the icon. */
|
|
207
|
+
id: PropTypes.string
|
|
203
208
|
};
|
|
204
209
|
Icon.defaultProps = {
|
|
205
210
|
bgSize: "small",
|
|
@@ -237,6 +237,8 @@ export interface IconProps extends MarginProps {
|
|
|
237
237
|
tooltipFlipOverrides?: TooltipPositions[];
|
|
238
238
|
/** Id passed to the tooltip container, used for accessibility purposes */
|
|
239
239
|
tooltipId?: string;
|
|
240
|
+
/** Id passed to the icon. */
|
|
241
|
+
id?: string;
|
|
240
242
|
}
|
|
241
243
|
|
|
242
244
|
declare function Icon(
|
|
@@ -77,10 +77,7 @@ const ValidationIcon = ({
|
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
return /*#__PURE__*/_react.default.createElement(_validationIcon.default, _extends({
|
|
80
|
-
id: iconId,
|
|
81
80
|
validationType: validationType,
|
|
82
|
-
role: "tooltip",
|
|
83
|
-
"aria-label": validationMessage,
|
|
84
81
|
onClick: onClick,
|
|
85
82
|
onMouseOver: () => setTriggeredByIcon(true),
|
|
86
83
|
onMouseLeave: () => setTriggeredByIcon(false),
|
|
@@ -104,8 +101,9 @@ const ValidationIcon = ({
|
|
|
104
101
|
tooltipFlipOverrides: isPartOfInput && !tooltipFlipOverrides ? ["top", "bottom"] : tooltipFlipOverrides,
|
|
105
102
|
isPartOfInput: isPartOfInput,
|
|
106
103
|
inputSize: size,
|
|
107
|
-
|
|
108
|
-
|
|
104
|
+
id: iconId,
|
|
105
|
+
ariaLabel: validationMessage,
|
|
106
|
+
focusable: tabIndex !== -1
|
|
109
107
|
}));
|
|
110
108
|
};
|
|
111
109
|
|
|
@@ -51,6 +51,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
51
51
|
tooltipFlipOverrides,
|
|
52
52
|
tooltipId,
|
|
53
53
|
tabIndex,
|
|
54
|
+
id,
|
|
54
55
|
isPartOfInput,
|
|
55
56
|
inputSize,
|
|
56
57
|
role,
|
|
@@ -111,6 +112,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
111
112
|
"aria-hidden": ariaHidden,
|
|
112
113
|
ref: ref,
|
|
113
114
|
key: "icon",
|
|
115
|
+
id: id,
|
|
114
116
|
className: className || null,
|
|
115
117
|
"data-element": iconType()
|
|
116
118
|
}, (0, _tags.default)("icon", rest), styleProps, {
|
|
@@ -224,7 +226,10 @@ Icon.propTypes = { ...marginPropTypes,
|
|
|
224
226
|
tabIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
225
227
|
|
|
226
228
|
/** @ignore @private */
|
|
227
|
-
focusable: _propTypes.default.bool
|
|
229
|
+
focusable: _propTypes.default.bool,
|
|
230
|
+
|
|
231
|
+
/** Id passed to the icon. */
|
|
232
|
+
id: _propTypes.default.string
|
|
228
233
|
};
|
|
229
234
|
Icon.defaultProps = {
|
|
230
235
|
bgSize: "small",
|
|
@@ -237,6 +237,8 @@ export interface IconProps extends MarginProps {
|
|
|
237
237
|
tooltipFlipOverrides?: TooltipPositions[];
|
|
238
238
|
/** Id passed to the tooltip container, used for accessibility purposes */
|
|
239
239
|
tooltipId?: string;
|
|
240
|
+
/** Id passed to the icon. */
|
|
241
|
+
id?: string;
|
|
240
242
|
}
|
|
241
243
|
|
|
242
244
|
declare function Icon(
|