@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.
Files changed (61) hide show
  1. package/css/index-full-carbon.css +206 -44
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -3
  4. package/css/index-without-carbon-released-only.css +31 -27
  5. package/css/index-without-carbon-released-only.css.map +1 -1
  6. package/css/index-without-carbon-released-only.min.css +3 -3
  7. package/css/index-without-carbon.css +193 -39
  8. package/css/index-without-carbon.css.map +1 -1
  9. package/css/index-without-carbon.min.css +3 -3
  10. package/css/index.css +195 -41
  11. package/css/index.css.map +1 -1
  12. package/css/index.min.css +3 -3
  13. package/es/components/AddSelect/AddSelect.js +106 -65
  14. package/es/components/AddSelect/AddSelectBreadcrumbs.js +56 -0
  15. package/es/components/AddSelect/AddSelectList.js +94 -0
  16. package/es/components/AddSelect/AddSelectSidebar.js +46 -0
  17. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -2
  18. package/es/components/CancelableTextEdit/CancelableTextEdit.js +2 -2
  19. package/es/components/Card/Card.js +6 -4
  20. package/es/components/InlineEdit/InlineEdit.js +223 -74
  21. package/es/components/NotificationsPanel/NotificationsPanel.js +16 -3
  22. package/es/components/PageHeader/PageHeader.js +7 -4
  23. package/es/components/PageHeader/PageHeaderTitle.js +10 -6
  24. package/es/components/SidePanel/SidePanel.js +32 -15
  25. package/es/components/WebTerminal/WebTerminal.js +1 -1
  26. package/es/settings.js +0 -5
  27. package/lib/components/AddSelect/AddSelect.js +110 -65
  28. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +71 -0
  29. package/lib/components/AddSelect/AddSelectList.js +112 -0
  30. package/lib/components/AddSelect/AddSelectSidebar.js +63 -0
  31. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -2
  32. package/lib/components/CancelableTextEdit/CancelableTextEdit.js +1 -1
  33. package/lib/components/Card/Card.js +6 -4
  34. package/lib/components/InlineEdit/InlineEdit.js +219 -72
  35. package/lib/components/NotificationsPanel/NotificationsPanel.js +13 -1
  36. package/lib/components/PageHeader/PageHeader.js +7 -4
  37. package/lib/components/PageHeader/PageHeaderTitle.js +10 -6
  38. package/lib/components/SidePanel/SidePanel.js +32 -15
  39. package/lib/components/WebTerminal/WebTerminal.js +1 -1
  40. package/lib/settings.js +0 -6
  41. package/package.json +12 -12
  42. package/scss/components/AddSelect/_add-select.scss +24 -0
  43. package/scss/components/BreadcrumbWithOverflow/_index.scss +1 -1
  44. package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss +1 -0
  45. package/scss/components/CreateInfluencer/_create-influencer.scss +4 -4
  46. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -2
  47. package/scss/components/InlineEdit/_inline-edit.scss +210 -9
  48. package/scss/components/InlineEdit/_storybook-styles.scss +13 -0
  49. package/scss/components/NotificationsPanel/_notifications-panel.scss +2 -2
  50. package/scss/components/PageHeader/_index.scss +1 -1
  51. package/scss/components/PageHeader/_page-header.scss +1 -1
  52. package/scss/components/ProductiveCard/_productive-card.scss +0 -4
  53. package/scss/components/SidePanel/_side-panel.scss +15 -6
  54. package/scss/components/StatusIcon/_index.scss +1 -1
  55. package/scss/components/TagSet/_index.scss +1 -1
  56. package/scss/components/UserProfileImage/_index.scss +1 -1
  57. package/scss/components/WebTerminal/_web-terminal.scss +2 -2
  58. package/scss/global/styles/_project-settings.scss +5 -1
  59. package/es/generated/feature-flags/feature-flags.js +0 -15
  60. package/lib/generated/feature-flags/feature-flags.js +0 -22
  61. 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
- }); // scroll panel to top going between steps
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 && onUnmount();
328
+ onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
325
329
  setRender(false);
326
330
  }
327
331
 
328
332
  setAnimationComplete(true);
329
- }; // initializes the side panel to open
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]); // used to set margins of content for slide in panel version
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' ? "sidePanelEntranceRight ".concat(_motion.moderate02) : "sidePanelEntranceLeft ".concat(_motion.moderate02) : placement === 'right' ? "sidePanelExitRight ".concat(_motion.moderate02) : "sidePanelExitLeft ".concat(_motion.moderate02))
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 ? "sidePanelOverlayEntrance ".concat(_motion.moderate02) : "sidePanelOverlayExit ".concat(_motion.moderate02))
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 ? 'webTerminalEntrance 250ms' : 'webTerminalExit 250ms')
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.5.0",
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) or chalk (until we can load it as ESM)",
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.16.8",
54
- "@babel/core": "^7.16.12",
55
- "babel-preset-ibm-cloud-cognitive": "^0.14.5",
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.6",
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.0",
67
+ "sass": "^1.49.7",
68
68
  "yargs": "^17.3.1"
69
69
  },
70
70
  "dependencies": {
71
- "@babel/runtime": "^7.16.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.49.0",
81
+ "@carbon/themes": "^10.50.0",
82
82
  "@carbon/type": "^10.40.0",
83
- "carbon-components": "^10.51.0",
84
- "carbon-components-react": "^7.51.0",
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": "c87d8a538026632249a4f6e907b008efb1d50250"
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') {
@@ -5,4 +5,4 @@
5
5
  // LICENSE file in the root directory of this source tree.
6
6
  //
7
7
 
8
- @import './breadcrumb-with-overflow.scss';
8
+ @import './breadcrumb-with-overflow';
@@ -120,6 +120,7 @@
120
120
  .#{$block-class}__main {
121
121
  position: relative;
122
122
  display: inline-flex;
123
+ width: 100%;
123
124
  min-height: var(--size);
124
125
  vertical-align: top;
125
126
  }
@@ -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 influencerMenuEntrance {
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 influencerMenuExit {
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: influencerMenuEntrance $duration--moderate-02 1;
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: influencerMenuExit $duration--moderate-02 1;
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 stepContentEntrance {
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 stepContentEntrance;
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
- .#{$block-class} {
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
- align-content: center;
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
- .#{$block-class} .#{$block-class}__value {
33
- display: flex;
34
- align-items: center;
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
- .#{$block-class} .#{$block-class}__button {
38
- margin-left: $spacing-03;
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 fadeIn {
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 fadeOut {
35
+ @keyframes fade-out {
36
36
  0% {
37
37
  opacity: 1;
38
38
  transform: translateY(0);
@@ -7,4 +7,4 @@
7
7
 
8
8
  // An index file is most useful when you have multiple components
9
9
 
10
- @import './page-header.scss';
10
+ @import './page-header';
@@ -80,7 +80,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
80
80
  $duration: 1000ms;
81
81
 
82
82
  $animation: background-appear;
83
- @if ($with-shadow) {
83
+ @if $with-shadow {
84
84
  $animation: background-and-shadow-appear;
85
85
  }
86
86
 
@@ -36,10 +36,6 @@
36
36
  align-items: center;
37
37
  justify-content: space-between;
38
38
  border-top: 1px solid $ui-03;
39
-
40
- .#{$carbon-prefix}--btn svg {
41
- margin-left: $spacing-03;
42
- }
43
39
  }
44
40
 
45
41
  .#{$block-class}__footer-no-button {