PDS proposals
← All proposals

Feedback Bar

A small atomic component: a thumbs-up and thumbs-down pair with one piece of state, built from the local IconButton (its existing isPressed toggle, which maps to aria-pressed).

Net-new componentOpen in Storybook

proposals/FeedbackBar/feedback-bar.css39 lines · View on GitHub
.pds-feedback-bar {
	align-items: center;
	color: var(--pds-color-foreground-default);
	display: flex;
	gap: var(--pds-spacing-2xs);
}

/* The status text (xs, secondary color) replaces the thumbs; the empty region
   stays in the DOM so the text is announced when it appears. */
.pds-feedback-bar__status {
	color: var(--pds-color-foreground-default-secondary);
}

.pds-feedback-bar__actions {
	align-items: center;
	display: flex;
	gap: var(--pds-spacing-2xs);
}

.pds-feedback-bar__status:empty {
	display: none;
}

/* The thumbs and the status text fade in when they swap, so the thanks eases
   away instead of cutting to the thumbs. */
@keyframes pds-feedback-bar-fade-in {
	from {
		opacity: 0%;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.pds-feedback-bar__actions,
	.pds-feedback-bar__status {
		animation: pds-feedback-bar-fade-in var(--pds-animation-duration-reveal)
			var(--pds-animation-timing-function-default);
	}
}