Merge branch 'master' into feat/scrollbar-component

packages/react-styled-ui/package.json

@@ -17,16 +17,15 @@
     "test": "jest"
   },
   "dependencies": {
-    "@emotion/core": "10.x",
-    "@emotion/is-prop-valid": "^0.8.6",
-    "@emotion/styled": "10.x",
+    "@emotion/is-prop-valid": "1.x",
+    "@emotion/react": "11.x",
+    "@emotion/styled": "11.x",
     "@popperjs/core": "^2.1.0",
     "@styled-system/css": "5.x",
     "@trendmicro/styled-ui-theme": "^0.13.0",
-    "@trendmicro/tmicon": "^1.19.0",
+    "@trendmicro/tmicon": "^1.21.0",
     "chained-function": "^0.5.0",
     "color": "3.x",
-    "emotion-theming": "10.x",
     "ensure-type": "1.x",
     "exenv": "1.2.x",
     "lodash.get": "4.x",
@@ -38,8 +37,8 @@
     "styled-system": "5.x"
   },
   "devDependencies": {
-    "@emotion/babel-preset-css-prop": "~10.1.0",
-    "@emotion/jest": "~11.2.0",
+    "@emotion/babel-preset-css-prop": "~11.2.0",
+    "@emotion/jest": "~11.3.0",
     "@storybook/addon-actions": "~5.3.19",
     "@storybook/addon-docs": "~5.3.19",
     "@storybook/addon-links": "~5.3.19",

packages/react-styled-ui/src/CSSBaseline/base-css.js

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import _get from 'lodash.get';
 
 const baseCSS = theme => {

packages/react-styled-ui/src/CSSBaseline/index.js

@@ -1,4 +1,4 @@
-import { Global, css } from '@emotion/core';
+import { css, Global } from '@emotion/react';
 import React from 'react';
 import baseCSS from './base-css';
 import normalizeCSS from './normalize-css';

packages/react-styled-ui/src/CSSBaseline/normalize-css.js

@@ -1,6 +1,6 @@
 /* eslint max-lines-per-function: 0 */
 
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 const normalizeCSS = theme => css`
 

packages/react-styled-ui/src/Divider/index.js

@@ -5,22 +5,25 @@ import useColorMode from '../useColorMode';
 const Divider = forwardRef(({
   color,
   orientation = 'horizontal',
+  variant = 'solid',
   ...props
 }, ref) => {
   const [colorMode] = useColorMode();
   const dividerColor = color || {
-    dark: 'gray:60',
-    light: 'gray:20',
+    dark: 'white:disabled',
+    light: 'black:disabled',
   }[colorMode];
 
   const borderProps = {
     vertical: {
       borderLeft: 1,
       borderLeftColor: dividerColor,
+      borderLeftStyle: variant,
     },
     horizontal: {
       borderBottom: 1,
       borderBottomColor: dividerColor,
+      borderBottomStyle: variant,
     },
   }[orientation];
 

packages/react-styled-ui/src/Popper/styles.js

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 const getPopperArrowStyle = ({
   arrowSize,

packages/react-styled-ui/src/SearchInput/index.js

@@ -1,4 +1,4 @@
-import { keyframes } from '@emotion/core';
+import { keyframes } from '@emotion/react';
 import React, { useEffect, useRef, useState } from 'react';
 import ButtonBase from '../ButtonBase';
 import Flex from '../Flex';

packages/react-styled-ui/src/Skeleton/styles.js

@@ -1,4 +1,4 @@
-import { css, keyframes } from '@emotion/core';
+import { css, keyframes } from '@emotion/react';
 import _includes from 'lodash/includes';
 import useColorMode from '../useColorMode';
 

packages/react-styled-ui/src/Spinner/index.js

@@ -1,4 +1,4 @@
-import { keyframes } from '@emotion/core';
+import { keyframes } from '@emotion/react';
 import { ensurePositiveFiniteNumber } from 'ensure-type';
 import React, { forwardRef } from 'react';
 import Box from '../Box';

packages/react-styled-ui/src/ThemeProvider/index.js

@@ -1,4 +1,4 @@
-import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import React from 'react';
 import theme from '../theme';
 

packages/react-styled-ui/src/useTheme/index.js

@@ -1,17 +1,3 @@
-import { ThemeContext } from '@emotion/core';
-import { useContext } from 'react';
-
-const useTheme = () => {
-  if (!useContext) {
-    throw new Error('The `useContext` hook is not available with your React version.');
-  }
-
-  const theme = useContext(ThemeContext);
-  if (theme === undefined) {
-    throw new Error('The `useTheme` hook must be called from a descendent of the `ThemeProvider`.');
-  }
-
-  return theme;
-};
+import { useTheme } from '@emotion/react';
 
 export default useTheme;

packages/react-styled-ui/src/withTheme/index.js

@@ -1,19 +1,3 @@
-import { ThemeContext } from '@emotion/core';
-import React from 'react';
-
-const withTheme = (WrappedComponent) => {
-  const componentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
-  const WithTheme = React.forwardRef((props, ref) => (
-    <ThemeContext.Consumer>
-      {theme => (
-        <WrappedComponent ref={ref} theme={theme} {...props} />
-      )}
-    </ThemeContext.Consumer>
-  ));
-
-  WithTheme.displayName = `WithTheme(${componentName})`;
-
-  return WithTheme;
-};
+import { withTheme } from '@emotion/react';
 
 export default withTheme;

packages/styled-ui-docs/components/AnimatedCubeDemo.jsx

@@ -1,4 +1,4 @@
-import { keyframes } from '@emotion/core';
+import { keyframes } from '@emotion/react';
 import { Box, Image, Stack, Text, Icon, useColorMode } from '@trendmicro/react-styled-ui';
 import React from 'react';
 import Cube from './Cube';

packages/styled-ui-docs/components/CodeBlock.jsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { mdx } from '@mdx-js/react';
 import * as styledUIComponents from '@trendmicro/react-styled-ui';
 import * as tmicon from '@trendmicro/tmicon';

packages/styled-ui-docs/components/FontAwesomeIcon.jsx

@@ -1,4 +1,4 @@
-import { keyframes, ClassNames } from '@emotion/core';
+import { keyframes, ClassNames } from '@emotion/react';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';

packages/styled-ui-docs/components/MDXComponents.jsx

@@ -1,5 +1,4 @@
-/** @jsx jsx */
-import { jsx, css } from '@emotion/core';
+import { css } from '@emotion/react';
 import {
   Box,
   Image,

packages/styled-ui-docs/components/Main.jsx

@@ -1,5 +1,4 @@
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css } from '@emotion/react';
 import { Box, useColorMode } from '@trendmicro/react-styled-ui';
 import React from 'react';
 

packages/styled-ui-docs/package.json

@@ -12,8 +12,8 @@
     "test": "jest --passWithNoTests"
   },
   "devDependencies": {
-    "@emotion/core": "10.x",
-    "@emotion/styled": "10.x",
+    "@emotion/react": "11.x",
+    "@emotion/styled": "11.x",
     "@fortawesome/fontawesome-svg-core": "^1.2.30",
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-regular-svg-icons": "^5.14.0",
@@ -30,7 +30,6 @@
     "cross-env": "~7.0.3",
     "del-cli": "~3.0.1",
     "dotenv-flow": "~3.2.0",
-    "emotion-theming": "10.x",
     "ensure-type": "1.x",
     "immutability-helper": "^3.1.1",
     "jest": "^26.6.3",

packages/styled-ui-docs/pages/_app.js

@@ -1,4 +1,4 @@
-import { Global, css } from '@emotion/core';
+import { css, Global } from '@emotion/react';
 import { MDXProvider } from '@mdx-js/react';
 import {
   Box,

packages/styled-ui-docs/pages/controlbox.mdx

@@ -11,7 +11,7 @@ For this component to work, it should have a sibling `input` and be contained in
 ```jsx
 <label>
   {/* This is the sibling input, it's visually hidden */}
-  <VisuallyHidden as="input" type="checkbox" defaultChecked />
+  <VisuallyHidden as="input" type="checkbox" defaultChecked={false} />
 
   {/* This is the control box with a check icon as children */}
   <ControlBox
@@ -23,7 +23,7 @@ For this component to work, it should have a sibling `input` and be contained in
     _checked={{ bg: "green:50", color: "white", borderColor: "green:50" }}
     _focus={{ borderColor: "green:60", boxShadow: "rgba(66, 153, 225, 0.6) 0px 0px 0px 3px" }}
   >
-    <Icon icon="_core.check" size="4x" />
+    <Icon icon="check-s" size="4x" />
   </ControlBox>
 
   {/* You can pass additional text */}
@@ -38,7 +38,7 @@ For this component to work, it should have a sibling `input` and be contained in
 ```jsx
 <label>
   {/* This is the sibling input, it's visually hidden */}
-  <VisuallyHidden type="radio" as="input" />
+  <VisuallyHidden as="input" type="radio" defaultChecked={false} />
 
   {/* This is the control box with a circle as children */}
   <ControlBox
@@ -55,7 +55,7 @@ For this component to work, it should have a sibling `input` and be contained in
     _hover={{ borderColor: "gray:30" }}
     _disabled={{ opacity: "40%" }}
   >
-    <Box size="50%" bg="white" borderRadius="circle" />
+    <Icon icon="circle-o" size="4x" />
   </ControlBox>
 
   {/* You can pass additional text */}

packages/styled-ui-docs/pages/divider.mdx

@@ -21,15 +21,21 @@ The `Divider` renders a thin line vertically or horizontally.
 Pass the `orientation` prop and set it to either `horizontal` or `vertical`.
 
 ```jsx
-<Divider orientation="horizontal" />
+<Stack direction="column" spacing="4x">
+  <Divider variand="solid" orientation="horizontal" />
+  <Divider variant="dashed" orientation="horizontal" />
+  <Divider variant="dotted" orientation="horizontal" />
+</Stack>
 ```
 
 If the vertical orientation is used, make sure that the parent element is assigned a height.
 
 ```jsx
-<Flex height="12x">
-  <Divider orientation="vertical" />
-</Flex>
+<Stack direction="row" spacing="4x" height="12x">
+  <Divider variant="solid" orientation="vertical" />
+  <Divider variant="dashed" orientation="vertical" />
+  <Divider variant="dotted" orientation="vertical" />
+</Stack>
 ```
 
 ## Composition
@@ -48,5 +54,6 @@ If the vertical orientation is used, make sure that the parent element is assign
 
 | Name | Type | Default | Description |
 | :--- | :--- | :------ | :---------- |
-| orientation | string | 'horizontal' | The orientation of the divider. Acceptable values: `'horizontal'`, `'vertical'` |
+| variant | string | 'solid' | The variant of the divider style to use. One of: `'solid'`, `'dashed'`, `'dotted'` |
+| orientation | string | 'horizontal' | The orientation of the divider. One of: `'horizontal'`, `'vertical'` |
 

packages/styled-ui-docs/pages/getting-started.mdx

@@ -74,7 +74,7 @@ Sometimes you may need to apply base CSS styles to your application. Styled UI e
 `CSSBaseline` is recommended to add at the root to ensure all components work correctly.
 
 ```js
-import { Global, css } from '@emotion/core';
+import { css, Global } from '@emotion/react';
 import {
   Box,
   ColorModeProvider,

packages/styled-ui-docs/pages/menu.mdx

@@ -272,44 +272,44 @@ Add `skidding` or `distance` to customize menu offset position
 
 ### Menu Props
 
-| Name          | Type               | Default | Description                                                  |
-| ------------- | ------------------ | ------- | ------------------------------------------------------------ |
-| children      | React.ReactNode    |         | The children of the menu must be `MenuButton` or `MenuList`  |
-| isOpen        | boolean            |         | If `true`, the menu will be opened                           |
-| autoSelect    | boolean            | `false` | The menu will select the first enabled item when it opens, the trigger item must be `MenuButton`    |
-| closeOnBlur   | boolean            | `true`  | If `true`, the menu will close on outside click or blur      |
-| closeOnSelect | boolean            | `true`  | If `true`, the menu will close on menu item select           |
-| placement     | PopperJS.placement | `bottom-start` | The placement of the `MenuList`. One of: `'top'`, `'bottom'`, `'right'`, `'left'`, `'top-start'`, `'top-end'`, `'bottom-start'`, `'bottom-end'`, `'right-start'`, `'right-end'`, `'left-start'`, `'left-end'`  |
+| Name | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| children | ReactNode | | The children of the menu must be `MenuButton` or `MenuList` |
+| isOpen | boolean | | If `true`, the menu will be opened |
+| autoSelect | boolean | `false` | The menu will select the first enabled item when it opens, the trigger item must be `MenuButton` |
+| closeOnBlur | boolean | `true` | If `true`, the menu will close on outside click or blur |
+| closeOnSelect | boolean | `true` | If `true`, the menu will close on menu item select |
+| placement | PopperJS.placement | `bottom-start` | The placement of the `MenuList`. One of: `'top'`, `'bottom'`, `'right'`, `'left'`, `'top-start'`, `'top-end'`, `'bottom-start'`, `'bottom-end'`, `'right-start'`, `'right-end'`, `'left-start'`, `'left-end'` |
 
 ### MenuButton Props
 
-| Name      | Type                       |
-| --------- | -------------------------- |
-| children  | React.ReactNode            |
-| onClick   | React.MouseEventHandler    |
+| Name | Type |
+| :--- | :--- |
+| children | ReactNode |
+| onClick | React.MouseEventHandler |
 | onKeyDown | React.KeyboardEventHandler |
 
 ### MenuList Props
 
-| Name      | Type                    | Default        | Description                                                       |
-| --------- | ----------------------- | -------------- | ----------------------------------------------------------------- |
-| children  | React.ReactNode         |                | The content of the `MenuList`, should be the `MenuItem` component |
-| onClick   | React.MouseEventHandler |                | Function to be called when you click on the menu item             |
-| onBlur    | React.FocusEventHandler |                | Function to be called when you blur out of the menu list          |
-| skidding  | number                  | `0`            | Displaces the menu (in pixels) along the reference element. Used by [`popper.js`](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1)          |
-| distance  | number                  | `0`            | Displaces the menu (in pixels) away from, or toward, the reference. Used by [`popper.js`](https://popper.js.org/docs/v2/modifiers/offset/#distance-1)  |
+| Name | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| children | ReactNode | | The content of the `MenuList`, should be the `MenuItem` component |
+| onClick | React.MouseEventHandler | | Function to be called when you click on the menu item |
+| onBlur | React.FocusEventHandler | | Function to be called when you blur out of the menu list |
+| skidding | number | `0` | Displaces the menu (in pixels) along the reference element. Used by [`popper.js`](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1) |
+| distance | number | `0` | Displaces the menu (in pixels) away from, or toward, the reference. Used by [`popper.js`](https://popper.js.org/docs/v2/modifiers/offset/#distance-1) |
 
 ### MenuItem Props
 
-| Name       | Type                                          | Description                                               |
-| ---------- | --------------------------------------------- | --------------------------------------------------------- |
-| disabled   | boolean                                       | If `true`, the menu item will be disabled                 |
-| onClick    | React.MouseEventHandler                       | Function that is called on click and enter/space keypress |
-| onKeyDown  | React.KeyboardEventHander                     | Function that is called on keydown                        |
+| Name | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| disabled | boolean | If `true`, the menu item will be disabled |
+| onClick | React.MouseEventHandler | Function that is called on click and enter/space keypress |
+| onKeyDown | React.KeyboardEventHander | Function that is called on keydown |
 
 ### MenuGroup Props
 
-| Name     | Type            | Description                   |
-| -------- | --------------- | ----------------------------- |
-| children | React.ReactNode | The content of the menu group, should be the `MenuItem` component |
-| title    | string          | The title of the menu group   |
+| Name | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| children | ReactNode | The content of the menu group, should be the `MenuItem` component |
+| title | string | The title of the menu group |

packages/styled-ui-docs/pages/popover.mdx

@@ -413,7 +413,7 @@ The word _"trigger"_ refers to the children of PopoverTrigger.
 | returnFocusOnClose | boolean | true | If `true`, the popover will return the focus status to the trigger when closing. |
 | closeOnBlur | boolean | true | If `true`, the popover will close when you use the tab key or click outside the popover dialog. |
 | closeOnEsc | boolean | true | If `true`, the popover will close when you press the `esc` key. |
-| children | React.ReactNode, (props: InternalState) => React.ReactNode | | The children of the popover. |
+| children | ReactNode, (props: InternalState) => ReactNode | | The children of the popover. |
 | hideArrow | boolean | | If `true`, hide the arrow tip on the popover. |
 | skidding | number | 0 | Displaces the popover (in pixels) along the reference element. Used by [`popper.js`](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1) |
 | distance | number | 4 | Displaces the popover (in pixels) away from, or toward, the reference. Used by [`popper.js`](https://popper.js.org/docs/v2/modifiers/offset/#distance-1) |

packages/styled-ui-docs/pages/spacing.mdx

@@ -40,7 +40,7 @@ By default, the values are proportional. Therefore, a `1x` spacing unit is equal
 | 64x | 16rem   | 256px | <Box bg="teal:50" h="4x" w="64x"/> |
 
 ```jsx
-<Stack direction="row" spacing="8x" justifyContent="center">
+<Stack direction="column" spacing="6x">
   <Box>
     <Box display="inline-block" width="18x" height="18x" bg="gray:70" mr="1x" />
     <Box display="inline-block" width="18x" height="18x" bg="gray:70" />
@@ -50,7 +50,7 @@ By default, the values are proportional. Therefore, a `1x` spacing unit is equal
     <Box display="inline-block" width="18x" height="18x" bg="gray:70" />
   </Box>
   <Box>
-    <Box display="inline-block" width="18x" height="18x" bg="gray:70" mr="3x" />
+    <Box display="inline-block" width="18x" height="18x" bg="gray:70" mr="4x" />
     <Box display="inline-block" width="18x" height="18x" bg="gray:70" />
   </Box>
 </Stack>