carbon-addons-iot-react 5.14.0 → 5.15.1
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.
- package/css/carbon-addons-iot-react.css +15 -0
- package/css/carbon-addons-iot-react.css.map +1 -1
- package/es/components/Card/Card.js +27 -5
- package/es/components/Table/Table.js +1 -1
- package/es/constants/CardPropTypes.js +5 -1
- package/lib/components/Card/Card.js +27 -5
- package/lib/components/Table/Table.js +1 -1
- package/lib/constants/CardPropTypes.js +5 -1
- package/lib/css/carbon-addons-iot-react.css +15 -0
- package/lib/css/carbon-addons-iot-react.css.map +1 -1
- package/lib/scss/components/Card/_card-title.scss +11 -0
- package/lib/scss/components/Card/_card-toolbar.scss +12 -0
- package/package.json +1 -1
- package/scss/components/Card/_card-title.scss +11 -0
- package/scss/components/Card/_card-toolbar.scss +12 -0
- package/umd/carbon-addons-iot-react.js +33 -7
|
@@ -111,3 +111,14 @@ p.#{$iot-prefix}--card-title__title-text-tooltip-full-title {
|
|
|
111
111
|
.#{$iot-prefix}--card-heading-clickable {
|
|
112
112
|
cursor: pointer;
|
|
113
113
|
}
|
|
114
|
+
|
|
115
|
+
// Dark mode styles - make title and subtitle white
|
|
116
|
+
.#{$iot-prefix}--card--dark {
|
|
117
|
+
.#{$iot-prefix}--card--title--text {
|
|
118
|
+
color: $text-on-color;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.#{$iot-prefix}--card--subtitle--text {
|
|
122
|
+
color: $text-on-color;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
@@ -88,3 +88,15 @@
|
|
|
88
88
|
outline-offset: -2px;
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
|
+
|
|
92
|
+
.#{$iot-prefix}--card--dark .#{$iot-prefix}--card--toolbar button.#{$prefix}--overflow-menu svg {
|
|
93
|
+
fill: white;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// When overflow menu is open in dark mode, icon should be black (background becomes white)
|
|
97
|
+
.#{$iot-prefix}--card--dark
|
|
98
|
+
.#{$iot-prefix}--card--toolbar
|
|
99
|
+
button.#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open
|
|
100
|
+
svg {
|
|
101
|
+
fill: $icon-primary;
|
|
102
|
+
}
|
package/package.json
CHANGED
|
@@ -111,3 +111,14 @@ p.#{$iot-prefix}--card-title__title-text-tooltip-full-title {
|
|
|
111
111
|
.#{$iot-prefix}--card-heading-clickable {
|
|
112
112
|
cursor: pointer;
|
|
113
113
|
}
|
|
114
|
+
|
|
115
|
+
// Dark mode styles - make title and subtitle white
|
|
116
|
+
.#{$iot-prefix}--card--dark {
|
|
117
|
+
.#{$iot-prefix}--card--title--text {
|
|
118
|
+
color: $text-on-color;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.#{$iot-prefix}--card--subtitle--text {
|
|
122
|
+
color: $text-on-color;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
@@ -88,3 +88,15 @@
|
|
|
88
88
|
outline-offset: -2px;
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
|
+
|
|
92
|
+
.#{$iot-prefix}--card--dark .#{$iot-prefix}--card--toolbar button.#{$prefix}--overflow-menu svg {
|
|
93
|
+
fill: white;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// When overflow menu is open in dark mode, icon should be black (background becomes white)
|
|
97
|
+
.#{$iot-prefix}--card--dark
|
|
98
|
+
.#{$iot-prefix}--card--toolbar
|
|
99
|
+
button.#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open
|
|
100
|
+
svg {
|
|
101
|
+
fill: $icon-primary;
|
|
102
|
+
}
|
|
@@ -247830,7 +247830,7 @@ ${formatRule(Codicon.menuSubmenu)}
|
|
|
247830
247830
|
preventInteraction: rowEditMode || singleRowEditMode,
|
|
247831
247831
|
testId: "".concat(id || testId, "-table-pagination"),
|
|
247832
247832
|
size: paginationProps.size,
|
|
247833
|
-
maxPagesConditionalStyle: paginationProps.totalItems > Math.ceil(maxPages * paginationProps.pageSize)
|
|
247833
|
+
maxPagesConditionalStyle: Math.ceil(maxPages * paginationProps.pageSize) < paginationProps.totalItems ? false : paginationProps.totalItems > Math.ceil(maxPages * paginationProps.pageSize)
|
|
247834
247834
|
}) : null, options.hasMultiSort && /*#__PURE__*/React$1.createElement(TableMultiSortModal$1, {
|
|
247835
247835
|
testId: "".concat(id, "-multi-sort-modal"),
|
|
247836
247836
|
columns: columns,
|
|
@@ -281245,7 +281245,11 @@ ${formatRule(Codicon.menuSubmenu)}
|
|
|
281245
281245
|
}),
|
|
281246
281246
|
/** If set to true it will render outside of the current DOM in a portal, otherwise render as a child */
|
|
281247
281247
|
renderDateDropdownInPortal: PropTypes.bool,
|
|
281248
|
-
extraHeaderContent: PropTypes.element
|
|
281248
|
+
extraHeaderContent: PropTypes.element,
|
|
281249
|
+
/** CSS gradient value to apply as the card background. */
|
|
281250
|
+
backgroundGradient: PropTypes.string,
|
|
281251
|
+
/** Theme for the card. Can be 'light' or 'dark' */
|
|
281252
|
+
theme: PropTypes.oneOf(['light', 'dark'])
|
|
281249
281253
|
};
|
|
281250
281254
|
|
|
281251
281255
|
/**
|
|
@@ -284596,7 +284600,7 @@ ${formatRule(Codicon.menuSubmenu)}
|
|
|
284596
284600
|
};
|
|
284597
284601
|
|
|
284598
284602
|
var _excluded$F = ["isSelected", "children", "dimensions", "id", "style", "className", "onScroll", "onMouseDown", "onMouseUp", "onTouchEnd", "onTouchStart", "onFocus", "onBlur", "tabIndex", "testID", "testId"],
|
|
284599
|
-
_excluded2$4 = ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "hideTitle", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "renderDateDropdownInPortal", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content", "extraHeaderContent", "timeZone", "shouldUseTranslatedLabels"];
|
|
284603
|
+
_excluded2$4 = ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "hideTitle", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "renderDateDropdownInPortal", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content", "extraHeaderContent", "timeZone", "shouldUseTranslatedLabels", "backgroundGradient", "theme"];
|
|
284600
284604
|
function ownKeys$1p(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
284601
284605
|
function _objectSpread$1n(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1p(Object(t), !0).forEach(function (r) { _defineProperty$d(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
284602
284606
|
var prefix$l = settings.prefix,
|
|
@@ -284746,6 +284750,7 @@ ${formatRule(Codicon.menuSubmenu)}
|
|
|
284746
284750
|
isExpanded: false,
|
|
284747
284751
|
/** performance option: only render the content of the card to the ReactDOM if the card is visible on screen */
|
|
284748
284752
|
isLazyLoading: false,
|
|
284753
|
+
theme: 'light',
|
|
284749
284754
|
/** For now we will hide the per card actions when we're editing */
|
|
284750
284755
|
availableActions: {
|
|
284751
284756
|
edit: false,
|
|
@@ -284814,7 +284819,8 @@ ${formatRule(Codicon.menuSubmenu)}
|
|
|
284814
284819
|
type: null,
|
|
284815
284820
|
data: null,
|
|
284816
284821
|
content: null,
|
|
284817
|
-
shouldUseTranslatedLabels: false
|
|
284822
|
+
shouldUseTranslatedLabels: false,
|
|
284823
|
+
backgroundGradient: null
|
|
284818
284824
|
};
|
|
284819
284825
|
|
|
284820
284826
|
/** Dumb component that renders the card basics */
|
|
@@ -284864,6 +284870,8 @@ ${formatRule(Codicon.menuSubmenu)}
|
|
|
284864
284870
|
extraHeaderContent = props.extraHeaderContent,
|
|
284865
284871
|
timeZone = props.timeZone,
|
|
284866
284872
|
shouldUseTranslatedLabels = props.shouldUseTranslatedLabels,
|
|
284873
|
+
backgroundGradient = props.backgroundGradient,
|
|
284874
|
+
theme = props.theme,
|
|
284867
284875
|
others = _objectWithoutProperties$4(props, _excluded2$4);
|
|
284868
284876
|
var effectiveTimezone = timeZone || dayjs$1.tz.guess();
|
|
284869
284877
|
dayjs$1.tz.setDefault(effectiveTimezone);
|
|
@@ -284995,11 +285003,15 @@ ${formatRule(Codicon.menuSubmenu)}
|
|
|
284995
285003
|
id: id,
|
|
284996
285004
|
dimensions: dimensions,
|
|
284997
285005
|
isExpanded: isExpanded,
|
|
284998
|
-
style: !isExpanded ? style
|
|
285006
|
+
style: !isExpanded ? _objectSpread$1n(_objectSpread$1n({}, style), backgroundGradient && {
|
|
285007
|
+
background: backgroundGradient
|
|
285008
|
+
}) : _objectSpread$1n({
|
|
284999
285009
|
height: 'calc(100% - 50px)',
|
|
285000
285010
|
width: 'calc(100% - 50px)'
|
|
285001
|
-
},
|
|
285002
|
-
|
|
285011
|
+
}, backgroundGradient && {
|
|
285012
|
+
background: backgroundGradient
|
|
285013
|
+
}),
|
|
285014
|
+
className: classnames("".concat(iotPrefix$1k, "--card"), "".concat(iotPrefix$1k, "--card--").concat(theme), className, _defineProperty$d({}, "".concat(iotPrefix$1k, "--card--resizing"), isResizing))
|
|
285003
285015
|
}), !hideHeader && !hideTitle && /*#__PURE__*/React$1.createElement(CardHeader
|
|
285004
285016
|
// TODO: remove deprecated testID prop in v3
|
|
285005
285017
|
, {
|
|
@@ -285178,6 +285190,13 @@ ${formatRule(Codicon.menuSubmenu)}
|
|
|
285178
285190
|
},
|
|
285179
285191
|
"required": false
|
|
285180
285192
|
},
|
|
285193
|
+
"theme": {
|
|
285194
|
+
"defaultValue": {
|
|
285195
|
+
"value": "'light'",
|
|
285196
|
+
"computed": false
|
|
285197
|
+
},
|
|
285198
|
+
"required": false
|
|
285199
|
+
},
|
|
285181
285200
|
"availableActions": {
|
|
285182
285201
|
"defaultValue": {
|
|
285183
285202
|
"value": "{\n edit: false,\n clone: false,\n delete: false,\n range: false,\n expand: false,\n settings: false,\n extra: false,\n}",
|
|
@@ -285373,6 +285392,13 @@ ${formatRule(Codicon.menuSubmenu)}
|
|
|
285373
285392
|
"computed": false
|
|
285374
285393
|
},
|
|
285375
285394
|
"required": false
|
|
285395
|
+
},
|
|
285396
|
+
"backgroundGradient": {
|
|
285397
|
+
"defaultValue": {
|
|
285398
|
+
"value": "null",
|
|
285399
|
+
"computed": false
|
|
285400
|
+
},
|
|
285401
|
+
"required": false
|
|
285376
285402
|
}
|
|
285377
285403
|
},
|
|
285378
285404
|
"composes": ["../../constants/CardPropTypes"]
|