chore: bem naming for code editor

stoplightio · Apr 13, 2020 · 4fea9af · 4fea9af
1 parent 24fbd2c
commit 4fea9af
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 11 deletions.
diff --git a/src/CodeEditor/index.tsx b/src/CodeEditor/index.tsx
@@ -2,6 +2,7 @@ import cn from 'classnames';
 import * as React from 'react';
 import ReactSimpleCodeEditor from 'react-simple-code-editor';
 
+import { Classes } from '../classes';
 import { highlightCode } from './utils/highlightCode';
 
 /**
@@ -41,8 +42,8 @@ const CodeEditor = React.forwardRef<ReactSimpleCodeEditor, ICodeEditorProps>((pr
       {...rest}
       // @ts-ignore FIXME type error
       ref={ref}
-      className={cn(className, 'bp3-code-editor', {
-        'line-numbers': showLineNumbers,
+      className={cn(Classes.CODE_EDITOR, className, {
+        [`${Classes.CODE_EDITOR}--line-numbers`]: showLineNumbers,
       })}
       style={style}
       placeholder={placeholder}

diff --git a/src/CodeViewer/__tests__/Viewer.spec.tsx b/src/CodeViewer/__tests__/Viewer.spec.tsx
@@ -12,7 +12,7 @@ describe('Code Viewer component', () => {
 
     const wrapper = mount(<CodeViewer language={language} value={code} inline />);
     expect(wrapper).toHaveHTML(
-      `<code class="bp3-code-editor isInline"><span class="token punctuation">{</span><span class="token punctuation">}</span></code>`,
+      `<code class="CodeEditor CodeEditor--inline"><span class="token punctuation">{</span><span class="token punctuation">}</span></code>`,
     );
   });
 
@@ -22,14 +22,14 @@ describe('Code Viewer component', () => {
 
     const wrapper = mount(<CodeViewer language={language} value={code} />);
     expect(wrapper).toHaveHTML(
-      `<pre class="bp3-code-editor language-json"><span class="token punctuation">{</span><span class="token punctuation">}</span></pre>`,
+      `<pre class="CodeEditor language-json"><span class="token punctuation">{</span><span class="token punctuation">}</span></pre>`,
     );
   });
 
   it('renders parsed markup if possible', () => {
     const code = 'function';
     const language = 'javascript';
-    const html = `<pre class="bp3-code-editor language-javascript"><span class="token keyword">function</span></pre>`;
+    const html = `<pre class="CodeEditor language-javascript"><span class="token keyword">function</span></pre>`;
 
     const wrapper = mount(<CodeViewer language={language} value={code} />);
     expect(wrapper).toHaveHTML(html);

diff --git a/src/CodeViewer/index.tsx b/src/CodeViewer/index.tsx
@@ -36,8 +36,8 @@ const CodeViewer: React.FunctionComponent<ICodeViewerProps> = ({
     return (
       <code
         className={cn(Classes.CODE_EDITOR, className, {
-          isInline: inline,
-          'line-numbers': showLineNumbers,
+          [`${Classes.CODE_EDITOR}--inline`]: inline,
+          [`${Classes.CODE_EDITOR}--line-numbers`]: showLineNumbers,
         })}
         {...rest}
         dangerouslySetInnerHTML={{ __html: code }}
@@ -48,8 +48,8 @@ const CodeViewer: React.FunctionComponent<ICodeViewerProps> = ({
   return (
     <pre
       className={cn(Classes.CODE_EDITOR, className, `language-${lang || 'unknown'}`, {
-        isInline: inline,
-        'line-numbers': showLineNumbers,
+        [`${Classes.CODE_EDITOR}--inline`]: inline,
+        [`${Classes.CODE_EDITOR}--line-numbers`]: showLineNumbers,
       })}
       {...(rest as React.HTMLAttributes<HTMLPreElement>)}
       dangerouslySetInnerHTML={{ __html: code }}

diff --git a/src/classes.ts b/src/classes.ts
@@ -11,11 +11,10 @@ const NS = process.env.BLUEPRINT_NAMESPACE || 'bp3';
 export const Classes = {
   ...BPClasses,
   NS,
-  CODE_EDITOR: `${NS}-code-editor`,
+  CODE_EDITOR: 'CodeEditor',
   SIMPLE_TAB: `${NS}-simple-tab`,
   SIMPLE_TAB_LIST: `${NS}-simple-tab-list`,
   SIMPLE_TAB_PANEL: `${NS}-simple-tab-panel`,
   SCROLL_TRACK: `${NS}-scroll-track`,
   SCROLL_THUMB: `${NS}-scroll-thumb`,
-  SCROLL_CONTAINER: `${NS}-scroll-container`,
 };
diff --git a/src/styles/components/ScrollContainer/_base.scss b/src/styles/components/ScrollContainer/_base.scss
@@ -5,3 +5,9 @@
     display: none; /* Chrome, Safari, Opera */
   }
 }
+
+.ScrollbarsCustom-Content {
+  > div {
+    position: relative;
+  }
+}