Enum types potentially too strict

[mattrothenberg]

Describe the bug

When using the VSCodeRadioGroup component, I noticed that the following code resulted in a Typescript error

<VSCodeRadioGroup orientation="vertical">
    <VSCodeRadio value="apple">Apple</VSCodeRadio>
    <VSCodeRadio value="banana">Banana</VSCodeRadio>
    <VSCodeRadio value="orange">Orange</VSCodeRadio>
  </VSCodeRadioGroup>

Type '"vertical"' is not assignable to type 'Orientation | undefined'.ts(2322)

While I was able to resolve this by importing the RadioGroupOrientation enum from the package, it struck me as odd that the string vertical or horizontal didn't satisfy the orientation prop. Particularly considering the definition of the enum itself 👇

import { RadioGroupOrientation } from "@vscode/webview-ui-toolkit";
console.log(RadioGroupOrientation) // {horizontal: "horizontal", vertical: "vertical"}

As a React developer, I would expect both values – "vertical" and RadioGroupOrientation.vertical – to function correctly here.

Screenshots

https://codesandbox.io/s/purple-shape-j1ih4?file=/src/App.tsx:247-258

Desktop (please complete the following information):

• OS Version: MacOS 11.6.2
• Toolkit Version: 0.9.0

[hawkticehurst]

Yep 100% agreed!

If you didn't already see it, I opened an upstream issue in FAST that aims to solve this exact problem. Once that lands this issue should be resolved.

I'll also go ahead and leave this issue open for visibility in case anyone else runs into the problem.