feat(react-ui): turn on 8px theme by default

packages/react-ui/.creevey/config.js

@@ -12,56 +12,59 @@ const config = {
     chrome: {
       browserName: 'chrome',
       viewport: { width: 1024, height: 720 },
+      storybookUrl: 'http://localhost:6061',
       platformName: 'linux',
       limit: 2,
     },
     chrome8px: {
       browserName: 'chrome',
       viewport: { width: 1024, height: 720 },
-      storybookUrl: 'http://localhost:6061',
+      storybookUrl: 'http://localhost:6060',
       platformName: 'linux',
       limit: 2,
     },
     chromeFlat: {
       browserName: 'chrome',
       viewport: { width: 1024, height: 720 },
-      storybookUrl: 'http://localhost:6062',
+      storybookUrl: 'http://localhost:6063',
       platformName: 'linux',
       limit: 2,
     },
     chromeFlat8px: {
       browserName: 'chrome',
       viewport: { width: 1024, height: 720 },
-      storybookUrl: 'http://localhost:6063',
+      storybookUrl: 'http://localhost:6062',
       platformName: 'linux',
       limit: 2,
     },
     firefox: {
       browserName: 'firefox',
       viewport: { width: 1024, height: 720 },
+      storybookUrl: 'http://localhost:6061',
       limit: 2,
     },
     firefox8px: {
       browserName: 'firefox',
       viewport: { width: 1024, height: 720 },
-      storybookUrl: 'http://localhost:6061',
+      storybookUrl: 'http://localhost:6060',
       limit: 2,
     },
     firefoxFlat: {
       browserName: 'firefox',
       viewport: { width: 1024, height: 720 },
-      storybookUrl: 'http://localhost:6062',
+      storybookUrl: 'http://localhost:6063',
       limit: 2,
     },
     firefoxFlat8px: {
       browserName: 'firefox',
       viewport: { width: 1024, height: 720 },
-      storybookUrl: 'http://localhost:6063',
+      storybookUrl: 'http://localhost:6062',
       limit: 2,
     },
     ie11: {
       browserName: 'internet explorer',
       viewport: { width: 1024, height: 720 },
+      storybookUrl: 'http://localhost:6061',
       limit: 2,
 
       // NOTE Enable after switch new separate pool for IE to allow test hover
@@ -77,19 +80,19 @@ const config = {
     ie118px: {
       browserName: 'internet explorer',
       viewport: { width: 1024, height: 720 },
-      storybookUrl: 'http://localhost:6061',
+      storybookUrl: 'http://localhost:6060',
       limit: 2,
     },
     ie11Flat: {
       browserName: 'internet explorer',
       viewport: { width: 1024, height: 720 },
-      storybookUrl: 'http://localhost:6062',
+      storybookUrl: 'http://localhost:6063',
       limit: 2,
     },
     ie11Flat8px: {
       browserName: 'internet explorer',
       viewport: { width: 1024, height: 720 },
-      storybookUrl: 'http://localhost:6063',
+      storybookUrl: 'http://localhost:6062',
       limit: 2,
     },
   },

packages/react-ui/.storybook/preview.tsx

@@ -46,18 +46,18 @@ addDecorator(story => (
 addDecorator(story => {
   const getTheme = () => {
     switch (true) {
-      case Boolean(process.env.STORYBOOK_8PX):
-        return DEFAULT_THEME_8PX;
-      case Boolean(process.env.STORYBOOK_FLAT_8PX):
+      case Boolean(process.env.STORYBOOK_OLD):
+        return DEFAULT_THEME;
+      case Boolean(process.env.STORYBOOK_FLAT):
         return FLAT_THEME_8PX;
-      case Boolean(process.env.STORYBOOK_FLAT_UI):
+      case Boolean(process.env.STORYBOOK_FLAT_OLD):
         return FLAT_THEME;
       default:
-        return DEFAULT_THEME;
+        return DEFAULT_THEME_8PX;
     }
   };
   const theme = getTheme();
-  if (theme !== DEFAULT_THEME) {
+  if (theme !== DEFAULT_THEME_8PX) {
     return <ThemeContext.Provider value={theme}>{story()}</ThemeContext.Provider>;
   }
   return story();

packages/react-ui/components/Input/__tests__/Input-test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import MaskedInput from 'react-input-mask';
 
-import { DEFAULT_THEME } from '../../../lib/theming/themes/DefaultTheme';
+import { DEFAULT_THEME_8PX } from '../../../lib/theming/themes/DefaultTheme8px';
 import { Input, InputProps } from '../Input';
 import { jsStyles } from '../Input.styles';
 
@@ -46,12 +46,12 @@ describe('<Input />', () => {
 
   it('applies error styles on error prop', () => {
     const wrapper = render({ value: '', error: true });
-    expect(wrapper.find(`.${jsStyles.error(DEFAULT_THEME as any)}`)).toHaveLength(1);
+    expect(wrapper.find(`.${jsStyles.error(DEFAULT_THEME_8PX as any)}`)).toHaveLength(1);
   });
 
   it('applies warning styles on warning prop', () => {
     const wrapper = render({ value: '', warning: true });
-    expect(wrapper.find(`.${jsStyles.warning(DEFAULT_THEME as any)}`)).toHaveLength(1);
+    expect(wrapper.find(`.${jsStyles.warning(DEFAULT_THEME_8PX as any)}`)).toHaveLength(1);
   });
 
   it('applies borderless styles on borderless prop', () => {

packages/react-ui/components/Tabs/__tests__/Tabs-test.tsx

@@ -14,7 +14,7 @@ describe('Tabs', () => {
         </Tabs>,
       );
 
-      expect(wrapper.find(Indicator).instance().state).toMatchObject({ styles: { top: -3, left: 0 } });
+      expect(wrapper.find(Indicator).instance().state).toMatchObject({ styles: { top: -2, left: 0 } });
     });
   });
 

packages/react-ui/internal/ThemePlayground/Playground.tsx

@@ -130,19 +130,19 @@ export class Playground extends React.Component<PlaygroundProps, {}> {
       case ThemeType.Dark:
         return ThemeType.Dark;
       case ThemeType.Flat:
-      case ThemeType.Flat8px:
+      case ThemeType.FlatOld:
         return ThemeType.Flat;
       case ThemeType.Default:
-      case ThemeType.Default8px:
+      case ThemeType.DefaultOld:
       default:
         return ThemeType.Default;
     }
   };
 
   private get is8pxTheme(): boolean {
     switch (this.props.currentThemeType) {
-      case ThemeType.Default8px:
-      case ThemeType.Flat8px:
+      case ThemeType.Default:
+      case ThemeType.Flat:
         return true;
       default:
         return false;
@@ -153,15 +153,15 @@ export class Playground extends React.Component<PlaygroundProps, {}> {
     const { currentThemeType, onThemeChange } = this.props;
     switch (currentThemeType) {
       case ThemeType.Default:
-        onThemeChange(ThemeType.Default8px);
+        onThemeChange(ThemeType.DefaultOld);
         break;
-      case ThemeType.Default8px:
+      case ThemeType.DefaultOld:
         onThemeChange(ThemeType.Default);
         break;
       case ThemeType.Flat:
-        onThemeChange(ThemeType.Flat8px);
+        onThemeChange(ThemeType.FlatOld);
         break;
-      case ThemeType.Flat8px:
+      case ThemeType.FlatOld:
         onThemeChange(ThemeType.Flat);
         break;
     }