feat(code): grid fix

carbon-design-system · May 16, 2019 · 4f33393 · 4f33393
1 parent db5449d
commit 4f33393
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 17 deletions.
diff --git a/packages/gatsby-theme-carbon/src/components/Code/Code.js b/packages/gatsby-theme-carbon/src/components/Code/Code.js
@@ -6,6 +6,7 @@ import { CodeSnippet } from 'carbon-components-react';
 import 'prismjs/components/prism-bash';
 import 'prismjs/components/prism-scss'; */
 import { CopyToClipboard } from 'react-copy-to-clipboard/lib/Component';
+import { Row } from '../Grid';
 import { settings } from 'carbon-components';
 
 const { prefix } = settings;
@@ -45,16 +46,18 @@ export default class Code extends React.Component {
     }
 
     return (
-      <div className={`${prefix}--snippet--website`}>
-        <CopyToClipboard
-          text={textToCopy}
-          onCopy={() => this.setState({ copied: true })}
-        >
-          <CodeSnippet type={type}>
-            <div ref={element => (this.codeRef = element)}>{children}</div>
-          </CodeSnippet>
-        </CopyToClipboard>
-      </div>
+      <Row>
+        <div className={`${prefix}--snippet--website`}>
+          <CopyToClipboard
+            text={textToCopy}
+            onCopy={() => this.setState({ copied: true })}
+          >
+            <CodeSnippet type={type}>
+              <div ref={element => (this.codeRef = element)}>{children}</div>
+            </CodeSnippet>
+          </CopyToClipboard>
+        </div>
+      </Row>
     );
   }
 }
diff --git a/packages/gatsby-theme-carbon/src/components/Code/_code.scss b/packages/gatsby-theme-carbon/src/components/Code/_code.scss
@@ -20,20 +20,14 @@ td > code {
 .#{$prefix}--snippet--website {
   @include carbon--type-style('code-02');
   margin-bottom: $spacing-06;
+  width: 100%;
 
   // 8 columns wide
   @include carbon--breakpoint('lg') {
     width: 66.667%;
   }
 }
 
-// If code is inside a user specified row then allow the grid code to set the width
-.#{$prefix}--row .#{$prefix}--snippet--website {
-  @include carbon--breakpoint('lg') {
-    width: 100%;
-  }
-}
-
 .#{$prefix}--snippet--website code pre {
   @include carbon--type-style('code-02');
   font-family: $font-family-mono;