Theme

Button Variant Rename

Banner Description Prop

Getting started

Breaking changes

Style utilities

DescriptionList

~~ToggleButton~~

OptionCardGroup

SegmentedControl

ConditionViewer

FormattedDateTime

FormattedRelativeTime

KeyboardShortcut

StatusIndicator

ConfirmationModal

Data visualization

Alpha

Series and legend

Menu keyboard shortcuts

Componentsv2.219.0

ConditionViewer

The ConditionViewer components render a read-only summary of a set of rules — one boxed sentence per rule, nested under the operator that combines them.

Usage

ConditionViewerGroup interrogates a group — its descriptor, whether it's collapsible and open, and how many conditions sit directly inside it — and can click its toggle. ConditionViewerItem interrogates one condition: its sentence, its detail chips, and whether it renders a marker or actions.

import { PlumaTestHelpers } from '@customerio/pluma-components/react/test-helpers/pluma-test-helpers';

const group = PlumaTestHelpers.find('ConditionViewerGroup');
expect(group.getLabel()).toBe('Matches all of 2 conditions');
await group.toggle();
expect(group.isOpen()).toBe(false);

const condition = PlumaTestHelpers.extract('ConditionViewerItem', screen.getByTestId('company-condition'));
expect(condition.getText()).toBe('company is acme');

getConditionCount counts only a group's direct children — a nested group counts as one, not as the conditions inside it. To reach those, extract a helper from the nested group's element.

Test Helpers

`ConditionViewerItemTestHelpers`

`getDetailTexts`() `=> string[]`

Gets the text of each detail chip below the sentence, in document order — the sub-conditions this condition is refined by.

`getText`() `=> string`

Gets the condition's sentence — the words a reader sees, with the emphasized terms included and whitespace normalized. Excludes the details below it and the actions beside it.

`hasActions`() `=> boolean`

Whether the condition renders its trailing actions area.

`hasDetails`() `=> boolean`

Whether the condition renders any detail chips below its sentence.

`hasMarker`() `=> boolean`

Whether the condition renders a marker. A condition given no `icon`, `iconSrc` or `iconContent` renders none.

`isInline`() `=> boolean`

Whether the condition hugs its content instead of filling the available width (`isInline`).

`isText`
(
`text:string`
)
`=> boolean`

Whether the sentence matches the given text.

On this page