[joy-ui][ButtonGroup] Using css pseudo selectors for button group styles

[aacevski]

• I have followed (at least) the PR section of the contributing guide.

Related issues: #39372 #40021

This is a proposal pull request which works and fixes the mentioned issues, using pseudo selectors works fine.

However is there a reason we use data-ids instead of pseudo selectors? If this is good, I will also update the tests.

[mui-bot]

Netlify deploy preview

https://deploy-preview-41456--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 3ba397d

[siriwatknp]

• I have followed (at least) the PR section of the contributing guide.

Related issues: #39372 #40021

This is a proposal pull request which works and fixes the mentioned issues, using pseudo selectors works fine.

However is there a reason we use data-ids instead of pseudo selectors? If this is good, I will also update the tests.

Really appreciate the PR.

The reason to use data-first-child is to make it work with zero-config SSR from emotion where <style> is inserted between elements.

<div>
  <style>…</style>
  <button>…</button>
  <style>…</style>
  <button>…</button>
  <style>…</style>
  <button>…</button>
</div>

I would not change anything at this point given we are focusing on Material UI v6. Open for other solutions as well.

[aacevski]

• I have followed (at least) the PR section of the contributing guide.

Related issues: #39372 #40021

This is a proposal pull request which works and fixes the mentioned issues, using pseudo selectors works fine.

However is there a reason we use data-ids instead of pseudo selectors? If this is good, I will also update the tests.

Really appreciate the PR.

The reason to use data-first-child is to make it work with zero-config SSR from emotion where <style> is inserted between elements.

<div>

  <style>…</style>

  <button>…</button>

  <style>…</style>

  <button>…</button>

  <style>…</style>

  <button>…</button>

</div>

I would not change anything at this point given we are focusing on Material UI v6. Open for other solutions as well.

Wouldn't button:first-of-type cover that use case?

[mnajdova]

Wouldn't button:first-of-type cover that use case?

It wouldn't if the Button component is rendered as a different DOM node. We could use class name, but again custom components won't work. The data-first-child is a nice workaround, and easily applicable on custom components too. I would close the pull request as won't fix for now. At this moment we are focused on Material UI v6, which is mostly around converting the components to support CSS static extraction. I would recommend checking the umbrella issue #41273 if you are looking for things to contribute to. Thanks for the effort! :)

[aacevski]

Wouldn't button:first-of-type cover that use case?

It wouldn't if the Button component is rendered as a different DOM node. We could use class name, but again custom components won't work. The data-first-child is a nice workaround, and easily applicable on custom components too. I would close the pull request as won't fix for now. At this moment we are focused on Material UI v6, which is mostly around converting the components to support CSS static extraction. I would recommend checking the umbrella issue #41273 if you are looking for things to contribute to. Thanks for the effort! :)

Thank you! I will look at the umbrella issue as you suggested, I would love to contribute! Will close this PR for now until I think of a better solution.