[OP-25] Compound Selector with ::file-selector-button

[Jeremy-Walton]

Why?

There is an issue with compound selectors that have a child under ::file-selector-button in it. It breaks the whole selector

Due to how the file selector button is styled, if you put a child selector in the button global style, it will break it.

E.G. Always styling icons within buttons with a certain color

%btn-global {
  .material-symbols-outlined {
    color: red;
  }
}

// Output that is broken
.form-control[type=file]::file-selector-button .material-symbols-outlined,
.btn .material-symbols-outlined {
  color: red;
}

Technically this is a breaking change though I suspect not many projects are styling the file selector button so it may not be an issue.

What Changed

• Reimplement the file selector button styles to not extend the button

Sanity Check

• [ ] Have you updated any usage of changed tokens?
• [ ] Have you updated the docs with any component changes?
• [ ] Have you updated the dependency graph with any component changes?
• Have you run linters?
• Have you run prettier?
• Have you tried building the css?
• Have you tried building storybook?
• [ ] Do you need to update the package version?

Screenshots

[linear]

OP-25 Child selector in group issue.