carbon-react 133.0.4 → 133.1.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.
Files changed (7) hide show
  1. package/esm/components/loader-spinner/loader-spinner.component.d.ts +6 -1
  2. package/esm/components/loader-spinner/loader-spinner.component.js +6 -5
  3. package/esm/components/select/select.style.js +2 -1
  4. package/lib/components/loader-spinner/loader-spinner.component.d.ts +6 -1
  5. package/lib/components/loader-spinner/loader-spinner.component.js +6 -5
  6. package/lib/components/select/select.style.js +2 -1
  7. package/package.json +1 -1
package/esm/components/loader-spinner/loader-spinner.component.d.ts CHANGED
@@ -3,6 +3,11 @@ import { MarginProps } from "styled-system";
3
3
  import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
4
4
  import { LoaderSpinnerSizes, LoaderSpinnerVariants } from "./loader-spinner.config";
5
5
  export interface LoaderSpinnerProps extends MarginProps, TagProps {
6
+ /**
7
+ * Use the spinnerLabel prop to override the default `"Loading..."` label with
8
+ * any custom string
9
+ */
10
+ spinnerLabel?: string;
6
11
  /**
7
12
  * The size prop allows a specific size to be set, ranging from
8
13
  * `extra-small` to `extra-large`
@@ -32,5 +37,5 @@ export interface LoaderSpinnerProps extends MarginProps, TagProps {
32
37
  */
33
38
  animationTime?: number;
34
39
  }
35
- export declare const LoaderSpinner: ({ size, showSpinnerLabel, variant, isTracked, hasMotion, animationTime, ...rest }: LoaderSpinnerProps) => React.JSX.Element;
40
+ export declare const LoaderSpinner: ({ spinnerLabel, size, showSpinnerLabel, variant, isTracked, hasMotion, animationTime, ...rest }: LoaderSpinnerProps) => React.JSX.Element;
36
41
  export default LoaderSpinner;
package/esm/components/loader-spinner/loader-spinner.component.js CHANGED
@@ -8,6 +8,7 @@ import useLocale from "../../hooks/__internal__/useLocale";
8
8
  import useMediaQuery from "../../hooks/useMediaQuery";
9
9
  import Typography from "../typography";
10
10
  export const LoaderSpinner = ({
11
+ spinnerLabel,
11
12
  size = "medium",
12
13
  showSpinnerLabel = true,
13
14
  variant = "action",
@@ -19,7 +20,7 @@ export const LoaderSpinner = ({
19
20
  const locale = useLocale();
20
21
  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
21
22
  const isLabelDark = variant !== "inverse" && variant !== "gradient-white";
22
- const spinnerLabel = /*#__PURE__*/React.createElement(StyledLabel, {
23
+ const renderSpinnerLabel = /*#__PURE__*/React.createElement(StyledLabel, {
23
24
  "data-role": "visible-label",
24
25
  variant: "span",
25
26
  fontWeight: "500",
@@ -27,7 +28,7 @@ export const LoaderSpinner = ({
27
28
  color: isLabelDark ? "var(--colorsUtilityYin090);" : "var(--colorsActionMajorYang100);",
28
29
  fontSize: size === "extra-large" ? "var(--sizing200)" : "var(--sizing175)",
29
30
  lineHeight: size === "extra-large" ? "var(--sizing300)" : "var(--sizing250)"
30
- }, locale.loaderSpinner.loading());
31
+ }, spinnerLabel || locale.loaderSpinner.loading());
31
32
  const isGradientVariant = variant === "gradient-white" || variant === "gradient-grey";
32
33
  const calculateDefaultAnimationTime = () => {
33
34
  if (animationTime) {
@@ -38,7 +39,7 @@ export const LoaderSpinner = ({
38
39
  return /*#__PURE__*/React.createElement(StyledSpinnerWrapper, _extends({
39
40
  size: size,
40
41
  role: "status"
41
- }, tagComponent("loader-spinner", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? spinnerLabel : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSpinnerCircleSvg, {
42
+ }, tagComponent("loader-spinner", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? renderSpinnerLabel : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSpinnerCircleSvg, {
42
43
  role: "presentation",
43
44
  size: size,
44
45
  variant: variant,
@@ -51,10 +52,10 @@ export const LoaderSpinner = ({
51
52
  "data-role": "outer-arc"
52
53
  }), /*#__PURE__*/React.createElement("circle", {
53
54
  "data-role": "inner-arc"
54
- })), showSpinnerLabel ? spinnerLabel : /*#__PURE__*/React.createElement(Typography, {
55
+ })), showSpinnerLabel ? renderSpinnerLabel : /*#__PURE__*/React.createElement(Typography, {
55
56
  "data-role": "hidden-label",
56
57
  variant: "span",
57
58
  screenReaderOnly: true
58
- }, locale.loaderSpinner.loading())));
59
+ }, spinnerLabel || locale.loaderSpinner.loading())));
59
60
  };
60
61
  export default LoaderSpinner;
package/esm/components/select/select.style.js CHANGED
@@ -68,8 +68,9 @@ const StyledSelect = styled.div`
68
68
  ${!hasTextCursor && css`
69
69
  ${StyledInput} {
70
70
  position: absolute;
71
- width: auto;
71
+ width: inherit;
72
72
  opacity: 0;
73
+ padding: 0;
73
74
  }
74
75
  `}
75
76
  `}
package/lib/components/loader-spinner/loader-spinner.component.d.ts CHANGED
@@ -3,6 +3,11 @@ import { MarginProps } from "styled-system";
3
3
  import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
4
4
  import { LoaderSpinnerSizes, LoaderSpinnerVariants } from "./loader-spinner.config";
5
5
  export interface LoaderSpinnerProps extends MarginProps, TagProps {
6
+ /**
7
+ * Use the spinnerLabel prop to override the default `"Loading..."` label with
8
+ * any custom string
9
+ */
10
+ spinnerLabel?: string;
6
11
  /**
7
12
  * The size prop allows a specific size to be set, ranging from
8
13
  * `extra-small` to `extra-large`
@@ -32,5 +37,5 @@ export interface LoaderSpinnerProps extends MarginProps, TagProps {
32
37
  */
33
38
  animationTime?: number;
34
39
  }
35
- export declare const LoaderSpinner: ({ size, showSpinnerLabel, variant, isTracked, hasMotion, animationTime, ...rest }: LoaderSpinnerProps) => React.JSX.Element;
40
+ export declare const LoaderSpinner: ({ spinnerLabel, size, showSpinnerLabel, variant, isTracked, hasMotion, animationTime, ...rest }: LoaderSpinnerProps) => React.JSX.Element;
36
41
  export default LoaderSpinner;
package/lib/components/loader-spinner/loader-spinner.component.js CHANGED
@@ -15,6 +15,7 @@ var _typography = _interopRequireDefault(require("../typography"));
15
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
16
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
17
17
  const LoaderSpinner = ({
18
+ spinnerLabel,
18
19
  size = "medium",
19
20
  showSpinnerLabel = true,
20
21
  variant = "action",
@@ -26,7 +27,7 @@ const LoaderSpinner = ({
26
27
  const locale = (0, _useLocale.default)();
27
28
  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
28
29
  const isLabelDark = variant !== "inverse" && variant !== "gradient-white";
29
- const spinnerLabel = /*#__PURE__*/_react.default.createElement(_loaderSpinner.StyledLabel, {
30
+ const renderSpinnerLabel = /*#__PURE__*/_react.default.createElement(_loaderSpinner.StyledLabel, {
30
31
  "data-role": "visible-label",
31
32
  variant: "span",
32
33
  fontWeight: "500",
@@ -34,7 +35,7 @@ const LoaderSpinner = ({
34
35
  color: isLabelDark ? "var(--colorsUtilityYin090);" : "var(--colorsActionMajorYang100);",
35
36
  fontSize: size === "extra-large" ? "var(--sizing200)" : "var(--sizing175)",
36
37
  lineHeight: size === "extra-large" ? "var(--sizing300)" : "var(--sizing250)"
37
- }, locale.loaderSpinner.loading());
38
+ }, spinnerLabel || locale.loaderSpinner.loading());
38
39
  const isGradientVariant = variant === "gradient-white" || variant === "gradient-grey";
39
40
  const calculateDefaultAnimationTime = () => {
40
41
  if (animationTime) {
@@ -45,7 +46,7 @@ const LoaderSpinner = ({
45
46
  return /*#__PURE__*/_react.default.createElement(_loaderSpinner.StyledSpinnerWrapper, _extends({
46
47
  size: size,
47
48
  role: "status"
48
- }, (0, _tags.default)("loader-spinner", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), reduceMotion ? spinnerLabel : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_loaderSpinner.StyledSpinnerCircleSvg, {
49
+ }, (0, _tags.default)("loader-spinner", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), reduceMotion ? renderSpinnerLabel : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_loaderSpinner.StyledSpinnerCircleSvg, {
49
50
  role: "presentation",
50
51
  size: size,
51
52
  variant: variant,
@@ -58,11 +59,11 @@ const LoaderSpinner = ({
58
59
  "data-role": "outer-arc"
59
60
  }), /*#__PURE__*/_react.default.createElement("circle", {
60
61
  "data-role": "inner-arc"
61
- })), showSpinnerLabel ? spinnerLabel : /*#__PURE__*/_react.default.createElement(_typography.default, {
62
+ })), showSpinnerLabel ? renderSpinnerLabel : /*#__PURE__*/_react.default.createElement(_typography.default, {
62
63
  "data-role": "hidden-label",
63
64
  variant: "span",
64
65
  screenReaderOnly: true
65
- }, locale.loaderSpinner.loading())));
66
+ }, spinnerLabel || locale.loaderSpinner.loading())));
66
67
  };
67
68
  exports.LoaderSpinner = LoaderSpinner;
68
69
  var _default = exports.default = LoaderSpinner;
package/lib/components/select/select.style.js CHANGED
@@ -77,8 +77,9 @@ const StyledSelect = _styledComponents.default.div`
77
77
  ${!hasTextCursor && (0, _styledComponents.css)`
78
78
  ${_input.default} {
79
79
  position: absolute;
80
- width: auto;
80
+ width: inherit;
81
81
  opacity: 0;
82
+ padding: 0;
82
83
  }
83
84
  `}
84
85
  `}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "133.0.4",
3
+ "version": "133.1.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",