Improve ButtonWithMenu types, add tests for Button types

[ravicious]

I was working on a component that was using ButtonWithMenu. I noticed that I was able to pass an onClick function to it that had a signature which didn't match what's expected from a regular onClick.

This was the case because of the type used to describe the rest of the props: [buttonBorderProp: string]: any. This makes it so that ButtonWithMenu accepts any kind of prop and its type doesn't matter.

I made an attempt to fix that by replacing this with props: { <known props> } & ButtonProps<'button'>. This seemed to work well until I found a callsite which uses the forwardedAs prop:

teleport/web/packages/teleport/src/UnifiedResources/ResourceActionButton.tsx

Lines 207 to 217 in 76bfe76

	<ButtonWithMenu
	text="Log In"
	width="123px"
	size="small"
	target="_blank"
	href={samlAppSsoUrl}
	rel="noreferrer"
	textTransform="none"
	forwardedAs="a"
	title="Log in to SAML application"
	>

The type that I came up with didn't want to allow the target and href props because they don't exist on <button>. So I needed to somehow make TS treat ButtonWithMenu as a when forwardedAs is passed.

After wrestling with the types for an hour, I wrote a simple test which serves two purposes. First, it checks if wrong props are rejected by TS. Second, it checks if the component under tests actually renders as <button> or <a>. This test case reproduces the problem that I ran into in ButtonWithMenu.

I found that depending on whether forwardedAs or as is needed, I need to use either ComponentPropsWithoutRef or ComponentPropsWithRef – I can't quite explain why it's the case, but this works for now and the test passes.

As for forwardedAs vs as, I believe forwardedAs is needed because when the css prop is used, it creates a wrapper component around the original styled component.

The third idea behind the test is to make it serve as a template whenever someone needs to provide a type for rest props. There's a bunch of other places with types for rest props (see rg "\[.*\]: any") which could use such change in the future.

[public-teleport-github-review-bot]

@ravicious See the table below for backport results.

Branch	Result
branch/v17	Create PR