fix: type-safe props in wrapped slider React component
🐛 Bug Report
I'm trying to use the slider component from either Fluent or FAST. I can get it working by using wrap(fastSlider()) or wrap(fluentSlider()), but the resulting component does not seem to know anything about its prop types, so my code does not typecheck when I pass props like min, max, and step.
💻 Repro or Code Sample
import {
fluentButton,
fluentCard,
fluentSlider,
provideFluentDesignSystem,
} from "@fluentui/web-components";
import { provideReactWrapper } from "@microsoft/fast-react-wrapper";
const { wrap } = provideReactWrapper(React, provideFluentDesignSystem());
export const FluentCard = wrap(fluentCard());
export const FluentButton = wrap(fluentButton());
export const FluentSlider = wrap(fluentSlider());
Then, with the following code:
return <div>
<FluentButton onClick={() => console.log("hi")}/>
<FluentSlider min="1" />
</div>;
🤔 Expected Behavior
This code should type-check
😯 Current Behavior
I get a red squiggle under min="1" with the following typescript error:
Type '{ min: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ReactWrapperProps<FoundationElement, unknown>, {}, any>> & Readonly<...>'.
Property 'min' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ReactWrapperProps<FoundationElement, unknown>, {}, any>> & Readonly<...>'.ts(2322)
💁 Possible Solution
I'm guessing that the type definitions simply have not been implemented for Slider yet, since they are using "FoundationElement" instead of some more specific "SliderElement" or whatever.
🌍 Your Environment
I followed the instructions at https://learn.microsoft.com/en-us/fluent-ui/web-components/integrations/react to add Fluent & the fast-wrapper to my React project that is using Vite.
These are the dependencies I'm using:
"@fluentui/web-components": "^2.5.16",
"@microsoft/fast-element": "^1.12.0",
"@microsoft/fast-foundation": "^2.49.4",
"@microsoft/fast-react-wrapper": "^0.3.22",