@carbon/ibm-products 1.5.0 → 1.6.0
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/index-full-carbon.css +206 -44
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-without-carbon-released-only.css +31 -27
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +3 -3
- package/css/index-without-carbon.css +193 -39
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index.css +195 -41
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/es/components/AddSelect/AddSelect.js +106 -65
- package/es/components/AddSelect/AddSelectBreadcrumbs.js +56 -0
- package/es/components/AddSelect/AddSelectList.js +94 -0
- package/es/components/AddSelect/AddSelectSidebar.js +46 -0
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -2
- package/es/components/CancelableTextEdit/CancelableTextEdit.js +2 -2
- package/es/components/Card/Card.js +6 -4
- package/es/components/InlineEdit/InlineEdit.js +223 -74
- package/es/components/NotificationsPanel/NotificationsPanel.js +16 -3
- package/es/components/PageHeader/PageHeader.js +7 -4
- package/es/components/PageHeader/PageHeaderTitle.js +10 -6
- package/es/components/SidePanel/SidePanel.js +32 -15
- package/es/components/WebTerminal/WebTerminal.js +1 -1
- package/es/settings.js +0 -5
- package/lib/components/AddSelect/AddSelect.js +110 -65
- package/lib/components/AddSelect/AddSelectBreadcrumbs.js +71 -0
- package/lib/components/AddSelect/AddSelectList.js +112 -0
- package/lib/components/AddSelect/AddSelectSidebar.js +63 -0
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -2
- package/lib/components/CancelableTextEdit/CancelableTextEdit.js +1 -1
- package/lib/components/Card/Card.js +6 -4
- package/lib/components/InlineEdit/InlineEdit.js +219 -72
- package/lib/components/NotificationsPanel/NotificationsPanel.js +13 -1
- package/lib/components/PageHeader/PageHeader.js +7 -4
- package/lib/components/PageHeader/PageHeaderTitle.js +10 -6
- package/lib/components/SidePanel/SidePanel.js +32 -15
- package/lib/components/WebTerminal/WebTerminal.js +1 -1
- package/lib/settings.js +0 -6
- package/package.json +12 -12
- package/scss/components/AddSelect/_add-select.scss +24 -0
- package/scss/components/BreadcrumbWithOverflow/_index.scss +1 -1
- package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss +1 -0
- package/scss/components/CreateInfluencer/_create-influencer.scss +4 -4
- package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -2
- package/scss/components/InlineEdit/_inline-edit.scss +210 -9
- package/scss/components/InlineEdit/_storybook-styles.scss +13 -0
- package/scss/components/NotificationsPanel/_notifications-panel.scss +2 -2
- package/scss/components/PageHeader/_index.scss +1 -1
- package/scss/components/PageHeader/_page-header.scss +1 -1
- package/scss/components/ProductiveCard/_productive-card.scss +0 -4
- package/scss/components/SidePanel/_side-panel.scss +15 -6
- package/scss/components/StatusIcon/_index.scss +1 -1
- package/scss/components/TagSet/_index.scss +1 -1
- package/scss/components/UserProfileImage/_index.scss +1 -1
- package/scss/components/WebTerminal/_web-terminal.scss +2 -2
- package/scss/global/styles/_project-settings.scss +5 -1
- package/es/generated/feature-flags/feature-flags.js +0 -15
- package/lib/generated/feature-flags/feature-flags.js +0 -22
- package/scss/generated/feature-flags/_feature-flags.scss +0 -19
@@ -113,8 +113,12 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
113
113
|
var sidePanelInnerRef = (0, _react.useRef)();
|
114
114
|
var sidePanelCloseRef = (0, _react.useRef)();
|
115
115
|
var previousState = (0, _hooks.usePreviousValue)({
|
116
|
-
size: size
|
117
|
-
|
116
|
+
size: size,
|
117
|
+
open: open
|
118
|
+
});
|
119
|
+
var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
|
120
|
+
matches: true
|
121
|
+
}; // scroll panel to top going between steps
|
118
122
|
|
119
123
|
(0, _react.useEffect)(function () {
|
120
124
|
var panelRef = ref || sidePanelRef;
|
@@ -193,7 +197,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
193
197
|
|
194
198
|
|
195
199
|
(0, _react.useEffect)(function () {
|
196
|
-
if (open && animateTitle && animationComplete && title && title.length) {
|
200
|
+
if (open && animateTitle && animationComplete && title && title.length && !reducedMotion.matches) {
|
197
201
|
var _document$querySelect2, _document$querySelect3, _document$querySelect4;
|
198
202
|
|
199
203
|
var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
|
@@ -285,7 +289,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
285
289
|
_sidePanelOuter === null || _sidePanelOuter === void 0 ? void 0 : _sidePanelOuter.style.setProperty("--".concat(blockClass, "--subtitle-container-height"), "".concat(_sidePanelSubtitleElementHeight, "px"));
|
286
290
|
_sidePanelOuter === null || _sidePanelOuter === void 0 ? void 0 : _sidePanelOuter.style.setProperty("--".concat(blockClass, "--action-bar-container-height"), "".concat(sidePanelActionBarElementHeight, "px"));
|
287
291
|
}
|
288
|
-
}, [open, animateTitle, animationComplete, shouldRender, panelHeight, title, size]); // click outside functionality if `includeOverlay` prop is set
|
292
|
+
}, [open, animateTitle, animationComplete, shouldRender, panelHeight, title, size, reducedMotion.matches]); // click outside functionality if `includeOverlay` prop is set
|
289
293
|
|
290
294
|
(0, _react.useEffect)(function () {
|
291
295
|
var handleOutsideClick = function handleOutsideClick(event) {
|
@@ -311,7 +315,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
311
315
|
return function () {
|
312
316
|
document.removeEventListener('click', handleOutsideClick);
|
313
317
|
};
|
314
|
-
}, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref]); // initialize the side panel to open
|
318
|
+
}, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]); // initialize the side panel to open
|
315
319
|
|
316
320
|
(0, _react.useEffect)(function () {
|
317
321
|
if (open) {
|
@@ -321,14 +325,21 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
321
325
|
|
322
326
|
var onAnimationEnd = function onAnimationEnd() {
|
323
327
|
if (!open) {
|
324
|
-
onUnmount
|
328
|
+
onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
|
325
329
|
setRender(false);
|
326
330
|
}
|
327
331
|
|
328
332
|
setAnimationComplete(true);
|
329
|
-
}; //
|
333
|
+
}; // Set the internal state `animationComplete` to true if
|
334
|
+
// prefers reduced motion is true
|
330
335
|
|
331
336
|
|
337
|
+
(0, _react.useEffect)(function () {
|
338
|
+
if (reducedMotion.matches) {
|
339
|
+
setAnimationComplete(true);
|
340
|
+
}
|
341
|
+
}, [reducedMotion.matches]); // initializes the side panel to open
|
342
|
+
|
332
343
|
var _onAnimationStart = function onAnimationStart(event) {
|
333
344
|
event.persist();
|
334
345
|
var isPanelTarget = event.target.id === "".concat(blockClass, "-outer");
|
@@ -349,7 +360,13 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
349
360
|
pageContentElement.style.marginLeft = 0;
|
350
361
|
}
|
351
362
|
}
|
352
|
-
}, [open, placement, selectorPageContent, slideIn]);
|
363
|
+
}, [open, placement, selectorPageContent, slideIn]);
|
364
|
+
(0, _react.useEffect)(function () {
|
365
|
+
if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion.matches) {
|
366
|
+
setRender(false);
|
367
|
+
onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
|
368
|
+
}
|
369
|
+
}, [open, onUnmount, reducedMotion.matches, previousState === null || previousState === void 0 ? void 0 : previousState.open]); // used to set margins of content for slide in panel version
|
353
370
|
|
354
371
|
(0, _react.useEffect)(function () {
|
355
372
|
if (shouldRender && slideIn) {
|
@@ -357,15 +374,15 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
357
374
|
|
358
375
|
if (placement && placement === 'right' && pageContentElement) {
|
359
376
|
pageContentElement.style.marginRight = 0;
|
360
|
-
pageContentElement.style.transition = "margin-right ".concat(_motion.moderate02);
|
377
|
+
pageContentElement.style.transition = !reducedMotion.matches ? "margin-right ".concat(_motion.moderate02) : null;
|
361
378
|
pageContentElement.style.marginRight = _constants.SIDE_PANEL_SIZES[size];
|
362
379
|
} else if (pageContentElement) {
|
363
380
|
pageContentElement.style.marginLeft = 0;
|
364
|
-
pageContentElement.style.transition = "margin-left ".concat(_motion.moderate02);
|
381
|
+
pageContentElement.style.transition = !reducedMotion.matches ? "margin-left ".concat(_motion.moderate02) : null;
|
365
382
|
pageContentElement.style.marginLeft = _constants.SIDE_PANEL_SIZES[size];
|
366
383
|
}
|
367
384
|
}
|
368
|
-
}, [slideIn, selectorPageContent, placement, shouldRender, size]); // adds focus trap functionality
|
385
|
+
}, [slideIn, selectorPageContent, placement, shouldRender, size, reducedMotion.matches]); // adds focus trap functionality
|
369
386
|
|
370
387
|
/* istanbul ignore next */
|
371
388
|
|
@@ -392,7 +409,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
392
409
|
var _cx, _cx2;
|
393
410
|
|
394
411
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
395
|
-
className: (0, _classnames.default)("".concat(blockClass, "__title-container"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__on-detail-step"), currentStep > 0), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__on-detail-step-without-title"), currentStep > 0 && !title), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container--no-title-animation"), !animateTitle), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container-is-animating"), !animationComplete || !open), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container-without-title"), !title), _cx))
|
412
|
+
className: (0, _classnames.default)("".concat(blockClass, "__title-container"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__on-detail-step"), currentStep > 0), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__on-detail-step-without-title"), currentStep > 0 && !title), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container--no-title-animation"), !animateTitle), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container-is-animating"), !animationComplete || !open), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container-without-title"), !title), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container--reduced-motion"), reducedMotion.matches), _cx))
|
396
413
|
}, currentStep > 0 && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
|
397
414
|
"aria-label": navigationBackIconDescription,
|
398
415
|
kind: "ghost",
|
@@ -449,7 +466,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
449
466
|
className: "".concat(blockClass, "__title-text"),
|
450
467
|
title: title,
|
451
468
|
"aria-hidden": false
|
452
|
-
}, title), animateTitle && title && title.length && /*#__PURE__*/_react.default.createElement("h2", {
|
469
|
+
}, title), animateTitle && title && title.length && !reducedMotion.matches && /*#__PURE__*/_react.default.createElement("h2", {
|
453
470
|
className: "".concat(blockClass, "__collapsed-title-text"),
|
454
471
|
title: title,
|
455
472
|
"aria-hidden": true
|
@@ -466,7 +483,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
466
483
|
id: "".concat(blockClass, "-outer"),
|
467
484
|
className: mainPanelClassNames,
|
468
485
|
style: {
|
469
|
-
animation: "".concat(open ? placement === 'right' ? "
|
486
|
+
animation: !reducedMotion.matches ? "".concat(open ? placement === 'right' ? "side-panel-entrance-right ".concat(_motion.moderate02) : "side-panel-entrance-left ".concat(_motion.moderate02) : placement === 'right' ? "side-panel-exit-right ".concat(_motion.moderate02) : "side-panel-exit-left ".concat(_motion.moderate02)) : null
|
470
487
|
},
|
471
488
|
onAnimationEnd: onAnimationEnd,
|
472
489
|
onAnimationStart: function onAnimationStart(event) {
|
@@ -499,7 +516,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
499
516
|
ref: sidePanelOverlayRef,
|
500
517
|
className: "".concat(blockClass, "__overlay"),
|
501
518
|
style: {
|
502
|
-
animation: "".concat(open ? "
|
519
|
+
animation: !reducedMotion.matches ? "".concat(open ? "side-panel-overlay-entrance ".concat(_motion.moderate02) : "side-panel-overlay-exit ".concat(_motion.moderate02)) : null
|
503
520
|
}
|
504
521
|
}));
|
505
522
|
}); // Return a placeholder if not released and not enabled by feature flag
|
@@ -80,7 +80,7 @@ var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
80
80
|
ref: ref,
|
81
81
|
className: (0, _classnames.default)([blockClass, (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "--open"), open), (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "--closed"), !open), (0, _defineProperty2.default)(_ref2, className, className), _ref2)]),
|
82
82
|
style: {
|
83
|
-
animation: "".concat(open ? '
|
83
|
+
animation: "".concat(open ? 'web-terminal-entrance 250ms' : 'web-terminal-exit 250ms')
|
84
84
|
},
|
85
85
|
onAnimationEnd: onAnimationEnd
|
86
86
|
}), /*#__PURE__*/_react.default.createElement("header", {
|
package/lib/settings.js
CHANGED
@@ -9,8 +9,6 @@ exports.pkg = exports.carbon = void 0;
|
|
9
9
|
|
10
10
|
var _Canary = require("./components/_Canary");
|
11
11
|
|
12
|
-
var _featureFlags = _interopRequireDefault(require("./generated/feature-flags/feature-flags"));
|
13
|
-
|
14
12
|
var _packageSettings = _interopRequireDefault(require("./global/js/package-settings"));
|
15
13
|
|
16
14
|
var _carbonComponents = require("carbon-components");
|
@@ -28,10 +26,6 @@ var carbon = {
|
|
28
26
|
_carbonComponents.settings.prefix = val;
|
29
27
|
},
|
30
28
|
|
31
|
-
get flags() {
|
32
|
-
return _featureFlags.default;
|
33
|
-
},
|
34
|
-
|
35
29
|
get themes() {
|
36
30
|
return _themes.themes;
|
37
31
|
}
|
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": "1.
|
4
|
+
"version": "1.6.0",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -46,13 +46,13 @@
|
|
46
46
|
"generate": "cross-env FORCE_COLOR=1 node scripts/generate",
|
47
47
|
"postinstall": "carbon-telemetry collect --install",
|
48
48
|
"test": "jest --colors",
|
49
|
-
"//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency)
|
49
|
+
"//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency), chalk (issue #1596)",
|
50
50
|
"upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$)/'"
|
51
51
|
},
|
52
52
|
"devDependencies": {
|
53
|
-
"@babel/cli": "^7.
|
54
|
-
"@babel/core": "^7.
|
55
|
-
"babel-preset-ibm-cloud-cognitive": "^0.14.
|
53
|
+
"@babel/cli": "^7.17.0",
|
54
|
+
"@babel/core": "^7.17.0",
|
55
|
+
"babel-preset-ibm-cloud-cognitive": "^0.14.6",
|
56
56
|
"chalk": "^4.1.2",
|
57
57
|
"change-case": "^4.1.2",
|
58
58
|
"copyfiles": "^2.4.1",
|
@@ -60,15 +60,15 @@
|
|
60
60
|
"fs-extra": "^10.0.0",
|
61
61
|
"glob": "^7.2.0",
|
62
62
|
"jest": "^27.4.7",
|
63
|
-
"jest-config-ibm-cloud-cognitive": "^0.23.
|
63
|
+
"jest-config-ibm-cloud-cognitive": "^0.23.7",
|
64
64
|
"npm-check-updates": "^12.2.1",
|
65
65
|
"npm-run-all": "^4.1.5",
|
66
66
|
"rimraf": "^3.0.2",
|
67
|
-
"sass": "^1.49.
|
67
|
+
"sass": "^1.49.7",
|
68
68
|
"yargs": "^17.3.1"
|
69
69
|
},
|
70
70
|
"dependencies": {
|
71
|
-
"@babel/runtime": "^7.
|
71
|
+
"@babel/runtime": "^7.17.0",
|
72
72
|
"@carbon/telemetry": "^0.0.0-alpha.6",
|
73
73
|
"react-resize-detector": "^7.0.0"
|
74
74
|
},
|
@@ -78,13 +78,13 @@
|
|
78
78
|
"@carbon/import-once": "^10.5.0",
|
79
79
|
"@carbon/layout": "^10.35.0",
|
80
80
|
"@carbon/motion": "^10.27.0",
|
81
|
-
"@carbon/themes": "^10.
|
81
|
+
"@carbon/themes": "^10.50.0",
|
82
82
|
"@carbon/type": "^10.40.0",
|
83
|
-
"carbon-components": "^10.
|
84
|
-
"carbon-components-react": "^7.
|
83
|
+
"carbon-components": "^10.52.0",
|
84
|
+
"carbon-components-react": "^7.52.0",
|
85
85
|
"carbon-icons": "^7.0.7",
|
86
86
|
"react": "^16.8.6 || ^17.0.1",
|
87
87
|
"react-dom": "^16.8.6 || ^17.0.1"
|
88
88
|
},
|
89
|
-
"gitHead": "
|
89
|
+
"gitHead": "3e87aeeb51d41503263511831b8db5f08437d754"
|
90
90
|
}
|
@@ -37,6 +37,16 @@
|
|
37
37
|
|
38
38
|
.#{$block-class}__selections {
|
39
39
|
border-top: 1px solid $ui-03;
|
40
|
+
|
41
|
+
&-wrapper {
|
42
|
+
display: block;
|
43
|
+
}
|
44
|
+
|
45
|
+
&-cell-wrapper {
|
46
|
+
display: flex;
|
47
|
+
align-items: center;
|
48
|
+
justify-content: space-between;
|
49
|
+
}
|
40
50
|
}
|
41
51
|
|
42
52
|
// multi select specific
|
@@ -77,6 +87,20 @@
|
|
77
87
|
p {
|
78
88
|
padding-right: 0;
|
79
89
|
}
|
90
|
+
|
91
|
+
.#{$block-class} .#{$carbon-prefix}--structured-list-td {
|
92
|
+
padding-bottom: $spacing-05;
|
93
|
+
}
|
94
|
+
|
95
|
+
.#{$block-class}
|
96
|
+
.#{$carbon-prefix}--radio-button-wrapper
|
97
|
+
.#{$carbon-prefix}--radio-button__label {
|
98
|
+
justify-content: left;
|
99
|
+
}
|
100
|
+
|
101
|
+
.#{$block-class} .#{$carbon-prefix}--breadcrumb .#{$carbon-prefix}--link {
|
102
|
+
cursor: pointer;
|
103
|
+
}
|
80
104
|
}
|
81
105
|
|
82
106
|
@include exports('add-select') {
|
@@ -13,7 +13,7 @@
|
|
13
13
|
$block-class: #{$pkg-prefix}--create-influencer;
|
14
14
|
$create-tearsheet-block-class: #{$pkg-prefix}--tearsheet-create;
|
15
15
|
$influencerAnimationStart: calc(-1 * #{$spacing-05});
|
16
|
-
@keyframes
|
16
|
+
@keyframes influencer-menu-entrance {
|
17
17
|
0% {
|
18
18
|
opacity: 0;
|
19
19
|
// stylelint-disable-next-line carbon/layout-token-use
|
@@ -24,7 +24,7 @@
|
|
24
24
|
transform: translateX(0);
|
25
25
|
}
|
26
26
|
}
|
27
|
-
@keyframes
|
27
|
+
@keyframes influencer-menu-exit {
|
28
28
|
0% {
|
29
29
|
opacity: 1;
|
30
30
|
transform: translateX(0);
|
@@ -60,7 +60,7 @@
|
|
60
60
|
.#{$block-class}__side-nav-opening,
|
61
61
|
.#{$block-class}__progress-indicator-opening {
|
62
62
|
// stylelint-disable-next-line carbon/motion-token-use
|
63
|
-
animation:
|
63
|
+
animation: influencer-menu-entrance $duration--moderate-02 1;
|
64
64
|
animation-fill-mode: forwards;
|
65
65
|
@include carbon--motion(entrance, productive);
|
66
66
|
}
|
@@ -68,7 +68,7 @@
|
|
68
68
|
.#{$block-class}__side-nav-closing,
|
69
69
|
.#{$block-class}__progress-indicator-closing {
|
70
70
|
// stylelint-disable-next-line carbon/motion-token-use
|
71
|
-
animation:
|
71
|
+
animation: influencer-menu-exit $duration--moderate-02 1;
|
72
72
|
animation-fill-mode: forwards;
|
73
73
|
@include carbon--motion(exit, productive);
|
74
74
|
}
|
@@ -23,7 +23,7 @@
|
|
23
23
|
@import '../CreateInfluencer/index';
|
24
24
|
|
25
25
|
@mixin create-tearsheet {
|
26
|
-
@keyframes
|
26
|
+
@keyframes step-content-entrance {
|
27
27
|
0% {
|
28
28
|
opacity: 0;
|
29
29
|
// stylelint-disable-next-line carbon/layout-token-use
|
@@ -50,7 +50,7 @@
|
|
50
50
|
}
|
51
51
|
|
52
52
|
.#{$block-class} .#{$step-block-class}__step--visible-step {
|
53
|
-
animation: $duration--slow-01
|
53
|
+
animation: $duration--slow-01 step-content-entrance;
|
54
54
|
animation-fill-mode: forwards;
|
55
55
|
animation-timing-function: $carbon--standard-easing;
|
56
56
|
opacity: 0;
|
@@ -18,24 +18,225 @@
|
|
18
18
|
// InlineEdit uses the following Carbon for IBM Products components:
|
19
19
|
// TODO: @import(s) of IBM Products component styles used by InlineEdit
|
20
20
|
|
21
|
+
// cut down version borrowed from 'carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/utilities/focus-outline';
|
22
|
+
@mixin input-outline($color: $focus) {
|
23
|
+
outline: $spacing-01 solid $color;
|
24
|
+
outline-offset: calc(-1 * $spacing-01);
|
25
|
+
|
26
|
+
@media screen and (prefers-contrast) {
|
27
|
+
outline-style: dotted;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
31
|
+
@function tooltip-top-bottom-safe-clip() {
|
32
|
+
@return polygon(
|
33
|
+
0 0,
|
34
|
+
-100vw 0,
|
35
|
+
-100vw -100vh,
|
36
|
+
100vw -100vh,
|
37
|
+
100vw 0,
|
38
|
+
100% 0,
|
39
|
+
100% 100%,
|
40
|
+
100vw 100%,
|
41
|
+
100vw 100vh,
|
42
|
+
-100vw 100vh,
|
43
|
+
-100vw 100%,
|
44
|
+
0 100%
|
45
|
+
);
|
46
|
+
}
|
47
|
+
|
48
|
+
@mixin input-button-defaults($block-class) {
|
49
|
+
width: var(--#{$block-class}--size);
|
50
|
+
height: 100%;
|
51
|
+
min-height: initial;
|
52
|
+
max-height: var(--#{$block-class}--size);
|
53
|
+
|
54
|
+
// stylelint-disable-next-line carbon/layout-token-use
|
55
|
+
padding: calc(
|
56
|
+
0.5 * (var(--#{$block-class}--size) - var(--#{$block-class}--icon-size))
|
57
|
+
);
|
58
|
+
border: 2px solid transparent;
|
59
|
+
}
|
60
|
+
|
21
61
|
// Define all component styles in a mixin which is then exported using
|
22
62
|
// the Carbon import-once mechanism.
|
23
63
|
@mixin inline-edit {
|
24
64
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
25
65
|
$block-class: #{$pkg-prefix}--inline-edit;
|
26
66
|
|
27
|
-
|
67
|
+
@include block-wrap($block-class) {
|
68
|
+
--#{$block-class}--size: #{$spacing-08};
|
69
|
+
--#{$block-class}--icon-size: #{$spacing-05};
|
70
|
+
--#{$block-class}--background-color: #{$ui-01};
|
71
|
+
|
72
|
+
&.#{$block-class}--light {
|
73
|
+
--#{$block-class}--background-color: transparent;
|
74
|
+
}
|
75
|
+
|
76
|
+
&:hover {
|
77
|
+
--#{$block-class}--background-color: #{$hover-field};
|
78
|
+
// background-color: $background-color;
|
79
|
+
}
|
80
|
+
|
81
|
+
position: relative;
|
28
82
|
display: inline-flex;
|
29
|
-
|
30
|
-
|
83
|
+
// min-width: 250px; // similar to min input box with room for edit-controls
|
84
|
+
max-width: 100%;
|
85
|
+
height: var(--#{$block-class}--size);
|
86
|
+
background-color: var(--#{$block-class}--background-color);
|
87
|
+
cursor: text; // appear to be part of the text box
|
88
|
+
transition: background-color $duration--fast-01 motion(entrance, productive),
|
89
|
+
box-shadow $duration--fast-01 motion(entrance, productive),
|
90
|
+
border-color $duration--fast-01 motion(entrance, productive);
|
31
91
|
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
92
|
+
white-space: nowrap;
|
93
|
+
|
94
|
+
&.#{$block-class}--sm {
|
95
|
+
--#{$block-class}--size: #{$spacing-07};
|
96
|
+
--#{$block-class}--icon-size: #{$spacing-05};
|
97
|
+
}
|
98
|
+
|
99
|
+
&.#{$block-class}--lg {
|
100
|
+
--#{$block-class}--size: #{$spacing-09};
|
101
|
+
--#{$block-class}--icon-size: #{$spacing-05};
|
102
|
+
}
|
103
|
+
|
104
|
+
&.#{$block-class}--editing {
|
105
|
+
@include input-outline($focus);
|
106
|
+
|
107
|
+
background-color: $ui-01;
|
108
|
+
}
|
109
|
+
|
110
|
+
.#{$block-class}--invalid {
|
111
|
+
@include input-outline($support-01);
|
112
|
+
}
|
113
|
+
|
114
|
+
.#{$block-class}__input {
|
115
|
+
display: flex;
|
116
|
+
overflow: hidden;
|
117
|
+
max-width: calc(100% - 2 * var(--#{$block-class}--size) - $spacing-05);
|
118
|
+
height: 100%;
|
119
|
+
flex: 1 1 100%;
|
120
|
+
align-items: center;
|
121
|
+
// stylelint-disable-next-line carbon/layout-token-use
|
122
|
+
margin-right: calc(2 * var(--#{$block-class}--size)); // room for controls
|
123
|
+
margin-left: $spacing-05;
|
124
|
+
|
125
|
+
&:focus {
|
126
|
+
outline: none;
|
127
|
+
}
|
128
|
+
}
|
129
|
+
|
130
|
+
.#{$block-class}__placeholder {
|
131
|
+
position: absolute;
|
132
|
+
left: $spacing-03;
|
133
|
+
}
|
134
|
+
|
135
|
+
.#{$block-class}__controls {
|
136
|
+
// not simply flexed in as this causes flexbox to mis-measure the size of the input
|
137
|
+
position: absolute;
|
138
|
+
top: 0;
|
139
|
+
right: 0;
|
140
|
+
width: calc(2 * var(--#{$block-class}--size));
|
141
|
+
height: 100%;
|
142
|
+
cursor: text;
|
143
|
+
}
|
144
|
+
|
145
|
+
.#{$block-class}__controls--animation {
|
146
|
+
// makes room for the top clip text but hides the side overflow
|
147
|
+
clip-path: tooltip-top-bottom-safe-clip();
|
148
|
+
// NOTE: The above allows the tooltip to show through when overflowX: hidden would not when at right edge.
|
149
|
+
// It is used with margin animation of contained buttons
|
150
|
+
}
|
151
|
+
|
152
|
+
&.#{$block-class}--editing .#{$block-class}__controls::after {
|
153
|
+
// cover top and bottom when focus within block
|
154
|
+
// doing the same on the buttons is problematic when animating
|
155
|
+
// and causes visual artifacts when the button is hovered without focus
|
156
|
+
// as the buttons leave a 45% join between sides with transparent borders and top/bottom with $focus
|
157
|
+
position: absolute;
|
158
|
+
top: 0;
|
159
|
+
left: 0;
|
160
|
+
display: block;
|
161
|
+
width: 100%;
|
162
|
+
height: 100%;
|
163
|
+
box-sizing: border-box;
|
164
|
+
border: 2px solid $focus;
|
165
|
+
border-left: 0;
|
166
|
+
content: '';
|
167
|
+
pointer-events: none;
|
168
|
+
}
|
169
|
+
|
170
|
+
&.#{$block-class}.#{$block-class} .#{$block-class}__save,
|
171
|
+
&.#{$block-class}.#{$block-class} .#{$block-class}__cancel {
|
172
|
+
@include input-button-defaults($block-class);
|
173
|
+
|
174
|
+
// input does not have focus
|
175
|
+
&:hover {
|
176
|
+
outline: initial;
|
177
|
+
}
|
178
|
+
|
179
|
+
&:focus:active,
|
180
|
+
&:focus {
|
181
|
+
// border focus input does NOT have focus
|
182
|
+
border-color: $focus;
|
183
|
+
box-shadow: initial;
|
184
|
+
outline: initial;
|
185
|
+
}
|
186
|
+
|
187
|
+
&:focus:active:hover {
|
188
|
+
box-shadow: inset 0 0 0 1px $field-01;
|
189
|
+
}
|
190
|
+
|
191
|
+
&::before {
|
192
|
+
background-color: transparent;
|
193
|
+
}
|
194
|
+
|
195
|
+
&[disabled] {
|
196
|
+
border-color: transparent;
|
197
|
+
}
|
198
|
+
}
|
199
|
+
|
200
|
+
.#{$block-class}__controls .#{$block-class}__edit {
|
201
|
+
margin-left: var(--#{$block-class}--size);
|
202
|
+
}
|
203
|
+
|
204
|
+
.#{$block-class}__controls--animation .#{$block-class}__cancel {
|
205
|
+
margin-left: var(--#{$block-class}--size);
|
206
|
+
transition: margin-left $duration--moderate-02
|
207
|
+
motion(standard, productive);
|
208
|
+
}
|
209
|
+
|
210
|
+
.#{$block-class}__controls--saveable .#{$block-class}__cancel {
|
211
|
+
margin-left: 0;
|
212
|
+
}
|
213
|
+
|
214
|
+
&.#{$block-class}.#{$block-class} .#{$block-class}__edit {
|
215
|
+
@include input-button-defaults($block-class);
|
216
|
+
|
217
|
+
position: absolute;
|
218
|
+
top: 0;
|
219
|
+
right: 0;
|
220
|
+
// pointer-events: none;
|
221
|
+
|
222
|
+
&:hover,
|
223
|
+
&:active,
|
224
|
+
&:focus {
|
225
|
+
border-color: transparent;
|
226
|
+
background-color: transparent;
|
227
|
+
box-shadow: initial;
|
228
|
+
outline: initial;
|
229
|
+
}
|
230
|
+
}
|
231
|
+
|
232
|
+
.#{$block-class}__edit--hover-visible {
|
233
|
+
opacity: 0;
|
234
|
+
transition: opacity $duration--fast-01 motion(entrance, productive);
|
235
|
+
}
|
36
236
|
|
37
|
-
|
38
|
-
|
237
|
+
&:hover .#{$block-class}__edit--hover-visible {
|
238
|
+
opacity: 1;
|
239
|
+
}
|
39
240
|
}
|
40
241
|
}
|
41
242
|
|
@@ -13,3 +13,16 @@
|
|
13
13
|
// that the SCSS styles for this component are sufficiently specific
|
14
14
|
// to override Carbon whichever order the styles get loaded in.
|
15
15
|
//@import 'carbon-components/css/carbon-components.min';
|
16
|
+
|
17
|
+
.inline-edit-stories__viewport {
|
18
|
+
// width: 300px; // larger than standard size needed by text input at standard font size (html input attribute size)
|
19
|
+
// stylelint-disable-next-line carbon/layout-token-use
|
20
|
+
margin: 100px;
|
21
|
+
}
|
22
|
+
|
23
|
+
$block-class: #{$pkg-prefix}--inline-edit;
|
24
|
+
.component-full-width {
|
25
|
+
.#{$block-class} {
|
26
|
+
width: 100%;
|
27
|
+
}
|
28
|
+
}
|
@@ -20,7 +20,7 @@
|
|
20
20
|
|
21
21
|
@mixin notifications-panel {
|
22
22
|
$block-class: #{$pkg-prefix}--notifications-panel;
|
23
|
-
@keyframes
|
23
|
+
@keyframes fade-in {
|
24
24
|
0% {
|
25
25
|
opacity: 0;
|
26
26
|
// stylelint-disable-next-line carbon/layout-token-use
|
@@ -32,7 +32,7 @@
|
|
32
32
|
}
|
33
33
|
}
|
34
34
|
|
35
|
-
@keyframes
|
35
|
+
@keyframes fade-out {
|
36
36
|
0% {
|
37
37
|
opacity: 1;
|
38
38
|
transform: translateY(0);
|