Only have types for data-color and data-size when designsystemet type is added to users tsconfig

[mimarz]

Suggestion for improvement.

Currently if you have not added color.d.ts or react-types.d.ts, usage of data-color and data-size is quite inconsistent and confusing.

Depending on where you are using the data-attributes you get different types.

Confusing aspects
- Used on plain elements (div, span), you can not use any string, which you can on other data attributes.

• Used on one of our components, you get just half of the types (severity colors). This makes it look like these are all the available types, when in fact there is more.

Suggestions

Tasks

Preview Give feedback

1. data-color and data-size should always accept string (as native experience)
2. data-color, data-size, data-color-scheme and data-typography should only have typing when our type declaration is added to your typeconfig

[Barsnes]

I think the default type should contain what it does today, but also string, so it accepts anything, but you also get suggestions.

[unekinn]

One solution is to fallback to string | {} when the type hasn't been extended. This ensures developers only get autocomplete suggestions if the type is "completed" via a colors.d.ts file. I think this should be possible using IsEmptyObject from type-fest

In packages/react/src/colors.ts, use this:

import type { IsEmptyObject } from 'type-fest'

export type Color = IsEmptyObject<MainAndSupportColors> extends true
  ? string & {}
  : CustomColors | SeverityColors;

If we don't want to depend type-fest, we can inline the definition:

declare const emptyObjectSymbol: unique symbol;
type EmptyObject = {[emptyObjectSymbol]?: never};
type IsEmptyObject<T> = T extends EmptyObject ? true : false;

Example: When empty

When extended:

[unekinn]

Actually, maybe this is better, since some of our components import just CustomColors or SeverityColors

type ColorWithFallback<T> = IsEmptyObject<MainAndSupportColors> extends true ? string & {} : T

export type SeverityColors = ColorWithFallback<'info' | 'success' | 'warning' | 'danger'>

export type CustomColors = ColorWithFallback<'neutral' | keyof MainAndSupportColors>

export type Color = CustomColors | SeverityColors;