carbon-react 146.4.2 → 146.4.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 (9) hide show
  1. package/esm/components/portrait/portrait.component.js +3 -0
  2. package/esm/components/portrait/portrait.style.d.ts +1 -0
  3. package/esm/components/portrait/portrait.style.js +8 -3
  4. package/esm/components/tabs/__internal__/tabs-header/tabs-header.component.js +2 -0
  5. package/lib/components/portrait/portrait.component.js +3 -0
  6. package/lib/components/portrait/portrait.style.d.ts +1 -0
  7. package/lib/components/portrait/portrait.style.js +8 -3
  8. package/lib/components/tabs/__internal__/tabs-header/tabs-header.component.js +2 -0
  9. package/package.json +1 -1
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/esm/components/tabs/__internal__/tabs-header/tabs-header.component.js CHANGED
@@ -81,6 +81,7 @@ const TabsHeader = ({
81
81
  title: "Scroll Tabs Left",
82
82
  id: "tab-navigation-button-left",
83
83
  "data-role": "tab-navigation-button-left",
84
+ type: "button",
84
85
  onClick: () => {
85
86
  /* istanbul ignore if */
86
87
  if (current) {
@@ -107,6 +108,7 @@ const TabsHeader = ({
107
108
  title: "Scroll Tabs Right",
108
109
  id: "tab-navigation-button-right",
109
110
  "data-role": "tab-navigation-button-right",
111
+ type: "button",
110
112
  onClick: () => {
111
113
  /* istanbul ignore if */
112
114
  if (current) {
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/lib/components/tabs/__internal__/tabs-header/tabs-header.component.js CHANGED
@@ -90,6 +90,7 @@ const TabsHeader = ({
90
90
  title: "Scroll Tabs Left",
91
91
  id: "tab-navigation-button-left",
92
92
  "data-role": "tab-navigation-button-left",
93
+ type: "button",
93
94
  onClick: () => {
94
95
  /* istanbul ignore if */
95
96
  if (current) {
@@ -116,6 +117,7 @@ const TabsHeader = ({
116
117
  title: "Scroll Tabs Right",
117
118
  id: "tab-navigation-button-right",
118
119
  "data-role": "tab-navigation-button-right",
120
+ type: "button",
119
121
  onClick: () => {
120
122
  /* istanbul ignore if */
121
123
  if (current) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "146.4.2",
3
+ "version": "146.4.4",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",