[BUG]: Insufficient support for custom ConditionBuilder value labels

[pjborowiecki]

Package

Carbon for IBM Products

Description

There is currently no sufficient level of control over displayed values of custom components in the ConditionBuilder.

My use case is such that I would like to operate on ISO dateTime values, but display something completely different (e.g. "is past 4 days"), as can be seen in the screenshot below:

The getValue() function (available in source code)) should be extended to allow mor granular control over what is displayed as value (allowing to customise the logic or add a callback function, instead of simply returning the value):

export const getValue = {
  text: (value) => value,
  textarea: (value) => value,
  time: (value) => value,
  number: (value) => value,
  option: (value) => {
    if (value && typeof value !== 'string') {
      const selectedValues = Array.isArray(value) ? value : [value];
      return selectedValues.map((option) => option.label).join(', ');
    }

    return value;
  },
  date: (value) => {
    if (Array.isArray(value) && value.length > 1) {
      const start =
        value?.[0] && !isNaN(new Date(value[0]))
          ? formatDate(new Date(value[0]))
          : '';
      const end =
        value?.[1] && !isNaN(new Date(value[1]))
          ? formatDate(new Date(value[1]))
          : '';
      return `${start} To ${end}`;
    } else if (Array.isArray(value) && !isNaN(new Date(value[0]))) {
      return formatDate(new Date(value[0]));
    } else {
      return value;
    }
  },
  custom: (value) => value,
};

Component(s) impacted

ConditionBuilder

Browser

Chrome, Safari, Firefox, Microsoft Edge

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

2.50.0

Suggested Severity

Severity 1 = The design is broken in a critical way that blocks users from completing tasks or damages the brand. Affects major functionality, no workaround.

Product/offering

IBM

CodeSandbox or Stackblitz example

https://codesandbox.io

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues