@carbon/ibm-products 2.34.0 → 2.35.0

package/lib/index.js

@@ -82,6 +82,7 @@ var useInlineEdit = require('./components/Datagrid/useInlineEdit.js');
 var useFiltering = require('./components/Datagrid/useFiltering.js');
 var getAutoSizedColumnWidth = require('./components/Datagrid/utils/getAutoSizedColumnWidth.js');
 var useFilterContext = require('./components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js');
+var useEditableCell = require('./components/Datagrid/useEditableCell.js');
 var EditTearsheet = require('./components/EditTearsheet/EditTearsheet.js');
 var EditTearsheetForm = require('./components/EditTearsheet/EditTearsheetForm.js');
 var EditTearsheetNarrow = require('./components/EditTearsheetNarrow/EditTearsheetNarrow.js');
@@ -124,6 +125,7 @@ var StringFormatter = require('./components/StringFormatter/StringFormatter.js')
 var UserAvatar = require('./components/UserAvatar/UserAvatar.js');
 var ScrollGradient = require('./components/ScrollGradient/ScrollGradient.js');
 var StatusIndicator = require('./components/StatusIndicator/StatusIndicator.js');
+var TagOverflow = require('./components/TagOverflow/TagOverflow.js');
 var ActionBar = require('./components/ActionBar/ActionBar.js');
 var FilterPanel = require('./components/FilterPanel/FilterPanel.js');
 var FilterPanelAccordion = require('./components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js');
@@ -132,6 +134,8 @@ var FilterPanelCheckbox = require('./components/FilterPanel/FilterPanelCheckbox/
 var FilterPanelCheckboxWithOverflow = require('./components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js');
 var FilterPanelGroup = require('./components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js');
 var FilterPanelLabel = require('./components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js');
+var FilterPanelSearch = require('./components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js');
+var ConditionBuilder = require('./components/ConditionBuilder/ConditionBuilder.js');
 
 
 
@@ -359,6 +363,7 @@ exports.useInlineEdit = useInlineEdit["default"];
 exports.useFiltering = useFiltering["default"];
 exports.getAutoSizedColumnWidth = getAutoSizedColumnWidth.getAutoSizedColumnWidth;
 exports.useFilterContext = useFilterContext["default"];
+exports.useEditableCell = useEditableCell["default"];
 Object.defineProperty(exports, 'EditTearsheet', {
 	enumerable: true,
 	get: function () { return EditTearsheet.EditTearsheet; }
@@ -527,6 +532,10 @@ Object.defineProperty(exports, 'StatusIndicator', {
 	enumerable: true,
 	get: function () { return StatusIndicator.StatusIndicator; }
 });
+Object.defineProperty(exports, 'TagOverflow', {
+	enumerable: true,
+	get: function () { return TagOverflow.TagOverflow; }
+});
 Object.defineProperty(exports, 'ActionBar', {
 	enumerable: true,
 	get: function () { return ActionBar.ActionBar; }
@@ -559,3 +568,11 @@ Object.defineProperty(exports, 'FilterPanelLabel', {
 	enumerable: true,
 	get: function () { return FilterPanelLabel.FilterPanelLabel; }
 });
+Object.defineProperty(exports, 'FilterPanelSearch', {
+	enumerable: true,
+	get: function () { return FilterPanelSearch.FilterPanelSearch; }
+});
+Object.defineProperty(exports, 'ConditionBuilder', {
+	enumerable: true,
+	get: function () { return ConditionBuilder.ConditionBuilder; }
+});

package/lib/settings.d.ts

@@ -70,6 +70,7 @@ export const pkg: {
         StringFormatter: boolean;
         StatusIndicator: boolean;
         StatusIndicatorStep: boolean;
+        TagOverflow: boolean;
         ActionBar: boolean;
         FilterPanel: boolean;
         FilterPanelAccordion: boolean;
@@ -78,6 +79,8 @@ export const pkg: {
         FilterPanelCheckboxWithOverflow: boolean;
         FilterPanelGroup: boolean;
         FilterPanelLabel: boolean;
+        FilterPanelSearch: boolean;
+        ConditionBuilder: boolean;
         Coachmark: boolean;
         CoachmarkBeacon: boolean;
         CoachmarkButton: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.34.0",
+  "version": "2.35.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -90,7 +90,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.32.0",
+    "@carbon/ibm-products-styles": "^2.33.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -114,5 +114,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "8c3c324be171a801b4d966e94c54ca01a99eb82f"
+  "gitHead": "7a5a7cdd83c39a7f0b5c1e5baf647ebe70ab2983"
 }

package/scss/components/Coachmark/_coachmark-dragbar.scss

@@ -8,7 +8,6 @@
 // Standard imports.
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
-@use '@carbon/react';
 @use '@carbon/react/scss/theme' as *;
 
 // Define all component styles in a mixin which is then exported using

package/scss/components/Coachmark/_coachmark-tagline.scss

@@ -36,7 +36,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-tagline;
   background: $purple-70;
   background-image: linear-gradient(90deg, $blue-90 0%, $purple-70 100%);
   color: $white-0 !important;
-  grid-template-columns: [ctacol] auto [closebtncol] $spacing-08;
+  grid-template-columns: [cta-col] auto [close-btn-col] $spacing-08;
   opacity: 1;
   // stylelint-disable-next-line carbon/motion-duration-use
   transition: opacity $duration-moderate-02 motion(exit, productive) 300ms;
@@ -86,7 +86,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-tagline;
     border: none;
     background: transparent;
     color: $white-0 !important;
-    grid-template-columns: [iconcol] $spacing-07 [bodycol] auto;
+    grid-template-columns: [icon-col] $spacing-07 [body-col] auto;
     text-align: left;
     @include type.type-style('body-short-01');
 

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 any Carbon component styles used from ConditionBuilder in this file.
+// ConditionBuilder uses the following Carbon components:

package/scss/components/ConditionBuilder/_condition-builder.scss

@@ -0,0 +1,25 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+
+// ConditionBuilder uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by ConditionBuilder
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
+
+// .#{$block-class} {
+//   // TODO: Styles.
+// }

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './condition-builder';

package/scss/components/ConditionBuilder/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './condition-builder';

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

@@ -21,8 +21,15 @@
 $block-class: #{c4p-settings.$pkg-prefix}--create-full-page;
 $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 
-.#{$block-class} .#{$block-class} {
+.#{$block-class} {
+  display: grid;
+  height: 100%;
   color: $text-primary;
+  grid-template-rows: minmax(auto, 100%);
+
+  &:has(.#{$block-class}__header) {
+    grid-template-rows: auto minmax(auto, 100%);
+  }
 }
 
 .#{$block-class}
@@ -33,14 +40,6 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
   margin-left: 0;
 }
 
-.#{$block-class}__header {
-  position: sticky;
-  z-index: 9;
-  top: 0;
-  right: 0;
-  left: 0;
-}
-
 .#{$block-class} .#{$step-block-class}__step--hidden-step {
   display: none;
 }
@@ -75,7 +74,8 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 
 .#{$block-class}__influencer-and-body-container {
   display: flex;
-  height: 100vh;
+  overflow: hidden;
+  max-height: 100%;
   padding: 0;
   margin: 0;
 }

package/scss/components/Datagrid/styles/_useNestedRows.scss

@@ -71,7 +71,11 @@
   .#{$block-class}__carbon-nested-row:not(
     .#{$block-class}__carbon-row-expandable
   )
-  td.#{$block-class}__cell:nth-of-type(2) {
+  td.#{$block-class}__cell:nth-of-type(2),
+.#{c4p-settings.$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row
+  td.#{$block-class}__cell:nth-of-type(2)
+  + td {
   position: relative;
 }
 

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

@@ -7,3 +7,8 @@
 
 // Import any Carbon component styles used from FilterPanel in this file.
 // FilterPanel uses the following Carbon components:
+@use '@carbon/react/scss/components/accordion';
+@use '@carbon/react/scss/components/checkbox';
+@use '@carbon/react/scss/components/list';
+@use '@carbon/react/scss/components/overflow-menu';
+@use '@carbon/react/scss/components/search';

package/scss/components/FilterPanel/_filter-panel-accordion-item.scss

@@ -12,9 +12,7 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 
-@use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -34,7 +32,7 @@ html .#{$block-class} .#{$carbon}--accordion__wrapper {
   padding-block: 0;
 }
 html .#{$block-class} .#{$carbon}--accordion__heading {
-  min-block-size: 2rem;
+  min-block-size: $spacing-07;
   padding-inline-end: 0;
 }
 html .#{$block-class} .#{$carbon}--accordion__title {

package/scss/components/FilterPanel/_filter-panel-checkbox-with-overflow.scss

@@ -12,8 +12,6 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 
-@use '@carbon/styles/scss/colors' as *;
-@use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 

package/scss/components/FilterPanel/_filter-panel-checkbox.scss

@@ -11,7 +11,6 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 
-@use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
 

package/scss/components/FilterPanel/_filter-panel-search.scss

@@ -0,0 +1,38 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 '../../global/styles/project-settings' as c4p-settings;
+
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities';
+
+// FilterPanel uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by FilterPanel
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-search;
+
+.#{$block-class} {
+  position: relative;
+  margin-bottom: $spacing-05;
+}
+
+.#{$block-class}__results {
+  position: absolute;
+  z-index: utilities.z('dropdown');
+  top: 100%;
+  right: 0;
+  left: 0;
+  /* stylelint-disable-next-line function-no-unknown */
+  max-height: to-rem(320px);
+  padding: $spacing-03;
+  background-color: $layer;
+  overflow-y: auto;
+}

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

@@ -13,3 +13,4 @@
 @use './filter-panel-checkbox-with-overflow';
 @use './filter-panel-group';
 @use './filter-panel-label';
+@use './filter-panel-search';

package/scss/components/FilterPanel/_index.scss

@@ -12,3 +12,4 @@
 @use './filter-panel-checkbox-with-overflow';
 @use './filter-panel-group';
 @use './filter-panel-label';
+@use './filter-panel-search';

package/scss/components/Guidebanner/_guidebanner.scss

@@ -248,7 +248,7 @@ $purple-3: #7433e3;
 }
 
 // Exception handling.
-// If "withLeftgutter", then:
+// If "withLeftGutter", then:
 // - insert 1 rem of more "space" on the left.
 // - move icon 1 rem more to the right.
 .#{$block-class}__with-left-gutter .#{$block-class}__icon-idea {

package/scss/components/InlineTip/_inline-tip.scss

@@ -229,7 +229,7 @@ $purple: #7f3ae7;
 }
 
 // Exception handling.
-// If "withLeftgutter", then:
+// If "withLeftGutter", then:
 // - insert 1 rem of more "space" on the left.
 // - move icon 1 rem more to the right.
 .#{$block-class}__wide.#{$block-class}__with-left-gutter {

package/scss/components/ProductiveCard/_productive-card.scss

@@ -16,6 +16,9 @@
 $block-class: #{c4p-settings.$pkg-prefix}--card;
 
 .#{$block-class}__productive {
+  display: flex;
+  flex-direction: column;
+
   .#{$block-class}__title {
     @include type.type-style('heading-compact-02');
   }
@@ -101,4 +104,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   .#{$block-class}__header-container {
     align-items: flex-start;
   }
+
+  .#{$block-class}__content-container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .#{$block-class}__header-body-container {
+    flex: 1;
+  }
 }

package/scss/components/SidePanel/_side-panel.scss

@@ -122,10 +122,15 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     z-index: 4;
     /* stylelint-disable-next-line carbon/layout-token-use */
     top: calc(-1px * var(--#{$block-class}--scroll-animation-distance));
+    min-height: $spacing-08;
     padding: $spacing-05;
     padding-bottom: 0;
     background-color: $layer-01;
 
+    &.#{$block-class}__header--has-title {
+      min-height: auto;
+    }
+
     &:has(.#{$block-class}__subtitle-text),
     &.#{$block-class}__header--has-subtitle {
       --#{$block-class}--title-padding-bottom: #{$spacing-03};
@@ -170,11 +175,6 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
       margin-bottom: 0;
     }
 
-    &.#{$block-class}__header--on-detail-step
-      .#{$block-class}__collapsed-title-text {
-      top: $spacing-05;
-    }
-
     &.#{$block-class}__header--on-detail-step
       .#{$block-class}__navigation-back-button.#{c4p-settings.$carbon-prefix}--btn--md
       ~ .#{$block-class}__collapsed-title-text {
@@ -297,6 +297,10 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     padding-top: 0;
   }
 
+  .#{$block-class}__inner-content--no-animated-title {
+    padding-top: $spacing-05;
+  }
+
   .#{$block-class}__header:has(.#{$block-class}__action-toolbar)
     + .#{$block-class}__inner-content,
   .#{$block-class}__header--has-action-toolbar
@@ -311,10 +315,6 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
       0 4px 10px 2px $ai-drop-shadow;
   }
 
-  .#{$block-class}__inner-content.#{$block-class}--scrolls {
-    padding-top: $spacing-05;
-  }
-
   .#{$block-class}__action-toolbar {
     position: sticky;
     z-index: 4;

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 any Carbon component styles used from TagOverflow in this file.
+// TagOverflow uses the following Carbon components:

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './tag-overflow';

package/scss/components/TagOverflow/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './tag-overflow';

package/scss/components/TagOverflow/_tag-overflow.scss

@@ -0,0 +1,55 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/spacing' as *;
+
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+
+// TagOverflow uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by TagOverflow
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--tag-overflow;
+
+.#{$block-class} {
+  display: flex;
+  width: 100%;
+  min-width: $spacing-12;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.#{$block-class}--multiline {
+  flex-wrap: wrap;
+}
+
+.#{$block-class}__item {
+  margin: $spacing-01;
+}
+
+.#{$block-class}__item--tag {
+  border: none;
+}
+
+.#{$block-class}__item--tag span {
+  display: inline-block;
+  overflow: hidden;
+  max-width: $spacing-12;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{$block-class}__indicator {
+  display: inline-block;
+  max-width: $spacing-09;
+}

package/scss/components/Tearsheet/_tearsheet.scss

@@ -317,6 +317,16 @@ $motion-duration: $duration-moderate-02;
     }
   }
 
+  @include breakpoint-down(md) {
+    .#{$block-class}__container {
+      max-height: 100%;
+    }
+
+    .#{$block-class}__influencer {
+      flex-basis: auto;
+    }
+  }
+
   .#{$block-class}__influencer--wide {
     flex-basis: 321px; // influencer width 320px plus 1px border
   }

package/scss/components/UserAvatar/_user-avatar.scss

@@ -76,6 +76,7 @@ $sizes: (
 }
 
 @mixin setLightBg($order, $color) {
+  :root .#{$block-class}--#{$order},
   .#{$carbon-prefix}--g10 .#{$block-class}--#{$order},
   .#{$carbon-prefix}--white .#{$block-class}--#{$order} {
     @include setBgColor($color);

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

@@ -72,4 +72,6 @@
 @use './UserAvatar/index-with-carbon' as *;
 @use './ScrollGradient/index-with-carbon' as *;
 @use './StatusIndicator/index-with-carbon' as *;
+@use './TagOverflow/index-with-carbon' as *;
 @use './FilterPanel/index-with-carbon' as *;
+@use './ConditionBuilder/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -80,4 +80,6 @@
 @use './UserAvatar';
 @use './ScrollGradient';
 @use './StatusIndicator';
+@use './TagOverflow';
 @use './FilterPanel';
+@use './ConditionBuilder';