[BLOCKED] Support `data-xxx` on v9 component props type

[YuanboXue-Amber]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

Hi, I'm trying to use props['data-xxx'] (where props has type ButtonProps) and getting TS errors. Please support data-xxx on component props.

For example, the below code will give TS error:

Element implicitly has an 'any' type because expression of type '"data-test"' can't be used to index type 'ButtonProps'. Property 'data-test' does not exist on type 'ButtonProps'.ts(7053)

import { Button, ButtonProps } from "@fluentui/react-components"; 
const ButtonExample = (props: ButtonProps) => {
  console.log(props["data-test"]); // TS error here
  return <Button {...props}>Example</Button>;
};
export const Example = () => (
  <ButtonExample data-test="true">Example</ButtonExample>
);

Have you discussed this feature with our team

@layershifter @Hotell

Validations

• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[tudorpopams]

@behowell can you please check this? @layershifter also has more context on this.

[behowell]

This should be fixable by allowing any prop that starts with data-, e.g.:

Record<`data-${string}`, unknown>

However, it looks like this requires TypeScript 4.4+ to work: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-4.html#symbol-and-template-string-pattern-index-signatures . Our repo is currently on TypeScript 4.3.

[behowell]

It looks like it's not possible to add support for this for clients that are on TypeScript 4.4 yet. Our TypeScript minbar is 3.9, and adding a template literal type fails to compile on 3.9 (see the build failure on the Draft PR: https://github.com/microsoft/fluentui/pull/24646).

I'm going to mark this as Blocked for now. We can add support once:

• Our TypeScript minbar version is 4.1+ (which added support for Template Literal Types).
• Our TypeScript target version is 4.4+ (which added support for Template String Pattern Index Signatures).

[YuanboXue-Amber]

Heyy, bumping this up. I found out TMP has on going process of upgrading typescript from 4.3 to 4.9 (feature 2759283). Would be nice if we catch up :)

[Hirse]

As of this morning TMP moved to 4.9.5. 🎉 Hope this helps to raise the min.

[Hotell]

It looks like it's not possible to add support for this for clients that are on TypeScript 4.4 yet. Our TypeScript minbar is 3.9, and adding a template literal type fails to compile on 3.9 (see the build failure on the Draft PR: #24646).

I'm going to mark this as Blocked for now. We can add support once:

• Our TypeScript minbar version is 4.1+ (which added support for Template Literal Types).
• Our TypeScript target version is 4.4+ (which added support for Template String Pattern Index Signatures).

To provide more context on those TS versions.

We will have a downleveling TS tool in place which will enable us to use latest versions and features of TS and ship valid types to users that are using older versions. This is not a silver bullet though and unfortunately this particular feature (Template string pattern index signature) cannot be down-leveled for older TS versions.

With all that set, blocker is clearly set - until our minbar is TS 4.4 we will not be able to support this.

There are workarounds (not ideal though): users can use type assertion to make the checker happy ( note that type assertion are dangerous )

[microsoft-github-policy-service[bot]]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service[bot]]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service[bot]]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[YuanboXue-Amber]

It is blocked but not resolved. Re-opening issue