From d2e1f5896c5630e5aee6916053f13996e9998b73 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 11 Oct 2023 12:59:11 -0300
Subject: [PATCH] add class to missing instances

---
 docs/data/base/components/number-input/number-input.md | 4 ++--
 docs/data/joy/components/drawer/drawer.md              | 2 +-
 docs/pages/blog/v6-beta-pickers.md                     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/data/base/components/number-input/number-input.md b/docs/data/base/components/number-input/number-input.md
index 6871472568ba85..1ed0bbe0b4a927 100644
--- a/docs/data/base/components/number-input/number-input.md
+++ b/docs/data/base/components/number-input/number-input.md
@@ -160,10 +160,10 @@ The value will be clamped based on `min`, `max` and `step` once the input field
 
 ### Shift multiplier
 
-Holding down the <kbd>Shift</kbd> key when interacting with the stepper buttons applies a multipler (default 10x) to the value change of each step.
+Holding down the <kbd class="key">Shift</kbd> key when interacting with the stepper buttons applies a multipler (default 10x) to the value change of each step.
 
 You can customize this behavior with the `shiftMultiplier` prop.
-In the following snippet, if <kbd>Shift</kbd> is held when clicking the increment button, the value will change from 0, to 5, to 10, and on.
+In the following snippet, if <kbd class="key">Shift</kbd> is held when clicking the increment button, the value will change from 0, to 5, to 10, and on.
 
 ```jsx
 <NumberInput min={0} step={1} shiftMultiplier={5} />
diff --git a/docs/data/joy/components/drawer/drawer.md b/docs/data/joy/components/drawer/drawer.md
index ed31001a03aa02..70064e17c6e316 100644
--- a/docs/data/joy/components/drawer/drawer.md
+++ b/docs/data/joy/components/drawer/drawer.md
@@ -21,7 +21,7 @@ Drawers are commonly used as menus for desktop navigation, and as dialogs on mob
 import Drawer from '@mui/joy/Drawer';
 ```
 
-The Drawer will close after the user makes a selection, clicks anywhere outside of it, or presses the <kbd>Esc</kbd> key.
+The Drawer will close after the user makes a selection, clicks anywhere outside of it, or presses the <kbd class="key">Esc</kbd> key.
 
 Use the `open` prop to control the toggling of the Drawer's open and close states, as shown in the demo below:
 
diff --git a/docs/pages/blog/v6-beta-pickers.md b/docs/pages/blog/v6-beta-pickers.md
index 90021cdd9f4fa3..d21e76877014d0 100644
--- a/docs/pages/blog/v6-beta-pickers.md
+++ b/docs/pages/blog/v6-beta-pickers.md
@@ -73,7 +73,7 @@ Moreover, notice in the following example that as we edit the day, the component
 :::info
 **Behavior change alert**
 
-During pre-releases, using <kbd>Arrow Up</kbd> and <kbd>Arrow Down</kbd> to update a date section would essentially update the entire field like you were navigating the calendar.
+During pre-releases, using <kbd class="key">Arrow Up</kbd> and <kbd class="key">Arrow Down</kbd> to update a date section would essentially update the entire field like you were navigating the calendar.
 In the previous example, updating the day value from 28 to 1 would also update the month to March.
 
 On the stable version, released after the original post, each date section is independent.