fix(conditionBuilder): release review changes1

carbon-design-system · Sep 27, 2024 · ec89eb3 · ec89eb3
1 parent a8527c4
commit ec89eb3
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 112 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/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: [

diff --git a/packages/ibm-products/src/components/ConditionBuilder/utils/handleKeyboardEvents.js b/packages/ibm-products/src/components/ConditionBuilder/utils/handleKeyboardEvents.js
@@ -57,120 +57,126 @@ const handleKeyPressForPopover = (
   const isHoldingShiftKey = checkForHoldingKey(evt, 'shiftKey');
   const isMultiSelect =
     parentContainer.querySelector('ul')?.dataset.multiSelect;
+  const isOptionInput =
+    parentContainer.querySelectorAll(`[role="option"]`)?.length;
   let allItems = [];
-  switch (key) {
-    case 'ArrowUp':
-      evt.preventDefault();
-      //traverse through the popover options, search box, selectAll button
-      parentContainer
-        .querySelectorAll(`[role="option"]`)
-        .forEach((eachElem, index, allElements) => {
-          traverseReverse(
-            eachElem,
-            index,
-            allElements,
-            null,
-            null,
-            conditionBuilderRef
-          );
-        });
-      //scroll to top when we reach a the top of the list to make search box visible
-      if (
-        Array.from(evt.target.closest('ul').querySelectorAll('li')).indexOf(
-          evt.target
-        ) === 1
-      ) {
-        parentContainer.querySelector(
-          `.${blockClass}__popover-content-wrapper`
-        ).scrollTop = 0;
-      }
 
-      break;
-    case 'ArrowDown':
-      evt.preventDefault();
-      //traverse through the popover options, search box, selectAll button
-      parentContainer
-        .querySelectorAll(`[role="option"]`)
-        .forEach((eachElem, index, allElements) => {
-          traverseClockVise(
-            eachElem,
-            index,
-            allElements,
-            null,
-            null,
-            conditionBuilderRef
-          );
-        });
-
-      break;
+  if (key === 'Escape') {
+    //focus the corresponding field in which the popover is triggered from
+    focusThisField(evt, conditionBuilderRef);
+    evt.preventDefault();
+  }
 
-    case 'Tab':
-      allItems = [
-        ...Array.from(
-          parentContainer.querySelectorAll(
-            `.${blockClass}__selectAll-button,[role="searchbox"]`
-          )
-        ),
-        parentContainer.querySelector(`[role="option"]`),
-      ];
-
-      allItems.forEach((eachElem, index, allElements) => {
-        if (isHoldingShiftKey) {
-          traverseReverse(
-            eachElem,
-            index,
-            allElements,
-            true,
-            true,
-            conditionBuilderRef
-          );
-        } else {
-          traverseClockVise(
-            eachElem,
-            index,
-            allElements,
-            true,
-            true,
-            conditionBuilderRef
-          );
+  if (isOptionInput) {
+    switch (key) {
+      case 'ArrowUp':
+        evt.preventDefault();
+        //traverse through the popover options, search box, selectAll button
+        parentContainer
+          .querySelectorAll(`[role="option"]`)
+          .forEach((eachElem, index, allElements) => {
+            traverseReverse(
+              eachElem,
+              index,
+              allElements,
+              null,
+              null,
+              conditionBuilderRef
+            );
+          });
+        //scroll to top when we reach a the top of the list to make search box visible
+        if (
+          Array.from(
+            evt.target.closest('ul')?.querySelectorAll('li') ?? []
+          ).indexOf(evt.target) === 1
+        ) {
+          parentContainer.querySelector(
+            `.${blockClass}__popover-content-wrapper`
+          ).scrollTop = 0;
         }
-      });
-      evt.preventDefault();
-      break;
 
-    case ' ':
-      if (isMultiSelect === 'true') {
-        if (document.activeElement.type !== 'button') {
-          //for button , enter key is click which already handled by framework, for other elements trigger click
-          document.activeElement?.click();
-        }
+        break;
+      case 'ArrowDown':
         evt.preventDefault();
-      }
+        //traverse through the popover options, search box, selectAll button
+        parentContainer
+          .querySelectorAll(`[role="option"]`)
+          .forEach((eachElem, index, allElements) => {
+            traverseClockVise(
+              eachElem,
+              index,
+              allElements,
+              null,
+              null,
+              conditionBuilderRef
+            );
+          });
+
+        break;
+
+      case 'Tab':
+        allItems = [
+          ...Array.from(
+            parentContainer.querySelectorAll(
+              `.${blockClass}__selectAll-button,[role="searchbox"]`
+            )
+          ),
+          parentContainer.querySelector(`[role="option"]`),
+        ];
+
+        allItems.forEach((eachElem, index, allElements) => {
+          if (isHoldingShiftKey) {
+            traverseReverse(
+              eachElem,
+              index,
+              allElements,
+              true,
+              true,
+              conditionBuilderRef
+            );
+          } else {
+            traverseClockVise(
+              eachElem,
+              index,
+              allElements,
+              true,
+              true,
+              conditionBuilderRef
+            );
+          }
+        });
+        evt.preventDefault();
+        break;
 
-      break;
-    case 'Enter':
-      if (isMultiSelect === 'true') {
-        if (document.activeElement.type !== 'button') {
-          //for button , enter key is click which already handled by framework, for other elements trigger click
+      case ' ':
+        if (isMultiSelect === 'true') {
+          if (document.activeElement.type !== 'button') {
+            //for button , enter key is click which already handled by framework, for other elements trigger click
+            document.activeElement?.click();
+          }
           evt.preventDefault();
-          document.activeElement?.click();
         }
-      } else {
-        if (document.activeElement.type !== 'button') {
-          //for button , enter key is click which already handled by framework, else trigger click
-          focusThisField(evt, conditionBuilderRef);
-          document.activeElement?.click();
-        }
-      }
 
-      break;
-    case 'Escape':
-      //focus the corresponding field in which the popover is triggered\
-      focusThisField(evt, conditionBuilderRef);
-      break;
+        break;
+      case 'Enter':
+        if (isMultiSelect === 'true') {
+          if (document.activeElement.type !== 'button') {
+            //for button , enter key is click which already handled by framework, for other elements trigger click
+            evt.preventDefault();
+            document.activeElement?.click();
+          }
+        } else {
+          if (document.activeElement.type !== 'button') {
+            //for button , enter key is click which already handled by framework, else trigger click
+            focusThisField(evt, conditionBuilderRef);
+            document.activeElement?.click();
+          }
+        }
 
-    default:
-      break;
+        break;
+      default:
+        break;
+    }
   }
 };
 

diff --git a/packages/ibm-products/src/components/ConditionBuilder/utils/util.js b/packages/ibm-products/src/components/ConditionBuilder/utils/util.js
@@ -25,8 +25,6 @@ export const focusThisField = (evt, conditionBuilderRef) => {
 };
 export const focusThisItem = (currentElement, conditionBuilderRef) => {
   setTimeout(() => {
-    //document.activeElement.setAttribute('tabindex', '-1');
-    // currentElement.setAttribute('tabindex', '0');
     manageTabIndexAndFocus(currentElement, conditionBuilderRef);
   }, 0);
 };