diff --git a/package.json b/package.json index 8d6ae909..b1734c9e 100644 --- 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 index 7ed1cd03..5dd4728e 100644 --- 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 = forwardRef( const inputRef = useRef(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 index b4910dfb..abe44d62 100644 --- a/src/NewMenu/SubMenu.tsx +++ b/src/NewMenu/SubMenu.tsx @@ -49,7 +49,6 @@ const SubMenu: FunctionComponent = ({ 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 index 0bdf6fab..34acea2d 100644 --- a/src/NewMenu/styles.ts +++ b/src/NewMenu/styles.ts @@ -1,4 +1,4 @@ -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import { animated } from 'react-spring/hooks.cjs'; import tag from 'utils/CleanTag'; @@ -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)` 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)` 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 index 097a5a1e..367e96c3 100644 --- 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 index c0199444..69e98903 100644 --- 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)` 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)` `}; ${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 index d99f7061..6bf2be3e 100644 --- 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==