fix(conditionBuilder): release review changes1 (#6133)

* fix(conditionBuilder): release review changes1 * fix: data correction for sample data --------- Co-authored-by: David Menendez <[email protected]> Co-authored-by: Nandan Devadula <[email protected]>
carbon-design-system · Oct 21, 2024 · d3f08bc · d3f08bc
1 parent 0c6740b
commit d3f08bc
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 127 deletions.
diff --git a/...ges/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss b/...ges/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss
@@ -285,6 +285,10 @@ $colors: (
     /* stylelint-disable-next-line carbon/motion-easing-use */
     transition: transform motion(exit, productive) $duration-fast-02;
   }
+  .#{$block-class}__condition--interacting
+    .#{$block-class}__close-condition-wrapper {
+    z-index: 2;
+  }
 }
 
 .#{$block-class}__invalid-input {

diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.tsx
@@ -254,7 +254,7 @@ const ConditionBlock = (props: ConditionBlockProps) => {
           onChange={(op) => onConnectorOperatorChange?.(op)}
         />
       ) : (
-        <div role="gridcell" />
+        ''
       )}
 
       {isStatement && (
@@ -344,6 +344,7 @@ const ConditionBlock = (props: ConditionBlockProps) => {
           renderIcon={Close}
           className={`${blockClass}__close-condition`}
           data-name="closeCondition"
+          wrapperClassName={`${blockClass}__close-condition-wrapper`}
         />
       </span>
       {/* </div> */}

diff --git a/...products/src/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.tsx b/...products/src/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.tsx
@@ -59,8 +59,6 @@ const ConditionConnector = ({
       <ConditionBuilderButton label={operator} />
     </span>
   ) : (
-    // <div className={className} {...rest}>
-
     <ConditionBuilderItem
       label={operator}
       title={connectorText}
@@ -84,8 +82,6 @@ const ConditionConnector = ({
         onChange={onChangeHandler}
       />
     </ConditionBuilderItem>
-
-    // </div>
   );
 };
 

diff --git a/...ducts/src/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.tsx b/...ducts/src/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.tsx
@@ -150,7 +150,7 @@ const ConditionBuilderContent = ({
 
   const addConditionGroupHandler = () => {
     const newGroup: ConditionGroup = {
-      statement: 'ifAll', // 'if|exclude if',
+      statement: 'ifAll',
       groupOperator: 'and',
       id: uuidv4(),
       conditions: [

diff --git a/...omponents/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.tsx b/...omponents/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.tsx
@@ -85,6 +85,8 @@ export const ItemOption = ({
     );
   };
 
+  const preventDefault = (evt) => evt.preventDefault();
+
   if (!allOptions) {
     return;
   }
@@ -97,6 +99,7 @@ export const ItemOption = ({
             labelText={clearSearchText}
             closeButtonLabelText={clearSearchText}
             onChange={onSearchChangeHandler}
+            onKeyDown={preventDefault}
           />
         </div>
       )}

diff --git a/...ditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.tsx b/...ditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.tsx
@@ -65,6 +65,7 @@ export const ItemOptionForValueField = ({
     : [];
 
   useEffect(() => {
+    //this commented code is kept as intentional. Alternate approach to pass async options instead of getOptions callback.
     // if(rest['data-name'] == 'valueField'){
     //   const fetchData = async () => {
     //     const response = await config.options(conditionState);
@@ -153,6 +154,8 @@ export const ItemOptionForValueField = ({
       ? conditionState.property
       : propertyText;
   };
+  const preventDefault = (evt) => evt.preventDefault();
+
   if (!allOptions) {
     return <SelectSkeleton />;
   }
@@ -165,6 +168,7 @@ export const ItemOptionForValueField = ({
             labelText={clearSearchText}
             closeButtonLabelText={clearSearchText}
             onChange={onSearchChangeHandler}
+            onKeyDown={preventDefault}
           />
         </div>
       )}

diff --git a/packages/ibm-products/src/components/ConditionBuilder/assets/SampleData.js b/packages/ibm-products/src/components/ConditionBuilder/assets/SampleData.js
@@ -18,25 +18,25 @@ export const sampleDataStructure_Hierarchical = {
         {
           property: 'region',
           operator: 'is',
-          value: 'IL',
+          value: { id: 'India', label: 'India' },
           id: uuidv4(),
         },
         {
           property: 'delivery',
           operator: 'is',
-          value: 'processing',
+          value: { id: 'Processing', label: 'Processing' },
           id: uuidv4(),
         },
         {
           property: 'delivery',
           operator: 'is',
-          value: 'processing',
+          value: { id: 'Processing', label: 'Processing' },
           id: uuidv4(),
         },
         {
           property: 'delivery',
           operator: 'is',
-          value: 'processing',
+          value: { id: 'Processing', label: 'Processing' },
           id: uuidv4(),
         },
         //group object repeats
@@ -48,25 +48,25 @@ export const sampleDataStructure_Hierarchical = {
             {
               property: 'region',
               operator: 'is',
-              value: 'IL',
+              value: { id: 'India', label: 'India' },
               id: uuidv4(),
             },
             {
               property: 'delivery',
               operator: 'is',
-              value: 'processing',
+              value: { id: 'Processing', label: 'Processing' },
               id: uuidv4(),
             },
             {
               property: 'delivery',
               operator: 'is',
-              value: 'processing',
+              value: { id: 'Processing', label: 'Processing' },
               id: uuidv4(),
             },
             {
               property: 'delivery',
               operator: 'is',
-              value: 'processing',
+              value: { id: 'Processing', label: 'Processing' },
               id: uuidv4(),
             },
             //group object repeats
@@ -78,19 +78,19 @@ export const sampleDataStructure_Hierarchical = {
                 {
                   property: 'region',
                   operator: 'is',
-                  value: 'IL',
+                  value: { id: 'India', label: 'India' },
                   id: uuidv4(),
                 },
                 {
                   property: 'delivery',
                   operator: 'is',
-                  value: 'processing',
+                  value: { id: 'Processing', label: 'Processing' },
                   id: uuidv4(),
                 },
                 {
                   property: 'delivery',
                   operator: 'is',
-                  value: 'processing',
+                  value: { id: 'Processing', label: 'Processing' },
                   id: uuidv4(),
                 },
                 //group object repeats
@@ -108,13 +108,13 @@ export const sampleDataStructure_Hierarchical = {
         {
           property: 'continent',
           operator: 'is',
-          value: 'Asia',
+          value: { id: 'Asia', label: 'Asia' },
           id: uuidv4(),
         },
         {
           property: 'region',
           operator: 'is',
-          value: 'India',
+          value: { id: 'India', label: 'India' },
           id: uuidv4(),
         },
         {
@@ -144,7 +144,7 @@ export const sampleDataStructure_nonHierarchical = {
               id: 'Africa',
             },
             {
-              label: 'India',
+              label: { id: 'India', label: 'India' },
               id: 'Ind',
             },
           ],
@@ -153,7 +153,7 @@ export const sampleDataStructure_nonHierarchical = {
         {
           property: 'delivery',
           operator: 'is',
-          value: 'processing',
+          value: { id: 'Processing', label: 'Processing' },
           id: uuidv4(),
         },
         {

diff --git a/packages/ibm-products/src/components/ConditionBuilder/assets/sampleInput.js b/packages/ibm-products/src/components/ConditionBuilder/assets/sampleInput.js
@@ -19,7 +19,7 @@ import {
 } from '@carbon/react/icons';
 import CustomInput from './CustomInput';
 
-//keeping this , an alternative way to give support for dynamic options.
+//keeping this commented code intentionally ,which is an alternative way to give support for dynamic options.
 //instead of supplying getOptions callback, we keep option property in inputConfig always as a async method instead to array as below.
 // export const inputDataForAsyncOptions = {
 //   properties: [