feat(ConditionBuilder): enhancing the conditional operators section t…

…hat manages the primary logic flow (carbon-design-system#5921) * feat(conditionbuilder): design review changes 2 * feat(conditionBuilder): test case fix for delete conditions * fix(ConditionBuilder): incomplete state icon and text order * chore(ConditionBuilder): add typescript for condition builder files * chore(ConditionBuilder): add typescript for condition builder files2 * feat(Conditionbuilder): renaming both variants * feat(Conditionbuilder): renaming both variants 2 * feat(conditionBuilder): enhancing the conditional operators * feat(conditionBuilder): enhancing the conditional operators2 * feat(conditionBuilder): review comments * feat(conditionBuilder): review comment change --------- Co-authored-by: David Menendez <[email protected]>
makafsal · Aug 27, 2024 · 91733fb · 91733fb
1 parent 485e8bc
commit 91733fb
Show file tree

Hide file tree

Showing 29 changed files with 321 additions and 238 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
@@ -54,7 +54,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 
 .#{$block-class}__item-option__option {
-  height: 2rem;
+  display: grid;
+  min-height: 2rem;
   cursor: pointer;
   padding-inline: $spacing-05;
 }
@@ -297,3 +298,11 @@ $colors: (
     fill: $icon-primary;
   }
 }
+
+.#{$block-class}__statement_wrapper {
+  padding: $spacing-03 0;
+
+  :nth-child(2) {
+    color: $text-secondary;
+  }
+}
diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.tsx
@@ -9,26 +9,27 @@ import React, { useContext, useState } from 'react';
 import { Close } from '@carbon/react/icons';
 import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem';
 import PropTypes from 'prop-types';
-import {
-  HIERARCHICAL_VARIANT,
-  NON_HIERARCHICAL_VARIANT,
-  operatorConfig,
-  statementConfig,
-} from '../ConditionBuilderContext/DataConfigs';
 import cx from 'classnames';
 import ConditionConnector from '../ConditionBuilderConnector/ConditionConnector';
 import { ConditionBuilderItemNumber } from '../ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber';
 import { ConditionBuilderItemText } from '../ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText';
 import { ConditionBuilderItemDate } from '../ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate';
 import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider';
 import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton';
-import { blockClass } from '../ConditionBuilderContext/DataConfigs';
-import { checkIsValid, focusThisField } from '../utils/util';
+import {
+  blockClass,
+  checkIsValid,
+  focusThisField,
+  HIERARCHICAL_VARIANT,
+  NON_HIERARCHICAL_VARIANT,
+} from '../utils/util';
 import { ConditionBuilderItemTime } from '../ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime';
 import ConditionBuilderAdd from '../ConditionBuilderAdd/ConditionBuilderAdd';
 import { ItemOption } from '../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption';
 import { ItemOptionForValueField } from '../ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField';
 import { useTranslations } from '../utils/useTranslations';
+import { useDataConfigs } from '../utils/useDataConfigs';
+
 import {
   Condition,
   ConditionGroup,
@@ -110,6 +111,8 @@ const ConditionBlock = (props: ConditionBlockProps) => {
     'removeConditionText',
   ]);
 
+  const { statementConfig, operatorConfig } = useDataConfigs();
+
   //filtering the current property to access its properties and config options
   const getCurrentConfig = (property) => {
     return (
@@ -269,7 +272,7 @@ const ConditionBlock = (props: ConditionBlockProps) => {
               label: conditionText,
             }}
             onChange={onStatementChangeHandler}
-            config={{ options: statementConfig }}
+            config={{ options: statementConfig, isStatement: true }}
           />
         </ConditionBuilderItem>
       )}

diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.stories.jsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.stories.jsx
@@ -19,10 +19,7 @@ import {
   sampleDataStructure_Hierarchical,
 } from './assets/SampleData';
 import uuidv4 from '../../global/js/utils/uuidv4';
-import {
-  NON_HIERARCHICAL_VARIANT,
-  HIERARCHICAL_VARIANT,
-} from './ConditionBuilderContext/DataConfigs';
+import { HIERARCHICAL_VARIANT, NON_HIERARCHICAL_VARIANT } from './utils/util';
 export default {
   title: 'Experimental/Components/ConditionBuilder',
   component: ConditionBuilder,

diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js
@@ -21,10 +21,7 @@ import {
   sampleDataStructure_nonHierarchical,
   sampleDataStructure_Hierarchical,
 } from './assets/SampleData';
-import {
-  NON_HIERARCHICAL_VARIANT,
-  HIERARCHICAL_VARIANT,
-} from './ConditionBuilderContext/DataConfigs';
+import { HIERARCHICAL_VARIANT, NON_HIERARCHICAL_VARIANT } from './utils/util';
 
 const blockClass = `${pkg.prefix}--condition-builder`;
 const componentName = ConditionBuilder.displayName;

diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.tsx
@@ -20,14 +20,12 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import ConditionBuilderContent from './ConditionBuilderContent/ConditionBuilderContent';
 import { ConditionBuilderProvider } from './ConditionBuilderContext/ConditionBuilderProvider';
 import { pkg } from '../../settings';
-import {
-  blockClass,
-  NON_HIERARCHICAL_VARIANT,
-} from './ConditionBuilderContext/DataConfigs';
-import { handleKeyDown } from './utils/handleKeyboardEvents';
 
 import { ConditionBuilderProps } from './ConditionBuilder.types';
 
+import { handleKeyDown } from './utils/handleKeyboardEvents';
+import { blockClass, NON_HIERARCHICAL_VARIANT } from './utils/util';
+
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 

diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts
@@ -16,7 +16,7 @@ import {
 } from 'react';
 
 export type LogicalOperator = 'and' | 'or';
-export type StatementOperator = 'if' | 'if-not';
+export type StatementOperator = 'ifAll' | 'ifAny' | 'unlessAll' | 'unlessAny';
 
 type CoreOperator = 'is';
 type NumberOperator = 'greater' | 'greaterEqual' | 'lower' | 'lowerEqual';
@@ -168,6 +168,8 @@ export type Action = {
   label?: string;
 };
 
+export type variantsType = 'Non-Hierarchical' | 'Hierarchical';
+
 export type ConditionBuilderProps = {
   inputConfig: inputConfig;
   initialState?: ConditionBuilderState;

diff --git a/...ducts/src/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.tsx b/...ducts/src/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.tsx
@@ -12,14 +12,14 @@ import { Close } from '@carbon/react/icons';
 /**@ts-ignore */
 import { Section, Heading } from '@carbon/react';
 import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem';
-import { blockClass } from '../ConditionBuilderContext/DataConfigs';
 import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider';
 import ConditionBuilderAdd from '../ConditionBuilderAdd/ConditionBuilderAdd';
 import uuidv4 from '../../../global/js/utils/uuidv4';
 import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton';
 import { useTranslations } from '../utils/useTranslations';
 import { ItemOptionForValueField } from '../ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField';
 import { Action, Option } from '../ConditionBuilder.types';
+import { blockClass } from '../utils/util';
 
 interface ConditionBuilderActionsProps {
   actions: Action[] | Option[];

diff --git a/.../ibm-products/src/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.tsx b/.../ibm-products/src/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.tsx
@@ -10,8 +10,8 @@ import cx from 'classnames';
 import { AddAlt, TextNewLine } from '@carbon/react/icons';
 import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton';
 import PropTypes from 'prop-types';
-import { blockClass } from '../ConditionBuilderContext/DataConfigs';
 import { useTranslations } from '../utils/useTranslations';
+import { blockClass } from '../utils/util';
 
 interface ConditionBuilderAddProps {
   className?: string;

diff --git a/...roducts/src/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.tsx b/...roducts/src/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.tsx
@@ -9,16 +9,16 @@ import React from 'react';
 import cx from 'classnames';
 
 import PropTypes from 'prop-types';
-import { Tooltip } from '@carbon/react';
-import { blockClass } from '../ConditionBuilderContext/DataConfigs';
+import { PopoverAlignment, Tooltip } from '@carbon/react';
 import { CarbonIconType, WarningAltFilled } from '@carbon/react/icons';
 import { usePrefix } from '@carbon/react';
+import { blockClass } from '../utils/util';
 
 interface ConditionBuilderButtonProps {
   className?: string;
   label: string;
   hideLabel?: boolean;
-  tooltipAlign?: string;
+  tooltipAlign?: PopoverAlignment;
   renderIcon?: CarbonIconType;
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   onBlur?: React.FocusEventHandler<HTMLButtonElement>;

diff --git a/...products/src/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.tsx b/...products/src/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.tsx
@@ -8,15 +8,15 @@
 import React, { useCallback, useContext } from 'react';
 import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem';
 import { ItemOption } from '../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption';
+import PropTypes from 'prop-types';
 import {
   blockClass,
-  connectorConfig,
+  focusThisField,
   HIERARCHICAL_VARIANT,
-} from '../ConditionBuilderContext/DataConfigs';
-import PropTypes from 'prop-types';
-import { focusThisField } from '../utils/util';
+} from '../utils/util';
 import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider';
 import { useTranslations } from '../utils/useTranslations';
+import { useDataConfigs } from '../utils/useDataConfigs';
 import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton';
 
 interface ConditionConnectorProps {
@@ -32,6 +32,7 @@ const ConditionConnector = ({
 }: ConditionConnectorProps) => {
   const { variant, conditionBuilderRef } = useContext(ConditionBuilderContext);
   const [connectorText] = useTranslations(['connectorText']);
+  const { connectorConfig } = useDataConfigs();
 
   const handleConnectorHover = useCallback((parentGroup, isHover) => {
     if (isHover) {

diff --git a/.../ibm-products/src/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js b/.../ibm-products/src/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js
@@ -7,17 +7,16 @@
 
 import React, { useContext } from 'react';
 import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem';
-import {
-  blockClass,
-  connectorConfig,
-} from '../ConditionBuilderContext/DataConfigs';
 import { ItemOption } from '../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption';
 import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider';
 import { useTranslations } from '../utils/useTranslations';
+import { blockClass } from '../utils/util';
+import { useDataConfigs } from '../utils/useDataConfigs';
 
 const GroupConnector = () => {
   const { rootState, setRootState } = useContext(ConditionBuilderContext);
   const [conditionText] = useTranslations(['conditionText']);
+  const { connectorConfig } = useDataConfigs();
 
   const onStatementChangeHandler = (updatedStatement) => {
     setRootState({

diff --git a/...ducts/src/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.tsx b/...ducts/src/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.tsx
@@ -14,10 +14,6 @@ import {
   ConditionBuilderContext,
   emptyState,
 } from '../ConditionBuilderContext/ConditionBuilderProvider';
-import {
-  blockClass,
-  HIERARCHICAL_VARIANT,
-} from '../ConditionBuilderContext/DataConfigs';
 import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton';
 import uuidv4 from '../../../global/js/utils/uuidv4';
 import ConditionPreview from '../ConditionPreview/ConditionPreview';
@@ -33,7 +29,7 @@ import {
   ConditionBuilderState,
   ConditionGroup,
 } from '../ConditionBuilder.types';
-
+import { blockClass, HIERARCHICAL_VARIANT } from '../utils/util';
 interface ConditionBuilderContentProps {
   startConditionLabel: string;
   getConditionState: (state: ConditionBuilderState) => void;
@@ -129,7 +125,7 @@ const ConditionBuilderContent = ({
 
   const addConditionGroupHandler = () => {
     const newGroup: ConditionGroup = {
-      statement: 'if', // 'if|exclude if',
+      statement: 'ifAll', // 'if|exclude if',
       groupOperator: 'and',
       id: uuidv4(),
       conditions: [

diff --git a/...ucts/src/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.tsx b/...ucts/src/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.tsx
@@ -19,7 +19,7 @@ export const emptyState: ConditionBuilderState = {
   groups: [
     {
       groupOperator: 'and',
-      statement: 'if',
+      statement: 'ifAll',
       id: uuidv4(),
       conditions: [
         {