@carbon/ibm-products 2.36.0 → 2.38.0-alpha.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.36.0",
+  "version": "2.38.0-alpha.5+70e9c92e4",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,6 +48,7 @@
     "clean": "rimraf es lib css scss",
     "generate": "cross-env FORCE_COLOR=1 node scripts/generate",
     "postinstall": "ibmtelemetry --config=telemetry.yml",
+    "telemetry-config": "ibmtelemetry-config --id 495342db-5046-4ecf-85ea-9ffceb6f8cdf --endpoint https://collector-prod.1am6wm210aow.us-south.codeengine.appdomain.cloud/v1/metrics --files ./src/components/**/*.(tsx|js|jsx)",
     "test": "jest --colors",
     "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency), chalk (issue #1596)",
     "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^namor)/'"
@@ -62,6 +63,7 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.21.5",
+    "@ibm/telemetry-js-config-generator": "^1.0.3",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -76,7 +78,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.1.6",
+    "jest-config-ibm-cloud-cognitive": "^1.1.7",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.14.12",
@@ -90,7 +92,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.34.0",
+    "@carbon/ibm-products-styles": "^2.35.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -114,5 +116,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "b1783b0aa7a0fbfbc120c3b47ecfb6855983a37d"
+  "gitHead": "70e9c92e41968c9840e77d15e721193d085d50a1"
 }

package/scss/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss

@@ -20,7 +20,7 @@
 // TODO: @use '@carbon/react/scss/grid';
 
 // CoachmarkOverlayElements uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by CoachmarkOverlayElements
+@use '../Carousel/carousel';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--coachmark-overlay-elements;

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

@@ -8,7 +8,11 @@
 // Standard imports.
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/type' as *;
+@use '@carbon/react/scss/theme';
 
+@use './styles/index';
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
 // or
@@ -23,3 +27,25 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 // .#{$block-class} {
 //   // TODO: Styles.
 // }
+
+.#{$block-class}__condition-builder__group {
+  display: flex;
+}
+
+.#{$block-class}__condition-wrapper {
+  display: flex;
+  flex-flow: row wrap;
+}
+.#{$block-class}__gap {
+  margin-right: $spacing-01;
+}
+.#{$block-class}__gap-bottom {
+  margin-bottom: $spacing-01;
+}
+.#{$block-class}__gap-left {
+  margin-left: $spacing-01;
+}
+.#{$block-class}__condition-block {
+  display: flex;
+  flex-direction: row;
+}

package/scss/components/ConditionBuilder/styles/_conditionBuilderCondition.scss

@@ -0,0 +1,46 @@
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/motion';
+@use '@carbon/styles/scss/components/tag' as *;
+@use '@carbon/styles/scss/utilities/focus-outline';
+@use '../../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/type' as *;
+
+$block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
+
+.#{$block-class}__condition-block,
+.#{$block-class}__condition-block .#{$block-class}__block {
+  position: relative;
+  display: inline-flex;
+}
+
+[role='row']:focus {
+  @include focus-outline.focus-outline('outline');
+
+  outline-offset: 0;
+}
+
+.#{$block-class}__condition-builder-condition__deletion-preview
+  .#{$block-class}__condition-builder-button:not(
+    .#{$block-class}__statement-button,
+    .#{$block-class}__connector-button
+  ) {
+  background-color: $tag-background-red;
+  color: $tag-color-red;
+}
+
+.#{$block-class}__condition-builder-condition__deletion-preview
+  .#{$block-class}__condition-builder-button:not(
+    .#{$block-class}__statement-button,
+    .#{$block-class}__connector-button
+  ):hover {
+  background-color: $tag-hover-red;
+}
+
+.#{$block-class}__text-ellipsis {
+  display: block;
+  overflow: hidden;
+  max-width: $spacing-13;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+}

package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss

@@ -0,0 +1,194 @@
+@use '@carbon/react/scss/theme' as *;
+@use '../../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/type';
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/utilities';
+@use '@carbon/react/scss/motion' as *;
+@use '@carbon/react/scss/utilities/focus-outline';
+@use '@carbon/styles/scss/components/tag';
+
+@use '@carbon/styles/scss/type' as *;
+
+$block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
+
+.#{$block-class}__content-container * {
+  @include type-style('body-01');
+}
+
+.#{$block-class}__condition-builder-item__content {
+  overflow: auto;
+  min-width: $spacing-07 + $spacing-13;
+  max-width: $spacing-13 + $spacing-13;
+  max-height: $spacing-13 + $spacing-13 + $spacing-07;
+}
+
+.#{$block-class}__condition-builder-item__title {
+  @include type-style('heading-01');
+
+  padding: $spacing-05;
+}
+
+.#{$block-class}__condition-builder-item-option__search {
+  padding-block-end: $spacing-05;
+  padding-inline: $spacing-05;
+}
+
+.#{$block-class}__condition-builder-item-option__option {
+  height: 2rem;
+  cursor: pointer;
+  padding-inline: $spacing-05;
+}
+
+.#{$block-class}__condition-builder-item-option__option:hover {
+  background-color: $layer-hover;
+}
+
+.#{$block-class}__condition-builder-item-option__option-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
+.#{$block-class}__condition-builder-item-option__option-label {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  column-gap: $spacing-03;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{$block-class}__condition-builder-item-option
+  > ul[aria-multiSelectable='true']
+  .#{$block-class}__condition-builder-item-option__option-label {
+  justify-content: center;
+}
+
+.#{$block-class}__condition-builder-item-option__option:not(:first-of-type)
+  .#{$block-class}__condition-builder-item-option__option-content {
+  border-block-start: 0.0625rem solid $border-subtle;
+}
+
+.#{$block-class}__condition-builder-item-option__option:hover
+  .#{$block-class}__condition-builder-item-option__option-content,
+.#{$block-class}__condition-builder-item-option__option[aria-selected='true']
+  .#{$block-class}__condition-builder-item-option__option-content,
+.#{$block-class}__condition-builder-item-option__option:hover
+  + .#{$block-class}__condition-builder-item-option__option
+  .#{$block-class}__condition-builder-item-option__option-content,
+.#{$block-class}__condition-builder-item-option__option[aria-selected='true']
+  + .#{$block-class}__condition-builder-item-option__option
+  .#{$block-class}__condition-builder-item-option__option-content {
+  border-block-start-color: transparent;
+}
+
+.#{$block-class}__condition-builder-item-option__option[aria-selected='true'] {
+  background-color: $layer-selected;
+}
+
+.#{$block-class}__condition-builder-item-option__option[aria-selected='true']:hover {
+  background-color: $layer-selected-hover;
+}
+
+.#{$block-class}__condition-builder-item-date,
+.#{$block-class}__condition-builder-item-text,
+.#{$block-class}__condition-builder-item-number,
+#{$block-class}__condition-builder-item-time {
+  padding-block-end: $spacing-05;
+  padding-inline: $spacing-05;
+}
+
+.#{$block-class}__condition-builder-checkmark {
+  margin-left: auto;
+}
+
+.#{$block-class}__condition-builder-button {
+  @include utilities.button-reset();
+
+  display: inline-flex;
+  height: $spacing-07;
+  align-items: center;
+  background-color: $layer;
+  color: inherit;
+  column-gap: $spacing-02;
+  cursor: pointer;
+  padding-inline: $spacing-03;
+  white-space: nowrap;
+}
+.#{$block-class}__condition-builder-button:hover {
+  background-color: $layer-hover;
+}
+.#{$block-class}__condition-builder__group.hoveredConnector
+  .#{$block-class}__condition-wrapper
+  > .conditionBlockWrapper
+  .#{$block-class}__connector-button {
+  background-color: $layer-hover;
+}
+
+.#{$block-class}__condition-builder-button:focus {
+  @include focus-outline.focus-outline('outline');
+
+  content: '';
+  inset: 0;
+}
+
+.#{$block-class}__statement-button,
+.#{$block-class}__connector-button {
+  min-width: $spacing-10;
+  padding-inline: $spacing-03;
+}
+.#{$block-class}__property-field {
+  @include type.type-style('heading-01');
+
+  padding-left: $spacing-03;
+}
+.#{$block-class}__close-condition {
+  padding-right: $spacing-03;
+}
+.#{$block-class}__add-button {
+  padding-right: $spacing-03;
+  padding-left: $spacing-03;
+}
+.#{$block-class}__conditionWrapper {
+  display: flex;
+}
+
+.#{$block-class}__multiselectSelectionStatusContainer {
+  display: flex;
+  align-items: center;
+  padding-inline: $spacing-05;
+  .#{$block-class}__selectAll-button {
+    margin-left: auto;
+  }
+}
+
+.#{$block-class}__condition-builder-item-option__option:focus {
+  @include focus-outline.focus-outline('outline');
+}
+// .#{$block-class}__tree {
+//   .#{$block-class}__condition-wrapper > :nth-child(n + 3) {
+//     flex-basis: 100%;
+//   }
+//   .#{$block-class}__groupConnector {
+//     background-color: $layer;
+//   }
+//   .#{$block-class}__condition-wrapper
+//     > :nth-child(1)
+//     .#{$block-class}__condition-builder-button,
+//   .#{$block-class}__condition-wrapper
+//     > :nth-child(2)
+//     .#{$block-class}__condition-builder-button {
+//     box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
+//   }
+// }
+.#{$block-class}__groupOperatorConnector {
+  margin-bottom: $spacing-02;
+}
+.#{$block-class}__option-check-box {
+  display: flex;
+  margin-right: $spacing-03;
+}
+.#{$block-class}__option-icon {
+  align-self: center;
+  margin-left: auto;
+}

package/scss/components/ConditionBuilder/styles/_index.scss

@@ -0,0 +1,2 @@
+@use './conditionBuilderItem';
+@use './conditionBuilderCondition';

package/scss/components/Guidebanner/_guidebanner.scss

@@ -32,6 +32,9 @@
 @use '@carbon/styles/scss/type' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
 
+// Guidebanner uses the following Carbon for IBM Products components:
+@use '../Carousel/carousel';
+
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--guidebanner;
 

package/scss/components/InterstitialScreen/_interstitial-screen.scss

@@ -17,13 +17,8 @@
 @use '@carbon/react/scss/colors' as *;
 @use '@carbon/styles/scss/type';
 
-// Other Carbon settings if needed
-// TODO: @use '@carbon/styles/scss/grid';
-// or
-// TODO: @use '@carbon/react/scss/grid';
-
 // InterstitialScreen uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by InterstitialScreen
+@use '../Carousel/carousel';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--interstitial-screen;

package/scss/components/Tearsheet/_tearsheet.scss

@@ -55,7 +55,9 @@ $motion-duration: $duration-moderate-02;
     align-items: flex-end;
     color: $text-primary;
     // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
-    transition: visibility 0s linear $motion-duration;
+    transition: visibility 0s linear $motion-duration,
+      background-color $motion-duration motion(exit, expressive),
+      opacity $motion-duration motion(exit, expressive);
     --#{$block-class}--stacking-scale-factor-single: 0.95;
     --#{$block-class}--stacking-scale-factor-double: 0.9;
   }