fix(react): improve the Code component

wso2 · Nov 2, 2023 · fb4c091 · fb4c091
1 parent 2c9070c
commit fb4c091
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git 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
@@ -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);
+  }
 }