PlainItem

Usage

PlainItem places a consumer-provided interactive element between optional elementBefore and elementAfter content. The child receives className, contentClassName, and labelClassName for its interactive element, content wrapper, and truncating label. The child remains responsible for its semantics and interactions. A React ref passed to PlainItem points to the wrapper; pass a ref for the interactive element to the child.

Give optional supporting text its own class so it can be styled independently:

.folderItemDescription {
	display: block;
	font-size: 0.875rem;
}

Spacing

Padding and gap variables default to 0px. Use the logical inline start and end variables when the two sides need different spacing.

import { style } from '@vanilla-extract/css';
import { PlumaPlainItem } from '@customerio/pluma-components/css/components';

export const paddedItem = style({
	vars: {
		[PlumaPlainItem.vars.paddingBlock]: '8px',
		[PlumaPlainItem.vars.paddingInlineStart]: '12px',
		[PlumaPlainItem.vars.paddingInlineEnd]: '16px',
		[PlumaPlainItem.vars.gap]: '8px',
	},
});

Apply paddedItem to the PlainItem root with className in React or class in Ember.