Add 'data-className'

[luixxiul]

Description

Add data-className or like that to components to stop styles specified with className from overriding normalized styles.

<span className={css(
  styles.button,
  styles.button_clipboard
)}
  data-className={this.props.className}
/>

Example

Consider a case like this:

<ClipboardButton
  topTooltip
  dataL10nId='copyToClipboard'
  copyAction={this.onCopy}
  className={css(styles.letMeOverrideStyles)}
/>

That could cause a visual regression.

It should be ultimately converted with custom, which should be

<ClipboardButton
  topTooltip
  dataL10nId='copyToClipboard'
  copyAction={this.onCopy}
  custom={styles.letMeOverrideStyles}
/>

That would be possible like this:

<span className={css(
  styles.button,
  styles.button_clipboard,
  this.props.custom
)}
  data-className={this.props.className}
/>

In this way, you would be able to make components which accept custom styles only when this.props.custom is set.

Steps to Reproduce

Actual result:

Expected result:

Reproduces how often: [What percentage of the time does it reproduce?]

Brave Version

about:brave info:

Reproducible on current live release:

Additional Information