From fb4c091f88af78dd26ec8decbbc31f1ed857b262 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 2 Nov 2023 17:48:52 +0530
Subject: [PATCH] fix(react): improve the `Code` component

---
 packages/react/src/components/Code/Code.tsx  | 22 +++++++++++++++++---
 packages/react/src/components/Code/code.scss | 11 ++++++++--
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/Code/Code.tsx b/packages/react/src/components/Code/Code.tsx
index 821cc62d..cbfa6a04 100644
--- a/packages/react/src/components/Code/Code.tsx
+++ b/packages/react/src/components/Code/Code.tsx
@@ -24,15 +24,28 @@ import {composeComponentDisplayName} from '../../utils';
 import './code.scss';
 
 export type CodeProps<C extends ElementType = ElementType> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
   component?: C;
+  /**
+   * Shows the code block with a filled background.
+   * @default true
+   */
+  filled?: boolean;
+  /**
+   * Renders the code block with an outline.
+   * @default false
+   */
+  outlined?: boolean;
 } & Omit<MuiTypographyProps<C>, 'component'>;
 
 const COMPONENT_NAME: string = 'Code';
 
 const Code: FC<CodeProps> & WithWrapperProps = <C extends ElementType>(props: CodeProps<C>): ReactElement => {
-  const {className, children, ...rest} = props;
+  const {className, children, filled, outlined, ...rest} = props;
 
-  const classes: string = clsx('oxygen-code', className);
+  const classes: string = clsx('oxygen-code', {filled, outlined}, className);
 
   return (
     <MuiTypography component="code" className={classes} {...rest}>
@@ -43,6 +56,9 @@ const Code: FC<CodeProps> & WithWrapperProps = <C extends ElementType>(props: Co
 
 Code.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Code.muiName = COMPONENT_NAME;
-Code.defaultProps = {};
+Code.defaultProps = {
+  filled: true,
+  outlined: false,
+};
 
 export default Code;
diff --git a/packages/react/src/components/Code/code.scss b/packages/react/src/components/Code/code.scss
index cd03436c..124798fc 100644
--- a/packages/react/src/components/Code/code.scss
+++ b/packages/react/src/components/Code/code.scss
@@ -18,8 +18,15 @@
 
 .oxygen-code {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: inherit;
   padding: 1px 3px;
-  background-color: var(--oxygen-palette-action-selected);
   border-radius: 5px;
-  border: 1px solid var(--oxygen-palette-divider);
+
+  &.filled {
+    background-color: var(--oxygen-palette-customComponents-Code-background);
+  }
+
+  &.outlined {
+    border: 1px solid var(--oxygen-palette-divider);
+  }
 }