@carbon/ibm-products 1.2.4 → 1.5.0

package/lib/global/js/hooks/useValidCreateStepCount.js

@@ -16,18 +16,15 @@ var _react = require("react");
 
 /**
  * Logs a warning to console if an invalid number of steps are used with the given CreateComponent
- * @param {Function} getCreateComponentSteps
+ * @param {number} stepCount
  * @param {string} componentName
  */
-var useValidCreateStepCount = function useValidCreateStepCount(getCreateComponentSteps, componentName) {
+var useValidCreateStepCount = function useValidCreateStepCount(stepCount, componentName) {
   (0, _react.useEffect)(function () {
-    var createSteps = getCreateComponentSteps();
-    var total = createSteps.length;
-
-    if (total === 1) {
+    if (stepCount === 1) {
       console.warn("".concat(componentName, ": ").concat(componentName, "s with one step are not permitted. If you require only one step, please use either the CreateTearsheetNarrow, CreateSidePanel, or CreateModal components."));
     }
-  }, [getCreateComponentSteps, componentName]);
+  }, [stepCount, componentName]);
 };
 
 exports.useValidCreateStepCount = useValidCreateStepCount;

package/lib/global/js/package-settings.js

@@ -56,6 +56,8 @@ var defaults = {
     UnauthorizedEmptyState: true,
     UserProfileImage: true,
     // other public components not yet reviewed and released:
+    MultiAddSelect: false,
+    SingleAddSelect: false,
     LoadingBar: false,
     ModifiedTabs: false,
     Toolbar: false,
@@ -63,7 +65,9 @@ var defaults = {
     ToolbarGroup: false,
     WebTerminal: false,
     EditSidePanel: false,
-    OptionsTile: false
+    OptionsTile: false,
+    CancelableTextEdit: false,
+    InlineEdit: false
     /* new component flags here - comment used by generate CLI */
 
   },

package/lib/global/js/utils/lastIndexInArray.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lastIndexInArray = void 0;
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * This utility will return the index of the last instance of an
+ * item in the given array of objects whose key is equal to the value
+ * parameter. If there are no matches, -1 is returned as similar to findIndex
+ * @param {Array<Object.*>} array
+ * @param {string} key
+ * @param {string|boolean|number} value
+ */
+var lastIndexInArray = function lastIndexInArray(array, key, value) {
+  for (var i = array.length - 1; i >= 0; i--) {
+    var _array$i;
+
+    if (((_array$i = array[i]) === null || _array$i === void 0 ? void 0 : _array$i[key]) === value) {
+      return i + 1;
+    }
+  }
+
+  return -1;
+};
+
+exports.lastIndexInArray = lastIndexInArray;

package/lib/global/js/utils/story-helper.js

@@ -31,7 +31,7 @@ var _storyStructure = require("../../../../../core/story-structure");
  */
 var getStoryTitle = function getStoryTitle(componentName) {
   var title = // if the component isn't in the master structure, put it in a lost+found section
-  (0, _storyStructure.getPathForComponent)('c', componentName) || "Cloud & Cognitive/Lost + found/".concat(componentName); // add a canary tag if the component is public but not normally enabled
+  (0, _storyStructure.getPathForComponent)('c', componentName) || "Carbon for IBM Products/Lost + found/".concat(componentName); // add a canary tag if the component is public but not normally enabled
 
   return !_packageSettings.default.isComponentEnabled(componentName, true) && _packageSettings.default.isComponentPublic(componentName, true) ? "".concat(title, "#canary") : title;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.2.4",
+  "version": "1.5.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -46,45 +46,45 @@
     "generate": "cross-env FORCE_COLOR=1 node scripts/generate",
     "postinstall": "carbon-telemetry collect --install",
     "test": "jest --colors",
-    "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency)",
-    "upgrade-dependencies": "npm-check-updates -u --color --reject '/(carbon|^react$|^react-dom$)/'"
+    "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency) or chalk (until we can load it as ESM)",
+    "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$)/'"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.16.5",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.2",
-    "chalk": "^5.0.0",
+    "@babel/cli": "^7.16.8",
+    "@babel/core": "^7.16.12",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.5",
+    "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "fs-extra": "^10.0.0",
     "glob": "^7.2.0",
-    "jest": "^27.4.5",
-    "jest-config-ibm-cloud-cognitive": "^0.23.3",
-    "npm-check-updates": "^12.0.5",
+    "jest": "^27.4.7",
+    "jest-config-ibm-cloud-cognitive": "^0.23.6",
+    "npm-check-updates": "^12.2.1",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.45.1",
+    "sass": "^1.49.0",
     "yargs": "^17.3.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.5",
+    "@babel/runtime": "^7.16.7",
     "@carbon/telemetry": "^0.0.0-alpha.6",
-    "react-resize-detector": "^6.7.7"
+    "react-resize-detector": "^7.0.0"
   },
   "peerDependencies": {
-    "@carbon/colors": "^10.34.0",
-    "@carbon/icons-react": "^10.42.0",
+    "@carbon/colors": "^10.35.0",
+    "@carbon/icons-react": "^10.45.0",
     "@carbon/import-once": "^10.5.0",
-    "@carbon/layout": "^10.34.0",
-    "@carbon/motion": "^10.26.0",
-    "@carbon/themes": "^10.46.0",
-    "@carbon/type": "^10.38.0",
-    "carbon-components": "^10.47.1",
-    "carbon-components-react": "^7.47.2",
+    "@carbon/layout": "^10.35.0",
+    "@carbon/motion": "^10.27.0",
+    "@carbon/themes": "^10.49.0",
+    "@carbon/type": "^10.40.0",
+    "carbon-components": "^10.51.0",
+    "carbon-components-react": "^7.51.0",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "6eeed92e16258acf94397ca8616e5f0486e7d000"
+  "gitHead": "c87d8a538026632249a4f6e907b008efb1d50250"
 }

package/scss/components/AddSelect/_add-select.scss

@@ -0,0 +1,84 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+
+@import 'carbon-components/scss/components/structured-list/structured-list';
+
+@mixin add-select {
+  $block-class: #{$pkg-prefix}--add-select;
+  $tearsheet-class: #{$pkg-prefix}--tearsheet;
+
+  .#{$block-class}__header {
+    padding: $spacing-05;
+    padding-bottom: 0;
+    border-top: 1px solid $ui-03;
+  }
+
+  .#{$block-class}__body {
+    padding: $spacing-05;
+  }
+
+  .#{$block-class}__items-label {
+    margin-right: $spacing-03;
+
+    &-container {
+      display: flex;
+      align-items: center;
+      margin-top: $spacing-05;
+      margin-bottom: $spacing-03;
+    }
+  }
+
+  .#{$block-class}__selections {
+    border-top: 1px solid $ui-03;
+  }
+
+  // multi select specific
+
+  .#{$block-class}__influencer-header {
+    display: flex;
+    padding: $spacing-06 $spacing-05 $spacing-03 $spacing-05;
+    border-bottom: 1px solid $ui-03;
+
+    .#{$block-class}__influencer-title {
+      @include carbon--type-style('productive-heading-02');
+    }
+  }
+
+  .#{$block-class}__influencer-title {
+    margin-right: $spacing-03;
+  }
+
+  .#{$block-class}__influencer-body {
+    padding: $spacing-05;
+  }
+
+  // overrides
+
+  // the influencer sidebar needs to be even with the buttons
+  .#{$block-class} .#{$tearsheet-class} .#{$tearsheet-class}__influencer {
+    max-width: 29rem;
+    flex: 0 0 50%;
+  }
+
+  .#{$block-class} .#{$block-class}__items-label {
+    @include carbon--type-style('productive-heading-01');
+  }
+
+  .#{$block-class}
+    .#{$carbon-prefix}--modal-container--sm
+    .bx--modal-content
+    p {
+    padding-right: 0;
+  }
+}
+
+@include exports('add-select') {
+  @include add-select;
+}

package/scss/components/AddSelect/_index.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// An index file is most useful when you have multiple components
+
+@import './add-select';

package/scss/components/AddSelect/_storybook-styles.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//

package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss

@@ -32,11 +32,8 @@
     }
 
     .#{$block-class}__breadcrumb-container.#{$block-class}__breadcrumb-container-with-items {
-      display: none;
+      display: inline-flex; // needed to register a width
       width: 100%;
-      @include carbon--breakpoint(md) {
-        display: inline-flex; // needed to register a width
-      }
     }
 
     .#{$block-class}__breadcrumb-container .#{$carbon-prefix}--breadcrumb {
@@ -50,12 +47,28 @@
       @include measuring-container;
     }
 
+    .#{$block-class}__breadcrumb-back {
+      display: none;
+    }
+
+    @include carbon--breakpoint-down(md) {
+      .#{$carbon-prefix}--breadcrumb-item {
+        display: none;
+      }
+
+      .#{$block-class}__breadcrumb-back,
+      .#{$carbon-prefix}--breadcrumb-item:last-child {
+        display: inline-flex;
+        vertical-align: middle;
+      }
+    }
+
     .#{$carbon-prefix}--breadcrumb-item:last-child {
-      display: inline;
+      display: inline-flex; // flex instead of block due to spacing
     }
 
     .#{$block-class}__displayed-breadcrumb:last-child {
-      display: inline;
+      display: inline-flex; // flex instead of block due to spacing
       overflow: hidden;
     }
 
@@ -69,15 +82,6 @@
     .#{$carbon-prefix}--link {
       max-height: 18px; // to match breadcrumb - overflow button is 20 by default
     }
-
-    .#{$block-class}__breadcrumb-back-button.#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only.#{$carbon-prefix}--tooltip__trigger {
-      display: inline-flex;
-      margin-top: calc(-1 * #{$spacing-04});
-
-      @include carbon--breakpoint(md) {
-        display: none;
-      }
-    }
   }
 }
 

package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss

@@ -0,0 +1,211 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+@import '../../global/styles/mixins';
+
+// Other Carbon settings.
+// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+
+// CancelableTextEdit uses the following Carbon components:
+// TODO: @import(s) of Carbon component styles used by CancelableTextEdit
+
+// CancelableTextEdit uses the following Carbon for IBM Products components:
+// TODO: @import(s) of IBM Products component styles used by CancelableTextEdit
+
+@mixin button-states($block-class) {
+  .#{$block-class}__revert,
+  .#{$block-class}__save {
+    border: 1px solid transparent;
+
+    // input does not have focus
+    &:hover {
+      border-color: $hover-field;
+      border-bottom-color: transparent;
+      background-clip: content-box;
+      box-shadow: initial;
+      outline: initial;
+    }
+
+    &:focus:active,
+    &:focus {
+      // border focus input does NOT have focus
+      border-color: $focus;
+      box-shadow: inset 0 0 0 1px $focus;
+      outline: initial;
+    }
+
+    &:focus:active:hover {
+      box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $field-01;
+    }
+
+    &::before {
+      background-color: transparent;
+    }
+
+    &[disabled] {
+      border-color: transparent;
+    }
+  }
+
+  // invalid affects hover state
+  &.#{$block-class}--invalid {
+    // invalid does not have focus
+    .#{$block-class}__save:hover,
+    .#{$block-class}__revert:hover {
+      border: 1px solid transparent;
+      box-shadow: inset 0 1px 0 $support-01, inset 0 -1px 0 $support-01;
+    }
+
+    .#{$block-class}__save:hover {
+      // invalid does  not have focus
+      box-shadow: inset 0 1px 0 $support-01, inset 0 -1px 0 $support-01,
+        inset -1px 0 0 $support-01;
+    }
+  }
+
+  // after other button states handle focus within input
+  .#{$carbon-prefix}--text-input-wrapper:focus-within
+    ~ .#{$block-class}__buttons {
+    .#{$block-class}__revert,
+    .#{$block-class}__save {
+      border: 1px solid transparent;
+      box-shadow: inset 0 1px 0 $focus, inset 0 -1px 0 $focus;
+      // transition-property: initial; // turn off seems to cause a bit of a visual glitch
+    }
+
+    // button hover state
+    .#{$block-class}__revert:hover,
+    .#{$block-class}__save:hover {
+      background-clip: content-box;
+    }
+
+    .#{$block-class}__save {
+      // border hover input has focus or is in error
+      box-shadow: inset 0 1px 0 $focus, inset 0 -1px 0 $focus,
+        inset -1px 0 0 $focus;
+    }
+  }
+}
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin cancelable-text-edit {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--cancelable-text-edit;
+
+  .#{$block-class} {
+    --size: #{$spacing-08};
+    --icon-size: #{$spacing-05};
+  }
+
+  .#{$block-class}--sm {
+    --size: #{$spacing-07};
+    --icon-size: #{$spacing-05};
+  }
+
+  .#{$block-class}--lg {
+    --size: #{$spacing-09};
+    --icon-size: #{$spacing-05};
+  }
+
+  // high specificity to override some icon button styles to work like the Carbon search clear button
+  // but at sizes of text input
+  .#{$block-class}.#{$block-class}.#{$block-class} {
+    .#{$block-class}__main {
+      position: relative;
+      display: inline-flex;
+      min-height: var(--size);
+      vertical-align: top;
+    }
+
+    .#{$block-class}__input {
+      height: var(--size);
+      // stylelint-disable-next-line carbon/layout-token-use
+      padding-right: calc(2 * var(--size));
+    }
+
+    .#{$block-class}__buttons {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .#{$block-class}__buttons-inner {
+      display: flex;
+    }
+
+    @include button-states($block-class);
+
+    .#{$block-class}__revert,
+    .#{$block-class}__save {
+      display: flex;
+      width: var(--size);
+      height: var(--size);
+      min-height: var(--size);
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+
+      svg {
+        width: var(--icon-size);
+        height: var(--icon-size);
+        // margin: calc(var(--size) / 4);
+      }
+    }
+
+    // > only wish to affect version added for inline
+    &.#{$block-class}--invalid .#{$carbon-prefix}--form-requirement,
+    &.#{$block-class}--warn .#{$carbon-prefix}--form-requirement {
+      display: block;
+      max-height: initial;
+    }
+
+    &.#{$block-class}--invalid.#{$block-class}--inline
+      .#{$carbon-prefix}--form-requirement,
+    &.#{$block-class}--warn.#{$block-class}--inline
+      .#{$carbon-prefix}--form-requirement {
+      // stylelint-disable-next-line carbon/layout-token-use
+      margin-left: calc(20% + 1.25rem); // needs to match inline input layout
+    }
+
+    // > only wish to affect version added for inline
+    &.#{$block-class}--invalid .#{$carbon-prefix}--form-requirement {
+      display: block;
+      overflow: visible;
+      // max-height: 12.5rem;
+      // font-weight: 400;
+      color: $text-error;
+    }
+
+    .#{$carbon-prefix}--text-input {
+      // stylelint-disable-next-line carbon/layout-token-use
+      padding-right: calc(
+        2 * var(--size)
+      ); // to take account of save and revert
+    }
+
+    .#{$carbon-prefix}--text-input--invalid {
+      // stylelint-disable-next-line carbon/layout-token-use
+      padding-right: calc(
+        3 * var(--size)
+      ); // to take account of save and revert
+    }
+
+    .#{$carbon-prefix}--text-input__invalid-icon {
+      margin-right: $spacing-11;
+    }
+  }
+}
+
+@include exports('cancelable-text-edit') {
+  @include cancelable-text-edit;
+}

package/{es/components/CreateFullPage/constants.js → scss/components/CancelableTextEdit/_index.scss}

@@ -4,5 +4,5 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-export var CREATE_FULL_PAGE_STEP = 'CreateFullPageStep';
-export var CREATE_FULL_PAGE_SECTION = 'CreateFullPageSection';
+
+@import './cancelable-text-edit';

package/scss/components/CancelableTextEdit/_storybook-styles.scss

@@ -0,0 +1,15 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import './index';
+
+// TODO: add any additional styles used by CancelableTextEdit.stories.js
+
+// Uncomment next line (which must appear last) to test in storybook
+// that the SCSS styles for this component are sufficiently specific
+// to override Carbon whichever order the styles get loaded in.
+//@import 'carbon-components/css/carbon-components.min';

package/scss/components/CreateFullPage/_create-full-page.scss

@@ -30,6 +30,7 @@
 @mixin create-full-page {
   // The block part of our conventional BEM class names (blockClass__E--M).
   $block-class: #{$pkg-prefix}--create-full-page;
+  $step-block-class: #{$pkg-prefix}--create-full-page__step;
 
   .#{$block-class} .#{$block-class} {
     color: $text-01;
@@ -41,20 +42,14 @@
     margin-left: 0;
   }
 
-  .#{$block-class} .#{$block-class}__step--hidden-step,
-  .#{$block-class} .#{$block-class}__step--hidden-section {
+  .#{$block-class} .#{$step-block-class}__step--hidden-step {
     display: none;
   }
 
-  .#{$block-class} .#{$block-class}__step--visible-section {
+  .#{$block-class} .#{$step-block-class}__step--visible-step {
     display: block;
   }
 
-  .#{$block-class} .#{$block-class}__step--visible-step {
-    opacity: 1;
-  }
-
-  .#{$block-class} .#{$block-class}__section-subtitle,
   .#{$block-class} .#{$block-class}__step-subtitle {
     @include carbon--type-style('productive-heading-01');
 
@@ -62,7 +57,6 @@
     margin-bottom: $spacing-03;
   }
 
-  .#{$block-class} .#{$block-class}__section-description,
   .#{$block-class} .#{$block-class}__step-description {
     @include carbon--type-style('body-long-01');
 
@@ -150,8 +144,7 @@
     }
   }
 
-  .#{$block-class} .#{$block-class}__step-title,
-  .#{$block-class} .#{$block-class}__section-title {
+  .#{$block-class} .#{$block-class}__step-title {
     @include carbon--type-style('productive-heading-04');
 
     max-width: 50%;

package/scss/components/CreateTearsheet/_create-tearsheet.scss

@@ -36,6 +36,7 @@
   }
 
   $block-class: #{$pkg-prefix}--tearsheet-create;
+  $step-block-class: #{$pkg-prefix}--tearsheet-create__step;
   $section-block-class: #{$pkg-prefix}--tearsheet-create__section;
   $tearsheet-divider-class: #{$pkg-prefix}--tearsheet-create__section--divider;
   $tearsheet-fieldset-class: #{$pkg-prefix}--tearsheet-create__step--fieldset;
@@ -44,16 +45,11 @@
     --#{$block-class}--total-width: 0;
   }
 
-  .#{$block-class} .#{$block-class}__step--hidden-step,
-  .#{$block-class} .#{$block-class}__step--hidden-section {
+  .#{$block-class} .#{$step-block-class}__step--hidden-step {
     display: none;
   }
 
-  .#{$block-class} .#{$block-class}__step--visible-section {
-    display: block;
-  }
-
-  .#{$block-class} .#{$block-class}__step--visible-step {
+  .#{$block-class} .#{$step-block-class}__step--visible-step {
     animation: $duration--slow-01 stepContentEntrance;
     animation-fill-mode: forwards;
     animation-timing-function: $carbon--standard-easing;
@@ -61,7 +57,7 @@
   }
 
   @media (prefers-reduced-motion) {
-    .#{$block-class} .#{$block-class}__step--visible-step {
+    .#{$block-class} .#{$step-block-class}__step--visible-step {
       animation: none;
       opacity: 1;
     }

package/scss/components/InlineEdit/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import './inline-edit';