Trussworks React component HTML differences with standard USWDS components

[jhancock532]

A side effect of extending components is that in some cases it creates HTML unlike USWDS:

For example, the search component. In USWDS, the usa-search--big class is applied on the main form.

  <form class="usa-search usa-search--big" role="search">
    <label class="usa-sr-only" for="search-field-en-big">Search</label>
    <input
      class="usa-input"
      id="search-field-en-big"
      type="search"
      name="search"
    />
    <button class="usa-button" type="submit">
      <span class="usa-search__submit-text">Search </span
      ><img
        src="/assets/img/usa-icons-bg/search--white.svg"
        class="usa-search__submit-icon"
        alt="Search"
      />
    </button>
  </form>

The React component will instead generate HTML with the usa-search--big class applied on child

elements.

<form data-testid="form" class="usa-search" role="search">
  <div class="usa-search--big" data-testid="searchField">
    <label data-testid="label" class="usa-sr-only" for="search-field">Search</label>
    <input data-testid="textInput" class="usa-input" id="search-field" name="search" type="search" value="">
  </div>
  <div class="usa-search--big">
    <button type="submit" class="usa-button" data-testid="button">
    <span class="usa-search__submit-text">Search</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="usa-icon usa-icon--size-3 usa-search__submit-icon" focusable="false" role="img" name="Search">
      <path>...</path>
    </svg>
    </button>
  </div>
</form>

• This means that if a project has style overrides for USWDS's HTML components, the styles won't be applied correctly if copied to a React app with Trussworks components.
• If USWDS updates how this style is defined in the future, Trussworks will have to update their component template to match, or create a custom style instead.

Thoughts on the tradeoff of making the library more flexible with extendable components & reuse of USWDS styles in different contexts, vs trying to follow USWDS's template structure exactly?