@carbon/ibm-products 2.28.0-alpha.4 → 2.28.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +37 -0
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +37 -0
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +37 -0
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/useSortableColumns.js +1 -1
- package/es/components/UserAvatar/UserAvatar.js +22 -1
- package/lib/components/Datagrid/useSortableColumns.js +1 -1
- package/lib/components/UserAvatar/UserAvatar.js +22 -1
- package/package.json +3 -3
- package/scss/components/UserAvatar/_user-avatar.scss +27 -0
@@ -94,7 +94,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
|
|
94
94
|
return /*#__PURE__*/React__default.createElement(ArrowsVertical, iconProps);
|
95
95
|
};
|
96
96
|
var Header = function Header(headerProp) {
|
97
|
-
return column.disableSortBy === true || column.id === 'datagridSelection' ? column.disableSortBy ? column.Header : /*#__PURE__*/React__default.createElement(SelectAll, instance) : /*#__PURE__*/React__default.createElement(Button, {
|
97
|
+
return column.disableSortBy === true || column.id === 'datagridSelection' || column.isAction ? column.disableSortBy || column.isAction ? column.Header : /*#__PURE__*/React__default.createElement(SelectAll, instance) : /*#__PURE__*/React__default.createElement(Button, {
|
98
98
|
"aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
|
99
99
|
ascendingSortableLabelText: ascendingSortableLabelText,
|
100
100
|
descendingSortableLabelText: descendingSortableLabelText,
|
@@ -13,9 +13,10 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
|
|
13
13
|
import { pkg } from '../../settings.js';
|
14
14
|
import { usePrefix, Tooltip } from '@carbon/react';
|
15
15
|
import { User } from '@carbon/react/icons';
|
16
|
+
import '../../global/js/utils/props-helper.js';
|
16
17
|
import { TooltipTrigger } from '../TooltipTrigger/TooltipTrigger.js';
|
17
18
|
|
18
|
-
var _excluded = ["backgroundColor", "className", "name", "renderIcon", "size", "tooltipText", "tooltipAlignment"];
|
19
|
+
var _excluded = ["backgroundColor", "className", "image", "imageDescription", "name", "renderIcon", "size", "tooltipText", "tooltipAlignment"];
|
19
20
|
// Carbon and package components we use.
|
20
21
|
/* TODO: @import(s) of carbon components and other package components. */
|
21
22
|
|
@@ -50,6 +51,8 @@ var defaults = {
|
|
50
51
|
var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
51
52
|
var backgroundColor = _ref.backgroundColor,
|
52
53
|
className = _ref.className,
|
54
|
+
image = _ref.image,
|
55
|
+
imageDescription = _ref.imageDescription,
|
53
56
|
name = _ref.name,
|
54
57
|
RenderIcon = _ref.renderIcon,
|
55
58
|
_ref$size = _ref.size,
|
@@ -84,6 +87,13 @@ var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
84
87
|
var iconProps = {
|
85
88
|
size: iconSize[size]
|
86
89
|
};
|
90
|
+
if (image) {
|
91
|
+
return /*#__PURE__*/React__default.createElement("img", {
|
92
|
+
alt: imageDescription,
|
93
|
+
src: image,
|
94
|
+
className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
|
95
|
+
});
|
96
|
+
}
|
87
97
|
if (RenderIcon) {
|
88
98
|
return /*#__PURE__*/React__default.createElement(RenderIcon, iconProps);
|
89
99
|
}
|
@@ -136,6 +146,17 @@ UserAvatar.propTypes = {
|
|
136
146
|
* Provide an optional class to be applied to the containing node.
|
137
147
|
*/
|
138
148
|
className: PropTypes.string,
|
149
|
+
/**
|
150
|
+
* When passing the image prop, supply a full path to the image to be displayed.
|
151
|
+
*/
|
152
|
+
image: PropTypes.string,
|
153
|
+
/**
|
154
|
+
* When passing the image prop use the imageDescription prop to describe the image for screen reader.
|
155
|
+
*/
|
156
|
+
imageDescription: PropTypes.string.isRequired.if(function (_ref3) {
|
157
|
+
var image = _ref3.image;
|
158
|
+
return !!image;
|
159
|
+
}),
|
139
160
|
/**
|
140
161
|
* When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
|
141
162
|
*/
|
@@ -103,7 +103,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
|
|
103
103
|
return /*#__PURE__*/React__default["default"].createElement(icons.ArrowsVertical, iconProps);
|
104
104
|
};
|
105
105
|
var Header = function Header(headerProp) {
|
106
|
-
return column.disableSortBy === true || column.id === 'datagridSelection' ? column.disableSortBy ? column.Header : /*#__PURE__*/React__default["default"].createElement(DatagridSelectAll.SelectAll, instance) : /*#__PURE__*/React__default["default"].createElement(react.Button, {
|
106
|
+
return column.disableSortBy === true || column.id === 'datagridSelection' || column.isAction ? column.disableSortBy || column.isAction ? column.Header : /*#__PURE__*/React__default["default"].createElement(DatagridSelectAll.SelectAll, instance) : /*#__PURE__*/React__default["default"].createElement(react.Button, {
|
107
107
|
"aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
|
108
108
|
ascendingSortableLabelText: ascendingSortableLabelText,
|
109
109
|
descendingSortableLabelText: descendingSortableLabelText,
|
@@ -17,6 +17,7 @@ var devtools = require('../../global/js/utils/devtools.js');
|
|
17
17
|
var settings = require('../../settings.js');
|
18
18
|
var react = require('@carbon/react');
|
19
19
|
var icons = require('@carbon/react/icons');
|
20
|
+
require('../../global/js/utils/props-helper.js');
|
20
21
|
var TooltipTrigger = require('../TooltipTrigger/TooltipTrigger.js');
|
21
22
|
|
22
23
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
@@ -24,7 +25,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
24
25
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
25
26
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
26
27
|
|
27
|
-
var _excluded = ["backgroundColor", "className", "name", "renderIcon", "size", "tooltipText", "tooltipAlignment"];
|
28
|
+
var _excluded = ["backgroundColor", "className", "image", "imageDescription", "name", "renderIcon", "size", "tooltipText", "tooltipAlignment"];
|
28
29
|
// Carbon and package components we use.
|
29
30
|
/* TODO: @import(s) of carbon components and other package components. */
|
30
31
|
|
@@ -59,6 +60,8 @@ var defaults = {
|
|
59
60
|
exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
60
61
|
var backgroundColor = _ref.backgroundColor,
|
61
62
|
className = _ref.className,
|
63
|
+
image = _ref.image,
|
64
|
+
imageDescription = _ref.imageDescription,
|
62
65
|
name = _ref.name,
|
63
66
|
RenderIcon = _ref.renderIcon,
|
64
67
|
_ref$size = _ref.size,
|
@@ -93,6 +96,13 @@ exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
93
96
|
var iconProps = {
|
94
97
|
size: iconSize[size]
|
95
98
|
};
|
99
|
+
if (image) {
|
100
|
+
return /*#__PURE__*/React__default["default"].createElement("img", {
|
101
|
+
alt: imageDescription,
|
102
|
+
src: image,
|
103
|
+
className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
|
104
|
+
});
|
105
|
+
}
|
96
106
|
if (RenderIcon) {
|
97
107
|
return /*#__PURE__*/React__default["default"].createElement(RenderIcon, iconProps);
|
98
108
|
}
|
@@ -145,6 +155,17 @@ exports.UserAvatar.propTypes = {
|
|
145
155
|
* Provide an optional class to be applied to the containing node.
|
146
156
|
*/
|
147
157
|
className: index["default"].string,
|
158
|
+
/**
|
159
|
+
* When passing the image prop, supply a full path to the image to be displayed.
|
160
|
+
*/
|
161
|
+
image: index["default"].string,
|
162
|
+
/**
|
163
|
+
* When passing the image prop use the imageDescription prop to describe the image for screen reader.
|
164
|
+
*/
|
165
|
+
imageDescription: index["default"].string.isRequired.if(function (_ref3) {
|
166
|
+
var image = _ref3.image;
|
167
|
+
return !!image;
|
168
|
+
}),
|
148
169
|
/**
|
149
170
|
* When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
|
150
171
|
*/
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "2.28.0
|
4
|
+
"version": "2.28.0",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -90,7 +90,7 @@
|
|
90
90
|
},
|
91
91
|
"dependencies": {
|
92
92
|
"@babel/runtime": "^7.23.9",
|
93
|
-
"@carbon/ibm-products-styles": "^2.27.0
|
93
|
+
"@carbon/ibm-products-styles": "^2.27.0",
|
94
94
|
"@carbon/telemetry": "^0.1.0",
|
95
95
|
"@dnd-kit/core": "^6.0.8",
|
96
96
|
"@dnd-kit/sortable": "^8.0.0",
|
@@ -113,5 +113,5 @@
|
|
113
113
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
114
114
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
115
115
|
},
|
116
|
-
"gitHead": "
|
116
|
+
"gitHead": "5a37d0d36cb8ecb342f0c295dcf4a647384d5aa3"
|
117
117
|
}
|
@@ -64,6 +64,12 @@ $sizes: (
|
|
64
64
|
}
|
65
65
|
}
|
66
66
|
|
67
|
+
@mixin photo-styling {
|
68
|
+
position: fixed;
|
69
|
+
border-radius: 100%;
|
70
|
+
object-fit: fill;
|
71
|
+
}
|
72
|
+
|
67
73
|
@mixin setBgColor($color) {
|
68
74
|
// stylelint-disable-next-line carbon/theme-token-use
|
69
75
|
background-color: $color;
|
@@ -95,3 +101,24 @@ $sizes: (
|
|
95
101
|
@include size('sm');
|
96
102
|
@include type.type-style('label-01');
|
97
103
|
}
|
104
|
+
|
105
|
+
.#{$block-class}__photo {
|
106
|
+
border-radius: 100%;
|
107
|
+
object-fit: contain;
|
108
|
+
}
|
109
|
+
.#{$block-class}__photo--xl {
|
110
|
+
@include photo-styling;
|
111
|
+
@include size('xl');
|
112
|
+
}
|
113
|
+
.#{$block-class}__photo--lg {
|
114
|
+
@include photo-styling;
|
115
|
+
@include size('lg');
|
116
|
+
}
|
117
|
+
.#{$block-class}__photo--md {
|
118
|
+
@include photo-styling;
|
119
|
+
@include size('md');
|
120
|
+
}
|
121
|
+
.#{$block-class}__photo--sm {
|
122
|
+
@include photo-styling;
|
123
|
+
@include size('sm');
|
124
|
+
}
|