Add text transform options to `kbd`

[stijns96]

Package

v4.x

Description

I'm writing a client docs where I want to use the kbd typography component to make a small deviation between code and kbd. The value of kbd can be a small sentence that the user has to type in their system.

Would be very nice to have some text transform options here as the actual text is uppercased, instead of the TW class uppercase.

Additional context

Open to open a PR, but would like to have an opinion first and how I should approach this. Either build it within useKbd or simply by adding TW classes where uppercase is the default.

[HugoRCD]

@stijns96 I don't know if I've understood your request correctly, but why not customize the component globally in your app.config.ts? 🤔

[stijns96]

Hi @HugoRCD,

Because adding the class normal-case doesn't have an effect on the value, since the value itself is being uppercased with .toUpperCase().

See this line.

[benjamincanac]

@stijns96 You can simply use the default slot instead of the label prop if you want to bypass this!

[stijns96]

Hi @benjamincanac,

Need it inline in my MD file. E.g. You need to type: :kbd{value="test"}.

Can't really find a way to do so?

[benjamincanac]

So you want to replace the .toUpperCase() with the uppercase class on src/theme/kbd.ts?

[stijns96]

I guess that would be a nice solution? Then you're always free to do what you want in the component but als MDC component.

[benjamincanac]

Yes I don't see an issue changing this, there must have been a reason why I did this but it was too long ago..