carbon-react 134.0.2 → 134.0.4

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/loader-spinner/loader-spinner.config.d.ts +1 -0
  2. package/esm/components/loader-spinner/loader-spinner.config.js +8 -4
  3. package/esm/components/loader-spinner/loader-spinner.style.js +2 -4
  4. package/esm/components/typography/typography.component.d.ts +1 -1
  5. package/esm/components/typography/typography.component.js +1 -1
  6. package/esm/components/typography/typography.style.js +1 -1
  7. package/lib/components/loader-spinner/loader-spinner.config.d.ts +1 -0
  8. package/lib/components/loader-spinner/loader-spinner.config.js +8 -4
  9. package/lib/components/loader-spinner/loader-spinner.style.js +2 -4
  10. package/lib/components/typography/typography.component.d.ts +1 -1
  11. package/lib/components/typography/typography.component.js +2 -2
  12. package/lib/components/typography/typography.style.js +1 -1
  13. package/package.json +1 -1
package/esm/components/loader-spinner/loader-spinner.config.d.ts CHANGED
@@ -5,6 +5,7 @@ declare type LoaderSpinnerSizes = typeof LOADER_SPINNER_SIZES[number];
5
5
  declare type LoaderSpinnerSizeParams = Record<LoaderSpinnerSizes, {
6
6
  wrapperDimensions: number;
7
7
  strokeWidth: number;
8
+ labelMarginTop?: number;
8
9
  }>;
9
10
  declare const LOADER_SPINNER_SIZE_PARAMS: LoaderSpinnerSizeParams;
10
11
  export type { LoaderSpinnerSizes, LoaderSpinnerVariants };
package/esm/components/loader-spinner/loader-spinner.config.js CHANGED
@@ -7,19 +7,23 @@ const LOADER_SPINNER_SIZE_PARAMS = {
7
7
  },
8
8
  small: {
9
9
  wrapperDimensions: 32,
10
- strokeWidth: 4
10
+ strokeWidth: 4,
11
+ labelMarginTop: 12
11
12
  },
12
13
  medium: {
13
14
  wrapperDimensions: 56,
14
- strokeWidth: 3.3
15
+ strokeWidth: 3.3,
16
+ labelMarginTop: 16
15
17
  },
16
18
  large: {
17
19
  wrapperDimensions: 80,
18
- strokeWidth: 3.7
20
+ strokeWidth: 3.7,
21
+ labelMarginTop: 22
19
22
  },
20
23
  "extra-large": {
21
24
  wrapperDimensions: 104,
22
- strokeWidth: 3.7
25
+ strokeWidth: 3.7,
26
+ labelMarginTop: 26
23
27
  }
24
28
  };
25
29
  export { LOADER_SPINNER_SIZES, LOADER_SPINNER_VARIANTS, LOADER_SPINNER_SIZE_PARAMS };
package/esm/components/loader-spinner/loader-spinner.style.js CHANGED
@@ -29,8 +29,8 @@ export const StyledLabel = styled(Typography)`
29
29
  }) => css`
30
30
  display: flex;
31
31
  justify-content: center;
32
- ${size !== "extra-small" && `width: ${LOADER_SPINNER_SIZE_PARAMS[size].wrapperDimensions}px`};
33
- ${size === "extra-small" && `margin-left: var(--spacing100)`};
32
+ text-align: center;
33
+ ${size === "extra-small" ? "margin-left: var(--spacing100)" : `margin-top: ${LOADER_SPINNER_SIZE_PARAMS[size].labelMarginTop}px`};
34
34
  `}
35
35
  `;
36
36
  export const StyledSpinnerCircleSvg = styled.svg`
@@ -44,9 +44,7 @@ export const StyledSpinnerCircleSvg = styled.svg`
44
44
  }) => {
45
45
  const dimensions = `${LOADER_SPINNER_SIZE_PARAMS[size].wrapperDimensions}px`;
46
46
  return size && css`
47
- width: ${dimensions};
48
47
  height: ${dimensions};
49
- min-width: ${dimensions};
50
48
  min-height: ${dimensions};
51
49
 
52
50
  circle[data-role="outer-arc"] {
package/esm/components/typography/typography.component.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { SpaceProps } from "styled-system";
3
3
  import { TagProps } from "../../__internal__/utils/helpers/tags";
4
- declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
4
+ export declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
5
5
  export declare type VariantTypes = typeof VARIANT_TYPES[number];
6
6
  export interface TypographyProps extends SpaceProps, TagProps {
7
7
  /** Override the variant component */
package/esm/components/typography/typography.component.js CHANGED
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
4
4
  import tagComponent from "../../__internal__/utils/helpers/tags";
5
5
  import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../style/utils";
6
6
  import StyledTypography from "./typography.style";
7
- const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
7
+ export const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
8
8
  export const Typography = ({
9
9
  "data-component": dataComponent,
10
10
  variant = "p",
package/esm/components/typography/typography.style.js CHANGED
@@ -168,7 +168,7 @@ const StyledTypography = styled.span.attrs(({
168
168
  white-space: ${truncate ? "nowrap" : whiteSpace};
169
169
  word-wrap: ${wordWrap};
170
170
  text-align: ${textAlign};
171
- text-overflow: ${truncate ? "ellipsis" : textOverflow};
171
+ text-overflow: ${textOverflow || truncate && "ellipsis"};
172
172
  ${truncate && css`
173
173
  overflow: hidden;
174
174
  `};
package/lib/components/loader-spinner/loader-spinner.config.d.ts CHANGED
@@ -5,6 +5,7 @@ declare type LoaderSpinnerSizes = typeof LOADER_SPINNER_SIZES[number];
5
5
  declare type LoaderSpinnerSizeParams = Record<LoaderSpinnerSizes, {
6
6
  wrapperDimensions: number;
7
7
  strokeWidth: number;
8
+ labelMarginTop?: number;
8
9
  }>;
9
10
  declare const LOADER_SPINNER_SIZE_PARAMS: LoaderSpinnerSizeParams;
10
11
  export type { LoaderSpinnerSizes, LoaderSpinnerVariants };
package/lib/components/loader-spinner/loader-spinner.config.js CHANGED
@@ -13,18 +13,22 @@ const LOADER_SPINNER_SIZE_PARAMS = exports.LOADER_SPINNER_SIZE_PARAMS = {
13
13
  },
14
14
  small: {
15
15
  wrapperDimensions: 32,
16
- strokeWidth: 4
16
+ strokeWidth: 4,
17
+ labelMarginTop: 12
17
18
  },
18
19
  medium: {
19
20
  wrapperDimensions: 56,
20
- strokeWidth: 3.3
21
+ strokeWidth: 3.3,
22
+ labelMarginTop: 16
21
23
  },
22
24
  large: {
23
25
  wrapperDimensions: 80,
24
- strokeWidth: 3.7
26
+ strokeWidth: 3.7,
27
+ labelMarginTop: 22
25
28
  },
26
29
  "extra-large": {
27
30
  wrapperDimensions: 104,
28
- strokeWidth: 3.7
31
+ strokeWidth: 3.7,
32
+ labelMarginTop: 26
29
33
  }
30
34
  };
package/lib/components/loader-spinner/loader-spinner.style.js CHANGED
@@ -38,8 +38,8 @@ const StyledLabel = exports.StyledLabel = (0, _styledComponents.default)(_typogr
38
38
  }) => (0, _styledComponents.css)`
39
39
  display: flex;
40
40
  justify-content: center;
41
- ${size !== "extra-small" && `width: ${_loaderSpinner.LOADER_SPINNER_SIZE_PARAMS[size].wrapperDimensions}px`};
42
- ${size === "extra-small" && `margin-left: var(--spacing100)`};
41
+ text-align: center;
42
+ ${size === "extra-small" ? "margin-left: var(--spacing100)" : `margin-top: ${_loaderSpinner.LOADER_SPINNER_SIZE_PARAMS[size].labelMarginTop}px`};
43
43
  `}
44
44
  `;
45
45
  const StyledSpinnerCircleSvg = exports.StyledSpinnerCircleSvg = _styledComponents.default.svg`
@@ -53,9 +53,7 @@ const StyledSpinnerCircleSvg = exports.StyledSpinnerCircleSvg = _styledComponent
53
53
  }) => {
54
54
  const dimensions = `${_loaderSpinner.LOADER_SPINNER_SIZE_PARAMS[size].wrapperDimensions}px`;
55
55
  return size && (0, _styledComponents.css)`
56
- width: ${dimensions};
57
56
  height: ${dimensions};
58
- min-width: ${dimensions};
59
57
  min-height: ${dimensions};
60
58
 
61
59
  circle[data-role="outer-arc"] {
package/lib/components/typography/typography.component.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { SpaceProps } from "styled-system";
3
3
  import { TagProps } from "../../__internal__/utils/helpers/tags";
4
- declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
4
+ export declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
5
5
  export declare type VariantTypes = typeof VARIANT_TYPES[number];
6
6
  export interface TypographyProps extends SpaceProps, TagProps {
7
7
  /** Override the variant component */
package/lib/components/typography/typography.component.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.Typography = void 0;
6
+ exports.default = exports.VARIANT_TYPES = exports.Typography = void 0;
7
7
  var _react = _interopRequireDefault(require("react"));
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
@@ -11,7 +11,7 @@ var _utils = require("../../style/utils");
11
11
  var _typography = _interopRequireDefault(require("./typography.style"));
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
  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); }
14
- const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
14
+ const VARIANT_TYPES = exports.VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
15
15
  const Typography = ({
16
16
  "data-component": dataComponent,
17
17
  variant = "p",
package/lib/components/typography/typography.style.js CHANGED
@@ -177,7 +177,7 @@ const StyledTypography = _styledComponents.default.span.attrs(({
177
177
  white-space: ${truncate ? "nowrap" : whiteSpace};
178
178
  word-wrap: ${wordWrap};
179
179
  text-align: ${textAlign};
180
- text-overflow: ${truncate ? "ellipsis" : textOverflow};
180
+ text-overflow: ${textOverflow || truncate && "ellipsis"};
181
181
  ${truncate && (0, _styledComponents.css)`
182
182
  overflow: hidden;
183
183
  `};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "134.0.2",
3
+ "version": "134.0.4",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",