feat(ConditionBuilder): design review changes (#5762)

packages/ibm-products-styles/src/components/ConditionBuilder/_condition-builder.scss

@@ -73,3 +73,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 .#{$block-class}__group-separator {
   width: fit-content;
 }
+.#{$block-class}__tooltip {
+  word-break: break-all;
+}

packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderCondition.scss

@@ -36,6 +36,15 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   background-color: $tag-background-red;
   color: $tag-color-red;
 }
+.#{$block-class}__subgroup_deletionPreview {
+  .#{$block-class}__group {
+    /* stylelint-disable max-nesting-depth */
+    button {
+      background-color: $tag-background-red;
+      color: $tag-color-red;
+    }
+  }
+}
 
 .#{$block-class}__condition__deletion-preview
   .#{$block-class}__button:not(
@@ -63,17 +72,17 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 .#{$block-class}__group-preview-animate {
   height: auto;
+  color: $text-secondary;
   opacity: 0.5;
   pointer-events: none;
   transition: all $duration-moderate-02 motion(exit, expressive);
 }
 .#{$block-class}__connector--disabled {
   display: flex;
   min-width: $spacing-10;
-  align-items: center;
   background-color: $layer;
   color: $text-helper;
-  padding-inline: $spacing-03;
+  pointer-events: none;
 }
 .#{$block-class}__condition-wrapper
   > .#{$block-class}__condition-block:last-child

packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss

@@ -1,4 +1,5 @@
 @use 'sass:list';
+@use 'sass:math';
 @use 'sass:string';
 @use '@carbon/react/scss/theme' as *;
 @use '../../../global/styles/project-settings' as c4p-settings;
@@ -167,21 +168,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 //need to revamp to a simpler logic
 $colors: (
-  ($purple-70, $purple-60, $purple-50, $purple-40, $purple-30, $purple-20),
-  ($cyan-70, $cyan-60, $cyan-50, $cyan-40, $cyan-30, $cyan-20),
-  ($teal-70, $teal-60, $teal-50, $teal-40, $teal-30, $teal-20),
-  (
-    $magenta-70,
-    $magenta-60,
-    $magenta-50,
-    $magenta-40,
-    $magenta-30,
-    $magenta-20
-  ),
-  ($red-70, $red-60, $red-50, $red-40, $red-30, $red-20),
-  ($orange-70, $orange-60, $orange-50, $orange-40, $orange-30, $orange-20),
-  ($yellow-70, $yellow-60, $yellow-50, $yellow-40, $yellow-30, $yellow-20),
-  ($green-70, $green-60, $green-50, $green-40, $green-30, $green-20)
+  ($purple-70, $purple-60, $purple-50, $purple-40, $purple-30),
+  ($blue-70, $blue-60, $blue-50, $blue-40, $blue-30),
+  ($cyan-70, $cyan-60, $cyan-50, $cyan-40, $cyan-30),
+  ($teal-70, $teal-60, $teal-50, $teal-40, $teal-30),
+  ($green-70, $green-60, $green-50, $green-40, $green-30)
 );
 
 @for $i from 1 through list.length($colors) {
@@ -191,10 +182,30 @@ $colors: (
     )
   );
   $group-colors: list.nth($colors, $i);
-  @each $color in $group-colors {
+  $group-colors-length: list.length($group-colors);
+
+  //this is to select and add color to the new group preview
+  .#{$block-class}__group-preview[data-color-index='#{($i%list.length($colors))}']
+    button {
+    /* stylelint-disable-next-line carbon/theme-token-use */
+    $next-group-color: list.nth($colors, ($i%list.length($colors)) +1);
+    /* stylelint-disable-next-line carbon/theme-token-use */
+    box-shadow: inset 0 #{$spacing-01} 0 0 list.nth($next-group-color, 1);
+  }
+
+  //we need to select the group color from the $colors array and need to repeat the colors after $colors.length subgroups
+  @for $el-index from 1 through 50 {
+    $item-index: $el-index;
+    /* stylelint-disable-next-line carbon/theme-token-use */
+    $item-index: ((($item-index - 1) % $group-colors-length) +1);
     #{$selector} {
-      /* stylelint-disable-next-line carbon/theme-token-use */
-      --#{$block-class}__condition-wrapper-color: #{$color};
+      @if $item-index != 1 {
+        /* stylelint-disable-next-line carbon/theme-token-use */
+        --#{$block-class}__condition-wrapper-color: #{list.nth(
+            $group-colors,
+            $item-index
+          )}; // stylelint-disable-line carbon/theme-token-use
+      }
     }
 
     $selector: list.append(
@@ -211,13 +222,12 @@ $colors: (
   .#{$block-class}__groupConnector {
     background-color: $layer;
   }
-  .#{$block-class}__condition-wrapper > :nth-child(1) .#{$block-class}__button,
-  .#{$block-class}__condition-wrapper
+  .#{$block-class}__condition-wrapper:not(.#{$block-class}__group-preview)
+    > :nth-child(1)
+    .#{$block-class}__button,
+  .#{$block-class}__condition-wrapper:not(.#{$block-class}__group-preview)
     > :nth-child(2)
-    .#{$block-class}__button:not(
-      .#{$block-class}__add-button,
-      .#{$block-class}__add-condition-sub-group
-    ) {
+    .#{$block-class}__button {
     /* stylelint-disable-next-line carbon/theme-token-use */
     box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
   }
@@ -237,24 +247,24 @@ $colors: (
 .#{$block-class}__add-condition-sub-group-wrapper {
   z-index: -1;
   width: 0;
-  margin-left: -50%;
-  opacity: 0;
   pointer-events: none;
+  transform: translateX(-100%);
   // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
-  transition: all linear $duration-fast-02;
+  transition: transform motion(exit, productive) $duration-fast-02;
 }
 .#{$block-class}__add-condition-sub-group-wrapper--show {
   z-index: 0;
   width: auto;
-  margin-left: 0;
-  opacity: 1;
   pointer-events: all;
-  // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
-  transition: all linear $duration-fast-02;
+  transform: translateX(0);
 }
 .#{$block-class}__invalid-input {
   display: flex;
 }
 .#{$block-class}__invalid-input > svg {
   color: $support-warning;
+  /* stylelint-disable max-nesting-depth */
+  > path:first-child {
+    fill: $icon-primary;
+  }
 }

packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Close } from '@carbon/react/icons';
 import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem';
 import PropTypes from 'prop-types';
@@ -45,6 +45,7 @@ const ConditionBlock = (props) => {
     hideConditionPreviewHandler,
     showConditionPreviewHandler,
     isLastCondition,
+    setShowDeletionPreviewForSubgroups,
   } = props;
   const { inputConfig, variant, conditionBuilderRef } = useContext(
     ConditionBuilderContext
@@ -89,6 +90,19 @@ const ConditionBlock = (props) => {
   };
   const ItemComponent = property ? itemComponents[type] : null;
 
+  useEffect(() => {
+    if (
+      showDeletionPreview &&
+      group?.conditions?.length > 1 &&
+      group?.conditions?.[1].conditions &&
+      group.conditions[1].id !== condition.id
+    ) {
+      setShowDeletionPreviewForSubgroups?.(true);
+    } else {
+      setShowDeletionPreviewForSubgroups?.(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showDeletionPreview]);
   const onStatementChangeHandler = (v, evt) => {
     focusThisField(evt, conditionBuilderRef);
     onStatementChange(v);
@@ -111,10 +125,9 @@ const ConditionBlock = (props) => {
       popoverToOpen: checkIsValid(newOperator) ? 'valueField' : '',
     });
   };
-  const onValueChangeHandler = (newValue, evt) => {
+  const onValueChangeHandler = (newValue) => {
     const currentCondition = { ...condition };
     delete currentCondition.popoverToOpen;
-    focusThisField(evt, conditionBuilderRef);
 
     onChange({
       ...currentCondition,
@@ -363,6 +376,10 @@ ConditionBlock.propTypes = {
    * callback to handle the statement(if/ excl.if) change
    */
   onStatementChange: PropTypes.func,
+  /**
+   * method to set ShowDeletionPreviewForSubgroups
+   */
+  setShowDeletionPreviewForSubgroups: PropTypes.func,
   /**
    * handler for showing add condition preview
    */

packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js

@@ -974,7 +974,9 @@ describe(componentName, () => {
       '[role="row"][aria-level="2"][aria-posinset="3"]'
     );
     expect(row).toHaveLength(1);
-    expect(row[0]).toHaveFocus();
+    expect(
+      row[0].querySelector(`.${blockClass}__close-condition`)
+    ).toHaveFocus();
   });
 
   it('check the add/remove actions ', async () => {
@@ -1139,7 +1141,7 @@ describe(componentName, () => {
     ).not.toBeInTheDocument();
   });
 
-  it(' remove all  conditions in a group keeping only subgroups', async () => {
+  it(' remove all  conditions in a group will delete subgroups as well', async () => {
     const sampleDataStructure = {
       operator: 'or',
       groups: [
@@ -1216,7 +1218,7 @@ describe(componentName, () => {
       userEvent.click(document.querySelector(`.${blockClass}__close-condition`))
     );
 
-    expect(screen.getAllByRole('button', { name: 'if' })).toHaveLength(2);
+    expect(screen.getByText('Add condition'));
   });
 
   it('check the custom input type', async () => {
@@ -1499,18 +1501,11 @@ describe(componentName, () => {
     await act(() => userEvent.keyboard('{Enter}'));
 
     expect(
-      document.querySelector(`[role="row"][aria-level="2"][aria-posinset="1"]`)
+      document.querySelector(
+        `[role="row"][aria-level="2"][aria-posinset="1"] .${blockClass}__close-condition`
+      )
     ).toHaveFocus();
 
-    await act(() => userEvent.keyboard('{ArrowRight}'));
-    expect(screen.getByRole('button', { name: 'Continent' })).toHaveFocus();
-
-    await act(() => userEvent.keyboard('{ArrowRight}'));
-    await act(() => userEvent.keyboard('{ArrowRight}'));
-    await act(() => userEvent.keyboard('{ArrowRight}'));
-    expect(
-      document.querySelectorAll(`.${blockClass}__close-condition`)[0]
-    ).toHaveFocus();
     await act(() => userEvent.keyboard('{Enter}'));
     await act(() => userEvent.keyboard('{Tab}'));
     expect(screen.getByText('Add condition')).toHaveFocus();

packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js

@@ -90,14 +90,12 @@ const ConditionBuilderAdd = ({
         <ConditionBuilderButton
           renderIcon={TextNewLine}
           onClick={addConditionSubGroupHandler}
-          className={cx(
-            `${blockClass}__add-condition-sub-group ${blockClass}__gap-left`
-          )}
+          className={cx(`${blockClass}__add-condition-sub-group`)}
           hideLabel
           label={addSubgroupText}
           wrapperProps={wrapperProps}
           wrapperClassName={cx(
-            `${blockClass}__add-condition-sub-group-wrapper`,
+            `${blockClass}__add-condition-sub-group-wrapper ${blockClass}__gap-left`,
             {
               [`${blockClass}__add-condition-sub-group-wrapper--show`]:
                 isAddSubgroup,

packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import { Tooltip } from '@carbon/react';
 import { blockClass } from '../ConditionBuilderContext/DataConfigs';
 import { WarningAltFilled } from '@carbon/react/icons';
+import { usePrefix } from '@carbon/react';
 
 export const ConditionBuilderButton = ({
   className,
@@ -24,11 +25,11 @@ export const ConditionBuilderButton = ({
   tabIndex,
   ...rest
 }) => {
+  const carbonPrefix = usePrefix();
   const Button = () => {
     const dataName = rest['data-name'] ?? '';
     return (
       <button
-        // role={'gridcell'}
         tabIndex={tabIndex != undefined ? tabIndex : -1}
         className={cx([
           className,
@@ -59,8 +60,9 @@ export const ConditionBuilderButton = ({
     <Tooltip
       label={label}
       align={tooltipAlign}
-      className={`${wrapperClassName}`}
+      className={`${wrapperClassName} ${blockClass}__tooltip ${carbonPrefix}--icon-tooltip`}
       {...wrapperProps}
+      leaveDelayMs={0}
     >
       {Button()}
     </Tooltip>

packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.js

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import { focusThisField } from '../utils/util';
 import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider';
 import { useTranslations } from '../utils/useTranslations';
+import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton';
 
 const ConditionConnector = ({ operator, className, onChange, ...rest }) => {
   const { variant, conditionBuilderRef } = useContext(ConditionBuilderContext);
@@ -35,7 +36,7 @@ const ConditionConnector = ({ operator, className, onChange, ...rest }) => {
   };
   return variant == 'tree' ? (
     <span className={`${className} ${blockClass}__connector--disabled`}>
-      {operator}
+      <ConditionBuilderButton label={operator} />
     </span>
   ) : (
     // <div className={className} {...rest}>

packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js

@@ -116,6 +116,11 @@ const ConditionBuilderContent = ({
     });
   };
 
+  const getColorIndex = () => {
+    const groupLength = rootState?.groups?.length ?? 0;
+    return groupLength % 5;
+  };
+
   if (!isConditionBuilderActive) {
     return (
       <Button
@@ -196,6 +201,7 @@ const ConditionBuilderContent = ({
         {showConditionGroupPreview && (
           <ConditionPreview
             previewType="newGroup"
+            colorIndex={getColorIndex()}
             group={{ groupOperator: rootState.operator }}
           />
         )}

packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderContext/translationObject.js

@@ -25,7 +25,7 @@ export const translationsObject = {
   connectorText: 'Connector',
   conditionRowText: 'Condition row',
   conditionRowGroupText: 'Condition row group',
-  removeConditionText: 'Remove condition',
+  removeConditionText: 'Delete condition',
   addConditionRowText: 'Add condition row',
   startText: 'Start',
   endText: 'End',
@@ -39,4 +39,7 @@ export const translationsObject = {
   conditionBuilderText: 'Condition Builder',
   actionSectionText: 'Action Section',
   conditionHeadingText: 'Condition',
+  addPropertyText: 'Add property',
+  addOperatorText: 'Add operator',
+  addValueText: 'Add value',
 };