Browse Source

M3-1860 Upgrade @material-ui@v3.5.1 (#4102)

* Add feature/ to allowed branch names.

* Upgrade @material-ui/icon@^3.0.1 (#4103)

* M3-1859 Create passthrough components (#4104)

* Create common abstraction for core/styles.

* Correct bad imports of @material-ui/core

* Create abstractions for @material-ui/core components.

* Point components to new @material0-ui/core abstractions.

* Upgrade @material-ui/core. (#4107)

* Upgrade @material-ui/core.

* Remove unnecessary withTheme.

* Resolve TextField prop issues.

* Remove defunct tooltip styling.

* Repaired failing storybook tests in HelpIcon.spec.js
Robert Stires 1 year ago
parent
commit
fb595b4a81
100 changed files with 487 additions and 695 deletions
  1. 2 2
      package.json
  2. 1 1
      scripts/pre-push.sh
  3. 4 10
      src/App.tsx
  4. 3 5
      src/GDPRNotification.tsx
  5. 1 3
      src/LinodeThemeWrapper.tsx
  6. 2 4
      src/UserAgentNotification.tsx
  7. 6 9
      src/WelcomeBanner.tsx
  8. 6 8
      src/components/AccessPanel/AccessPanel.tsx
  9. 7 7
      src/components/ActionMenu/ActionMenu.tsx
  10. 2 4
      src/components/ActionsPanel/ActionsPanel.tsx
  11. 7 13
      src/components/Breadcrumb/Breadcrumb.tsx
  12. 4 9
      src/components/Breadcrumb/LabelText.tsx
  13. 6 10
      src/components/Button/Button.tsx
  14. 3 6
      src/components/Button/button.stories.tsx
  15. 3 5
      src/components/CheckBox/CheckBox.tsx
  16. 6 7
      src/components/CheckoutBar/CheckoutBar.tsx
  17. 5 6
      src/components/CircleProgress/CircleProgress.tsx
  18. 2 5
      src/components/ConfirmationDialog/ConfirmationDialog.stories.tsx
  19. 7 8
      src/components/ConfirmationDialog/ConfirmationDialog.tsx
  20. 5 5
      src/components/CopyTooltip/CopyTooltip.tsx
  21. 2 2
      src/components/DateTimeDisplay/DateTimeDisplay.stories.tsx
  22. 6 11
      src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx
  23. 1 1
      src/components/DisplayPrice/DisplayPrice.test.tsx
  24. 4 5
      src/components/DisplayPrice/DisplayPrice.tsx
  25. 5 5
      src/components/DocsSidebar/DocComponent.tsx
  26. 4 7
      src/components/DocsSidebar/DocsSidebar.tsx
  27. 1 1
      src/components/Drawer/Drawer.stories.tsx
  28. 8 8
      src/components/Drawer/Drawer.tsx
  29. 1 1
      src/components/EditableText/EditableText.stories.tsx
  30. 17 16
      src/components/EditableText/EditableText.tsx
  31. 9 12
      src/components/EnhancedSelect/EnhancedSelect.tsx
  32. 4 6
      src/components/EnhancedSelect/Select.tsx
  33. 3 5
      src/components/EnhancedSelect/components/DropdownIndicator.tsx
  34. 3 6
      src/components/EnhancedSelect/components/LoadingIndicator.tsx
  35. 3 3
      src/components/EnhancedSelect/components/MultiValue.tsx
  36. 4 6
      src/components/EnhancedSelect/components/NoOptionsMessage.tsx
  37. 5 6
      src/components/EnhancedSelect/components/SelectPlaceholder.tsx
  38. 5 7
      src/components/ErrorState/ErrorState.tsx
  39. 1 3
      src/components/EventListItem/EventListItem.stories.tsx
  40. 4 5
      src/components/EventListItem/EventListItem.tsx
  41. 1 3
      src/components/ExpansionPanel/ExpansionPanel.stories.tsx
  42. 8 10
      src/components/ExpansionPanel/ExpansionPanel.tsx
  43. 3 5
      src/components/ExternalLink/ExternalLink.tsx
  44. 1 3
      src/components/Grid/Grid.tsx
  45. 5 11
      src/components/HelpIcon/HelpIcon.spec.js
  46. 8 41
      src/components/HelpIcon/HelpIcon.tsx
  47. 4 5
      src/components/IconButton/IconButton.tsx
  48. 4 5
      src/components/IconTextLink/IconTextLink.tsx
  49. 3 6
      src/components/LabelAndTagsPanel/LabelAndTagsPanel.tsx
  50. 2 4
      src/components/LineGraph/LineGraph.tsx
  51. 4 5
      src/components/LinearProgress/LinearProgress.tsx
  52. 3 3
      src/components/LoadingText.tsx
  53. 5 6
      src/components/MenuItem/MenuItem.tsx
  54. 7 10
      src/components/Notice/Notice.tsx
  55. 2 4
      src/components/PaginationControls/PageButton.tsx
  56. 3 7
      src/components/PaginationFooter/PaginationFooter.tsx
  57. 2 4
      src/components/PanelErrorBoundary/PanelErrorBoundary.tsx
  58. 45 47
      src/components/PasswordInput/HideShowText.tsx
  59. 6 7
      src/components/PasswordInput/PasswordInput.tsx
  60. 3 5
      src/components/PasswordInput/StrengthIndicator.tsx
  61. 4 6
      src/components/Placeholder/Placeholder.tsx
  62. 5 7
      src/components/PrimaryNav/PrimaryNav.tsx
  63. 2 4
      src/components/PrimaryNav/ThemeToggle.tsx
  64. 3 5
      src/components/ProductNotification/ProductNotification.tsx
  65. 2 4
      src/components/Radio/Radio.stories.tsx
  66. 3 5
      src/components/Radio/Radio.tsx
  67. 4 6
      src/components/RenderGuard.tsx
  68. 3 6
      src/components/Select/Select.stories.tsx
  69. 9 11
      src/components/Select/Select.tsx
  70. 2 4
      src/components/SelectRegionPanel/SelectRegionPanel.tsx
  71. 6 8
      src/components/SelectionCard/SelectionCard.tsx
  72. 5 7
      src/components/SelectionRow/SelectionRow.tsx
  73. 4 5
      src/components/ShowMore/ShowMore.tsx
  74. 1 3
      src/components/ShowMoreExpansion/ShowMoreExpansion.stories.tsx
  75. 8 7
      src/components/ShowMoreExpansion/ShowMoreExpansion.tsx
  76. 9 9
      src/components/SideMenu.tsx
  77. 3 4
      src/components/SkeletonScreen/SkeletonScreen.tsx
  78. 7 9
      src/components/TabbedPanel/TabbedPanel.tsx
  79. 4 7
      src/components/Table/Table.stories.tsx
  80. 3 4
      src/components/Table/Table.tsx
  81. 6 7
      src/components/TableCell/TableCell.tsx
  82. 4 4
      src/components/TableHeader/TableHeader.tsx
  83. 8 12
      src/components/TableRow/TableRow.tsx
  84. 5 6
      src/components/TableRowEmptyState/TableRowEmptyState.tsx
  85. 5 7
      src/components/TableRowError/TableRowError.tsx
  86. 5 7
      src/components/TableRowLoading/TableRowLoading.tsx
  87. 5 6
      src/components/TableSortCell/TableSortCell.tsx
  88. 9 9
      src/components/Tag/Tag.stories.tsx
  89. 11 11
      src/components/Tag/Tag.tsx
  90. 2 4
      src/components/Tags/Tags.tsx
  91. 13 23
      src/components/TagsPanel/TagsPanel.tsx
  92. 3 10
      src/components/TagsPanel/TagsPanelItem.tsx
  93. 8 19
      src/components/TextField.tsx
  94. 3 5
      src/components/Tile/Tile.tsx
  95. 1 3
      src/components/Toggle/Toggle.stories.tsx
  96. 3 7
      src/components/Toggle/Toggle.tsx
  97. 6 0
      src/components/core/AppBar.ts
  98. 6 0
      src/components/core/Button.ts
  99. 6 0
      src/components/core/ButtonBase.ts
  100. 0 0
      src/components/core/Card.ts

+ 2 - 2
package.json

@@ -16,8 +16,8 @@
     "url": "https://github.com/Linode/manager.git"
   },
   "dependencies": {
-    "@material-ui/core": "^1.2.2",
-    "@material-ui/icons": "^1.1.0",
+    "@material-ui/core": "^3.5.1",
+    "@material-ui/icons": "^3.0.1",
     "@types/algoliasearch": "^3.27.5",
     "@types/qrcode.react": "^0.8.0",
     "@types/react-select": "^2.0.2",

+ 1 - 1
scripts/pre-push.sh

@@ -2,7 +2,7 @@
 
 # Confirm Branch includes M3 Ticket
 BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD)
-BRANCH_INCLUDES_TICKET=$(git rev-parse --abbrev-ref HEAD | egrep -i '(M3-[0-9]*)|develop|master|release-.*')
+BRANCH_INCLUDES_TICKET=$(git rev-parse --abbrev-ref HEAD | egrep -i '(M3-[0-9]*)|feature|develop|master|release-.*')
 RED='\033[0;31m'
 
 if [ $BRANCH_INCLUDES_TICKET ]

+ 4 - 10
src/App.tsx

@@ -6,9 +6,7 @@ import { Redirect, Route, RouteProps, Switch } from 'react-router-dom';
 import { Sticky, StickyContainer, StickyProps } from 'react-sticky';
 import { compose } from 'redux';
 import { Subscription } from 'rxjs/Subscription';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 import DefaultLoader from 'src/components/DefaultLoader';
 import DocsSidebar from 'src/components/DocsSidebar';
 import { DocumentTitleSegment, withDocumentTitleProvider } from 'src/components/DocumentTitle';
@@ -17,27 +15,23 @@ import NotFound from 'src/components/NotFound';
 import SideMenu from 'src/components/SideMenu';
 import { RegionsProvider, WithRegionsContext } from 'src/context/regions';
 import { TypesProvider, WithTypesContext } from 'src/context/types';
-
+import { events$ } from 'src/events';
 import BackupDrawer from 'src/features/Backups';
 import Footer from 'src/features/Footer';
+import TheApplicationIsOnFire from 'src/features/TheApplicationIsOnFire';
 import ToastNotifications from 'src/features/ToastNotifications';
 import { sendToast } from 'src/features/ToastNotifications/toasts';
 import TopMenu from 'src/features/TopMenu';
 import VolumeDrawer from 'src/features/Volumes/VolumeDrawer';
-
 import { getDeprecatedLinodeTypes, getLinodeTypes } from 'src/services/linodes';
 import { getRegions } from 'src/services/misc';
 import { requestNotifications } from 'src/store/reducers/notifications';
 import { requestAccountSettings } from 'src/store/reducers/resources/accountSettings';
 import { requestProfile } from 'src/store/reducers/resources/profile';
-
-import TheApplicationIsOnFire from 'src/features/TheApplicationIsOnFire';
 import composeState from 'src/utilities/composeState';
 import { notifications, theme as themeStorage } from 'src/utilities/storage';
 import WelcomeBanner from 'src/WelcomeBanner';
 
-import { events$ } from 'src/events';
-
 shim(); // allows for .finally() usage
 
 const Account = DefaultLoader({
@@ -446,7 +440,7 @@ const mapStateToProps: MapStateToProps<StateProps, Props, ApplicationState> = (s
 
 export const connected = connect(mapStateToProps, mapDispatchToProps);
 
-export const styled = withStyles(styles, { withTheme: true });
+export const styled = withStyles(styles);
 
 export default compose(
   connected,

+ 3 - 5
src/GDPRNotification.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-
 import Button from 'src/components/Button';
 import ConfirmationDialog from 'src/components/ConfirmationDialog';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Typography from 'src/components/core/Typography';
 
 type ClassNames = 'root';
 
@@ -37,6 +35,6 @@ class GDPRNotification extends React.PureComponent<CombinedProps, {}> {
   }
 }
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 export default styled(GDPRNotification);

+ 1 - 3
src/LinodeThemeWrapper.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
-
-import { MuiThemeProvider } from '@material-ui/core/styles';
-
+import { MuiThemeProvider } from 'src/components/core/styles';
 import { dark, light } from 'src/themes';
 import { theme as themeStorage } from 'src/utilities/storage';
 

+ 2 - 4
src/UserAgentNotification.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
 import Button from 'src/components/Button';
 import ConfirmationDialog from 'src/components/ConfirmationDialog';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
 type ClassNames = 'root';
 
@@ -39,6 +37,6 @@ class UserAgentNotification extends React.Component<CombinedProps, {}> {
   }
 }
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 export default styled(UserAgentNotification);

+ 6 - 9
src/WelcomeBanner.tsx

@@ -1,17 +1,14 @@
 import { compose } from 'ramda';
 import * as React from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-
-import Button from 'src/components/Button';
-import ConfirmationDialog from 'src/components/ConfirmationDialog';
-import Grid from 'src/components/Grid';
-
 import Mobile from 'src/assets/icons/mobile.svg';
 import Resource from 'src/assets/icons/resource.svg';
 import Streamline from 'src/assets/icons/streamline.svg';
+import Button from 'src/components/Button';
+import ConfirmationDialog from 'src/components/ConfirmationDialog';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Typography from 'src/components/core/Typography';
+import Grid from 'src/components/Grid';
 import { storage } from 'src/utilities/storage';
 
 type ClassNames = 'dialog'
@@ -141,7 +138,7 @@ class WelcomeBanner extends React.Component<CombinedProps, {}> {
   }
 };
 
-const styled = withStyles<ClassNames>(styles, { withTheme: true });
+const styled = withStyles<ClassNames>(styles);
 
 const enhanced = compose<any, any, any>(
   withRouter,

+ 6 - 8
src/components/AccessPanel/AccessPanel.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
-
-import Paper from '@material-ui/core/Paper';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import TableBody from '@material-ui/core/TableBody';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-
 import CheckBox from 'src/components/CheckBox';
+import Paper from 'src/components/core/Paper';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import TableBody from 'src/components/core/TableBody';
+import TableHead from 'src/components/core/TableHead';
+import TableRow from 'src/components/core/TableRow';
 import Notice from 'src/components/Notice';
 import PasswordInput from 'src/components/PasswordInput';
 import RenderGuard from 'src/components/RenderGuard';
@@ -54,7 +52,7 @@ const styles: StyleRulesCallback<ClassNames> = (theme) => ({
   },
 });
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 export interface Disabled {
   disabled: boolean;

+ 7 - 7
src/components/ActionMenu/ActionMenu.tsx

@@ -1,10 +1,8 @@
-import * as React from 'react';
-
-import IconButton from '@material-ui/core/IconButton';
-import Menu from '@material-ui/core/Menu';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
 import MoreHoriz from '@material-ui/icons/MoreHoriz';
-
+import * as React from 'react';
+import IconButton from 'src/components/core/IconButton';
+import Menu from 'src/components/core/Menu';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 import MenuItem from 'src/components/MenuItem';
 
 export interface Action {
@@ -154,4 +152,6 @@ class ActionMenu extends React.Component<CombinedProps, State> {
   }
 }
 
-export default withStyles(styles, { withTheme: true })<Props>(ActionMenu);
+const styled = withStyles(styles);
+
+export default styled(ActionMenu);

+ 2 - 4
src/components/ActionsPanel/ActionsPanel.tsx

@@ -1,9 +1,7 @@
 import * as classNames from 'classnames';
 import { compose } from 'ramda';
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 import RenderGuard from 'src/components/RenderGuard';
 
 type ClassNames = 'root';
@@ -45,7 +43,7 @@ const ActionPanel: React.StatelessComponent<CombinedProps> = (props) => {
   );
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 export default compose<any, any, any>(
   styled,

+ 7 - 13
src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,16 +1,10 @@
+import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import { LocationDescriptor } from 'history';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-
-import IconButton from '@material-ui/core/IconButton';
-import {
-  StyleRulesCallback,
-  withStyles,
-  WithStyles,
-} from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
-
+import IconButton from 'src/components/core/IconButton';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Typography from 'src/components/core/Typography';
 import EditableText from 'src/components/EditableText';
 import LabelText from './LabelText';
 
@@ -110,7 +104,7 @@ export const Breadcrumb: React.StatelessComponent<CombinedProps> = (props) => {
         ?
         <EditableText
           role="header"
-          variant="headline"
+          typeVariant="h6"
           text={labelTitle}
           errorText={props.onEditHandlers!.errorText}
           onEdit={props.onEditHandlers!.onEdit}
@@ -129,5 +123,5 @@ export const Breadcrumb: React.StatelessComponent<CombinedProps> = (props) => {
   );
 }
 
-const styled = withStyles(styles, { withTheme: true });
-export default styled<Props>(Breadcrumb);
+const styled = withStyles(styles);
+export default styled(Breadcrumb);

+ 4 - 9
src/components/Breadcrumb/LabelText.tsx

@@ -1,12 +1,7 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-
-import {
-  StyleRulesCallback,
-  withStyles,
-  WithStyles,
-} from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Typography from 'src/components/core/Typography';
 
 type ClassNames = 'root' | 'labelTitle' | 'labelSubtitle' | 'underlineOnHover';
 
@@ -65,5 +60,5 @@ export const LabelText: React.StatelessComponent<CombinedProps> = (props) => {
   );
 };
 
-const styled = withStyles(styles, { withTheme: true });
-export default styled<Props>(LabelText);
+const styled = withStyles(styles);
+export default styled(LabelText);

+ 6 - 10
src/components/Button/Button.tsx

@@ -1,13 +1,10 @@
 import * as classNames from 'classnames';
 import { always, cond, propEq } from 'ramda';
 import * as React from 'react';
-
-import Button, { ButtonProps } from '@material-ui/core/Button';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
-import HelpIcon from 'src/components/HelpIcon';
-
 import Reload from 'src/assets/icons/reload.svg';
+import Button, { ButtonProps } from 'src/components/core/Button';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import HelpIcon from 'src/components/HelpIcon';
 
 type ClassNames = 'root'
   | 'loading'
@@ -131,7 +128,6 @@ const getColor = cond([
 
 const wrappedButton: React.StatelessComponent<CombinedProps> = (props) => {
   const {
-    theme,
     classes,
     loading,
     destructive,
@@ -161,7 +157,7 @@ const wrappedButton: React.StatelessComponent<CombinedProps> = (props) => {
           className,
         )}
       >
-        {loading && <Reload />} 
+        {loading && <Reload />}
         <span className={loading ? classes.hidden : classes.reg}>{props.children}</span>
         {type === 'remove' && 'Remove'}
       </Button>
@@ -170,6 +166,6 @@ const wrappedButton: React.StatelessComponent<CombinedProps> = (props) => {
   );
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default styled<Props>(wrappedButton);
+export default styled(wrappedButton);

+ 3 - 6
src/components/Button/button.stories.tsx

@@ -1,12 +1,9 @@
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-
-import { default as MDivider } from '@material-ui/core/Divider';
 import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';
 import KeyboardArrowUp from '@material-ui/icons/KeyboardArrowUp';
-
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
 import Button from 'src/components/Button';
-
+import { default as MDivider } from 'src/components/core/Divider';
 import ThemeDecorator from '../../utilities/storybookDecorators';
 
 const Divider = () => <MDivider style={{ marginBottom: '8px', marginTop: '8px' }} />;

+ 3 - 5
src/components/CheckBox/CheckBox.tsx

@@ -1,11 +1,9 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
-
-import Checkbox, { CheckboxProps } from '@material-ui/core/Checkbox';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
 import CheckboxIcon from 'src/assets/icons/checkbox.svg';
 import CheckboxCheckedIcon from 'src/assets/icons/checkboxChecked.svg';
+import Checkbox, { CheckboxProps } from 'src/components/core/Checkbox';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
 type CSSClasses =
   'root'
@@ -95,4 +93,4 @@ const LinodeCheckBox: React.StatelessComponent<FinalProps> = (props) => {
   );
 };
 
-export default withStyles(styles, { withTheme: true })(LinodeCheckBox);
+export default withStyles(styles)(LinodeCheckBox);

+ 6 - 7
src/components/CheckoutBar/CheckoutBar.tsx

@@ -1,14 +1,11 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
 import { StickyProps } from 'react-sticky';
-
-import Button from '@material-ui/core/Button';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-
+import Button from 'src/components/core/Button';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Typography from 'src/components/core/Typography';
 import DisplayPrice from 'src/components/DisplayPrice';
 
-
 type ClassNames = 'root'
   | 'checkoutSection'
   | 'noBorder'
@@ -143,4 +140,6 @@ class CheckoutBar extends React.Component<CombinedProps> {
   }
 }
 
-export default withStyles(styles, { withTheme: true })<Props>(CheckoutBar);
+const styled = withStyles(styles);
+
+export default styled(CheckoutBar);

+ 5 - 6
src/components/CircleProgress/CircleProgress.tsx

@@ -1,8 +1,7 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
-
-import CircularProgress, { CircularProgressProps } from '@material-ui/core/CircularProgress';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
+import CircularProgress, { CircularProgressProps } from 'src/components/core/CircularProgress';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
 type CSSClasses = 'root'
 | 'top'
@@ -138,13 +137,13 @@ const circleProgressComponent: React.StatelessComponent<CombinedProps> = (props)
           data-qa-circle-progress={value}
         />
       </div>
-      : <CircularProgress 
+      : <CircularProgress
           className={classes.mini}
           data-qa-circle-progress
         />
   );
 };
 
-const decorate = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default decorate<Props>(circleProgressComponent);
+export default styled(circleProgressComponent);

+ 2 - 5
src/components/ConfirmationDialog/ConfirmationDialog.stories.tsx

@@ -1,11 +1,8 @@
-import * as React from 'react';
-
-import Button from '@material-ui/core/Button';
 import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
-
+import * as React from 'react';
 import ActionsPanel from 'src/components/ActionsPanel';
-
+import Button from 'src/components/core/Button';
 import ThemeDecorator from '../../utilities/storybookDecorators';
 import ConfirmationDialog from './ConfirmationDialog';
 

+ 7 - 8
src/components/ConfirmationDialog/ConfirmationDialog.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
-
-import Dialog, { DialogProps } from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
+import Dialog, { DialogProps } from 'src/components/core/Dialog';
+import DialogActions from 'src/components/core/DialogActions';
+import DialogContent from 'src/components/core/DialogContent';
+import DialogContentText from 'src/components/core/DialogContentText';
+import DialogTitle from 'src/components/core/DialogTitle';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
 type ClassNames = 'root' | 'error' | 'actions';
 
@@ -58,6 +57,6 @@ const ConfirmationDialog: React.StatelessComponent<CombinedProps> = (props) => {
   );
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 export default styled(ConfirmationDialog);

+ 5 - 5
src/components/CopyTooltip/CopyTooltip.tsx

@@ -1,9 +1,9 @@
+
+import FileCopy from '@material-ui/icons/FileCopy';
 import * as classNames from 'classnames';
 import * as copy from 'copy-to-clipboard';
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import ContentCopy from '@material-ui/icons/ContentCopy';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
 interface Props {
   text: string;
@@ -104,12 +104,12 @@ class CopyTooltip extends React.Component<CombinedProps, State> {
         })}
       >
         {copied && <span className={classes.copied} data-qa-copied>copied</span>}
-        <ContentCopy />
+        <FileCopy />
       </a>
     );
   }
 }
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 export default styled(CopyTooltip);

+ 2 - 2
src/components/DateTimeDisplay/DateTimeDisplay.stories.tsx

@@ -2,8 +2,8 @@ import { storiesOf } from '@storybook/react';
 import * as moment from 'moment-timezone';
 import * as React from 'react';
 
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from 'src/components/core/FormControlLabel';
+import RadioGroup from 'src/components/core/RadioGroup';
 
 import Radio from 'src/components/Radio';
 

+ 6 - 11
src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx

@@ -1,16 +1,11 @@
-import * as React from 'react';
-
-import * as ClassNames from 'classnames';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
-import InputAdornment from '@material-ui/core/InputAdornment';
 import Search from '@material-ui/icons/Search';
-
-import { debounce } from 'throttle-debounce';
-
+import * as ClassNames from 'classnames';
+import * as React from 'react';
 import CircleProgress from 'src/components/CircleProgress';
+import InputAdornment from 'src/components/core/InputAdornment';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 import TextField from 'src/components/TextField';
+import { debounce } from 'throttle-debounce';
 
 type ClassNames = 'root' | 'searchIcon';
 
@@ -89,6 +84,6 @@ class DebouncedSearchTextField extends React.Component<CombinedProps, State> {
   }
 }
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 export default styled(DebouncedSearchTextField);

+ 1 - 1
src/components/DisplayPrice/DisplayPrice.test.tsx

@@ -1,7 +1,7 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 
-import Typography from '@material-ui/core/Typography';
+import Typography from 'src/components/core/Typography';
 
 import { DisplayPrice, displayPrice } from './DisplayPrice';
 

+ 4 - 5
src/components/DisplayPrice/DisplayPrice.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
-
-import { StyleRulesCallback, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
+import { StyleRulesCallback, Theme, withStyles, WithStyles } from 'src/components/core/styles';
+import Typography from 'src/components/core/Typography';
 
 type ClassNames = 'root' | 'price' | 'per';
 
@@ -44,6 +43,6 @@ export const DisplayPrice: React.StatelessComponent<CombinedProps> = (props) =>
   );
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default styled<Props>(DisplayPrice);
+export default styled(DisplayPrice);

+ 5 - 5
src/components/DocsSidebar/DocComponent.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Typography from 'src/components/core/Typography';
 import truncateText from 'src/utilities/truncateText';
 
 export interface Doc {
@@ -60,4 +58,6 @@ class DocComponent extends React.PureComponent<PropsWithStyles> {
   }
 }
 
-export default withStyles(styles, { withTheme: true })<PropsWithStyles>(DocComponent);
+const styled = withStyles(styles);
+
+export default styled(DocComponent);

+ 4 - 7
src/components/DocsSidebar/DocsSidebar.tsx

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import { StickyProps } from 'react-sticky';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Typography from 'src/components/core/Typography';
 import Grid from 'src/components/Grid';
 import { BackupsCTA } from 'src/features/Backups';
-
 import DocComponent, { Doc } from './DocComponent';
 
 type ClassNames = 'root'
@@ -40,7 +37,7 @@ interface Props {
 
 type CombinedProps = Props & StickyProps & WithStyles<ClassNames>;
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 const DocsSidebar: React.StatelessComponent<CombinedProps> = (props) =>  {
   const { backupsCTA, classes, docs, style, isSticky } = props;
@@ -81,4 +78,4 @@ const DocsSidebar: React.StatelessComponent<CombinedProps> = (props) =>  {
   );
 }
 
-export default styled<Props>(DocsSidebar);
+export default styled(DocsSidebar);

+ 1 - 1
src/components/Drawer/Drawer.stories.tsx

@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 
-import Button from '@material-ui/core/Button';
+import Button from 'src/components/core/Button';
 
 import ThemeDecorator from '../../utilities/storybookDecorators';
 import ActionsPanel from '../ActionsPanel';

+ 8 - 8
src/components/Drawer/Drawer.tsx

@@ -1,11 +1,9 @@
-import * as React from 'react';
-
-import Button from '@material-ui/core/Button';
-import Drawer, { DrawerProps } from '@material-ui/core/Drawer';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
 import Close from '@material-ui/icons/Close';
-
+import * as React from 'react';
+import Button from 'src/components/core/Button';
+import Drawer, { DrawerProps } from 'src/components/core/Drawer';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Typography from 'src/components/core/Typography';
 import Grid from 'src/components/Grid';
 
 interface Props extends DrawerProps {
@@ -101,4 +99,6 @@ const DDrawer: React.StatelessComponent<CombinedProps> = (props) => {
   );
 };
 
-export default withStyles(styles, { withTheme: true })<Props>(DDrawer);
+const styled = withStyles(styles);
+
+export default styled(DDrawer);

+ 1 - 1
src/components/EditableText/EditableText.stories.tsx

@@ -30,7 +30,7 @@ class InteractiveEditableText extends React.Component {
     return (
       <React.Fragment>
         <EditableText
-          variant="headline"
+          typeVariant="headline"
           text={this.state.text}
           onEdit={this.editText}
           onCancel={this.cancelEdit}

+ 17 - 16
src/components/EditableText/EditableText.tsx

@@ -1,16 +1,14 @@
+import Check from '@material-ui/icons/Check';
+import Close from '@material-ui/icons/Close';
+import Edit from '@material-ui/icons/Edit';
 import * as classnames from 'classnames';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-
-import Button from '@material-ui/core/Button';
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import { TextFieldProps } from '@material-ui/core/TextField';
-import Typography, { TypographyProps } from '@material-ui/core/Typography';
-import Check from '@material-ui/icons/Check';
-import Close from '@material-ui/icons/Close';
-import ModeEdit from '@material-ui/icons/ModeEdit';
-
+import Button from 'src/components/core/Button';
+import ClickAwayListener from 'src/components/core/ClickAwayListener';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import { TextFieldProps } from 'src/components/core/TextField';
+import Typography, { TypographyProps } from 'src/components/core/Typography';
 import TextField from '../TextField';
 
 type ClassNames = 'root'
@@ -138,6 +136,7 @@ interface Props {
   text: string;
   errorText?: string;
   labelLink?: string;
+  typeVariant: string;
 }
 
 interface State {
@@ -147,7 +146,7 @@ interface State {
 
 type PassThroughProps = Props & TextFieldProps & TypographyProps;
 
-type FinalProps =  PassThroughProps & WithStyles<ClassNames>;
+type FinalProps = PassThroughProps & WithStyles<ClassNames>;
 
 export class EditableText extends React.Component<FinalProps, State> {
   state: State = {
@@ -196,7 +195,7 @@ export class EditableText extends React.Component<FinalProps, State> {
 
 
   render() {
-    const { classes, labelLink, onEdit, errorText, ...rest } = this.props;
+    const { classes, labelLink, onEdit, errorText, typeVariant, ...rest } = this.props;
     const { isEditing, text } = this.state;
 
     const labelText = (
@@ -223,7 +222,7 @@ export class EditableText extends React.Component<FinalProps, State> {
                   onClick={this.toggleEditing}
                   data-qa-edit-button
                 >
-                  <ModeEdit className={`${classes.icon} ${classes.edit}`}/>
+                  <Edit className={`${classes.icon} ${classes.edit}`}/>
                 </Button>
               </React.Fragment>
             </div>
@@ -245,8 +244,8 @@ export class EditableText extends React.Component<FinalProps, State> {
                   InputProps={{ className: classes.inputRoot }}
                   inputProps={{
                     className: classnames({
-                      [classes.headline]: this.props.variant === 'headline',
-                      [classes.title]: this.props.variant === 'title',
+                      [classes.headline]: this.props.typeVariant === 'headline',
+                      [classes.title]: this.props.typeVariant === 'title',
                       [classes.input]: true,
                     }),
                   }}
@@ -277,4 +276,6 @@ export class EditableText extends React.Component<FinalProps, State> {
   }
 }
 
-export default withStyles(styles, { withTheme: true })<PassThroughProps>(EditableText);
+const styled = withStyles(styles);
+
+export default styled(EditableText);

+ 9 - 12
src/components/EnhancedSelect/EnhancedSelect.tsx

@@ -1,15 +1,12 @@
+import Search from '@material-ui/icons/Search';
 import Downshift, { DownshiftState, StateChangeOptions } from 'downshift';
 import { compose, pathOr } from 'ramda';
 import * as React from 'react';
-
-import InputAdornment from '@material-ui/core/InputAdornment';
-import Paper from '@material-ui/core/Paper';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Search from '@material-ui/icons/Search';
-
+import InputAdornment from 'src/components/core/InputAdornment';
+import Paper from 'src/components/core/Paper';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 import RenderGuard from 'src/components/RenderGuard';
 import TextField from 'src/components/TextField';
-
 import './EnhancedSelect.css';
 
 type ClassNames = 'root'
@@ -201,18 +198,18 @@ class EnhancedSelect extends React.Component<CombinedProps, {}> {
     if ( isHighlighted ) { classes += " enhancedSelect-menu-item-highlighted"; }
     if ( isSelected )    { classes += " enhancedSelect-menu-item-selected"; }
 
-    return this.props.renderItems 
+    return this.props.renderItems
       ? this.props.renderItems(item, index, isHighlighted, itemProps, classes)
       :
       <div className={classes}
-        key={index} 
+        key={index}
         {...itemProps}
         data-qa-select-menu-item={item.label}
       >
         {item.label}
       </div>
   }
-  
+
   render() {
     const { value, handleSelect, inputValue, onInputValueChange } = this.props;
     return (
@@ -229,8 +226,8 @@ class EnhancedSelect extends React.Component<CombinedProps, {}> {
   }
 }
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 export default compose<any, any, any>(
   styled,
-  RenderGuard)(EnhancedSelect);
+  RenderGuard)(EnhancedSelect);

+ 4 - 6
src/components/EnhancedSelect/Select.tsx

@@ -3,11 +3,9 @@ import ReactSelect from 'react-select';
 import Async, { AsyncProps } from 'react-select/lib/Async';
 import CreatableSelect, { Props as CreatableSelectProps } from 'react-select/lib/Creatable';
 import { Props as SelectProps } from 'react-select/lib/Select';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
-/* TODO will be refactoring enhanced select to be an abstraction. 
-Styles added in this file and the below imports will be utilized for the abstraction. */ 
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+/* TODO will be refactoring enhanced select to be an abstraction.
+Styles added in this file and the below imports will be utilized for the abstraction. */
 import DropdownIndicator from './components/DropdownIndicator';
 import LoadingIndicator from './components/LoadingIndicator';
 import MultiValue from './components/MultiValue';
@@ -347,7 +345,7 @@ class Select extends React.PureComponent<CombinedProps,{}> {
   }
 }
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 export default styled(Select);
 

+ 3 - 5
src/components/EnhancedSelect/components/DropdownIndicator.tsx

@@ -1,9 +1,7 @@
-import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
 import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';
-
+import * as React from 'react';
 import { IndicatorProps } from 'react-select/lib/components/indicators';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
 type ClassNames = 'root'
 | 'enhancedSelectDropdown';
@@ -38,7 +36,7 @@ class DropdownIndicator extends React.PureComponent<CombinedProps> {
   }
 }
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 export default styled(DropdownIndicator);
 

+ 3 - 6
src/components/EnhancedSelect/components/LoadingIndicator.tsx

@@ -1,10 +1,7 @@
 import * as React from 'react';
-
-import CircularProgress from '@material-ui/core/CircularProgress';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
 import { IndicatorProps } from 'react-select/lib/components/indicators';
-
+import CircularProgress from 'src/components/core/CircularProgress';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
 type ClassNames = 'root';
 
@@ -33,6 +30,6 @@ class LoadingIndicator extends React.PureComponent<CombinedProps> {
   }
 }
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 export default styled(LoadingIndicator);

+ 3 - 3
src/components/EnhancedSelect/components/MultiValue.tsx

@@ -1,7 +1,7 @@
-import Chip from '@material-ui/core/Chip';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
 import * as React from 'react';
 import { MultiValueProps } from 'react-select/lib/components/MultiValue';
+import Chip from 'src/components/core/Chip';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
 type ClassNames = 'root';
 
@@ -37,6 +37,6 @@ class MultiValue extends React.PureComponent<CombinedProps> {
   }
 }
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 export default styled(MultiValue);

+ 4 - 6
src/components/EnhancedSelect/components/NoOptionsMessage.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { NoticeProps } from 'react-select/lib/components/Menu';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Typography from 'src/components/core/Typography';
 
 type ClassNames = 'root';
 
@@ -29,6 +27,6 @@ const NoOptionsMessage: React.StatelessComponent<CombinedProps> = (props) => {
   );
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default styled<Props>(NoOptionsMessage);
+export default styled(NoOptionsMessage);

+ 5 - 6
src/components/EnhancedSelect/components/SelectPlaceholder.tsx

@@ -1,15 +1,14 @@
 import * as React from 'react';
 import { PlaceholderProps } from 'react-select/lib/components/Placeholder';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Typography from 'src/components/core/Typography';
 
 type ClassNames = 'root';
 
 const styles: StyleRulesCallback<ClassNames> = (theme) => ({
   root: {
     position: 'absolute',
-    left: '16px', 
+    left: '16px',
     wordWrap: 'normal',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -34,6 +33,6 @@ const SelectPlaceholder: React.StatelessComponent<CombinedProps> = (props) => {
   );
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default styled<Props>(SelectPlaceholder);
+export default styled(SelectPlaceholder);

+ 5 - 7
src/components/ErrorState/ErrorState.tsx

@@ -1,10 +1,8 @@
+import ErrorOutline from '@material-ui/icons/ErrorOutline';
 import * as classNames from 'classnames';
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import ErrorOutline from '@material-ui/icons/ErrorOutline';
-
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Typography from 'src/components/core/Typography';
 import Grid from 'src/components/Grid';
 
 interface Props {
@@ -55,6 +53,6 @@ const ErrorState = (props: Props & WithStyles<CSSClasses>) => {
   );
 };
 
-const decorate = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default decorate<Props>(ErrorState);
+export default styled(ErrorState);

+ 1 - 3
src/components/EventListItem/EventListItem.stories.tsx

@@ -1,8 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-
-import List from '@material-ui/core/List';
-
+import List from 'src/components/core/List';
 import ThemeDecorator from '../../utilities/storybookDecorators';
 import EventListItem from './EventListItem';
 

+ 4 - 5
src/components/EventListItem/EventListItem.tsx

@@ -1,9 +1,8 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
-
-import ListItemText from '@material-ui/core/ListItemText';
-import MenuItem, { MenuItemProps } from '@material-ui/core/MenuItem';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
+import ListItemText from 'src/components/core/ListItemText';
+import MenuItem, { MenuItemProps } from 'src/components/core/MenuItem';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
 type ClassNames = 'root'
   | 'error'
@@ -80,4 +79,4 @@ const EventListItem: React.StatelessComponent<FinalProps> = (props) => {
   );
 };
 
-export default withStyles(styles, { withTheme: true })(EventListItem);
+export default withStyles(styles)(EventListItem);

+ 1 - 3
src/components/ExpansionPanel/ExpansionPanel.stories.tsx

@@ -1,8 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-
-import Button from '@material-ui/core/Button';
-
+import Button from 'src/components/core/Button';
 import ThemeDecorator from '../../utilities/storybookDecorators';
 import ActionsPanel from '../ActionsPanel';
 import ExpansionPanel from './ExpansionPanel';

+ 8 - 10
src/components/ExpansionPanel/ExpansionPanel.tsx

@@ -1,16 +1,13 @@
 import * as React from 'react';
-
-import ExpansionPanel, { ExpansionPanelProps } from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelDetails, { ExpansionPanelDetailsProps } from '@material-ui/core/ExpansionPanelDetails';
-import ExpansionPanelSummary, { ExpansionPanelSummaryProps } from '@material-ui/core/ExpansionPanelSummary';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Typography, { TypographyProps } from '@material-ui/core/Typography';
-
 import Minus from 'src/assets/icons/minus-square.svg';
 import Plus from 'src/assets/icons/plus-square.svg';
+import ExpansionPanel, { ExpansionPanelProps } from 'src/components/core/ExpansionPanel';
+import ExpansionPanelDetails, { ExpansionPanelDetailsProps } from 'src/components/core/ExpansionPanelDetails';
+import ExpansionPanelSummary, { ExpansionPanelSummaryProps } from 'src/components/core/ExpansionPanelSummary';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Typography, { TypographyProps } from 'src/components/core/Typography';
 import Grid from 'src/components/Grid';
 import RenderGuard from 'src/components/RenderGuard';
-
 import Notice from '../Notice';
 
 type ClassNames = 'root'
@@ -138,6 +135,7 @@ class EExpansionPanel extends React.Component<CombinedProps> {
     );
   }
 }
-const styled = withStyles(styles, { withTheme: true });
 
-export default RenderGuard<Props>(styled<Props>(EExpansionPanel));
+const styled = withStyles(styles);
+
+export default styled(RenderGuard<Props>(EExpansionPanel));

+ 3 - 5
src/components/ExternalLink/ExternalLink.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
 import Arrow from 'src/assets/icons/diagonalArrow.svg';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
 type ClassNames = 'root' | 'icon';
 
@@ -40,6 +38,6 @@ class ExternalLink extends React.Component<CombinedProps> {
   }
 }
 
-const styled = withStyles<ClassNames>(styles, { withTheme: true });
+const styled = withStyles<ClassNames>(styles);
 
-export default styled<CombinedProps>(ExternalLink);
+export default styled(ExternalLink);

+ 1 - 3
src/components/Grid/Grid.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
-
-import Grid, { GridProps } from '@material-ui/core/Grid';
-
+import Grid, { GridProps } from 'src/components/core/Grid';
 import RenderGuard from 'src/components/RenderGuard';
 
 /* tslint:disable-next-line */

+ 5 - 11
src/components/HelpIcon/HelpIcon.spec.js

@@ -8,10 +8,10 @@ describe('Help Icon Component Suite', () => {
         'left',
         'right',
     ]
-    
+
     const helpButton = '[data-qa-help-button]';
     const popoverText = '[role="tooltip"]';
-    
+
     it('should display icon on the page', () => {
         executeInAllStories(component, childStories, () => {
             browser.waitForVisible(helpButton);
@@ -21,22 +21,16 @@ describe('Help Icon Component Suite', () => {
     it('should display popover text on Mouse Over', () => {
         executeInAllStories(component, childStories, () => {
             browser.waitForVisible(helpButton);
-
             browser.moveToObject(helpButton);
-            const popOver = $(popoverText);
-
-            expect(popOver.getAttribute('aria-hidden')).toBe('false');
-            expect(popOver.getText()).toBe('There is some help text! Yada, yada, yada...');
+            expect($(helpButton).getAttribute('aria-describedby')).not.toBeNull();
+            expect($(popoverText).getText()).toBe('There is some help text! Yada, yada, yada...');
         });
     });
 
     it('should hide popover text on Mouse Out', () => {
         executeInAllStories(component, childStories, () => {
             browser.waitForVisible(helpButton);
-
-            const popOver = $(popoverText);
-            expect(popOver.getAttribute('aria-hidden')).toBe('true');            
-
+            expect($(helpButton).getAttribute('aria-describedby')).toBeNull();
         });
     });
 });

+ 8 - 41
src/components/HelpIcon/HelpIcon.tsx

@@ -1,59 +1,25 @@
-import * as React from 'react';
-
-import IconButton from '@material-ui/core/IconButton';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
 import HelpOutline from '@material-ui/icons/HelpOutline';
+import * as React from 'react';
+import IconButton from 'src/components/core/IconButton';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Tooltip from 'src/components/core/Tooltip';
 
 interface Props {
   text: string;
   className?: string;
 }
 
-interface State {
-  open: boolean;
-  anchorEl?: HTMLElement;
-  anchorReference: string;
-}
-
 type ClassNames = 'root';
 
 const styles: StyleRulesCallback<ClassNames> = (theme) => ({
   root: {},
 });
 
-const styled = withStyles(styles, { withTheme: true });
-
 type CombinedProps = Props & WithStyles<ClassNames>;
 
-class HelpIcon extends React.Component<CombinedProps, State> {
-  state = {
-    open: false,
-    anchorEl: undefined,
-    anchorReference: 'anchorEl',
-  };
+const HelpIcon: React.StatelessComponent<CombinedProps> = (props) => {
+    const { text, className } = props;
 
-  constructor(props: CombinedProps) {
-    super(props);
-  }
-
-  button = null;
-
-  handleClose = () => {
-    this.setState({
-      open: false,
-    });
-  }
-
-  handleOpen = (e: React.MouseEvent<HTMLElement>) => {
-    this.setState({
-      open: true,
-      anchorEl: e.currentTarget,
-    });
-  }
-
-  render() {
-    const { text, className } = this.props;
     return (
       <React.Fragment>
           <Tooltip
@@ -71,7 +37,8 @@ class HelpIcon extends React.Component<CombinedProps, State> {
           </Tooltip>
       </React.Fragment>
     );
-  }
 }
 
+const styled = withStyles(styles, { withTheme: true });
+
 export default styled(HelpIcon);

+ 4 - 5
src/components/IconButton/IconButton.tsx

@@ -1,8 +1,7 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
-
-import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
+import IconButton, { IconButtonProps } from 'src/components/core/IconButton';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
 type ClassNames = 'root'
   | 'destructive'
@@ -52,6 +51,6 @@ const IconButtonWrapper: React.StatelessComponent<CombinedProps> = (props) => {
   );
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default styled<Props>(IconButtonWrapper);
+export default styled(IconButtonWrapper);

+ 4 - 5
src/components/IconTextLink/IconTextLink.tsx

@@ -1,9 +1,8 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
-
-import Button from '@material-ui/core/Button';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import Button from 'src/components/core/Button';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import SvgIcon from 'src/components/core/SvgIcon';
 
 type CSSClasses = 'root'
 | 'active'
@@ -115,4 +114,4 @@ const IconTextLink: React.StatelessComponent<FinalProps> = (props) => {
   );
 };
 
-export default withStyles(styles, { withTheme: true })(IconTextLink);
+export default withStyles(styles)(IconTextLink);

+ 3 - 6
src/components/LabelAndTagsPanel/LabelAndTagsPanel.tsx

@@ -1,14 +1,11 @@
 import * as React from 'react';
-
-import Paper from '@material-ui/core/Paper';
-import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
-
+import Paper from 'src/components/core/Paper';
+import { StyleRulesCallback, WithStyles, withStyles } from 'src/components/core/styles';
 import Notice from 'src/components/Notice';
 import RenderGuard from 'src/components/RenderGuard';
 import TagsInput, { TagInputProps } from 'src/components/TagsInput';
 import TextField, { Props as TextFieldProps } from 'src/components/TextField';
 
-
 type ClassNames = 'root'
   | 'inner'
   | 'expPanelButton';
@@ -29,7 +26,7 @@ const styles: StyleRulesCallback<ClassNames> = (theme) => ({
   },
 });
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 interface Props {
   error?: string;

+ 2 - 4
src/components/LineGraph/LineGraph.tsx

@@ -1,9 +1,7 @@
 import { clone } from 'ramda';
 import * as React from 'react';
 import { Line } from 'react-chartjs-2';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 import { setUpCharts } from 'src/utilities/charts';
 
 setUpCharts();
@@ -155,6 +153,6 @@ class LineGraph extends React.Component<CombinedProps, {}> {
   }
 }
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 export default styled(LineGraph);

+ 4 - 5
src/components/LinearProgress/LinearProgress.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
-
-import LinearProgress, { LinearProgressProps } from '@material-ui/core/LinearProgress';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
+import LinearProgress, { LinearProgressProps } from 'src/components/core/LinearProgress';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
 type CSSClasses = 'root';
 
@@ -26,6 +25,6 @@ const LinearProgressComponent: React.StatelessComponent<CombinedProps> = (props)
   );
 };
 
-const decorate = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default decorate<CombinedProps>(LinearProgressComponent);
+export default styled(LinearProgressComponent);

+ 3 - 3
src/components/LoadingText.tsx

@@ -1,5 +1,5 @@
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
 import * as React from 'react';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
 type ClassNames = 'root';
 
@@ -30,6 +30,6 @@ const LoadingText: React.StatelessComponent<CombinedProps> = (props) => {
   return (<span className={props.classes.root} style={style} />);
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default styled<Props>(LoadingText);
+export default styled(LoadingText);

+ 5 - 6
src/components/MenuItem/MenuItem.tsx

@@ -1,9 +1,8 @@
-import * as React from 'react';
-
-import IconButton from '@material-ui/core/IconButton';
-import MenuItem, { MenuItemProps } from '@material-ui/core/MenuItem';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
 import HelpOutline from '@material-ui/icons/HelpOutline';
+import * as React from 'react';
+import IconButton from 'src/components/core/IconButton';
+import MenuItem, { MenuItemProps } from 'src/components/core/MenuItem';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
 type CSSClasses = 'root'
   | 'toolTip'
@@ -97,6 +96,6 @@ const WrapperMenuItem: React.StatelessComponent<CombinedProps> = (props) => {
   );
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 export default styled(WrapperMenuItem);

+ 7 - 10
src/components/Notice/Notice.tsx

@@ -1,15 +1,12 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Typography, { TypographyProps } from '@material-ui/core/Typography';
-
-import Grid, { GridProps } from 'src/components/Grid';
-
 import Error from 'src/assets/icons/alert.svg';
 import Check from 'src/assets/icons/check.svg';
 import Flag from 'src/assets/icons/flag.svg';
 import Warning from 'src/assets/icons/warning.svg';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Typography, { TypographyProps } from 'src/components/core/Typography';
+import Grid, { GridProps } from 'src/components/Grid';
 
 type ClassNames = 'root'
   | 'important'
@@ -179,9 +176,9 @@ const Notice: React.StatelessComponent<CombinedProps> = (props) => {
         notice: true,
         ...(className && { [className]: true }),
       })}
-      style={{ 
+      style={{
         marginTop: spacingTop !== undefined ? spacingTop : 0,
-        marginBottom: spacingBottom !== undefined ? spacingBottom : 24 
+        marginBottom: spacingBottom !== undefined ? spacingBottom : 24
       }}
       {...dataAttributes}
     >
@@ -204,6 +201,6 @@ const Notice: React.StatelessComponent<CombinedProps> = (props) => {
   );
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default styled<Props>(Notice);
+export default styled(Notice);

+ 2 - 4
src/components/PaginationControls/PageButton.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
 import Button, { ButtonProps } from 'src/components/Button';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
 type CSSClasses = 'root';
 
@@ -35,7 +33,7 @@ const styles: StyleRulesCallback<CSSClasses> = (theme) => ({
   },
 });
 
-const styled = withStyles<CSSClasses>(styles, { withTheme: true });
+const styled = withStyles<CSSClasses>(styles);
 
 /* tslint:disable-next-line */
 export interface Props extends ButtonProps { }

+ 3 - 7
src/components/PaginationFooter/PaginationFooter.tsx

@@ -1,13 +1,9 @@
-import * as React from 'react';
-
 import * as classNames from 'classnames';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
+import * as React from 'react';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 import Grid from 'src/components/Grid';
 import MenuItem from 'src/components/MenuItem';
 import Select from 'src/components/Select';
-
 import PaginationControls from '../PaginationControls';
 
 type ClassNames = 'root' | 'padded';
@@ -82,4 +78,4 @@ class PaginationFooter extends React.PureComponent<CombinedProps> {
 }
 
 
-export default withStyles(styles, { withTheme: true })(PaginationFooter);
+export default withStyles(styles)(PaginationFooter);

+ 2 - 4
src/components/PanelErrorBoundary/PanelErrorBoundary.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 import ErrorState from 'src/components/ErrorState';
 import ExpansionPanel, { ExpansionPanelProps } from 'src/components/ExpansionPanel';
 
@@ -44,7 +42,7 @@ export default (expansionPanelProps: Props) =>
       }
     }
 
-    const styled = withStyles(styles, { withTheme: true });
+    const styled = withStyles(styles);
 
     return styled<any>(PanelErrorBoundary);
   };

+ 45 - 47
src/components/PasswordInput/HideShowText.tsx

@@ -1,47 +1,45 @@
-import * as React from 'react';
-
-import { TextFieldProps } from '@material-ui/core/TextField';
-import Visibility from '@material-ui/icons/Visibility';
-import VisibilityOff from '@material-ui/icons/VisibilityOff';
-
-import TextField from '../TextField';
-
-interface State {
-  hidden: Boolean;
-}
-
-interface Props extends TextFieldProps {
-  required?: boolean;
-  tooltipText?: string;
- }
-
-class HideShowText extends React.Component<Props, State> {
-  state = {
-    hidden: true,
-  };
-
-  toggleHidden = () => {
-    this.setState({ hidden: !this.state.hidden });
-  }
-
-  render() {
-    const { hidden } = this.state;
-    const { required } = this.props;
-
-    return (
-      <TextField
-        {...this.props}
-        data-qa-hide={hidden}
-        type={hidden ? 'password' : 'text'}
-        required={required}
-        InputProps={{
-          startAdornment: hidden
-            ? <Visibility onClick={this.toggleHidden} style={{ marginLeft: 14 }} />
-            : <VisibilityOff onClick={this.toggleHidden} style={{ marginLeft: 14 }} />,
-        }}
-      />
-    );
-  }
-}
-
-export default HideShowText;
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import * as React from 'react';
+import { TextFieldProps } from 'src/components/core/TextField';
+import TextField from '../TextField';
+
+interface State {
+  hidden: Boolean;
+}
+
+type Props = TextFieldProps & {
+  required?: boolean;
+  tooltipText?: string;
+ }
+
+class HideShowText extends React.Component<Props, State> {
+  state = {
+    hidden: true,
+  };
+
+  toggleHidden = () => {
+    this.setState({ hidden: !this.state.hidden });
+  }
+
+  render() {
+    const { hidden } = this.state;
+    const { required } = this.props;
+
+    return (
+      <TextField
+        {...this.props}
+        data-qa-hide={hidden}
+        type={hidden ? 'password' : 'text'}
+        required={required}
+        InputProps={{
+          startAdornment: hidden
+            ? <Visibility onClick={this.toggleHidden} style={{ marginLeft: 14 }} />
+            : <VisibilityOff onClick={this.toggleHidden} style={{ marginLeft: 14 }} />,
+        }}
+      />
+    );
+  }
+}
+
+export default HideShowText;

+ 6 - 7
src/components/PasswordInput/PasswordInput.tsx

@@ -1,16 +1,13 @@
 import { isEmpty } from 'ramda';
 import * as React from 'react';
-import * as zxcvbn from 'zxcvbn';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 import Grid from 'src/components/Grid';
 import { Props as TextFieldProps } from 'src/components/TextField';
-
+import * as zxcvbn from 'zxcvbn';
 import StrengthIndicator from '../PasswordInput/StrengthIndicator';
 import HideShowText from './HideShowText';
 
-interface Props extends TextFieldProps {
+type Props = TextFieldProps & {
   value?: string;
   required?: boolean;
   disabledReason?: string;
@@ -100,4 +97,6 @@ const maybeStrength = (value?: string) => {
   }
 }
 
-export default withStyles(styles, { withTheme: true })<Props>(PasswordInput);
+const styled = withStyles(styles);
+
+export default styled(PasswordInput);

+ 3 - 5
src/components/PasswordInput/StrengthIndicator.tsx

@@ -1,10 +1,8 @@
 import * as classNames from 'classnames';
 import { isNil } from 'ramda';
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Typography from 'src/components/core/Typography';
 import Grid from 'src/components/Grid';
 
 interface Props {
@@ -46,7 +44,7 @@ const styles: StyleRulesCallback<ClassNames> = (theme) => ({
   },
 });
 
-const styled = withStyles<ClassNames>(styles, { withTheme: true });
+const styled = withStyles<ClassNames>(styles);
 
 type CombinedProps = Props & WithStyles<ClassNames>;
 

+ 4 - 6
src/components/Placeholder/Placeholder.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-
 import LinodeIcon from 'src/assets/addnewmenu/linode.svg';
 import Button, { ButtonProps } from 'src/components/Button';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Typography from 'src/components/core/Typography';
 import Grid from 'src/components/Grid';
 
 type ClassNames = 'root'
@@ -137,6 +135,6 @@ Placeholder.defaultProps = {
   animate: true,
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default styled<Props>(Placeholder);
+export default styled(Placeholder);

+ 5 - 7
src/components/PrimaryNav/PrimaryNav.tsx

@@ -2,14 +2,12 @@ import * as classNames from 'classnames';
 import * as React from 'react';
 import { connect, MapStateToProps } from 'react-redux';
 import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
-
-import Divider from '@material-ui/core/Divider';
-import Hidden from '@material-ui/core/Hidden';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
 import Logo from 'src/assets/logo/logo-text.svg';
+import Divider from 'src/components/core/Divider';
+import Hidden from 'src/components/core/Hidden';
+import ListItem from 'src/components/core/ListItem';
+import ListItemText from 'src/components/core/ListItemText';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 import Grid from 'src/components/Grid';
 import isPathOneOf from 'src/utilities/routing/isPathOneOf';
 import ThemeToggle from './ThemeToggle';

+ 2 - 4
src/components/PrimaryNav/ThemeToggle.tsx

@@ -1,8 +1,6 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles, WithTheme } from '@material-ui/core/styles';
-
+import { StyleRulesCallback, withStyles, WithStyles, WithTheme } from 'src/components/core/styles';
 import Toggle from 'src/components/Toggle';
 
 type ClassNames = 'switchWrapper' | 'switchText' | 'toggle';
@@ -79,5 +77,5 @@ export const ThemeToggle: React.StatelessComponent<CombinedProps> = (props) => {
 
 const styled = withStyles(styles, { withTheme: true });
 
-export default styled<Props>(ThemeToggle);
+export default styled(ThemeToggle);
 

+ 3 - 5
src/components/ProductNotification/ProductNotification.tsx

@@ -1,8 +1,6 @@
 import { pathOr } from 'ramda';
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 import Notice from 'src/components/Notice';
 
 type ClassNames = 'root';
@@ -25,7 +23,7 @@ const ProductNotifications: React.StatelessComponent<CombinedProps> = (props) =>
   return React.createElement(Notice, { flag: true, [level]: true }, text);
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 const severityLevelMap = {
   minor: 'warning',
@@ -33,4 +31,4 @@ const severityLevelMap = {
   critical: 'error',
 };
 
-export default styled<Props>(ProductNotifications);
+export default styled(ProductNotifications);

+ 2 - 4
src/components/Radio/Radio.stories.tsx

@@ -1,9 +1,7 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import RadioGroup from '@material-ui/core/RadioGroup';
-
+import FormControlLabel from 'src/components/core/FormControlLabel';
+import RadioGroup from 'src/components/core/RadioGroup';
 import ThemeDecorator from '../../utilities/storybookDecorators';
 import Radio from './Radio';
 

+ 3 - 5
src/components/Radio/Radio.tsx

@@ -1,9 +1,7 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
-
-import Radio, { RadioProps } from '@material-ui/core/Radio';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
+import Radio, { RadioProps } from 'src/components/core/Radio';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 import RadioIcon from '../../assets/icons/radio.svg';
 import RadioIconRadioed from '../../assets/icons/radioRadioed.svg';
 
@@ -95,4 +93,4 @@ const LinodeRadioControl: React.StatelessComponent<FinalProps> = (props) => {
   );
 };
 
-export default withStyles(styles, { withTheme: true })(LinodeRadioControl);
+export default withStyles(styles)(LinodeRadioControl);

+ 4 - 6
src/components/RenderGuard.tsx

@@ -1,7 +1,6 @@
 import { equals } from 'ramda';
 import * as React from 'react';
-
-import { withTheme, WithTheme } from '@material-ui/core/styles';
+import { withTheme, WithTheme } from 'src/components/core/styles';
 
 interface RenderGuardProps {
   updateFor?: any[];
@@ -9,12 +8,11 @@ interface RenderGuardProps {
 
 /* tslint:disable-next-line */
 const renderGuard = <P extends {}>(Component: React.ComponentType<P & RenderGuardProps>) => {
-  type EnhancedProps = P & RenderGuardProps & WithTheme;
 
-  class ComponentWithRenderGuard extends React.Component<EnhancedProps> {
+  class ComponentWithRenderGuard extends React.Component<RenderGuardProps & WithTheme> {
     static displayName = `WithRenderGuard(${getDisplayName(Component)})`;
 
-    shouldComponentUpdate(nextProps: EnhancedProps) {
+    shouldComponentUpdate(nextProps: P & RenderGuardProps & WithTheme) {
       if (Array.isArray(this.props.updateFor)) {
         // don't update if the values of the updateFor Array are equal
         // this is a deep comparison
@@ -35,7 +33,7 @@ const renderGuard = <P extends {}>(Component: React.ComponentType<P & RenderGuar
     }
   };
 
-  return themed<EnhancedProps>(ComponentWithRenderGuard) as React.ComponentType<P & RenderGuardProps>;
+  return themed(ComponentWithRenderGuard) as React.ComponentType<P & RenderGuardProps>;
 }
 
 const themed = withTheme();

+ 3 - 6
src/components/Select/Select.stories.tsx

@@ -1,13 +1,10 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-
-import FormControl from '@material-ui/core/FormControl';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import InputLabel from '@material-ui/core/InputLabel';
-
+import FormControl from 'src/components/core/FormControl';
+import FormHelperText from 'src/components/core/FormHelperText';
+import InputLabel from 'src/components/core/InputLabel';
 import Grid from 'src/components/Grid';
 import MenuItem from 'src/components/MenuItem';
-
 import ThemeDecorator from '../../utilities/storybookDecorators';
 import Select from './Select';
 

+ 9 - 11
src/components/Select/Select.tsx

@@ -1,14 +1,12 @@
+import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';
 import * as classNames from 'classnames';
 import * as React from 'react';
-
-import Fade from '@material-ui/core/Fade';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import Input, { InputProps } from '@material-ui/core/Input';
-import { MenuProps } from '@material-ui/core/Menu';
-import Select, { SelectProps } from '@material-ui/core/Select';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';
-
+import Fade from 'src/components/core/Fade';
+import FormHelperText from 'src/components/core/FormHelperText';
+import Input, { InputProps } from 'src/components/core/Input';
+import { MenuProps } from 'src/components/core/Menu';
+import Select, { SelectProps } from 'src/components/core/Select';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 import HelpIcon from 'src/components/HelpIcon';
 
 type ClassNames = 'inputSucess'
@@ -139,6 +137,6 @@ const SSelect: React.StatelessComponent<CombinedProps> = ({
   );
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default styled<CombinedProps>(SSelect);
+export default styled(SSelect) as React.ComponentType<Props>;

+ 2 - 4
src/components/SelectRegionPanel/SelectRegionPanel.tsx

@@ -5,9 +5,7 @@ import SG from 'flag-icon-css/flags/4x3/sg.svg';
 import US from 'flag-icon-css/flags/4x3/us.svg';
 import { isEmpty } from 'ramda';
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 import Grid from 'src/components/Grid';
 import RenderGuard from 'src/components/RenderGuard';
 import SelectionCard from 'src/components/SelectionCard';
@@ -129,6 +127,6 @@ class SelectRegionPanel extends React.Component<Props & WithStyles<ClassNames>>
   }
 }
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 export default styled(RenderGuard<Props & WithStyles<ClassNames>>(SelectRegionPanel));

+ 6 - 8
src/components/SelectionCard/SelectionCard.tsx

@@ -1,11 +1,9 @@
+import Check from '@material-ui/icons/Check';
 import * as classNames from 'classnames';
 import * as React from 'react';
-
-import Fade from '@material-ui/core/Fade';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
-import Check from '@material-ui/icons/Check';
-
+import Fade from 'src/components/core/Fade';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Tooltip from 'src/components/core/Tooltip';
 import Grid from 'src/components/Grid';
 
 type CSSClasses =
@@ -239,6 +237,6 @@ class SelectionCard extends React.PureComponent<CombinedProps, {}> {
   }
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default styled(SelectionCard);
+export default styled(SelectionCard) as React.ComponentType<Props>;

+ 5 - 7
src/components/SelectionRow/SelectionRow.tsx

@@ -1,11 +1,9 @@
 import * as invariant from 'invariant';
 import { compose, isEmpty, lensIndex, map, over, splitAt, unless } from 'ramda';
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import TableCell from '@material-ui/core/TableCell';
-import Typography from '@material-ui/core/Typography';
-
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import TableCell from 'src/components/core/TableCell';
+import Typography from 'src/components/core/Typography';
 import Radio from 'src/components/Radio';
 import RenderGuard from 'src/components/RenderGuard';
 import ShowMore from 'src/components/ShowMore';
@@ -216,12 +214,12 @@ const SelectionRow: React.StatelessComponent<CombinedProps> = (props) => {
   );
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
 export default styled(RenderGuard<CombinedProps>(SelectionRow));
 
 const createTag: (images: string) => JSX.Element =
-  v => <Tag label={v} key={v} variant="lightBlue" style={{ margin: '2px 2px' }} />;
+  v => <Tag label={v} key={v} colorVariant="lightBlue" style={{ margin: '2px 2px' }} />;
 
 const createTags: (images: string[]) => JSX.Element[] =
   map(createTag);

+ 4 - 5
src/components/ShowMore/ShowMore.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-
-import Chip, { ChipProps } from '@material-ui/core/Chip';
-import Popover from '@material-ui/core/Popover';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
+import Chip, { ChipProps } from 'src/components/core/Chip';
+import Popover from 'src/components/core/Popover';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
 type CSSClasses =  'chip' | 'label' | 'popover';
 
@@ -102,4 +101,4 @@ class ShowMore<T> extends React.Component<Props<T> & WithStyles<CSSClasses> > {
   }
 }
 
-export default withStyles<CSSClasses>(styles, { withTheme: true })(ShowMore);
+export default withStyles<CSSClasses>(styles)(ShowMore);

+ 1 - 3
src/components/ShowMoreExpansion/ShowMoreExpansion.stories.tsx

@@ -1,8 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-
-import Typography from '@material-ui/core/Typography';
-
+import Typography from 'src/components/core/Typography';
 import ThemeDecorator from '../../utilities/storybookDecorators';
 import ShowMoreExpansion from './ShowMoreExpansion';
 

+ 8 - 7
src/components/ShowMoreExpansion/ShowMoreExpansion.tsx

@@ -1,11 +1,10 @@
-import * as React from 'react';
-
-import Button from '@material-ui/core/Button';
-import Collapse from '@material-ui/core/Collapse';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
+import * as React from 'react';
+import Button from 'src/components/core/Button';
+import Collapse from 'src/components/core/Collapse';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
-type CSSClasses = 'root' 
+type CSSClasses = 'root'
 | 'caret';
 
 const styles: StyleRulesCallback = (theme) => ({
@@ -95,4 +94,6 @@ class ShowMoreExpansion extends React.Component<CombinedProps, State> {
   }
 }
 
-export default withStyles(styles, { withTheme: true })<Props>(ShowMoreExpansion);
+const styled = withStyles(styles);
+
+export default styled(ShowMoreExpansion);

+ 9 - 9
src/components/SideMenu.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
-
-import Drawer from '@material-ui/core/Drawer';
-import Hidden from '@material-ui/core/Hidden';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
+import Drawer from 'src/components/core/Drawer';
+import Hidden from 'src/components/core/Hidden';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 import PrimaryNav from 'src/components/PrimaryNav';
 
-type CSSClasses = 'menuPaper' | 'menuDocked';
+type ClassNames = 'menuPaper' | 'menuDocked';
 
-const styles: StyleRulesCallback<CSSClasses> = (theme) => ({
+const styles: StyleRulesCallback<ClassNames> = (theme) => ({
   menuPaper: {
     height: '100%',
     width: 215,
@@ -30,7 +28,7 @@ interface Props {
   toggleTheme: () => void;
 }
 
-type CombinedProps = Props & WithStyles<CSSClasses>;
+type CombinedProps = Props & WithStyles<ClassNames>;
 
 class SideMenu extends React.Component<CombinedProps> {
   render() {
@@ -68,4 +66,6 @@ class SideMenu extends React.Component<CombinedProps> {
   }
 }
 
-export default withStyles(styles, { withTheme: true })<Props>(SideMenu);
+const styled = withStyles(styles);
+
+export default styled(SideMenu);

+ 3 - 4
src/components/SkeletonScreen/SkeletonScreen.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
 type ClassNames = 'root'
   | 'tableCol1'
@@ -79,11 +78,11 @@ class SkeletonScreen extends React.Component<CombinedProps> {
     }
   };
 
-  render() {    
+  render() {
     return (
       this.renderSkeleton()
     );
   }
 }
 
-export default withStyles(styles, { withTheme: true })(SkeletonScreen);
+export default withStyles(styles)(SkeletonScreen);

+ 7 - 9
src/components/TabbedPanel/TabbedPanel.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
-
-import AppBar from '@material-ui/core/AppBar';
-import Paper from '@material-ui/core/Paper';
-import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
-import Tab from '@material-ui/core/Tab';
-import Tabs from '@material-ui/core/Tabs';
-import Typography from '@material-ui/core/Typography';
-
+import AppBar from 'src/components/core/AppBar';
+import Paper from 'src/components/core/Paper';
+import { StyleRulesCallback, WithStyles, withStyles } from 'src/components/core/styles';
+import Tab from 'src/components/core/Tab';
+import Tabs from 'src/components/core/Tabs';
+import Typography from 'src/components/core/Typography';
 import Notice from '../Notice';
 
 type ClassNames = 'root'
@@ -102,4 +100,4 @@ class TabbedPanel extends React.Component<CombinedProps> {
   }
 }
 
-export default withStyles(styles, { withTheme: true })(TabbedPanel) as React.ComponentType<Props>;
+export default withStyles(styles)(TabbedPanel) as React.ComponentType<Props>;

+ 4 - 7
src/components/Table/Table.stories.tsx

@@ -1,13 +1,10 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-
+import TableBody from 'src/components/core/TableBody';
+import TableCell from 'src/components/core/TableCell';
+import TableHead from 'src/components/core/TableHead';
+import TableRow from 'src/components/core/TableRow';
 import ThemeDecorator from 'src/utilities/storybookDecorators';
-
 import TableWrapper from './Table';
 
 storiesOf('Table', module)

+ 3 - 4
src/components/Table/Table.tsx

@@ -1,8 +1,7 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Table, { TableProps } from '@material-ui/core/Table';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Table, { TableProps } from 'src/components/core/Table';
 
 type ClassNames = 'root'
   | 'border'
@@ -94,4 +93,4 @@ class WrappedTable extends React.Component<CombinedProps> {
   }
 }
 
-export default withStyles(styles, { withTheme: true })(WrappedTable);
+export default withStyles(styles)(WrappedTable);

+ 6 - 7
src/components/TableCell/TableCell.tsx

@@ -1,9 +1,8 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
-
-import Hidden from '@material-ui/core/Hidden';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import TableCell, { TableCellProps } from '@material-ui/core/TableCell';
+import Hidden from 'src/components/core/Hidden';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import TableCell, { TableCellProps } from 'src/components/core/TableCell';
 
 type ClassNames = 'root'
   | 'noWrap'
@@ -46,7 +45,7 @@ export interface Props extends TableCellProps {
   className?: string;
   /*
    * parent column will either be the name of the column this
-   * TableCell is listed under 
+   * TableCell is listed under
    */
   parentColumn?: string;
 }
@@ -66,7 +65,7 @@ class WrappedTableCell extends React.Component<CombinedProps> {
             [classes.root]: true,
             [classes.noWrap]: noWrap,
             [classes.sortable]: sortable,
-            // hide the cell at small breakpoints if it's empty with no parent column 
+            // hide the cell at small breakpoints if it's empty with no parent column
             'emptyCell': !parentColumn && !this.props.children
           })}
         {...rest}
@@ -85,4 +84,4 @@ class WrappedTableCell extends React.Component<CombinedProps> {
   }
 }
 
-export default withStyles(styles, { withTheme: true })(WrappedTableCell);
+export default withStyles(styles)(WrappedTableCell);

+ 4 - 4
src/components/TableHeader/TableHeader.tsx

@@ -1,6 +1,6 @@
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
 import * as React from 'react';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Typography from 'src/components/core/Typography';
 import Grid from 'src/components/Grid';
 
 type ClassNames = 'root' | 'title';
@@ -37,6 +37,6 @@ const TableHeader: React.StatelessComponent<CombinedProps> = ({ classes, title,
   );
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default styled<Props>(TableHeader);
+export default styled(TableHeader);

+ 8 - 12
src/components/TableRow/TableRow.tsx

@@ -1,9 +1,8 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import TableRow, { TableRowProps } from '@material-ui/core/TableRow';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import _TableRow, { TableRowProps as _TableRowProps } from 'src/components/core/TableRow';
 
 type ClassNames = 'root';
 
@@ -43,9 +42,9 @@ interface Props {
   htmlFor?: string;
 }
 
-type CombinedProps = Props & TableRowProps & RouteComponentProps<{}> & WithStyles<ClassNames>;
+type CombinedProps = Props & _TableRowProps & RouteComponentProps<{}> & WithStyles<ClassNames>;
 
-class WrappedTableRow extends React.Component<CombinedProps> {
+class TableRow extends React.Component<CombinedProps> {
 
   rowClick = (e: any, target: string | onClickFn ) =>  {
     if (e.target.tagName === 'TD') {
@@ -61,7 +60,7 @@ class WrappedTableRow extends React.Component<CombinedProps> {
     const { classes, className, rowLink, staticContext, ...rest } = this.props;
 
     return (
-        <TableRow
+        <_TableRow
           onClick={(e) => rowLink && this.rowClick(e, rowLink)}
           hover={rowLink !== undefined}
           role={rowLink && 'link'}
@@ -73,14 +72,11 @@ class WrappedTableRow extends React.Component<CombinedProps> {
           {...rest}
         >
           {this.props.children}
-        </TableRow>
+        </_TableRow>
     );
   }
 }
 
-const styled = withStyles<ClassNames>(styles, { withTheme: true });
-const styledTableRow = styled<CombinedProps>(WrappedTableRow);
-const routedStyledTableRow = withRouter(styledTableRow);
-
+const styled = withStyles<ClassNames>(styles);
 
-export default routedStyledTableRow;
+export default styled(withRouter(TableRow));

+ 5 - 6
src/components/TableRowEmptyState/TableRowEmptyState.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import TableCell from '@material-ui/core/TableCell';
-import TableRow from '@material-ui/core/TableRow';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import TableCell from 'src/components/core/TableCell';
+import TableRow from 'src/components/core/TableRow';
 
 type ClassNames = 'root';
 
@@ -26,6 +25,6 @@ const TableRowEmptyState: React.StatelessComponent<CombinedProps> = (props) => {
   );
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default styled<Props>(TableRowEmptyState);
+export default styled(TableRowEmptyState);

+ 5 - 7
src/components/TableRowError/TableRowError.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import TableCell from '@material-ui/core/TableCell';
-import TableRow from '@material-ui/core/TableRow';
-
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import TableCell from 'src/components/core/TableCell';
+import TableRow from 'src/components/core/TableRow';
 import ErrorState from 'src/components/ErrorState';
 
 type ClassNames = 'root';
@@ -29,6 +27,6 @@ const TableRowError: React.StatelessComponent<CombinedProps> = (props) => {
   );
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default styled<Props>(TableRowError);
+export default styled(TableRowError);

+ 5 - 7
src/components/TableRowLoading/TableRowLoading.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import TableCell from '@material-ui/core/TableCell';
-import TableRow from '@material-ui/core/TableRow';
-
 import CircleProgress from 'src/components/CircleProgress';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import TableCell from 'src/components/core/TableCell';
+import TableRow from 'src/components/core/TableRow';
 
 type ClassNames = 'root'
   | 'tableCell';
@@ -34,6 +32,6 @@ const tableRowLoading: React.StatelessComponent<CombinedProps> = (props) => {
   );
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default styled<Props>(tableRowLoading);
+export default styled(tableRowLoading);

+ 5 - 6
src/components/TableSortCell/TableSortCell.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import TableCell, { TableCellProps } from '@material-ui/core/TableCell';
-import TableSortLabel from '@material-ui/core/TableSortLabel';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import TableCell, { TableCellProps } from 'src/components/core/TableCell';
+import TableSortLabel from 'src/components/core/TableSortLabel';
 
 type ClassNames = 'root';
 
@@ -39,6 +38,6 @@ class TableSortCell extends React.PureComponent<CombinedProps, {}> {
   handleClick = (v: React.MouseEvent<HTMLElement>) => this.props.handleClick(this.props.label);
 }
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default styled<CombinedProps>(TableSortCell);
+export default styled(TableSortCell);

+ 9 - 9
src/components/Tag/Tag.stories.tsx

@@ -11,31 +11,31 @@ storiesOf('Tags', module)
     <Tag label="tag" />
   ))
   .add('white', () => (
-    <Tag label="tag" variant="white" />
+    <Tag label="tag" colorVariant="white" />
   ))
   .add('gray', () => (
-    <Tag label="tag" variant="gray" />
+    <Tag label="tag" colorVariant="gray" />
   ))
   .add('lightGray', () => (
-    <Tag label="tag" variant="lightGray" />
+    <Tag label="tag" colorVariant="lightGray" />
   ))
   .add('blue', () => (
-    <Tag label="tag" variant="blue" />
+    <Tag label="tag" colorVariant="blue" />
   ))
   .add('lightBlue', () => (
-    <Tag label="tag" variant="lightBlue" />
+    <Tag label="tag" colorVariant="lightBlue" />
   ))
   .add('green', () => (
-    <Tag label="tag" variant="green" />
+    <Tag label="tag" colorVariant="green" />
   ))
   .add('lightGreen', () => (
-    <Tag label="tag" variant="lightGreen" />
+    <Tag label="tag" colorVariant="lightGreen" />
   ))
   .add('yellow', () => (
-    <Tag label="tag" variant="yellow" />
+    <Tag label="tag" colorVariant="yellow" />
   ))
   .add('lightYellow', () => (
-    <Tag label="tag" variant="lightYellow" />
+    <Tag label="tag" colorVariant="lightYellow" />
   ))
   .add('editable', () => (
     <Tag label="delete-tag" onDelete={action('click')} />

+ 11 - 11
src/components/Tag/Tag.tsx

@@ -1,9 +1,8 @@
+import Close from '@material-ui/icons/Close';
 import * as classNames from 'classnames';
 import * as React from 'react';
-
-import Chip, { ChipProps } from '@material-ui/core/Chip';
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import Close from '@material-ui/icons/Close';
+import Chip, { ChipProps } from 'src/components/core/Chip';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 
 type Variants =
   'white'
@@ -85,21 +84,20 @@ const styles: StyleRulesCallback<CSSClasses> = (theme) => {
 
 export interface Props extends ChipProps {
   label: string;
-  variant?: Variants;
+  colorVariant?: Variants;
 }
 
 type PropsWithStyles = Props & WithStyles<CSSClasses>;
 
 class Tag extends React.Component<PropsWithStyles, {}> {
   static defaultProps = {
-    variant: 'gray' as Variants,
+    colorVariant: 'gray' as Variants,
   };
 
   render() {
     const {
-      variant,
+      colorVariant,
       classes,
-      theme,
       className,
       ...chipProps
     } = this.props;
@@ -108,14 +106,16 @@ class Tag extends React.Component<PropsWithStyles, {}> {
       {...chipProps}
       className={classNames({
         ...(className && { [className]: true }),
-        [classes[variant!]]: true,
+        [classes[colorVariant!]]: true,
         [classes.root]: true,
       })}
       deleteIcon={this.props.deleteIcon || <Close />}
-      classes={{ label: classes.label, deletable: classes[variant!]}}
+      classes={{ label: classes.label, deletable: classes[colorVariant!]}}
       data-qa-tag={this.props.label}
     />;
   }
 };
 
-export default withStyles(styles, { withTheme: true })<Props>(Tag);
+const styled = withStyles(styles);
+
+export default styled(Tag);

+ 2 - 4
src/components/Tags/Tags.tsx

@@ -1,8 +1,6 @@
 import { splitAt } from 'ramda';
 import * as React from 'react';
-
-import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
 import ShowMore from 'src/components/ShowMore';
 import Tag from 'src/components/Tag';
 
@@ -74,4 +72,4 @@ class Tags extends React.Component<CombinedProps, {}> {
 
 };
 
-export default withStyles(styles, { withTheme: true })(Tags);
+export default withStyles(styles)(Tags);

+ 13 - 23
src/components/TagsPanel/TagsPanel.tsx

@@ -1,23 +1,13 @@
+import AddCircle from '@material-ui/icons/AddCircle';
 import { clone, pathOr } from 'ramda';
 import * as React from 'react';
-
-import IconButton from '@material-ui/core/IconButton';
-import {
-  StyleRulesCallback,
-  
-  withStyles,
-  WithStyles,
-} from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
-import AddCircle from '@material-ui/icons/AddCircle';
-
-import TagsPanelItem from './TagsPanelItem';
-
-import { getTags } from 'src/services/tags';
-
-import { sendToast } from 'src/features/ToastNotifications/toasts';
-
+import IconButton from 'src/components/core/IconButton';
+import { StyleRulesCallback, withStyles, WithStyles } from 'src/components/core/styles';
+import Tooltip from 'src/components/core/Tooltip';
 import Select from 'src/components/EnhancedSelect/Select';
+import { sendToast } from 'src/features/ToastNotifications/toasts';
+import { getTags } from 'src/services/tags';
+import TagsPanelItem from './TagsPanelItem';
 
 type ClassNames = 'root'
   | 'tag'
@@ -278,7 +268,7 @@ class TagsPanel extends React.Component<CombinedProps, State> {
       tagInputValue,
       tagError,
     } = this.state;
-  
+
     return (
       <div className={classes.root}>
         {tags.map(eachTag => {
@@ -292,7 +282,7 @@ class TagsPanel extends React.Component<CombinedProps, State> {
               loading={listDeletingTags.some((inProgressTag) => {
                 /*
                  * The tag is getting deleted if it appears in the state
-                 * which holds the list of tags queued for deletion 
+                 * which holds the list of tags queued for deletion
                  */
                 return eachTag === inProgressTag;
               })}
@@ -324,14 +314,14 @@ class TagsPanel extends React.Component<CombinedProps, State> {
             >
               <AddCircle data-qa-add-tag />
             </IconButton>
-          </Tooltip> 
+          </Tooltip>
         }
       </div>
     );
-  
+
   }
 };
 
-const styled = withStyles(styles, { withTheme: true });
+const styled = withStyles(styles);
 
-export default styled<Props>(TagsPanel);
+export default styled(TagsPanel);

+ 3 - 10
src/components/TagsPanel/TagsPanelItem.tsx

@@ -1,14 +1,7 @@
-import * as React from 'react';
-
-import {
-  StyleRulesCallback,
-  
-  withStyles,
-  WithStyles,