carbon-react 123.0.0 → 123.0.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 (13) hide show
  1. package/esm/components/textarea/textarea.component.d.ts +4 -1
  2. package/esm/components/textarea/textarea.component.js +3 -3
  3. package/esm/components/textbox/textbox.component.d.ts +4 -1
  4. package/esm/components/textbox/textbox.component.js +3 -3
  5. package/esm/components/textbox/textbox.style.d.ts +1 -2
  6. package/esm/components/textbox/textbox.style.js +2 -10
  7. package/lib/components/textarea/textarea.component.d.ts +4 -1
  8. package/lib/components/textarea/textarea.component.js +2 -2
  9. package/lib/components/textbox/textbox.component.d.ts +4 -1
  10. package/lib/components/textbox/textbox.component.js +2 -2
  11. package/lib/components/textbox/textbox.style.d.ts +1 -2
  12. package/lib/components/textbox/textbox.style.js +2 -11
  13. package/package.json +1 -1
package/esm/components/textarea/textarea.component.d.ts CHANGED
@@ -59,7 +59,10 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
59
59
  label?: string;
60
60
  /** Inline label alignment */
61
61
  labelAlign?: "left" | "right";
62
- /** Text applied to label help tooltip */
62
+ /** [Legacy] Text applied to label help tooltip. When opted into new design validations
63
+ * it will render as a hint above the input, unless an `inputHint`
64
+ * prop is also passed
65
+ */
63
66
  labelHelp?: React.ReactNode;
64
67
  /** When true, label is placed in line an input */
65
68
  labelInline?: boolean;
package/esm/components/textarea/textarea.component.js CHANGED
@@ -12,7 +12,7 @@ import StyledTextarea, { MIN_HEIGHT } from "./textarea.style";
12
12
  import { TooltipProvider } from "../../__internal__/tooltip-provider";
13
13
  import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
14
14
  import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
15
- import { ErrorBorder, StyledHintText, StyledInputHint } from "../textbox/textbox.style";
15
+ import { ErrorBorder, StyledHintText } from "../textbox/textbox.style";
16
16
  import ValidationMessage from "../../__internal__/validation-message";
17
17
  import Box from "../box";
18
18
  import Logger from "../../__internal__/utils/logger";
@@ -215,10 +215,10 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
215
215
  useValidationIcon: computeLabelPropValues(validationOnLabel),
216
216
  adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
217
217
  validationRedesignOptIn: validationRedesignOptIn
218
- }, inputHint ? /*#__PURE__*/React.createElement(StyledInputHint, {
218
+ }, (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/React.createElement(StyledHintText, {
219
219
  id: inputHintId,
220
220
  "data-element": "input-hint"
221
- }, inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
221
+ }, inputHint || labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
222
222
  position: "relative"
223
223
  }, /*#__PURE__*/React.createElement(ValidationMessage, {
224
224
  error: error,
package/esm/components/textbox/textbox.component.d.ts CHANGED
@@ -52,7 +52,10 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
52
52
  label?: string;
53
53
  /** Inline label alignment */
54
54
  labelAlign?: "left" | "right";
55
- /** A message that the Help component will display */
55
+ /** [Legacy] Text applied to label help tooltip. When opted into new design validations
56
+ * it will render as a hint above the input, unless an `inputHint`
57
+ * prop is also passed
58
+ */
56
59
  labelHelp?: React.ReactNode;
57
60
  /** When true label is inline */
58
61
  labelInline?: boolean;
package/esm/components/textbox/textbox.component.js CHANGED
@@ -11,7 +11,7 @@ import StyledPrefix from "./__internal__/prefix.style";
11
11
  import { TooltipProvider } from "../../__internal__/tooltip-provider";
12
12
  import useCharacterCount from "../../hooks/__internal__/useCharacterCount";
13
13
  import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
14
- import { ErrorBorder, StyledInputHint, StyledHintText } from "./textbox.style";
14
+ import { ErrorBorder, StyledHintText } from "./textbox.style";
15
15
  import ValidationMessage from "../../__internal__/validation-message";
16
16
  import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
17
17
  import NumeralDateContext from "../numeral-date/numeral-date-context";
@@ -193,10 +193,10 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
193
193
  "data-element": dataElement,
194
194
  validationIconId: validationRedesignOptIn ? undefined : validationId,
195
195
  validationRedesignOptIn: validationRedesignOptIn
196
- }, filterStyledSystemMarginProps(props)), inputHint ? /*#__PURE__*/React.createElement(StyledInputHint, {
196
+ }, filterStyledSystemMarginProps(props)), (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/React.createElement(StyledHintText, {
197
197
  id: inputHintId,
198
198
  "data-element": "input-hint"
199
- }, inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
199
+ }, inputHint || labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
200
200
  position: "relative"
201
201
  }, /*#__PURE__*/React.createElement(ValidationMessage, {
202
202
  error: error,
package/esm/components/textbox/textbox.style.d.ts CHANGED
@@ -2,6 +2,5 @@ declare const ErrorBorder: import("styled-components").StyledComponent<"span", a
2
2
  warning: boolean;
3
3
  inline?: boolean | undefined;
4
4
  }, never>;
5
- declare const StyledInputHint: import("styled-components").StyledComponent<"p", any, {}, never>;
6
5
  declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
7
- export { StyledHintText, ErrorBorder, StyledInputHint };
6
+ export { StyledHintText, ErrorBorder };
package/esm/components/textbox/textbox.style.js CHANGED
@@ -13,22 +13,14 @@ const ErrorBorder = styled.span`
13
13
  top: 0px;
14
14
  `}
15
15
  `;
16
- const StyledInputHint = styled.p`
16
+ const StyledHintText = styled.div`
17
17
  ::after {
18
18
  content: " ";
19
19
  }
20
20
 
21
- display: block;
22
- flex: 1;
23
- margin-top: -3px;
24
- margin-bottom: 8px;
25
- color: var(--colorsUtilityYin055);
26
- white-space: pre-wrap;
27
- `;
28
- const StyledHintText = styled.div`
29
21
  margin-top: 0px;
30
22
  margin-bottom: 8px;
31
23
  color: var(--colorsUtilityYin055);
32
24
  font-size: 14px;
33
25
  `;
34
- export { StyledHintText, ErrorBorder, StyledInputHint };
26
+ export { StyledHintText, ErrorBorder };
package/lib/components/textarea/textarea.component.d.ts CHANGED
@@ -59,7 +59,10 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
59
59
  label?: string;
60
60
  /** Inline label alignment */
61
61
  labelAlign?: "left" | "right";
62
- /** Text applied to label help tooltip */
62
+ /** [Legacy] Text applied to label help tooltip. When opted into new design validations
63
+ * it will render as a hint above the input, unless an `inputHint`
64
+ * prop is also passed
65
+ */
63
66
  labelHelp?: React.ReactNode;
64
67
  /** When true, label is placed in line an input */
65
68
  labelInline?: boolean;
package/lib/components/textarea/textarea.component.js CHANGED
@@ -224,10 +224,10 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
224
224
  useValidationIcon: computeLabelPropValues(validationOnLabel),
225
225
  adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
226
226
  validationRedesignOptIn: validationRedesignOptIn
227
- }, inputHint ? /*#__PURE__*/_react.default.createElement(_textbox.StyledInputHint, {
227
+ }, (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, {
228
228
  id: inputHintId,
229
229
  "data-element": "input-hint"
230
- }, inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
230
+ }, inputHint || labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
231
231
  position: "relative"
232
232
  }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
233
233
  error: error,
package/lib/components/textbox/textbox.component.d.ts CHANGED
@@ -52,7 +52,10 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
52
52
  label?: string;
53
53
  /** Inline label alignment */
54
54
  labelAlign?: "left" | "right";
55
- /** A message that the Help component will display */
55
+ /** [Legacy] Text applied to label help tooltip. When opted into new design validations
56
+ * it will render as a hint above the input, unless an `inputHint`
57
+ * prop is also passed
58
+ */
56
59
  labelHelp?: React.ReactNode;
57
60
  /** When true label is inline */
58
61
  labelInline?: boolean;
package/lib/components/textbox/textbox.component.js CHANGED
@@ -202,10 +202,10 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
202
202
  "data-element": dataElement,
203
203
  validationIconId: validationRedesignOptIn ? undefined : validationId,
204
204
  validationRedesignOptIn: validationRedesignOptIn
205
- }, (0, _utils.filterStyledSystemMarginProps)(props)), inputHint ? /*#__PURE__*/_react.default.createElement(_textbox.StyledInputHint, {
205
+ }, (0, _utils.filterStyledSystemMarginProps)(props)), (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, {
206
206
  id: inputHintId,
207
207
  "data-element": "input-hint"
208
- }, inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
208
+ }, inputHint || labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
209
209
  position: "relative"
210
210
  }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
211
211
  error: error,
package/lib/components/textbox/textbox.style.d.ts CHANGED
@@ -2,6 +2,5 @@ declare const ErrorBorder: import("styled-components").StyledComponent<"span", a
2
2
  warning: boolean;
3
3
  inline?: boolean | undefined;
4
4
  }, never>;
5
- declare const StyledInputHint: import("styled-components").StyledComponent<"p", any, {}, never>;
6
5
  declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
7
- export { StyledHintText, ErrorBorder, StyledInputHint };
6
+ export { StyledHintText, ErrorBorder };
package/lib/components/textbox/textbox.style.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.StyledInputHint = exports.StyledHintText = exports.ErrorBorder = void 0;
6
+ exports.StyledHintText = exports.ErrorBorder = void 0;
7
7
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
8
8
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
9
9
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -22,20 +22,11 @@ const ErrorBorder = _styledComponents.default.span`
22
22
  `}
23
23
  `;
24
24
  exports.ErrorBorder = ErrorBorder;
25
- const StyledInputHint = _styledComponents.default.p`
25
+ const StyledHintText = _styledComponents.default.div`
26
26
  ::after {
27
27
  content: " ";
28
28
  }
29
29
 
30
- display: block;
31
- flex: 1;
32
- margin-top: -3px;
33
- margin-bottom: 8px;
34
- color: var(--colorsUtilityYin055);
35
- white-space: pre-wrap;
36
- `;
37
- exports.StyledInputHint = StyledInputHint;
38
- const StyledHintText = _styledComponents.default.div`
39
30
  margin-top: 0px;
40
31
  margin-bottom: 8px;
41
32
  color: var(--colorsUtilityYin055);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "123.0.0",
3
+ "version": "123.0.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",