Skip to content

feat : KBD component #969

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Sep 21, 2023
Merged

feat : KBD component #969

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
257fefd
feat: kBD (Keyboard) component
MateoWartelle Sep 17, 2023
7335d6c
feat: add kbd story (default, withIcon)
MateoWartelle Sep 17, 2023
f8a281c
feat: remove extra sentence + flex wrap letter keys
MateoWartelle Sep 17, 2023
e7661fa
docs: fix docs
MateoWartelle Sep 17, 2023
2d597bb
feat: kbd basic tests, storybook withIcon + onlyIcon
MateoWartelle Sep 17, 2023
9922154
docs: add missing importExternal for arrow keys docs
MateoWartelle Sep 17, 2023
b8ce99c
docs: review changes for documentation
MateoWartelle Sep 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions app/data/components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,14 +328,14 @@ export const COMPONENTS_DATA: Component[] = [
// link: `/docs/components/skeleton`,
// classes: 'w-40'
// },
// {
// id: '42',
// name: 'KBD (Keyboard)',
// image: '/images/components/keyboard.svg',
// imageDark: '/images/components/keyboard-dark.svg',
// link: `/docs/components/kbd`,
// classes: 'w-40'
// },
{
id: '42',
name: 'KBD (Keyboard)',
image: '/images/components/keyboard.svg',
imageDark: '/images/components/keyboard-dark.svg',
link: `/docs/components/kbd`,
classes: 'w-40',
},
// {
// id: '43',
// name: 'Drawer (offcanvas)',
Expand Down
18 changes: 18 additions & 0 deletions app/docs/components/kbd/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
'use client';

import type { FC } from 'react';
import { DocsContentLayout } from '~/app/components/docs-content-layout';
import KbdDocs from './kbd.mdx';

const FormsPageContent: FC = () => {
return (
<DocsContentLayout
title="React KBD (Keyboard) - Flowbite"
description="Use the KBD component as an inline element to denote textual user input from the keyboard inside paragraphs, tables, and other components"
>
<KbdDocs />
</DocsContentLayout>
);
};

export default FormsPageContent;
179 changes: 179 additions & 0 deletions app/docs/components/kbd/kbd.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
import { CodePreview } from '~/app/components/code-preview';
import { Kbd, Table, theme } from '~/src';
import { MdKeyboardArrowLeft, MdKeyboardArrowRight, MdKeyboardArrowDown, MdKeyboardArrowUp } from 'react-icons/md';

The KBD (Keyboard) component can be used to indicate a textual user input from the keyboard inside other elements such as in text, tables, cards, and more.

Use the semantic `<Kbd>` keyboard input tag to use the default monospace font which is best suited for representing input keys.

To start using the `<Kbd>` component you need to import it from `flowbite-react`:

```jsx
'use client';

import { Kbd } from 'flowbite-react';
```

## Table of Contents

## Default KBD

Here’s a list of KBD components that you can use inside any other element.

<CodePreview importFlowbiteReact="Kbd" title="Default KBD">
<Kbd>Shift</Kbd>
<Kbd>Ctrl</Kbd>
<Kbd>Tab</Kbd>
<Kbd>Caps Lock</Kbd>
<Kbd>Esc</Kbd>
<Kbd>Spacebar</Kbd>
<Kbd>Enter</Kbd>
</CodePreview>

## KBD inside text

Use this example by nesting an inline KBD component inside a paragraph.

<CodePreview importFlowbiteReact="Kbd" title="Inside Text KBD">
Please press <Kbd>Ctrl</Kbd> + <Kbd>Shift</Kbd> + <Kbd>R</Kbd> to re-render an MDN page.
</CodePreview>

## KBD inside table

The KBD component can also be used inside table components to denote what type of key can be pressed for certain descriptions.

<CodePreview
importFlowbiteReact="Kbd, Table"
importExternal="import { MdKeyboardArrowLeft, MdKeyboardArrowRight, MdKeyboardArrowDown, MdKeyboardArrowUp } from 'react-icons/md';"
title="Table KBD"
>
<Table>
<Table.Head>
<Table.HeadCell>Key</Table.HeadCell>
<Table.HeadCell>Description</Table.HeadCell>
</Table.Head>
<Table.Body className="divide-y">
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
<Kbd>Shift</Kbd> <span className="pr-1">or</span> <Kbd>Tab</Kbd>
</Table.Cell>
<Table.Cell>Navigate to interactive elements</Table.Cell>
</Table.Row>
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
<Kbd>Enter</Kbd> <span className="pr-1">or</span> <Kbd>Spacebar</Kbd>
</Table.Cell>
<Table.Cell>Ensure elements with ARIA role="button" can be activated with both key commands.</Table.Cell>
</Table.Row>
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
<Kbd icon={MdKeyboardArrowUp}></Kbd>
<Kbd icon={MdKeyboardArrowDown}></Kbd>
<span className="pr-1">or</span>
<Kbd icon={MdKeyboardArrowLeft}></Kbd>
<Kbd icon={MdKeyboardArrowRight}></Kbd>
</Table.Cell>
<Table.Cell>Choose and activate previous/next tab.</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
</CodePreview>

## Arrow keys

Use this example to show arrow keys inside the KBD styled element.

<CodePreview
importFlowbiteReact="Kbd"
importExternal="import { MdKeyboardArrowLeft, MdKeyboardArrowRight, MdKeyboardArrowDown, MdKeyboardArrowUp } from 'react-icons/md';"
title="Arrow Keys KBD"
>
<Kbd icon={MdKeyboardArrowUp}></Kbd>
<Kbd icon={MdKeyboardArrowDown}></Kbd>
<Kbd icon={MdKeyboardArrowLeft}></Kbd>
<Kbd icon={MdKeyboardArrowRight}></Kbd>
</CodePreview>

## Letter Keys

Use this example to show arrow keys inside the KBD styled element.

<CodePreview importFlowbiteReact="Kbd" title="Letter Keys KBD">
<div className="flex flex-wrap">
<Kbd>Q</Kbd>
<Kbd>W</Kbd>
<Kbd>E</Kbd>
<Kbd>R</Kbd>
<Kbd>T</Kbd>
<Kbd>Y</Kbd>
<Kbd>I</Kbd>
<Kbd>O</Kbd>
<Kbd>P</Kbd>
<Kbd>A</Kbd>
<Kbd>S</Kbd>
<Kbd>D</Kbd>
<Kbd>F</Kbd>
<Kbd>G</Kbd>
<Kbd>H</Kbd>
<Kbd>J</Kbd>
<Kbd>K</Kbd>
<Kbd>L</Kbd>
<Kbd>Z</Kbd>
<Kbd>X</Kbd>
<Kbd>C</Kbd>
<Kbd>V</Kbd>
<Kbd>B</Kbd>
<Kbd>N</Kbd>
<Kbd>M</Kbd>
</div>
</CodePreview>

## Number Keys

Use this example to show a key inside a KBD component from the english numeral system.

<CodePreview importFlowbiteReact="Kbd" title="Number Keys KBD">
<Kbd>1</Kbd>
<Kbd>2</Kbd>
<Kbd>3</Kbd>
<Kbd>4</Kbd>
<Kbd>5</Kbd>
<Kbd>6</Kbd>
<Kbd>7</Kbd>
<Kbd>8</Kbd>
<Kbd>9</Kbd>
<Kbd>0</Kbd>
</CodePreview>

## Function keys

This example can be used to denote function keys inside the KBD component.

<CodePreview importFlowbiteReact="Kbd" title="Function Keys KBD">
<div className="flex flex-wrap">
<Kbd>F1</Kbd>
<Kbd>F2</Kbd>
<Kbd>F3</Kbd>
<Kbd>F4</Kbd>
<Kbd>F5</Kbd>
<Kbd>F6</Kbd>
<Kbd>F7</Kbd>
<Kbd>F8</Kbd>
<Kbd>F9</Kbd>
<Kbd>F10</Kbd>
<Kbd>F11</Kbd>
<Kbd>F12</Kbd>
</div>
</CodePreview>

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

<pre className="language-tsx">
<code>{JSON.stringify(theme.kbd, null, 2)}</code>
</pre>

## References

- [Flowbite Kbd](https://flowbite.com/docs/components/kbd/)
14 changes: 14 additions & 0 deletions app/docs/components/kbd/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import type { Metadata, NextPage } from 'next';
import KbdPageContent from '.';

export const metadata: Metadata = {
description:
'Use the KBD component as an inline element to denote textual user input from the keyboard inside paragraphs, tables, and other components',
title: 'React KBD (Keyboard) - Flowbite',
};

const KbdPage: NextPage = () => {
return <KbdPageContent />;
};

export default KbdPage;
1 change: 1 addition & 0 deletions app/docs/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,7 @@ const DocsSidebar: FC<DocsLayoutState> = ({ isCollapsed, setCollapsed }) => {
<SidebarLink href="/docs/components/dropdown">Dropdown</SidebarLink>
<SidebarLink href="/docs/components/footer">Footer</SidebarLink>
<SidebarLink href="/docs/components/forms">Forms</SidebarLink>
<SidebarLink href="/docs/components/kbd">KBD</SidebarLink>
<SidebarLink href="/docs/components/list-group">List group</SidebarLink>
<SidebarLink href="/docs/components/modal">Modal</SidebarLink>
<SidebarLink href="/docs/components/navbar">Navbar</SidebarLink>
Expand Down
Loading