[Bug]: `Modal` footer styles overridden by `Button`

[cuppajoey]

Package

@carbon/react

Browser

Chrome

Package version

v1.60.0

React version

v18.2.0

Description

Similar to #16836.

When importing component-level stylesheets, rather than the full carbon stylesheet, Button's styles will override Modal's button styles if the button stylesheet is imported later.

In the case of a standard two-button modal (pictured above), the button-set should span the full width of the modal; however, Button's styles set a max-inline-size: 12.25rem; which overrides Modal's max-inline-size: none; because both style selectors have an equal specificity (.cds--btn--set .cds--btn vs .cds--modal-footer .cds--btn).

💡 Possible solution

We could fix this by increasing the modal selectors specificity to cds--modal-footer .cds--btn--set .cds--btn; however, more work may be required to ensure this does not affect modals with a single button or more than two.

Reproduction/example

https://stackblitz.com/edit/github-5noxyy?file=src%2FApp.jsx,src%2Fbutton.scss,src%2Fmodal.scss

Steps to reproduce

1. Render a Button and an Modal with two buttons.
2. Import @carbon/styles/scss/components/modal.
3. Later import @carbon/styles/scss/components/button.
4. Observe the modal's button-set does not span the full width.

Suggested Severity

Severity 4 = Unrelated to a user task, has a workaround or does not need a workaround.

Application/PAL

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[curtispd]

I ran into this one as well and had to reorder my imports to work around it.