← All proposals

Code Diff

A Panel List of changed files.

Net-new componentOpen in Storybook

proposals/CodeDiff/code-diff.css31 lines · View on GitHub
/* The row, expand button, borders and code block all come from the PDS Panel
   List, Panel Row and Code Block. This styles the file name and makes the
   rows compact: the Panel Row has a 48px minimum height and 20px side padding
   that no prop changes. The minimum height keeps room for the expand button. */
.pds-code-diff .pds-panel-row {
	padding-inline: var(--pds-spacing-s);
}

.pds-code-diff .pds-panel-row__main {
	min-height: var(--pds-spacing-2xl);
}

.pds-code-diff__file {
	align-items: center;
	display: flex;
	gap: var(--pds-spacing-2xs);
	min-width: 0;
}

.pds-code-diff__name {
	font-family: var(--pds-typography-ff-code);
	font-size: var(--pds-typography-size-s);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pds-code-diff__stats {
	width: 7.5rem;
}