carbon-react 146.4.3 → 146.4.5

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 (11) hide show
  1. package/esm/components/date/__internal__/date-picker/day-picker.style.js +1 -1
  2. package/esm/components/popover-container/popover-container.style.js +1 -3
  3. package/esm/components/portrait/portrait.component.js +3 -0
  4. package/esm/components/portrait/portrait.style.d.ts +1 -0
  5. package/esm/components/portrait/portrait.style.js +8 -3
  6. package/lib/components/date/__internal__/date-picker/day-picker.style.js +1 -1
  7. package/lib/components/popover-container/popover-container.style.js +1 -3
  8. package/lib/components/portrait/portrait.component.js +3 -0
  9. package/lib/components/portrait/portrait.style.d.ts +1 -0
  10. package/lib/components/portrait/portrait.style.js +8 -3
  11. package/package.json +1 -1
package/esm/components/date/__internal__/date-picker/day-picker.style.js CHANGED
@@ -302,7 +302,7 @@ const StyledDayPicker = styled.div`
302
302
  ${officialReactDayPickerStyling}
303
303
 
304
304
  .rdp-root {
305
- z-index: 1000;
305
+ z-index: 2000;
306
306
  top: calc(100% + 1px);
307
307
  left: 0;
308
308
  background-color: var(--colorsUtilityYang100);
package/esm/components/popover-container/popover-container.style.js CHANGED
@@ -22,9 +22,7 @@ const PopoverContainerContentStyle = styled.div`
22
22
  box-shadow: var(--boxShadow100);
23
23
  min-width: 300px;
24
24
  position: absolute;
25
- z-index: ${({
26
- theme
27
- }) => theme.zIndex.popover};
25
+ z-index: 2000;
28
26
 
29
27
  ${({
30
28
  disableAnimation
package/esm/components/portrait/portrait.component.js CHANGED
@@ -32,6 +32,7 @@ const Portrait = ({
32
32
  ...rest
33
33
  }) => {
34
34
  const [externalError, setExternalError] = useState(false);
35
+ const hasValidImg = Boolean(src) && !externalError;
35
36
  !!(src && gravatar) ? process.env.NODE_ENV !== "production" ? invariant(false, "The `src` prop cannot be used in conjunction with the `gravatar` prop." + " Please use one or the other.") : invariant(false) : void 0;
36
37
  const logGravatarDeprecationWarning = () => {
37
38
  deprecatedGravatarWarnTriggered = true;
@@ -92,6 +93,7 @@ const Portrait = ({
92
93
  }, /*#__PURE__*/React.createElement(StyledPortraitContainer, _extends({}, filterStyledSystemMarginProps(rest), {
93
94
  onClick: onClick
94
95
  }, tagProps, {
96
+ hasValidImg: hasValidImg,
95
97
  darkBackground: darkBackground,
96
98
  size: size,
97
99
  shape: shape
@@ -100,6 +102,7 @@ const Portrait = ({
100
102
  return /*#__PURE__*/React.createElement(StyledPortraitContainer, _extends({}, filterStyledSystemMarginProps(rest), {
101
103
  onClick: onClick
102
104
  }, tagProps, {
105
+ hasValidImg: hasValidImg,
103
106
  darkBackground: darkBackground,
104
107
  size: size,
105
108
  shape: shape
package/esm/components/portrait/portrait.style.d.ts CHANGED
@@ -5,6 +5,7 @@ declare type StyledPortraitProps = {
5
5
  darkBackground?: boolean;
6
6
  size: PortraitSizes;
7
7
  shape?: PortraitShapes;
8
+ hasValidImg?: boolean;
8
9
  onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
9
10
  };
10
11
  export declare const StyledPortraitInitials: import("styled-components").StyledComponent<"div", any, Pick<StyledPortraitProps, "size">, never>;
package/esm/components/portrait/portrait.style.js CHANGED
@@ -22,7 +22,7 @@ export const StyledPortraitGravatar = styled.img`
22
22
  `;
23
23
  export const StyledCustomImg = styled.img`
24
24
  height: inherit;
25
- width: inherit;
25
+ min-width: inherit;
26
26
  `;
27
27
 
28
28
  // && is used here to increase the specificity
@@ -31,7 +31,7 @@ export const StyledIcon = styled(Icon)`
31
31
  && {
32
32
  color: inherit;
33
33
  height: inherit;
34
- width: inherit;
34
+ min-width: inherit;
35
35
 
36
36
  ::before {
37
37
  font-size: ${({
@@ -47,7 +47,11 @@ export const StyledPortraitContainer = styled.div`
47
47
  background-color: ${({
48
48
  darkBackground
49
49
  }) => darkBackground ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityReadOnly400)"};
50
- width: ${({
50
+ ${({
51
+ hasValidImg,
52
+ size
53
+ }) => hasValidImg && `max-width: ${PORTRAIT_SIZE_PARAMS[size].dimensions}px;`}
54
+ min-width: ${({
51
55
  size
52
56
  }) => PORTRAIT_SIZE_PARAMS[size].dimensions}px;
53
57
  height: ${({
@@ -59,6 +63,7 @@ export const StyledPortraitContainer = styled.div`
59
63
  }) => shape === "square" ? "0px" : "var(--borderRadiusCircle)"};
60
64
  border: 1px solid var(--colorsUtilityReadOnly600);
61
65
  display: inline-block;
66
+
62
67
  ${({
63
68
  onClick
64
69
  }) => onClick && "cursor: pointer"}
package/lib/components/date/__internal__/date-picker/day-picker.style.js CHANGED
@@ -311,7 +311,7 @@ const StyledDayPicker = _styledComponents.default.div`
311
311
  ${officialReactDayPickerStyling}
312
312
 
313
313
  .rdp-root {
314
- z-index: 1000;
314
+ z-index: 2000;
315
315
  top: calc(100% + 1px);
316
316
  left: 0;
317
317
  background-color: var(--colorsUtilityYang100);
package/lib/components/popover-container/popover-container.style.js CHANGED
@@ -31,9 +31,7 @@ const PopoverContainerContentStyle = exports.PopoverContainerContentStyle = _sty
31
31
  box-shadow: var(--boxShadow100);
32
32
  min-width: 300px;
33
33
  position: absolute;
34
- z-index: ${({
35
- theme
36
- }) => theme.zIndex.popover};
34
+ z-index: 2000;
37
35
 
38
36
  ${({
39
37
  disableAnimation
package/lib/components/portrait/portrait.component.js CHANGED
@@ -41,6 +41,7 @@ const Portrait = ({
41
41
  ...rest
42
42
  }) => {
43
43
  const [externalError, setExternalError] = (0, _react.useState)(false);
44
+ const hasValidImg = Boolean(src) && !externalError;
44
45
  !!(src && gravatar) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "The `src` prop cannot be used in conjunction with the `gravatar` prop." + " Please use one or the other.") : (0, _invariant.default)(false) : void 0;
45
46
  const logGravatarDeprecationWarning = () => {
46
47
  deprecatedGravatarWarnTriggered = true;
@@ -101,6 +102,7 @@ const Portrait = ({
101
102
  }, /*#__PURE__*/_react.default.createElement(_portrait2.StyledPortraitContainer, _extends({}, (0, _utils.filterStyledSystemMarginProps)(rest), {
102
103
  onClick: onClick
103
104
  }, tagProps, {
105
+ hasValidImg: hasValidImg,
104
106
  darkBackground: darkBackground,
105
107
  size: size,
106
108
  shape: shape
@@ -109,6 +111,7 @@ const Portrait = ({
109
111
  return /*#__PURE__*/_react.default.createElement(_portrait2.StyledPortraitContainer, _extends({}, (0, _utils.filterStyledSystemMarginProps)(rest), {
110
112
  onClick: onClick
111
113
  }, tagProps, {
114
+ hasValidImg: hasValidImg,
112
115
  darkBackground: darkBackground,
113
116
  size: size,
114
117
  shape: shape
package/lib/components/portrait/portrait.style.d.ts CHANGED
@@ -5,6 +5,7 @@ declare type StyledPortraitProps = {
5
5
  darkBackground?: boolean;
6
6
  size: PortraitSizes;
7
7
  shape?: PortraitShapes;
8
+ hasValidImg?: boolean;
8
9
  onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
9
10
  };
10
11
  export declare const StyledPortraitInitials: import("styled-components").StyledComponent<"div", any, Pick<StyledPortraitProps, "size">, never>;
package/lib/components/portrait/portrait.style.js CHANGED
@@ -29,7 +29,7 @@ const StyledPortraitGravatar = exports.StyledPortraitGravatar = _styledComponent
29
29
  `;
30
30
  const StyledCustomImg = exports.StyledCustomImg = _styledComponents.default.img`
31
31
  height: inherit;
32
- width: inherit;
32
+ min-width: inherit;
33
33
  `;
34
34
 
35
35
  // && is used here to increase the specificity
@@ -38,7 +38,7 @@ const StyledIcon = exports.StyledIcon = (0, _styledComponents.default)(_icon.def
38
38
  && {
39
39
  color: inherit;
40
40
  height: inherit;
41
- width: inherit;
41
+ min-width: inherit;
42
42
 
43
43
  ::before {
44
44
  font-size: ${({
@@ -54,7 +54,11 @@ const StyledPortraitContainer = exports.StyledPortraitContainer = _styledCompone
54
54
  background-color: ${({
55
55
  darkBackground
56
56
  }) => darkBackground ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityReadOnly400)"};
57
- width: ${({
57
+ ${({
58
+ hasValidImg,
59
+ size
60
+ }) => hasValidImg && `max-width: ${_portrait.PORTRAIT_SIZE_PARAMS[size].dimensions}px;`}
61
+ min-width: ${({
58
62
  size
59
63
  }) => _portrait.PORTRAIT_SIZE_PARAMS[size].dimensions}px;
60
64
  height: ${({
@@ -66,6 +70,7 @@ const StyledPortraitContainer = exports.StyledPortraitContainer = _styledCompone
66
70
  }) => shape === "square" ? "0px" : "var(--borderRadiusCircle)"};
67
71
  border: 1px solid var(--colorsUtilityReadOnly600);
68
72
  display: inline-block;
73
+
69
74
  ${({
70
75
  onClick
71
76
  }) => onClick && "cursor: pointer"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "146.4.3",
3
+ "version": "146.4.5",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",