chore: fallback react to 16.8-alpha.0

Yoctol · Jan 30, 2019 · f25d4ef · f25d4ef
1 parent 0216319
commit f25d4ef
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -68,8 +68,8 @@
     "styled-system": "^3.2.1"
   },
   "peerDependencies": {
-    "react": ">=16.7.0-alpha.2",
-    "react-dom": ">=16.7.0-alpha.2",
+    "react": "16.8.0-alpha.0",
+    "react-dom": "16.8.0-alpha.0",
     "react-icons": ">=3.2.0",
     "styled-components": ">=4.1.0"
   },
@@ -120,8 +120,8 @@
     "lint-staged": "^8.1.0",
     "prettier": "^1.16.1",
     "prettier-package-json": "^2.0.1",
-    "react": "^16.8.0-alpha.1",
-    "react-dom": "^16.8.0-alpha.1",
+    "react": "^16.8.0-alpha.0",
+    "react-dom": "16.8.0-alpha.0",
     "react-icons": "^3.3.0",
     "react-testing-library": "^5.4.4",
     "rollup": "^1.1.2",

diff --git a/src/Input/Input.tsx b/src/Input/Input.tsx
@@ -6,6 +6,7 @@ import React, {
   forwardRef,
   isValidElement,
   useEffect,
+  useImperativeMethods,
   useRef,
 } from 'react';
 import styled, { css } from 'styled-components';
@@ -203,7 +204,7 @@ const Input: FunctionComponent<IInputProps> = forwardRef(
     const inputRef = useRef<any>(null);
 
     // FIXME: wait for upstream: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/32144
-    (React as any).useImperativeHandle(ref, () => ({
+    useImperativeMethods(ref, () => ({
       focus: () => inputRef.current.focus(),
       blur: () => inputRef.current.blur(),
     }));

diff --git a/src/NewMenu/SubMenu.tsx b/src/NewMenu/SubMenu.tsx
@@ -49,7 +49,6 @@ const SubMenu: FunctionComponent<ISubMenuProps> = ({
       light
       placement="right"
       content={title}
-      minWidth="60px"
       visible={!contentVisible && tooltipVisible}
       onVisibleChange={visible => {
         if (!contentVisible) {

diff --git a/src/NewMenu/styles.ts b/src/NewMenu/styles.ts
@@ -11,6 +11,7 @@ const SubMenuWrapper = styled(tag.div)`
   flex-direction: column;
   height: 100%;
   background-color: ${p => p.theme.colors.primary};
+  box-shadow: 4px 0 6px 0 rgba(94, 94, 94, 0.5);
 `;
 
 export const AnimatedSubMenuWrapper = animated(SubMenuWrapper);
@@ -44,17 +45,13 @@ export const StyledSubMenu = styled(tag.div)<IStyledSubMenuProps>`
   box-sizing: border-box;
   width: 48px;
   height: 48px;
-  border-left: 3px solid transparent;
-  background-color: ${p => p.theme.colors.primaryDark};
+  border-right: 3px solid transparent;
+  border-left: 3px solid
+    ${p => (p.active ? p.theme.colors.secondaryLight : 'transparent')};
+  background-color: ${p =>
+    p.active ? p.theme.colors.primary : p.theme.colors.primaryDark};
   color: white;
 
-  ${p =>
-    p.active &&
-    css`
-      background-color: ${p.theme.colors.primary};
-      border-color: ${p.theme.colors.secondaryLight};
-    `}
-
   ${p => p.theme.transition};
 `;
 
@@ -68,17 +65,12 @@ export const StyledMenuItem = styled(tag.div)<IStyledMenuItemProps>`
   width: 100%;
   height: 48px;
   padding: 0 ${p => p.theme.space[3]};
-  color: ${p => p.theme.colors.light};
+  color: ${p =>
+    p.active ? p.theme.colors.secondaryLight : p.theme.colors.light};
   font-size: ${p => p.theme.fontSizes.base};
   cursor: pointer;
 
   &:hover {
     background-color: ${p => p.theme.colors.primaryLight};
   }
-
-  ${({ active }) =>
-    active &&
-    css`
-      color: ${p => p.theme.colors.secondaryLight};
-    `};
 `;
diff --git a/src/Popconfirm/__tests__/__snapshots__/Popconfirm.spec.tsx.snap b/src/Popconfirm/__tests__/__snapshots__/Popconfirm.spec.tsx.snap
@@ -320,9 +320,12 @@ exports[`Popconfirm should render correctly 1`] = `
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
   color: #ffffff;
   font-size: 0.875rem;
+  white-space: nowrap;
   opacity: 0.8;
-  padding: 0.25rem;
-  min-width: 120px;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
   border-radius: 0.25rem;
   text-align: center;
   padding: 0;

diff --git a/src/Tooltip/BaseTooltip.tsx b/src/Tooltip/BaseTooltip.tsx
@@ -2,12 +2,10 @@ import styled, { css } from 'styled-components';
 import {
   BorderRadiusProps,
   ColorProps,
-  MinWidthProps,
   SpaceProps,
   TextAlignProps,
   borderRadius,
   color,
-  minWidth,
   space,
   textAlign,
 } from 'styled-system';
@@ -17,7 +15,6 @@ import tag from 'utils/CleanTag';
 import { Placement } from '../Trigger/type';
 
 export type TooltipContentProps = SpaceProps &
-  MinWidthProps &
   ColorProps &
   BorderRadiusProps &
   TextAlignProps & {
@@ -34,6 +31,7 @@ export const TooltipContent = styled(tag.div)<TooltipContentProps>`
   color: ${({ light, theme: { colors } }) =>
     light ? colors.gray700 : colors.light};
   font-size: ${p => p.theme.fontSizes.sm};
+  white-space: nowrap;
 
   ${({ light }) =>
     !light &&
@@ -42,15 +40,14 @@ export const TooltipContent = styled(tag.div)<TooltipContentProps>`
     `};
 
   ${space};
-  ${minWidth};
   ${color};
   ${borderRadius};
   ${textAlign};
 `;
 
 TooltipContent.defaultProps = {
-  minWidth: 120,
-  p: 1,
+  py: 1,
+  px: 2,
   textAlign: 'center',
   borderRadius: 'base',
 };

diff --git a/yarn.lock b/yarn.lock
@@ -9996,25 +9996,25 @@ react-docgen@^3.0.0-rc.1:
     node-dir "^0.1.10"
     recast "^0.16.0"
 
-react-dom@^16.7.0:
-  version "16.7.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0.tgz#a17b2a7ca89ee7390bc1ed5eb81783c7461748b8"
-  integrity sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==
+react-dom@16.8.0-alpha.0:
+  version "16.8.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.0-alpha.0.tgz#47bbcf42593eab5468b577d3c3f3c27f251a65ef"
+  integrity sha512-OGfLUXGxtMgqLB1BqnB9flVCvc8VvAnhQYeFr+EUzwiODcD34dPrxtfa7ccK4dwzcPi8HRLSyBcaQi2OvVoUww==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.12.0"
+    scheduler "^0.13.0-alpha.0"
 
-react-dom@^16.8.0-alpha.1:
-  version "16.8.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.0-alpha.1.tgz#dab73b8354ba2e498e3127d18e29d4546cea889e"
-  integrity sha512-tZCUM8BpnwUHJmLnUWP9c3vVZxnCqYotj7s4tx7umojG6BKv745KIBtuPTzt0EI0q50GMLEpmT/CPQ8iA61TwQ==
+react-dom@^16.7.0:
+  version "16.7.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0.tgz#a17b2a7ca89ee7390bc1ed5eb81783c7461748b8"
+  integrity sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.0-alpha.1"
+    scheduler "^0.12.0"
 
 react-dropzone@7.0.1:
   version "7.0.1"
@@ -10229,15 +10229,15 @@ react@>=16.0.0, react@^16.7.0:
     prop-types "^15.6.2"
     scheduler "^0.12.0"
 
-react@^16.8.0-alpha.1:
-  version "16.8.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.0-alpha.1.tgz#c2b32689f3b466d3ce85a634dd9035f789d2cd97"
-  integrity sha512-vLwwnhM2dXrCsiQmcSxF2UdZVV5xsiXjK5Yetmy8dVqngJhQ3aw3YJhZN/YmyonxwdimH40wVqFQfsl4gSu2RA==
+react@^16.8.0-alpha.0:
+  version "16.8.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.0-alpha.0.tgz#8545eb79534cce5ba99ed40085f7f955e8857a19"
+  integrity sha512-B/nJJkNqV4JAJQ1M0Q38ZvhZ6BoYsjyZq29hbsIIPYayn/0DcYhu7tExpfzdtTC0SnUcA+RnDBTlXTEJ5b9PEg==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.0-alpha.1"
+    scheduler "^0.13.0-alpha.0"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
@@ -10950,7 +10950,7 @@ scheduler@^0.12.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.13.0-alpha.1:
+scheduler@^0.13.0-alpha.0:
   version "0.13.0-alpha.1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.0-alpha.1.tgz#753977fb4fb35d8cdd559868a11e46b640955556"
   integrity sha512-W0sH0848sVuPKg+I18vTYQyzVtA4X1lrVgSeXK6KnOPUltFdJcY5nkbTkjGUeS/E0x+eBsNYfSdhJtGjT95njw==