feat(button): add button to web components v3

[chrisdholt]

Previous Behavior

New Behavior

Related Issue(s)

• Fixes #

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against 3c926baf2bd55186e277b61652573f7aef85a80c}

[size-auditor]

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: 7f5a5e5

Possible causes

• The baseline build 7f5a5e5 is broken
• The Size Auditor run for the baseline build 7f5a5e5 was not triggered

Recommendations

• Please merge your branch for this Pull request with the latest master build and commit your changes once again

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 69b7f0e:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[eljefe223]

Other than the callouts in the stylesheet this looks good. Maybe lets try running the css selector analyzer and see if there i an consolidation that could happen here.

[miroslavstastny]

Could you please explain why the appearance part of the selector ([appearance][disabled], [appearance][disabled-focusable]) is necessary?

[chrisdholt]

specificity - I can try and pull it off, but we have a number of styles where we're changing the various button states themselves, many which use attribute selectors. This ensures that regardless of the actual attribute value, ALL appearances should have these styles applied in both disabled and disabled-focusable scenarios. It's possible that :is() provides enough specificity...but I'm not sure. I had to add :is() in order to combine these AND get the right specificity (:where() was not specific enough, by design). I can test when I get the repo built again.

[miroslavstastny]

Code looks good.
There is current-value attribute on all buttons in DOM:

What is the plan with a doc documenting FUIR9 - FUIWC3 differences?

[chrisdholt]

Code looks good. There is current-value attribute on all buttons in DOM:

What is the plan with a doc documenting FUIR9 - FUIWC3 differences?

I think we should document current-value for all form associated elements somewhere. Here's the rundown on where that came from and why it exists: microsoft/fast#5119

Unfortunately, the correct default value is an empty string...which does reflect here. We could probably open an issue to see if we can adjust for that single scenario but nothing comes to mind currently.

The only other delta (I think) we really have is as being a different element. I plan to get the anchor up to just close that gap.