PDS proposals
← All proposals

Content Diff

A component, ContentDiff: the old value on a red line with a minus, the new value on a green line with a plus, in one bordered block, like a text diff.

Net-new componentOpen in Storybook

proposals/ContentDiff/content-diff.css42 lines · View on GitHub
/* A stacked before and after, like a text diff: the old value is a red line
   with a minus and the new value a green line with a plus, in one bordered
   block. The words Before and After are visually hidden. */
.pds-content-diff {
	border: var(--pds-border-width-default) solid var(--pds-color-border-default);
	border-radius: var(--pds-border-radius-default);
	margin: 0;
	overflow: hidden;
}

.pds-content-diff__line {
	align-items: flex-start;
	display: flex;
	gap: var(--pds-spacing-2xs);
	padding: var(--pds-spacing-2xs) var(--pds-spacing-xs);
}

.pds-content-diff__line--before {
	background-color: var(--pds-color-status-critical-background);
	color: var(--pds-color-status-critical-foreground);
}

.pds-content-diff__line--after {
	background-color: var(--pds-color-status-success-background);
	color: var(--pds-color-status-success-foreground);
}

.pds-content-diff__marker {
	flex-shrink: 0;
	margin-block-start: var(--pds-spacing-5xs);
}

.pds-content-diff__text {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.pds-content-diff__line--after .pds-content-diff__text {
	font-weight: var(--pds-typography-fw-medium);
}