Merge pull request #184 from brionmario/bug-fixes

fix(react): improve the `Code` component
wso2 · Nov 3, 2023 · f635daa · f635daa
2 parents 2735d0e + 1c4c562
commit f635daa
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 7 deletions.
diff --git a/packages/react/src/components/Code/Code.stories.mdx b/packages/react/src/components/Code/Code.stories.mdx
@@ -23,7 +23,7 @@ export const Template = args => <Code {...args} />;
 Use `Code` to present Inline or block code without syntax highlight.
 
 <Canvas>
-  <Story name="Overview" args={{children: 'React.createElement()'}}>
+  <Story name="Overview" args={{children: '@oxygen-ui/react'}}>
     {Template.bind({})}
   </Story>
 </Canvas>
@@ -50,3 +50,22 @@ function Demo() {
   );
 }`}
 />
+
+## Variants
+
+### Outlined
+
+`Code` component with a border.
+
+<Canvas>
+  <Story name="Outlined" args={{outlined: true, children: '@oxygen-ui/react'}} />
+</Canvas>
+
+
+### Transparent
+
+`Code` component without a fill.
+
+<Canvas>
+  <Story name="Transparent" args={{filled: false, children: '@oxygen-ui/react'}} />
+</Canvas>
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/__tests__/Code.test.tsx b/packages/react/src/components/Code/__tests__/Code.test.tsx
@@ -39,4 +39,14 @@ describe('Code', () => {
     const {container} = render(<Code>Code Block</Code>);
     expect(container.firstChild).toHaveTextContent('Code Block');
   });
+
+  it('applies the "filled" style when the "filled" prop is true', () => {
+    const {container} = render(<Code filled>Code Block</Code>);
+    expect(container.firstChild).toHaveClass('filled');
+  });
+
+  it('applies the "outlined" style when the "outlined" prop is true', () => {
+    const {container} = render(<Code outlined>Code Block</Code>);
+    expect(container.firstChild).toHaveClass('outlined');
+  });
 });
diff --git a/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap b/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Code should match the snapshot 1`] = `
 <body>
   <div>
     <code
-      class="MuiTypography-root MuiTypography-body1 oxygen-code css-1qp7oek-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 oxygen-code filled css-1qp7oek-MuiTypography-root"
     >
       Code Block
     </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);
+  }
 }
diff --git a/packages/react/src/models/theme.ts b/packages/react/src/models/theme.ts
@@ -57,6 +57,9 @@ declare module '@mui/material/styles' {
           background: string;
         };
       };
+      Code: {
+        background: string;
+      };
       Footer: {
         background: string;
       };

diff --git a/packages/react/src/theme/default-theme.ts b/packages/react/src/theme/default-theme.ts
@@ -33,6 +33,9 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial<
               background: 'var(--oxygen-palette-background-paper)',
             },
           },
+          Code: {
+            background: '#2c2e33',
+          },
           Footer: {
             background: '#000000',
           },
@@ -64,6 +67,9 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial<
               background: 'var(--oxygen-palette-background-paper)',
             },
           },
+          Code: {
+            background: '#eef0f1',
+          },
           Footer: {
             background: '#f7f8fb',
           },
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ exports[`Code should match the snapshot 1`] = ` @@
     <body>
       <div>
         <code
-          class="MuiTypography-root MuiTypography-body1 oxygen-code css-1qp7oek-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 oxygen-code filled css-1qp7oek-MuiTypography-root"
         >
           Code Block
         </code>
@@ Expand Down @@