Whitelisting certain props?

[shawnbot]

This week's work has given us an opportunity to mull over whether components should be "strict" in which props they allow users to pass — or, as an implementation detail, which ones they actually respect. I can think of a couple that we may want to whitelist for some, if not all, Primer components:

1. id could people to provide deep links without having to wrap another element around their content.
2. hidden would provide a more systematic way to show and hide things.
3. Any aria- attribute, because a11y.
4. Any data- attribute, to provide hooks for JS behaviors implemented by container components.

Thoughts?

[shawnbot]

Because we're talking about implementing display more generally, I think we should also discuss having hidden override that value so that:

expect(render(<FlexContainer hidden />)).toEqual(render(<div hidden />))
expect(render(<Block display="flex" hidden />)).toEqual(render(<Block hidden />))

in other words, something like:

// props.js
export const mapHidden = ({display, hidden, ...rest}) => {
  // don't pass the display prop if hidden is true
  return hidden === true ? {hidden, ...rest} : {display, ...rest}
}

[shawnbot]

The strategy with system-components is actually to blacklist props that shouldn't be forwarded, so this is OBE.