feat(ConditionBuilder): handle keyboard navigation for tree variant (c…

…arbon-design-system#5640) * feat(ConditionBuilder): handle keyboard navigation for tree variant * feat(ConditionBuilder): updated to main * feat(ConditionBuilder): handle keyboard navigation fixes
amal-k-joy · Jul 5, 2024 · 2df7a14 · 2df7a14
1 parent 6850586
commit 2df7a14
Show file tree

Hide file tree

Showing 10 changed files with 231 additions and 56 deletions.
diff --git a/packages/ibm-products-styles/src/components/ConditionBuilder/_condition-builder.scss b/packages/ibm-products-styles/src/components/ConditionBuilder/_condition-builder.scss
@@ -49,7 +49,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 .#{$block-class}__condition-block {
   display: flex;
-  width: max-content;
+  width: fit-content;
   flex-direction: row;
 }
 .#{$block-class}__content-container {

diff --git a/...ges/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss b/...ges/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss
@@ -216,7 +216,7 @@ $colors: (
     > :nth-child(2)
     .#{$block-class}__button:not(
       .#{$block-class}__add-button,
-      .#{$block-class}__add_condition_group
+      .#{$block-class}__add-condition-sub-group
     ) {
     /* stylelint-disable-next-line carbon/theme-token-use */
     box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
@@ -234,7 +234,7 @@ $colors: (
   align-self: center;
   margin-left: auto;
 }
-.#{$block-class}__add_condition_group-wrapper {
+.#{$block-class}__add-condition-sub-group-wrapper {
   z-index: -1;
   width: 0;
   margin-left: -50%;
@@ -243,7 +243,7 @@ $colors: (
   // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
   transition: all linear $duration-fast-02;
 }
-.#{$block-class}__add_condition_group-wrapper--show {
+.#{$block-class}__add-condition-sub-group-wrapper--show {
   z-index: 0;
   width: auto;
   margin-left: 0;
@@ -254,5 +254,7 @@ $colors: (
 }
 .#{$block-class}__invalid-input {
   display: flex;
+}
+.#{$block-class}__invalid-input > svg {
   color: $support-warning;
 }
diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.js b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.js
@@ -136,7 +136,7 @@ ConditionBuilder.propTypes = {
    */
   actions: PropTypes.arrayOf(
     PropTypes.shape({
-      id: PropTypes.oneOfType([PropTypes.string | PropTypes.number]).isRequired,
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
       label: PropTypes.string.isRequired,
     })
   ),

diff --git a/...s/ibm-products/src/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js b/...s/ibm-products/src/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js
@@ -84,14 +84,18 @@ const ConditionBuilderAdd = ({
           renderIcon={TextNewLine}
           onClick={addConditionSubGroupHandler}
           className={cx(
-            `${blockClass}__add_condition_group ${blockClass}__gap-left`
+            `${blockClass}__add-condition-sub-group ${blockClass}__gap-left`
           )}
           hideLabel
           label={addSubgroupText}
           wrapperProps={wrapperProps}
-          wrapperClassName={cx(`${blockClass}__add_condition_group-wrapper`, {
-            [`${blockClass}__add_condition_group-wrapper--show`]: isAddSubgroup,
-          })}
+          wrapperClassName={cx(
+            `${blockClass}__add-condition-sub-group-wrapper`,
+            {
+              [`${blockClass}__add-condition-sub-group-wrapper--show`]:
+                isAddSubgroup,
+            }
+          )}
           {...previewHandlersForSubgroup()}
         />
       )}

diff --git a/...oducts/src/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js b/...oducts/src/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js
@@ -34,6 +34,13 @@ const ConditionBuilderContent = ({
     useState(false);
 
   const [addConditionGroupText] = useTranslations(['addConditionGroupText']);
+  const showConditionGroupPreviewHandler = () => {
+    setShowConditionGroupPreview(true);
+  };
+
+  const hideConditionGroupPreviewHandler = () => {
+    setShowConditionGroupPreview(false);
+  };
 
   useEffect(() => {
     if (rootState?.groups?.length) {
@@ -166,13 +173,11 @@ const ConditionBuilderContent = ({
                   <ConditionBuilderButton
                     renderIcon={TextNewLine}
                     onClick={addConditionGroupHandler}
-                    onMouseEnter={() => {
-                      setShowConditionGroupPreview(true);
-                    }}
-                    onMouseLeave={() => {
-                      setShowConditionGroupPreview(false);
-                    }}
-                    className={`${blockClass}__addConditionGroupText `}
+                    onMouseEnter={showConditionGroupPreviewHandler}
+                    onMouseLeave={hideConditionGroupPreviewHandler}
+                    onFocus={showConditionGroupPreviewHandler}
+                    onBlur={hideConditionGroupPreviewHandler}
+                    className={`${blockClass}__add-condition-group `}
                     hideLabel
                     label={addConditionGroupText}
                     wrapperProps={{

diff --git a/...tionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js b/...tionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js
@@ -13,7 +13,7 @@ export const ConditionBuilderItemNumber = ({
 }) => {
   const [invalidNumberWarnText] = useTranslations(['invalidNumberWarnText']);
   const onChangeHandler = (e, { value }) => {
-    if (checkIfValid(value)) {
+    if (!isNaN(value) && checkIfValid(value)) {
       onChange(`${value} ${config.unit ?? ''}`);
     } else {
       onChange('INVALID');
@@ -33,12 +33,12 @@ export const ConditionBuilderItemNumber = ({
       <NumberInput
         label={conditionState.property}
         hideLabel
-        defaultValue={getDefaultValue()}
         id={conditionState.property?.replace(/\s/g, '')}
         invalidText={invalidNumberWarnText}
         allowEmpty
         onChange={onChangeHandler}
         {...config}
+        defaultValue={getDefaultValue()}
       />
     </div>
   );

diff --git a/...onditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js b/...onditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js
@@ -49,5 +49,5 @@ ConditionBuilderItemText.propTypes = {
   /**
    * current input type
    */
-  type: PropTypes.object,
+  type: PropTypes.string,
 };
diff --git a/...onditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js b/...onditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js
@@ -33,7 +33,7 @@ export const ConditionBuilderItemTime = ({ onChange, config }) => {
           <SelectItem value="AM" text="AM" />
           <SelectItem value="PM" text="PM" />
         </TimePickerSelect>
-        <TimePickerSelect id="time-picker-select-2" onChange={setTimeZone}>
+        <TimePickerSelect id="time-picker-time-zone" onChange={setTimeZone}>
           {config?.timeZones?.map((timeZone, index) => (
             <SelectItem key={index} value={timeZone} text={timeZone} />
           ))}

diff --git a/...m-products/src/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js b/...m-products/src/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js
@@ -40,8 +40,11 @@ const ConditionGroupBuilder = ({
   const [showConditionSubGroupPreview, setShowConditionSubGroupPreview] =
     useState(-1);
   const conditionBuilderContentRef = useRef();
-  const onRemoveHandler = (conditionId, evt) => {
+  const onRemoveHandler = (conditionId, evt, conditionIndex) => {
     if (group.conditions.length > 1) {
+      variant == 'tree'
+        ? handleFocusOnCloseTree(evt)
+        : handleFocusOnClose(evt, conditionIndex);
       onChange({
         ...group,
         conditions: group.conditions.filter(
@@ -84,6 +87,65 @@ const ConditionGroupBuilder = ({
     });
   };
 
+  const handleFocusOnClose = (e, conditionIndex) => {
+    //get all close buttons.
+    //if the last condition is closing, focus the second last one.
+    //or focus the next one.
+    const currentGroupCloseButtons = e.currentTarget
+      .closest(`.${blockClass}__group`)
+      ?.querySelectorAll('[data-name="closeCondition"]');
+    if (conditionIndex == currentGroupCloseButtons.length - 1) {
+      currentGroupCloseButtons[conditionIndex - 1]?.focus();
+    } else {
+      currentGroupCloseButtons[conditionIndex + 1]?.focus();
+    }
+  };
+  const handleFocusOnCloseTree = (evt) => {
+    //getting the current aria-level and aria-posinset.
+    const currentLevel = evt.currentTarget
+      ?.closest('[role="row"]')
+      ?.getAttribute('aria-level');
+    const currentPos = evt.currentTarget
+      ?.closest('[role="row"]')
+      ?.getAttribute('aria-posinset');
+
+    //finding the next and previous items in same level
+    const nextElement = conditionBuilderContentRef.current?.querySelector(
+      `[aria-level="${currentLevel}"][aria-posinset="${
+        Number(currentPos) + 1
+      }"]`
+    );
+    const prevElement = conditionBuilderContentRef.current?.querySelector(
+      `[aria-level="${currentLevel}"][aria-posinset="${
+        Number(currentPos) - 1
+      }"]`
+    );
+    //checking if next level is a valid condition. If then, focus the close button inside that condition
+    //Otherwise , check the previous item is a valid condition
+
+    if (nextElement?.classList.contains(`${blockClass}__condition-block`)) {
+      nextElement?.querySelector('[data-name="closeCondition"]')?.focus();
+    } else if (
+      prevElement?.classList.contains(`${blockClass}__condition-block`)
+    ) {
+      prevElement?.querySelector('[data-name="closeCondition"]')?.focus();
+    }
+    //If there are no valid condition in this group, focus next or previous row
+    else {
+      const prevRows = conditionBuilderContentRef.current?.querySelectorAll(
+        `[aria-level="${Number(currentLevel) - 1}"][role="row"]`
+      );
+      const nextRow = conditionBuilderContentRef.current?.querySelector(
+        `[aria-level="${Number(currentLevel) + 1}"][role="row"]`
+      );
+      if (nextRow) {
+        nextRow?.focus();
+      } else if (prevRows?.length > 1) {
+        prevRows[prevRows.length - 2]?.focus();
+      }
+    }
+  };
+
   const addConditionSubGroupHandler = (conditionIndex) => {
     onChange({
       ...group,