/* 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;
}
Code Diff
A Panel List of changed files.
Net-new componentOpen in Storybook