react-combobox: style fixes from design review

[smhigley]

The following came up in a design review, fixed by this PR:

• Option group divider reaches the full width of the listbox
• Placeholder styles for the Combobutton
• 2px extra margin before and after option text (done through finagling the margins on the check icon)
• cursor: pointer on options
• setting font-family

Before:

After:

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-combobox Combobox	62.291 kB 21.341 kB	62.897 kB 21.536 kB	606 B 195 B

_{🤖 This report was generated against 52f6f9da2687560b5f165309c6c54c63878379f8}

[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 f499836:

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

[micahgodbolt]

can we get a before/after screenshot to see what changed?

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 52f6f9da2687560b5f165309c6c54c63878379f8 (build)

[behowell]

Maybe use the typographyStyles exports from react-theme instead? That ensures that all of the appropriate font props are set. (Even with this change, it's still using the inherited font-weight 🙀)

E.g. instead of setting fontFamily here, the small class would be:

small: {
  ...typographyStyles.caption1,
  ...shorthands.padding(/*...*/),
},

etc. for the other sizes.

[smhigley]

interestingly, the design spec actually doesn't call for any given font-weight 😅. They are all regular weight in practice though.

I can't fully use typographyStyles since there isn't a style for regular-weight 400 size text. Given that, I'm kind of inclined to just put the font weight and font family on the base style block, and only alter font-size/line-height for sizes.

Does that make sense to you? That feels less weird to me than having a mixed approach :P

[behowell]

It might be worthwhile double checking the font sizes with design. The design spec should probably be referencing the font aliases like "Subtitle 2" instead of just font sizes. In fact, it might be a bug in the design that it's asking for a 400-size font with regular weight, so this might help clear that up.

[smhigley]

I chatted w/ design, they're checking on whether to add another font alias for this

[behowell]

Thanks for making the updates! It looks like you need to re-generate the .api.md and test snapshot.

[micahgodbolt]

Remove flex gap usable, replace with margin/padding etc

[GeoffCoxMSFT]

Consider a comment explaining why the icon needs a negative left margin.