fix: italic plex and scrolling page tabs

Devs need to specify italic variants if they're needed. Documentation added. closes carbon-design-system#135, closes carbon-design-system#134
vpicone · Jun 3, 2019 · b3f67cc · b3f67cc
1 parent 052f8c5
commit b3f67cc
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -102,15 +102,15 @@ siteMetadata: {
 
 ### Additional font weights
 
-If needed, you can add support for additional Plex font weights
+If needed, you can add support for additional Plex font weights. Don't forget to specify italics for the additional weights if needed.
 
 ```js
 __experimentalThemes: [
     {
       resolve: 'gatsby-theme-carbon',
       options: {
 		// will get added to default [300, 400, 600]
-        additionalFontWeights: [200]
+        additionalFontWeights: ['200', '200i]
       },
     },
   ],

diff --git a/packages/example/gatsby-config.js b/packages/example/gatsby-config.js
@@ -21,7 +21,7 @@ module.exports = {
     {
       resolve: 'gatsby-theme-carbon',
       options: {
-        additionalFontWeights: [200],
+        additionalFontWeights: ['200', '200i'],
       },
     },
   ],

diff --git a/packages/gatsby-theme-carbon/gatsby-config.js b/packages/gatsby-theme-carbon/gatsby-config.js
@@ -23,7 +23,15 @@ module.exports = themeOptions => {
           fonts: [
             {
               family: `IBM Plex Sans`,
-              variants: [300, 400, 600, ...additionalFontWeights],
+              variants: [
+                300,
+                '300i',
+                400,
+                '400i',
+                600,
+                '600i',
+                ...additionalFontWeights,
+              ],
             },
             {
               family: `IBM Plex Mono`,

diff --git a/packages/gatsby-theme-carbon/src/components/PageTabs/PageTabs.module.scss b/packages/gatsby-theme-carbon/src/components/PageTabs/PageTabs.module.scss
@@ -14,6 +14,8 @@
   width: 100%;
   list-style: none;
   padding: 0;
+  overflow-x: scroll;
+  scrollbar-width: none;
 }
 
 .list-item {