carbon-react 147.6.0 → 147.7.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/confirm/confirm.component.js +1 -0
  2. package/esm/components/loader/loader.component.d.ts +10 -2
  3. package/esm/components/loader/loader.component.js +14 -5
  4. package/esm/components/select/__internal__/select-list/select-list.component.js +3 -1
  5. package/esm/components/switch/__internal__/switch-slider.component.js +3 -1
  6. package/esm/components/time/time.component.js +2 -2
  7. package/lib/components/confirm/confirm.component.js +1 -0
  8. package/lib/components/loader/loader.component.d.ts +10 -2
  9. package/lib/components/loader/loader.component.js +14 -5
  10. package/lib/components/select/__internal__/select-list/select-list.component.js +3 -1
  11. package/lib/components/switch/__internal__/switch-slider.component.js +3 -1
  12. package/lib/components/time/time.component.js +2 -2
  13. package/package.json +1 -1
package/esm/components/confirm/confirm.component.js CHANGED
@@ -85,6 +85,7 @@ export const Confirm = ({
85
85
  "data-element": "confirm",
86
86
  ...confirmButtonDataProps
87
87
  })), isLoadingConfirm ? /*#__PURE__*/React.createElement(Loader, {
88
+ "data-role": "confirm-loader",
88
89
  isInsideButton: true,
89
90
  isActive: true
90
91
  }) : confirmLabel || l.confirm.yes());
package/esm/components/loader/loader.component.d.ts CHANGED
@@ -5,8 +5,16 @@ import { StyledLoaderSquareProps } from "./loader-square.style";
5
5
  export interface LoaderProps extends Omit<StyledLoaderSquareProps, "backgroundColor">, MarginProps, TagProps {
6
6
  /** Toggle between the default variant and gradient variant */
7
7
  variant?: string;
8
- /** Specify a custom accessible name for the Loader component */
8
+ /**
9
+ * Specify a custom accessible name for the Loader component
10
+ * @deprecated - use `loaderLabel` prop instead
11
+ */
9
12
  "aria-label"?: string;
13
+ /**
14
+ * Specify a custom accessible label for the Loader.
15
+ * This label is visible to users who have enabled the reduce motion setting in their operating system. It is also available to assistive technologies.
16
+ */
17
+ loaderLabel?: string;
10
18
  }
11
- export declare const Loader: ({ variant, "aria-label": ariaLabel, size, isInsideButton, isActive, ...rest }: LoaderProps) => React.JSX.Element;
19
+ export declare const Loader: ({ variant, "aria-label": ariaLabel, size, isInsideButton, isActive, loaderLabel, ...rest }: LoaderProps) => React.JSX.Element;
12
20
  export default Loader;
package/esm/components/loader/loader.component.js CHANGED
@@ -7,14 +7,22 @@ import useLocale from "../../hooks/__internal__/useLocale";
7
7
  import tagComponent from "../../__internal__/utils/helpers/tags/tags";
8
8
  import StyledLoader from "./loader.style";
9
9
  import StyledLoaderSquare from "./loader-square.style";
10
+ import Typography from "../typography";
11
+ import Logger from "../../__internal__/utils/logger";
12
+ let deprecateAriaLabelWarnTriggered = false;
10
13
  export const Loader = ({
11
14
  variant = "default",
12
15
  "aria-label": ariaLabel,
13
16
  size = "medium",
14
17
  isInsideButton,
15
18
  isActive = true,
19
+ loaderLabel,
16
20
  ...rest
17
21
  }) => {
22
+ if (!deprecateAriaLabelWarnTriggered && ariaLabel) {
23
+ deprecateAriaLabelWarnTriggered = true;
24
+ Logger.deprecate("The aria-label prop in Loader is deprecated and will soon be removed, please use the `loaderLabel` prop instead to provide an accessible label.");
25
+ }
18
26
  const l = useLocale();
19
27
  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
20
28
  const loaderSquareProps = {
@@ -25,13 +33,14 @@ export const Loader = ({
25
33
  };
26
34
 
27
35
  // FE-6368 has been raised for the below, changed hex values for design tokens (when added)
28
- return /*#__PURE__*/React.createElement(StyledLoader, _extends({
29
- "aria-label": ariaLabel || l.loader.loading(),
30
- role: "progressbar"
31
- }, tagComponent("loader", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/React.createElement(React.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/React.createElement(StyledLoaderSquare, _extends({
36
+ return /*#__PURE__*/React.createElement(StyledLoader, _extends({}, tagComponent("loader", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? loaderLabel || ariaLabel || l.loader.loading() : /*#__PURE__*/React.createElement(React.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/React.createElement(StyledLoaderSquare, _extends({
32
37
  "data-role": "loader-square",
33
38
  key: color,
34
39
  backgroundColor: variant === "gradient" ? /* istanbul ignore next */color : "var(--colorsActionMajor500)"
35
- }, loaderSquareProps)))));
40
+ }, loaderSquareProps))), /*#__PURE__*/React.createElement(Typography, {
41
+ "data-role": "hidden-label",
42
+ variant: "span",
43
+ screenReaderOnly: true
44
+ }, loaderLabel || ariaLabel || l.loader.loading())));
36
45
  };
37
46
  export default Loader;
package/esm/components/select/__internal__/select-list/select-list.component.js CHANGED
@@ -405,7 +405,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
405
405
  }, [setPlacement]);
406
406
  const loader = isLoading ? /*#__PURE__*/React.createElement(StyledSelectLoaderContainer, {
407
407
  key: "loader"
408
- }, /*#__PURE__*/React.createElement(Loader, null)) : undefined;
408
+ }, /*#__PURE__*/React.createElement(Loader, {
409
+ "data-role": "select-list-loader"
410
+ })) : undefined;
409
411
  let selectListContent = renderedChildren;
410
412
  const listBoxProps = {
411
413
  role: "listbox",
package/esm/components/switch/__internal__/switch-slider.component.js CHANGED
@@ -49,7 +49,9 @@ const SwitchSlider = ({
49
49
  };
50
50
  const sliderContent = /*#__PURE__*/React.createElement(SwitchSliderPanel, _extends({
51
51
  "data-role": "slider-panel"
52
- }, sliderPanelStyleProps), loading ? /*#__PURE__*/React.createElement(Loader, loaderProps) : panelContent);
52
+ }, sliderPanelStyleProps), loading ? /*#__PURE__*/React.createElement(Loader, _extends({
53
+ "data-role": "switch-slider-loader"
54
+ }, loaderProps)) : panelContent);
53
55
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HiddenContent, {
54
56
  size: size,
55
57
  "aria-hidden": true
package/esm/components/time/time.component.js CHANGED
@@ -48,7 +48,7 @@ const Time = /*#__PURE__*/React.forwardRef(({
48
48
  } = minutesInputProps;
49
49
  const internalHrsId = useRef(hoursInputId || guid());
50
50
  const internalMinsId = useRef(minutesInputId || guid());
51
- const inputHintId = useRef(guid());
51
+ const inputHintId = useRef(inputHint ? guid() : undefined);
52
52
  const internalId = useRef(`${internalHrsId.current} ${internalMinsId.current}`);
53
53
  const {
54
54
  hours: hourValue,
@@ -151,7 +151,7 @@ const Time = /*#__PURE__*/React.forwardRef(({
151
151
  name: name,
152
152
  id: internalId.current
153
153
  }, rest, tagComponent("time", rest), {
154
- "aria-describedby": combinedAriaDescribedBy
154
+ "aria-describedby": inputHint ? combinedAriaDescribedBy : ariaDescribedBy
155
155
  }), inputHint && /*#__PURE__*/React.createElement(Hint, {
156
156
  id: inputHintId.current,
157
157
  isDisabled: disabled
package/lib/components/confirm/confirm.component.js CHANGED
@@ -94,6 +94,7 @@ const Confirm = ({
94
94
  "data-element": "confirm",
95
95
  ...confirmButtonDataProps
96
96
  })), isLoadingConfirm ? /*#__PURE__*/_react.default.createElement(_loader.default, {
97
+ "data-role": "confirm-loader",
97
98
  isInsideButton: true,
98
99
  isActive: true
99
100
  }) : confirmLabel || l.confirm.yes());
package/lib/components/loader/loader.component.d.ts CHANGED
@@ -5,8 +5,16 @@ import { StyledLoaderSquareProps } from "./loader-square.style";
5
5
  export interface LoaderProps extends Omit<StyledLoaderSquareProps, "backgroundColor">, MarginProps, TagProps {
6
6
  /** Toggle between the default variant and gradient variant */
7
7
  variant?: string;
8
- /** Specify a custom accessible name for the Loader component */
8
+ /**
9
+ * Specify a custom accessible name for the Loader component
10
+ * @deprecated - use `loaderLabel` prop instead
11
+ */
9
12
  "aria-label"?: string;
13
+ /**
14
+ * Specify a custom accessible label for the Loader.
15
+ * This label is visible to users who have enabled the reduce motion setting in their operating system. It is also available to assistive technologies.
16
+ */
17
+ loaderLabel?: string;
10
18
  }
11
- export declare const Loader: ({ variant, "aria-label": ariaLabel, size, isInsideButton, isActive, ...rest }: LoaderProps) => React.JSX.Element;
19
+ export declare const Loader: ({ variant, "aria-label": ariaLabel, size, isInsideButton, isActive, loaderLabel, ...rest }: LoaderProps) => React.JSX.Element;
12
20
  export default Loader;
package/lib/components/loader/loader.component.js CHANGED
@@ -12,16 +12,24 @@ var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLoc
12
12
  var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
13
13
  var _loader = _interopRequireDefault(require("./loader.style"));
14
14
  var _loaderSquare = _interopRequireDefault(require("./loader-square.style"));
15
+ var _typography = _interopRequireDefault(require("../typography"));
16
+ var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
15
17
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
16
18
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
19
+ let deprecateAriaLabelWarnTriggered = false;
17
20
  const Loader = ({
18
21
  variant = "default",
19
22
  "aria-label": ariaLabel,
20
23
  size = "medium",
21
24
  isInsideButton,
22
25
  isActive = true,
26
+ loaderLabel,
23
27
  ...rest
24
28
  }) => {
29
+ if (!deprecateAriaLabelWarnTriggered && ariaLabel) {
30
+ deprecateAriaLabelWarnTriggered = true;
31
+ _logger.default.deprecate("The aria-label prop in Loader is deprecated and will soon be removed, please use the `loaderLabel` prop instead to provide an accessible label.");
32
+ }
25
33
  const l = (0, _useLocale.default)();
26
34
  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
27
35
  const loaderSquareProps = {
@@ -32,14 +40,15 @@ const Loader = ({
32
40
  };
33
41
 
34
42
  // FE-6368 has been raised for the below, changed hex values for design tokens (when added)
35
- return /*#__PURE__*/_react.default.createElement(_loader.default, _extends({
36
- "aria-label": ariaLabel || l.loader.loading(),
37
- role: "progressbar"
38
- }, (0, _tags.default)("loader", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/_react.default.createElement(_loaderSquare.default, _extends({
43
+ return /*#__PURE__*/_react.default.createElement(_loader.default, _extends({}, (0, _tags.default)("loader", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), reduceMotion ? loaderLabel || ariaLabel || l.loader.loading() : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/_react.default.createElement(_loaderSquare.default, _extends({
39
44
  "data-role": "loader-square",
40
45
  key: color,
41
46
  backgroundColor: variant === "gradient" ? /* istanbul ignore next */color : "var(--colorsActionMajor500)"
42
- }, loaderSquareProps)))));
47
+ }, loaderSquareProps))), /*#__PURE__*/_react.default.createElement(_typography.default, {
48
+ "data-role": "hidden-label",
49
+ variant: "span",
50
+ screenReaderOnly: true
51
+ }, loaderLabel || ariaLabel || l.loader.loading())));
43
52
  };
44
53
  exports.Loader = Loader;
45
54
  var _default = exports.default = Loader;
package/lib/components/select/__internal__/select-list/select-list.component.js CHANGED
@@ -414,7 +414,9 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
414
414
  }, [setPlacement]);
415
415
  const loader = isLoading ? /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectLoaderContainer, {
416
416
  key: "loader"
417
- }, /*#__PURE__*/_react.default.createElement(_loader.default, null)) : undefined;
417
+ }, /*#__PURE__*/_react.default.createElement(_loader.default, {
418
+ "data-role": "select-list-loader"
419
+ })) : undefined;
418
420
  let selectListContent = renderedChildren;
419
421
  const listBoxProps = {
420
422
  role: "listbox",
package/lib/components/switch/__internal__/switch-slider.component.js CHANGED
@@ -56,7 +56,9 @@ const SwitchSlider = ({
56
56
  };
57
57
  const sliderContent = /*#__PURE__*/_react.default.createElement(_switchSliderPanel.default, _extends({
58
58
  "data-role": "slider-panel"
59
- }, sliderPanelStyleProps), loading ? /*#__PURE__*/_react.default.createElement(_loader.default, loaderProps) : panelContent);
59
+ }, sliderPanelStyleProps), loading ? /*#__PURE__*/_react.default.createElement(_loader.default, _extends({
60
+ "data-role": "switch-slider-loader"
61
+ }, loaderProps)) : panelContent);
60
62
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_switchSlider.HiddenContent, {
61
63
  size: size,
62
64
  "aria-hidden": true
package/lib/components/time/time.component.js CHANGED
@@ -57,7 +57,7 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
57
57
  } = minutesInputProps;
58
58
  const internalHrsId = (0, _react.useRef)(hoursInputId || (0, _guid.default)());
59
59
  const internalMinsId = (0, _react.useRef)(minutesInputId || (0, _guid.default)());
60
- const inputHintId = (0, _react.useRef)((0, _guid.default)());
60
+ const inputHintId = (0, _react.useRef)(inputHint ? (0, _guid.default)() : undefined);
61
61
  const internalId = (0, _react.useRef)(`${internalHrsId.current} ${internalMinsId.current}`);
62
62
  const {
63
63
  hours: hourValue,
@@ -160,7 +160,7 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
160
160
  name: name,
161
161
  id: internalId.current
162
162
  }, rest, (0, _tags.default)("time", rest), {
163
- "aria-describedby": combinedAriaDescribedBy
163
+ "aria-describedby": inputHint ? combinedAriaDescribedBy : ariaDescribedBy
164
164
  }), inputHint && /*#__PURE__*/_react.default.createElement(_time.StyledHintText, {
165
165
  id: inputHintId.current,
166
166
  isDisabled: disabled
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "147.6.0",
3
+ "version": "147.7.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",