@carbon/ibm-products 2.17.1 → 2.18.0

package/lib/components/TagSet/TagSet.js

@@ -20,10 +20,10 @@ var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 var _devtools = require("../../global/js/utils/devtools");
 var _propsHelper = require("../../global/js/utils/props-helper");
 var _settings = require("../../settings");
-var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
+var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags", "containingElementRef", "measurementOffset"],
   _excluded2 = ["label", "id"],
   _excluded3 = ["label"]; //
-// Copyright IBM Corp. 2020, 2022
+// Copyright IBM Corp. 2020, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -39,6 +39,7 @@ var allTagsModalSearchThreshold = 10;
 // Default values for props
 var defaults = {
   align: 'start',
+  measurementOffset: 0,
   overflowAlign: 'bottom',
   overflowType: 'default'
 };
@@ -59,6 +60,9 @@ var TagSet = exports.TagSet = /*#__PURE__*/_react.default.forwardRef(function (_
     allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
     showAllTagsLabel = _ref.showAllTagsLabel,
     tags = _ref.tags,
+    containingElementRef = _ref.containingElementRef,
+    _ref$measurementOffse = _ref.measurementOffset,
+    measurementOffset = _ref$measurementOffse === void 0 ? defaults.measurementOffset : _ref$measurementOffse,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(3),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -149,7 +153,9 @@ var TagSet = exports.TagSet = /*#__PURE__*/_react.default.forwardRef(function (_
     // how many will fit?
     var willFit = 0;
     if (sizingTags.length > 0) {
-      var spaceAvailable = tagSetRef.current.offsetWidth;
+      var optionalContainingElement = containingElementRef === null || containingElementRef === void 0 ? void 0 : containingElementRef.current;
+      var measurementOffsetValue = typeof measurementOffset === 'number' ? measurementOffset : 0;
+      var spaceAvailable = optionalContainingElement ? optionalContainingElement.offsetWidth - measurementOffsetValue : tagSetRef.current.offsetWidth;
       for (var i in sizingTags) {
         var _sizingTags$i;
         var tagWidth = ((_sizingTags$i = sizingTags[i]) === null || _sizingTags$i === void 0 ? void 0 : _sizingTags$i.offsetWidth) || 0;
@@ -173,7 +179,7 @@ var TagSet = exports.TagSet = /*#__PURE__*/_react.default.forwardRef(function (_
     } else {
       setDisplayCount(maxVisible ? Math.min(willFit, maxVisible) : willFit);
     }
-  }, [maxVisible, multiline, sizingTags, tagSetRef]);
+  }, [maxVisible, multiline, sizingTags, tagSetRef, measurementOffset, containingElementRef]);
   (0, _react.useEffect)(function () {
     checkFullyVisibleTags();
   }, [checkFullyVisibleTags, maxVisible, multiline, sizingTags]);
@@ -195,7 +201,8 @@ var TagSet = exports.TagSet = /*#__PURE__*/_react.default.forwardRef(function (_
     setShowAllModalOpen(false);
   };
   (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, handleSizerTagsResize);
-  (0, _useResizeObserver.useResizeObserver)(tagSetRef, handleResize);
+  var resizeOption = containingElementRef ? containingElementRef : tagSetRef;
+  (0, _useResizeObserver.useResizeObserver)(resizeOption, handleResize);
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)([blockClass, className]),
     ref: tagSetRef
@@ -273,10 +280,20 @@ TagSet.propTypes = {
    * className
    */
   className: _propTypes.default.string,
+  /**
+   * Optional ref for custom resize container to measure available space
+   * Default will measure the available space of the TagSet container itself.
+   */
+  containingElementRef: _propTypes.default.object,
   /**
    * maximum visible tags
    */
   maxVisible: _propTypes.default.number,
+  /**
+   * Specify offset amount for measure available space, only used when `containingElementSelector`
+   * is also provided
+   */
+  measurementOffset: _propTypes.default.number,
   /**
    * display tags in multiple lines
    */

package/lib/components/WebTerminal/WebTerminal.js

@@ -164,9 +164,11 @@ var WebTerminal = exports.WebTerminal = /*#__PURE__*/_react.default.forwardRef(f
     onAnimationEnd: function onAnimationEnd(event) {
       return event.stopPropagation();
     }
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement(_react2.Theme, {
+    theme: "g100"
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__body")
-  }, children)) : null;
+  }, children))) : null;
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/global/js/hooks/useCreateComponentStepChange.js

@@ -73,7 +73,7 @@ var useCreateComponentStepChange = exports.useCreateComponentStepChange = functi
   (0, _react.useEffect)(function () {
     var onUnmount = function onUnmount() {
       if (componentName !== 'CreateFullPage') {
-        setCurrentStep(0);
+        setCurrentStep(1);
       }
       setIsSubmitting(false);
       onClose();

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

@@ -78,15 +78,18 @@ var defaults = {
 
     // Novice to pro components not yet reviewed and released:
     Checklist: false,
-    InlineTip: false
+    Guidebanner: false,
+    GuidebannerElement: false,
+    GuidebannerElementButton: false,
+    GuidebannerElementLink: false,
+    InlineTip: false,
+    NonLinearReading: false
   },
   // feature level flags
   feature: {
     'default-portal-target-body': true,
     'Datagrid.useInlineEdit': false,
     'Datagrid.useEditableCell': false,
-    'Datagrid.useExpandedRow': false,
-    'Datagrid.useNestedRows': false,
     'Datagrid.useFiltering': false,
     'Datagrid.useCustomizeColumns': false,
     'ExampleComponent.secondaryIcon': false,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.17.1",
+  "version": "2.18.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -74,7 +74,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.10",
-    "@carbon/ibm-products-styles": "^2.17.1",
+    "@carbon/ibm-products-styles": "^2.18.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
@@ -89,11 +89,11 @@
     "@carbon/grid": "^11.21.1",
     "@carbon/layout": "^11.20.1",
     "@carbon/motion": "^11.16.1",
-    "@carbon/react": "^1.42.1",
-    "@carbon/themes": "^11.27.1",
+    "@carbon/react": "^1.44.0",
+    "@carbon/themes": "^11.28.0",
     "@carbon/type": "^11.25.1",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "370d06eb88989ab2e82640ddaa4df29c19f27bd7"
+  "gitHead": "a683f659e575d3ee051af4702703888070501824"
 }

package/scss/components/Carousel/_carbon-imports.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2020, 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/Carousel/_carousel.scss

@@ -0,0 +1,72 @@
+//
+// Copyright IBM Corp. 2023, 2023
+//
+// 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.
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/type' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--carousel;
+
+.#{$block-class} {
+  position: relative;
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  &:focus {
+    outline: none;
+  }
+}
+.#{$block-class}__elements-container {
+  overflow: hidden;
+}
+.#{$block-class}__elements-container--scrolled,
+.#{$block-class}__elements-container--scroll-max {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  bottom: 0;
+  width: $spacing-07;
+  pointer-events: none;
+}
+
+.#{$block-class}__elements-container--scrolled {
+  left: 0;
+}
+
+.#{$block-class}__elements-container--scroll-max {
+  right: 0;
+}
+
+.#{$block-class}__elements {
+  display: flex;
+  overflow: scroll;
+  -ms-overflow-style: none;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  @media (prefers-reduced-motion) {
+    scroll-behavior: auto;
+  }
+}
+
+.#{$block-class}__elements::-webkit-scrollbar {
+  display: none;
+}

package/scss/components/Carousel/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@use './carbon-imports';
+@use './carousel';

package/scss/components/Carousel/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+
+@use './carousel';

package/scss/components/Datagrid/styles/_useExpandedRow.scss

@@ -71,3 +71,24 @@
   td {
   background: $layer-hover;
 }
+
+.#{variables.$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr:hover
+  td.#{variables.$block-class}__expanded-row-cell-wrapper,
+.#{variables.$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  td.#{variables.$block-class}__expanded-row-cell-wrapper,
+.#{variables.$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  .#{variables.$block-class}__carbon-row-expanded
+  td.#{variables.$block-class}__expandable-row-cell {
+  border: none;
+}
+
+.#{variables.$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  td.#{variables.$block-class}__expanded-row-cell-wrapper {
+  padding: 0;
+}

package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss

@@ -84,3 +84,12 @@
 .#{variables.$block-class}__row-size__row-settings-trigger--open.#{c4p-settings.$carbon-prefix}--btn--ghost {
   background-color: $layer-02;
 }
+
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  td.#{variables.$block-class}__expandable-row-cell,
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
+  td.#{variables.$block-class}__expandable-row-cell {
+  padding-top: $spacing-03;
+}

package/scss/components/FilterSummary/_filter-summary.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022
+// Copyright IBM Corp. 2022, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -21,3 +21,8 @@ $block-class: #{$pkg-prefix}--filter-summary;
   border-top: 1px solid $border-subtle-01;
   background: $layer-01;
 }
+
+.#{$block-class}
+  .#{$pkg-prefix}--tag-set.#{$pkg-prefix}--tag-set.#{$block-class}__clear-button-inline {
+  width: auto;
+}

package/scss/components/Guidebanner/_carbon-imports.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2020, 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/Guidebanner/_guidebanner.scss

@@ -0,0 +1,248 @@
+//
+// Copyright IBM Corp. 2023, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/**
+ * The Guidebanner specifically is theme-agnostic, and so we have to 
+ * use color tokens to keep the colors static instead of theme tokens 
+ * that will change depending on the selected theme.
+ * 
+ * Because of this, we are triggering a *large* amount of linting errors.
+ * So, we're adding a few "disable" rules for the file instead of 60 
+ * individual rules.
+ */
+
+/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable carbon/motion-duration-use */
+/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable declaration-no-important */
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/type' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--guidebanner;
+
+// Each GuidebannerElement is contained in a CarouselItem.
+$carousel-item: #{c4p-settings.$pkg-prefix}--carousel__item;
+
+@mixin when-collapsed($selector: '&') {
+  .#{c4p-settings.$pkg-prefix}--guidebanner__collapsible-collapsed
+    #{$selector} {
+    @content;
+  }
+}
+
+$horizontal-margin: to-rem(52px);
+// Guidebanner-specific colors.
+$purple-1: #9b63ff;
+$purple-2: #7f3ae7;
+$purple-3: #7433e3;
+
+.#{$block-class} {
+  // Due to the Guidebanner's dark background,
+  // apply dark theme by default for all elements:
+  // i.e. light text, icons, tooltips, etc.
+  @include theme(themes.$g100, true);
+
+  position: relative;
+  background: linear-gradient(90deg, $blue-90 0%, $purple-70 100%);
+  background-color: $blue-90;
+}
+
+.#{$block-class}__icon-idea {
+  position: absolute;
+  top: $spacing-05;
+  left: $spacing-05;
+
+  path {
+    fill: $gray-10;
+  }
+}
+
+.#{$block-class}__title {
+  @include type-style('heading-compact-02');
+
+  padding: $spacing-05 to-rem(175px) 0 $horizontal-margin;
+  color: $gray-10;
+}
+
+.#{$block-class}__close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.#{$block-class}__close-button button {
+  width: $spacing-07;
+  height: $spacing-07;
+  min-height: $spacing-07;
+  padding-top: 6px;
+
+  &:active,
+  &:hover {
+    background-color: $purple-3;
+  }
+
+  path {
+    fill: $white-0;
+  }
+}
+
+// Specify Carousel look and feel.
+.#{$block-class}__carousel {
+  padding: 0 0 $spacing-05 0;
+  color: $gray-10;
+
+  @include when-collapsed() {
+    margin-bottom: 0;
+  }
+}
+
+// All carousel elements are 400px wide,
+// except the last one (see below).
+.#{$block-class}__carousel .#{$carousel-item} .#{$block-class}__element {
+  display: flex;
+  width: to-rem(400px); // 25rem
+  max-height: to-rem(512px); // 32rem
+  flex-flow: column;
+  flex-shrink: 0;
+  padding-left: $horizontal-margin;
+  margin: $spacing-05 0 0 0;
+  opacity: 1;
+  scroll-snap-align: start;
+  transition: max-height 50ms motion(exit, productive),
+    margin-top 50ms motion(exit, productive),
+    opacity 300ms motion(exit, productive);
+
+  @include when-collapsed() {
+    max-height: $spacing-03;
+    margin-top: 0;
+    opacity: 0;
+  }
+}
+// The last carousel item is wider, with more padding-right,
+// to provide more space against the right edge of the carousel.
+.#{$block-class}__carousel
+  .#{$carousel-item}:last-child
+  .#{$block-class}__element {
+  width: to-rem(448px); // 28rem
+  padding-right: $horizontal-margin;
+}
+
+.#{$block-class}__carousel .#{$carousel-item} .#{$block-class}__element-title {
+  @include type-style('heading-compact-01');
+
+  margin: $spacing-05 0 0 0;
+}
+
+.#{$block-class}__carousel .#{$block-class}__element-content {
+  @include type-style('body-01');
+
+  margin-bottom: $spacing-05;
+}
+
+// Button with crossroads icon
+.#{$block-class}__carousel .#{c4p-settings.$carbon-prefix}--btn--tertiary {
+  border-color: $white-0;
+  color: $white-0;
+
+  &:active,
+  &:hover {
+    border-color: $white-0;
+    background-color: $white-0;
+    color: $gray-100;
+  }
+
+  // The "render icon" CSS seems to be missing in the latest Carbon button.
+  // Specifically, getting the icon to move to right-hand side of the content area.
+  // Repeating here.
+  svg {
+    position: absolute;
+    right: 1rem;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+}
+
+.#{$block-class}__carousel .#{c4p-settings.$carbon-prefix}--btn--ghost {
+  margin-left: calc(-1 * $spacing-05);
+  color: $blue-30;
+
+  &:active,
+  &:hover {
+    background-color: $purple-2;
+    color: $gray-10;
+  }
+}
+
+.#{$block-class}__carousel .#{$block-class}__element-link {
+  color: $blue-30;
+
+  &:visited {
+    color: $blue-30;
+  }
+
+  &:active,
+  &:hover {
+    color: $blue-20;
+  }
+}
+
+.#{$block-class}__navigation {
+  display: flex;
+  border-top: to-rem(1px) solid $purple-60;
+
+  @include when-collapsed() {
+    border-top: none;
+  }
+}
+.#{$block-class}__navigation .#{$block-class}__toggle-button {
+  margin-left: calc($horizontal-margin - to-rem(18px));
+  color: $blue-30;
+
+  &:active,
+  &:hover {
+    background-color: $purple-3;
+    color: $gray-10;
+  }
+}
+
+// Push navigation buttons to the right
+.#{$block-class}__navigation .#{$block-class}__back-button {
+  margin-left: auto;
+}
+// Hide navigation buttons when collapsed
+.#{$block-class}__navigation .#{$block-class}__back-button,
+.#{$block-class}__navigation .#{$block-class}__next-button {
+  @include when-collapsed() {
+    display: none;
+  }
+}
+.#{$block-class}__navigation .#{$block-class}__back-button button,
+.#{$block-class}__navigation .#{$block-class}__next-button button {
+  &:active,
+  &:hover {
+    background-color: $purple-3;
+  }
+
+  path {
+    fill: $white-0;
+  }
+
+  &[disabled] path {
+    fill: $purple-1;
+  }
+}

package/scss/components/Guidebanner/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@use './carbon-imports';
+@use './guidebanner';

package/scss/components/Guidebanner/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+
+@use './guidebanner';

package/scss/components/NonLinearReading/_carbon-imports.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2020, 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/NonLinearReading/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@use './carbon-imports';
+@use './_non-linear-reading';

package/scss/components/NonLinearReading/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2023, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './non-linear-reading';