search

CMSgov / design-system

Open source design and front-end development resources for creating Section 508 compliant, responsive, and consistent websites.
https://design.cms.gov
Other
318 stars 86 forks source link

Render all valid attributes on all components #2126

Open Josh68 opened 2 years ago

Josh68 commented 2 years ago

Describe the bug Not all components render standard element props / attributes on their top-level element

Reference earlier ticket

To Reproduce Steps to reproduce the behavior:

  1. See the code for Card (MGov)
  2. Note that the only props allowed to be passed to the component are className and children
  3. Create a page and render a Card adding a data-testid attribute
  4. Note that this is a valid prop in React, as are all data- attributes (also aria- attributes, e.g.)
  5. Note that this attribute isn't rendered

Expected behavior All components should take valid props (aka HTML attributes, including all data- attributes) for their top-level element and render them on the top-level element unless otherwise specified

Example: Alert:

Takes correct props

Renders all props

Screenshots N/A

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

zarahzachz commented 2 years ago

The engineers are discussing this issue now. Will keep you posted with what we discuss.

zarahzachz commented 3 months ago

At the time, our discussion approached this as an opportunity to standardize cards across the design system and figure out the role of props in the design system. This work has yet to be prioritized with CMS.

For the time being, if you still need this you could apply custom props to a div with the card CSS.

Josh68 commented 3 months ago

For the time being, if you still need this you could apply custom props to a div with the card CSS.

Yes, as it stands, we know the only way to deal with this is to create a wrapper element that we control.