extensions: use buttons for non-link actions
Created by: tjkandala
Part of #36751 (closed). Closes #34054 (closed) and #36752 (closed).
Looked like a codemod for class="btn" wrapped <ActionItem>s in <SearchResultsInfoBar> with <Button>. We used to pass that style down to <ButtonLink>, which renders <a>s for everything :(.
I refactored <ActionItem> to render <Button> when the extension action isn't navigation.
I also did some migration from data-tooltip to our new wildcard <Tooltip>. I found that wrapping action items with <Tooltip> affects styles due to insertion of the target <span>. This broke the adjacent sibling combinator (+) in hover overlay for buttons like "Find references" and "Find implementations". What is FPTs suggestion for such styles? I just added the ml-1 class to hover overlay buttons that aren't the first in <HoverOverlay>, but I wonder if there's a pure CSS solution.
Test plan
Manually tested all components that use <ActionItem> in both the webapp and browser extension, automated tests pass.
Manual testing results
| Component | Before | After |
|---|---|---|
<SearchResultsInfoBar> |
 |
 |
<HoverOverlay> |
 |
 |
<CommandList> |
 |
 |
<ActionItemsBar> |
 |
 |
| Action items on BExt |  |
 |
Changes
- Slight increase in command list font weight, but that aligns with our other buttons so it should be ok.
- Browser extension action items look better somehow? Might be the icon centering.
App preview:
Check out the client app preview documentation to learn more.