carbon-react 134.0.1 → 134.0.3

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 (17) hide show
  1. package/esm/components/button/button.component.d.ts +6 -0
  2. package/esm/components/button/button.component.js +1 -0
  3. package/esm/components/flat-table/flat-table-header/flat-table-header-utils.d.ts +1 -1
  4. package/esm/components/link/link.style.js +2 -1
  5. package/esm/components/loader-spinner/loader-spinner.config.d.ts +1 -0
  6. package/esm/components/loader-spinner/loader-spinner.config.js +8 -4
  7. package/esm/components/loader-spinner/loader-spinner.style.js +2 -4
  8. package/esm/components/search/search.component.js +2 -1
  9. package/lib/components/button/button.component.d.ts +6 -0
  10. package/lib/components/button/button.component.js +1 -0
  11. package/lib/components/flat-table/flat-table-header/flat-table-header-utils.d.ts +1 -1
  12. package/lib/components/link/link.style.js +2 -1
  13. package/lib/components/loader-spinner/loader-spinner.config.d.ts +1 -0
  14. package/lib/components/loader-spinner/loader-spinner.config.js +8 -4
  15. package/lib/components/loader-spinner/loader-spinner.style.js +2 -4
  16. package/lib/components/search/search.component.js +2 -1
  17. package/package.json +1 -1
package/esm/components/button/button.component.d.ts CHANGED
@@ -62,6 +62,12 @@ export interface ButtonProps extends SpaceProps, TagProps {
62
62
  target?: string;
63
63
  /** HTML rel attribute */
64
64
  rel?: string;
65
+ /**
66
+ * @private
67
+ * @internal
68
+ * Set a class name on the button element
69
+ */
70
+ className?: string;
65
71
  }
66
72
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
67
73
  export default Button;
package/esm/components/button/button.component.js CHANGED
@@ -170,6 +170,7 @@ if (process.env.NODE_ENV !== "production") {
170
170
  "aria-labelledby": PropTypes.string,
171
171
  "buttonType": PropTypes.oneOf(["darkBackground", "gradient-grey", "gradient-white", "primary", "secondary", "tertiary"]),
172
172
  "children": PropTypes.node,
173
+ "className": PropTypes.string,
173
174
  "data-component": PropTypes.string,
174
175
  "data-element": PropTypes.string,
175
176
  "data-role": PropTypes.string,
package/esm/components/flat-table/flat-table-header/flat-table-header-utils.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { FlatTableProps } from "..";
2
- declare const getAlternativeBackgroundColor: (colorTheme: FlatTableProps["colorTheme"]) => "var(--colorsActionMinor100)" | "var(--colorsUtilityMajor025)" | "var(--colorsUtilityYang100)" | "var(--colorsActionMinor550)";
2
+ declare const getAlternativeBackgroundColor: (colorTheme: FlatTableProps["colorTheme"]) => "var(--colorsActionMinor100)" | "var(--colorsUtilityYang100)" | "var(--colorsUtilityMajor025)" | "var(--colorsActionMinor550)";
3
3
  export default getAlternativeBackgroundColor;
package/esm/components/link/link.style.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import styled, { css } from "styled-components";
2
2
  import baseTheme from "../../style/themes/base";
3
3
  import StyledIcon from "../icon/icon.style";
4
+ import StyledButton from "../button/button.style";
4
5
  const colorMap = {
5
6
  light: variant => {
6
7
  let color = "var(--colorsActionMajor500)";
@@ -173,7 +174,7 @@ const StyledLink = styled.span`
173
174
  border-bottom-right-radius: var(--borderRadius025);
174
175
  `}
175
176
 
176
- > button {
177
+ > button, ${StyledButton}:not(.search-button) {
177
178
  background-color: transparent;
178
179
  border: none;
179
180
  padding: 0;
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/search/search.component.js CHANGED
@@ -160,7 +160,8 @@ const Search = /*#__PURE__*/React.forwardRef(({
160
160
  px: 2,
161
161
  buttonType: "primary",
162
162
  iconPosition: "before",
163
- iconType: "search"
163
+ iconType: "search",
164
+ className: "search-button"
164
165
  }, buttonProps), searchButtonText)));
165
166
  });
166
167
  if (process.env.NODE_ENV !== "production") {
package/lib/components/button/button.component.d.ts CHANGED
@@ -62,6 +62,12 @@ export interface ButtonProps extends SpaceProps, TagProps {
62
62
  target?: string;
63
63
  /** HTML rel attribute */
64
64
  rel?: string;
65
+ /**
66
+ * @private
67
+ * @internal
68
+ * Set a class name on the button element
69
+ */
70
+ className?: string;
65
71
  }
66
72
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
67
73
  export default Button;
package/lib/components/button/button.component.js CHANGED
@@ -179,6 +179,7 @@ if (process.env.NODE_ENV !== "production") {
179
179
  "aria-labelledby": _propTypes.default.string,
180
180
  "buttonType": _propTypes.default.oneOf(["darkBackground", "gradient-grey", "gradient-white", "primary", "secondary", "tertiary"]),
181
181
  "children": _propTypes.default.node,
182
+ "className": _propTypes.default.string,
182
183
  "data-component": _propTypes.default.string,
183
184
  "data-element": _propTypes.default.string,
184
185
  "data-role": _propTypes.default.string,
package/lib/components/flat-table/flat-table-header/flat-table-header-utils.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { FlatTableProps } from "..";
2
- declare const getAlternativeBackgroundColor: (colorTheme: FlatTableProps["colorTheme"]) => "var(--colorsActionMinor100)" | "var(--colorsUtilityMajor025)" | "var(--colorsUtilityYang100)" | "var(--colorsActionMinor550)";
2
+ declare const getAlternativeBackgroundColor: (colorTheme: FlatTableProps["colorTheme"]) => "var(--colorsActionMinor100)" | "var(--colorsUtilityYang100)" | "var(--colorsUtilityMajor025)" | "var(--colorsActionMinor550)";
3
3
  export default getAlternativeBackgroundColor;
package/lib/components/link/link.style.js CHANGED
@@ -7,6 +7,7 @@ exports.StyledLink = exports.StyledContent = void 0;
7
7
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
8
8
  var _base = _interopRequireDefault(require("../../style/themes/base"));
9
9
  var _icon = _interopRequireDefault(require("../icon/icon.style"));
10
+ var _button = _interopRequireDefault(require("../button/button.style"));
10
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
12
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
12
13
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -182,7 +183,7 @@ const StyledLink = exports.StyledLink = _styledComponents.default.span`
182
183
  border-bottom-right-radius: var(--borderRadius025);
183
184
  `}
184
185
 
185
- > button {
186
+ > button, ${_button.default}:not(.search-button) {
186
187
  background-color: transparent;
187
188
  border: none;
188
189
  padding: 0;
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/search/search.component.js CHANGED
@@ -169,7 +169,8 @@ const Search = exports.Search = /*#__PURE__*/_react.default.forwardRef(({
169
169
  px: 2,
170
170
  buttonType: "primary",
171
171
  iconPosition: "before",
172
- iconType: "search"
172
+ iconType: "search",
173
+ className: "search-button"
173
174
  }, buttonProps), searchButtonText)));
174
175
  });
175
176
  if (process.env.NODE_ENV !== "production") {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "134.0.1",
3
+ "version": "134.0.3",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",