← All proposals

Logs table with divider

A recipe: the PDS Logs Table pattern (Table with hasPanel, status-colored rows and the inline detail panel) with a LabeledDivider as a row.

Extends a PDS componentOpen in Storybook

proposals/LogsTableWithDivider/logs-table.css95 lines · View on GitHub
.pds-logs-table {
	container-type: inline-size;
}

/* max-height (and, once decided, min-height) are set via the Table
   component's own `maxHeight`/`minHeight` props instead of CSS here — see
   the LogsTableDemo render below. */
.pds-logs-table .pds-table-wrapper__table-area {
	overscroll-behavior: contain;
}

/* Selected/inspected status rows now keep their status color and get an
   outline instead of the selected-blue background — that's built into
   table.css on Table itself (`.pds-table__row--inspected`), so no pattern-
   level override is needed here. See dashboard PR #6060. */

.pds-logs-table__footer {
	align-items: center;
	border-block-start: var(--pds-border-width-default) solid
		var(--pds-color-border-default);
	box-sizing: border-box;
	color: var(--pds-color-foreground-default-secondary);
	display: flex;
	font-size: var(--pds-typography-size-s);
	height: var(--table-footer-height);
	justify-content: space-between;
	padding-inline: var(--pds-spacing-m);
}

/* Table adds a box-shadow border to pds-table-wrapper__footer in panel context; suppress the duplicate */
.pds-table-wrapper--in-panel .pds-logs-table__footer {
	border-block-start: none;
}

.pds-logs-table__footer-controls {
	align-items: center;
	display: flex;
	gap: var(--pds-spacing-2xs);
}

/* Detail panel content layout */
.pds-logs-detail__section {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
}

.pds-logs-detail__section + hr {
	border: none;
	border-block-start: var(--pds-border-width-default) solid
		var(--pds-color-border-default);
	margin-block: var(--pds-spacing-m);
}

.pds-logs-detail__section + hr + .pds-logs-detail__section {
	margin-block-start: 0;
}

.pds-logs-detail__label {
	color: var(--pds-color-foreground-default);
	font-size: var(--pds-typography-size-xs);
	font-weight: var(--pds-typography-fw-semibold);
	margin: 0;
	margin-block-start: var(--pds-spacing-xl);
}

.pds-logs-detail__label:first-child {
	margin-block-start: 0;
}

.pds-logs-detail__value {
	font-size: var(--pds-typography-size-s);
	margin: 0;
	margin-block-start: var(--pds-spacing-3xs);
}

.pds-logs-detail__value--critical {
	color: var(--pds-color-status-critical-foreground);
}

.pds-logs-detail__value--warning {
	color: var(--pds-color-status-warning-foreground);
}

.pds-logs-detail__badge {
	background-color: var(--pds-color-badge-critical-muted-background);
	border-radius: var(--pds-border-radius-input);
	color: var(--pds-color-badge-critical-muted-foreground);
	display: inline-block;
	font-size: var(--pds-typography-size-xs);
	font-weight: var(--pds-typography-fw-medium);
	padding: var(--pds-spacing-4xs) var(--pds-spacing-xs);
}