Incorrect Typescript example for RecipeVariantProps

[jorqensen]

Subject

TypeScript guide for recipe variants

Description

Seems to be a mistake in the docs regarding RecipeVariantProps.

Using RecipeVariantProps results in this type:

type ButtonVariants = {
    visual?: "primary" | "secondary" | undefined;
} | undefined

Which is not the expected type, according to the documentation:

// { size?: 'small' | 'large' }

However, using RecipeVariant gives an output closer to what is "expected":

type ButtonVariants = {
    visual: "primary" | "secondary";
}

The type still doesn't mark the visual as optional, as the docs reference. Seems to be expected behavior according to #2182 however.

Could we update the docs to either mention RecipeVariant or both with examples? If a PR is needed, let me know.

[segunadebayo]

Good point. Feel free to open a PR for this @jorqensen

I think we should mention both types.