Forward HTML attributes (spread rest props)

[ravisuhag]

Summary

Many components selectively pick props instead of extending HTML attributes and spreading the rest. This prevents consumers from passing standard HTML attributes like className, style, data-*, aria-*, onClick, etc.

Goal

All components should extend the appropriate HTMLAttributes interface and spread ...rest props onto their root DOM element.

Pattern

// Before
function Component({ label, size }: ComponentProps) {
  return <div>{label}</div>;
}

// After
function Component({ label, size, ...rest }: ComponentProps) {
  return <div {...rest}>{label}</div>;
}

Where ComponentProps extends React.HTMLAttributes<HTMLDivElement> (or the appropriate element type).

Affected Components

Component	Issue	Details
Indicator	#622	Should spread remaining props onto root
Image	#621	Missing native <img> attributes (loading, decoding, fetchPriority)
IconButton	#620	Should spread onto underlying button
Headline	#619	Should spread onto rendered heading element
FilterChip	#616	Should spread onto root element
EmptyState	#615	Should spread onto root element
CopyButton	#611	Should spread onto underlying IconButton
Chip	#605	Props selectively picked instead of spread
Badge	#598	Can't pass onClick, style, data-*, role, etc.
Amount	#595	Can't pass className, style, data-*, aria-*, onClick

Acceptance Criteria

• All components extend appropriate HTMLAttributes interface
• All components spread ...rest props onto root DOM element
• TypeScript autocomplete shows available HTML attributes
• No breaking changes to existing prop APIs