Merge pull request #1697 from auth0/DXDP-842-StyledComponents-v5

DXDP-842 - Update Styled Components to v5
auth0 · Feb 4, 2020 · 6875abf · 6875abf
2 parents 0ca6d22 + 0a9951e
commit 6875abf
Show file tree

Hide file tree

Showing 24 changed files with 1,326 additions and 998 deletions.
diff --git a/core/components/atoms/_overlay/overlay.tsx b/core/components/atoms/_overlay/overlay.tsx
@@ -1,43 +1,44 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-import styled from '../../styled'
-import { spacing } from '../../tokens'
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import styled from "../../styled";
+import { spacing } from "../../tokens";
 
 // TODO: create tokens?
 const layers = {
   overlayBackdrop: 20,
   overlay: 30
-}
+};
 
 const keyCodes = {
   escape: 27
-}
+};
 
-export type OverlaySize = 'small' | 'medium' | 'large'
+export type OverlaySize = "small" | "medium" | "large";
 export const overlayContentSizes = {
-  small: '480px',
-  medium: '640px',
-  large: '800px'
-}
+  small: "480px",
+  medium: "640px",
+  large: "800px"
+};
 
 export interface IOverlayProps {
-  closeOnBackdropClick?: boolean
-  closeOnEscape?: boolean
-  open?: boolean
-  onClose?: Function
-  contentSize?: number | OverlaySize
+  closeOnBackdropClick?: boolean;
+  closeOnEscape?: boolean;
+  open?: boolean;
+  onClose?: Function;
+  contentSize?: number | OverlaySize;
 }
 
 interface IOverlayState {
-  hasBeenMounted: boolean
+  hasBeenMounted: boolean;
 }
 
 class Overlay extends React.Component<IOverlayProps, IOverlayState> {
   public static defaultProps = {
     closeOnBackdropClick: true,
     closeOnEscape: true,
     open: false
-  }
+  };
 
   public static Backdrop = styled.div`
     position: fixed;
@@ -49,7 +50,7 @@ class Overlay extends React.Component<IOverlayProps, IOverlayState> {
     background: hsla(0, 12%, 95%, 0.95);
     display: flex;
     justify-content: center;
-  `
+  `;
 
   public static Element = styled.div`
     width: 100%;
@@ -59,68 +60,74 @@ class Overlay extends React.Component<IOverlayProps, IOverlayState> {
 
     /* Since the focus trap is adding divs around the dialog box, the max width prop should be here */
     max-width: ${(props) => Overlay.getSizeForOverlay(props.contentSize)};
-  `
+  `;
 
   public static getSizeForOverlay(propValue) {
-    if (typeof propValue === 'number') { return `${propValue}px` }
+    if (typeof propValue === "number") {
+      return `${propValue}px`;
+    }
 
-    return overlayContentSizes[propValue]
+    return overlayContentSizes[propValue];
   }
 
-  public mountElement: HTMLDivElement
-  public contentElement: HTMLDivElement
+  public mountElement: HTMLDivElement;
+  public contentElement: HTMLDivElement;
 
   constructor(props) {
-    super(props)
-    this.state = { hasBeenMounted: false }
-    this.mountElement = document.createElement('div')
+    super(props);
+    this.state = { hasBeenMounted: false };
+    this.mountElement = document.createElement("div");
   }
 
   public componentDidMount() {
-    document.body.appendChild(this.mountElement)
-    document.addEventListener('keydown', this.handleDocumentKeyDown)
+    document.body.appendChild(this.mountElement);
+    document.addEventListener("keydown", this.handleDocumentKeyDown);
     this.setState((prevState, props) => ({
       hasBeenMounted: true
-    }))
+    }));
   }
 
   public componentWillUnmount() {
-    document.body.removeChild(this.mountElement)
-    document.removeEventListener('keydown', this.handleDocumentKeyDown)
+    document.body.removeChild(this.mountElement);
+    document.removeEventListener("keydown", this.handleDocumentKeyDown);
   }
 
   public handleMouseDown = (evt) => {
-    const { closeOnBackdropClick, open, onClose } = this.props
-    const clickWasOnBackdrop = this.contentElement && !this.contentElement.contains(evt.target)
+    const { closeOnBackdropClick, open, onClose } = this.props;
+    const clickWasOnBackdrop = this.contentElement && !this.contentElement.contains(evt.target);
     if (open && closeOnBackdropClick && clickWasOnBackdrop && onClose) {
-      onClose()
+      onClose();
     }
-  }
+  };
 
   public handleDocumentKeyDown = (evt) => {
-    const { closeOnEscape, open, onClose } = this.props
-    const escapeWasPressed = evt.which === keyCodes.escape
+    const { closeOnEscape, open, onClose } = this.props;
+    const escapeWasPressed = evt.which === keyCodes.escape;
     if (open && closeOnEscape && escapeWasPressed) {
-      evt.preventDefault()
-      if (onClose) { onClose() }
+      evt.preventDefault();
+      if (onClose) {
+        onClose();
+      }
     }
-  }
+  };
 
   public render() {
-    const { open, children, contentSize } = this.props
+    const { open, children, contentSize } = this.props;
 
-    if (!this.state.hasBeenMounted) { return null }
+    if (!this.state.hasBeenMounted) {
+      return null;
+    }
 
     const content = open ? (
       <Overlay.Backdrop onMouseDown={this.handleMouseDown}>
-        <Overlay.Element contentSize={contentSize} innerRef={(el) => (this.contentElement = el)}>
+        <Overlay.Element contentSize={contentSize} ref={(el) => (this.contentElement = el)}>
           {children}
         </Overlay.Element>
       </Overlay.Backdrop>
-    ) : null
+    ) : null;
 
-    return ReactDOM.createPortal(content, this.mountElement)
+    return ReactDOM.createPortal(content, this.mountElement);
   }
 }
 
-export default Overlay
+export default Overlay;
diff --git a/core/components/atoms/_simple-select/simple-select.tsx b/core/components/atoms/_simple-select/simple-select.tsx
@@ -88,7 +88,7 @@ const SimpleSelect = ({ options, ...props }: ISimpleSelectProps) => {
   );
 };
 
-SimpleSelect.Element = styled(StyledInput.withComponent("select"))`
+SimpleSelect.Element = styled(StyledInput).attrs({ as: "select" })`
   appearance: none;
 
   padding-right: ${spacing.large};