[joy-ui] Add Kbd component

[marcpachecog]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

The Kbd component simplifies the display of keyboard inputs, making it easy to showcase shortcuts and user interactions involving the keyboard. It enhances user understanding and interaction in applications ensuring a seamless and user-friendly experience.

Examples 🌈

https://mantine.dev/core/kbd/ https://chakra-ui.com/docs/components/kbd/usage

Motivation 🔦

No response

[marcpachecog]

Until Joy provides a solution, I've addressed our needs by using Typography with some styles. However, this approach is far from optimal because it doesn't allow to specify the variant or size.

import * as React from "react";
import { Typography, TypographyProps } from "@mui/joy";

type KbdProps = TypographyProps;

const Kbd: React.FC<KbdProps> = ({ children, ...props }) => {
  return (
    <Typography
      component="kbd"
      textColor="text.primary"
      sx={{
        fontFamily: "monospace",
        fontSize: "xs",
        fontWeight: "lg",
        borderColor: "var(--joy-palette-background-level3)",
        borderStyle: "solid",
        borderWidth: "1px 1px 3px",
        backgroundColor: "background.level4",
        borderRadius: "0.35rem",
        px: 0.5,
        py: 0,
      }}
      {...props}
    >
      {children}
    </Typography>
  );
};

export default Kbd;

[samuelsycamore]

Thanks for the new component suggestion @marcpachecog ! We'll definitely take this into consideration as we plan what to add to Joy UI next. I've added the "waiting for upvotes" tag here to encourage others to give this a 👍 if they'd like to see this component land sooner rather than later!

[siriwatknp]

@marcpachecog Until then, you can extend the Typography variant like this: https://codesandbox.io/s/joy-ui-typography-kbd-vxz4g3?file=/src/index.tsx

I see 2 options to solve this issue:

1. Add a new Kbd component
2. Provide a theme plugin to add kbd variant.

To be honest, I thought about adding a new Kbd component but after seeing @marcpachecog code, it's totally related to CSS, which changed my mind to the plugin solution.

I am not sure what the final API would look like but the idea is to reduce the maintenance from our side and open to the community to build plugins. The usage should be simple like this:

import { CssVarsProvider, extendTheme } from '@mui/joy/styles';
import typographyKbdPlugin from 'some-package';

extendTheme({
  plugins: [typographyKbdPlugin]
})

// the types and styles will just work
<Typography variant="kbd">…</Typography>

cc @zanivan @danilo-leal @mnajdova I think the theme plugin could be a way to grow Joy UI!

[danilo-leal]

The plugin idea sounds nice! But it also sounded a bit complex/overkill, at least at first, to me... maybe I'm not seeing the full picture, though. Like, what else would we be able to do with it? But, to not derail this issue: one thing we don't have that I thought could be interesting is a "themed components" library? Like, more examples of these sorts of components, such as this <Kbd> one!

They would be in this category where creating a fully new component is a bit overkill (because it's mostly CSS changes), and having it as a "common example" of the Typography component (in this case) would be too simplistic. Not 100% sure yet, but it's something that might be cool! Any thoughts?

[zanivan]

They would be in this category where creating a fully new component is a bit overkill (because it's mostly CSS changes), and having it as a "common example" of the Typography component (in this case) would be too simplistic.

We currently have a demo for it: https://mui.com/joy-ui/customization/theme-typography/#adding-more-levels However, this only shows that we can be more organized when it comes down to demos—this is under the customization/typography, and it's not referenced anywhere on the Typography component page. What makes me think if a page for this kind of “overkill components” wouldn't fall under the same problem.

Using the ToggleButton example, it's way clearer to find and use, because it's on the ToggleButtonGroup page. Perhaps, linking this kbd demo or adding it to the Typography page would already help.

[danilo-leal]

That checks out, yeah! Maybe adding this very same demo to the Typography page would suffice — and linking it back to the themed components/typography sounds appropriate! 🤙