fix(SSR): change the unreliable pseudo class ":first-child" to ":firs…

…t-of-type" (#253) * feat: SSR-friendly by changing pseudo class ":first-child" to ":first-of-type" * fix: consistent naming for the useComponentStyle Hook * chore: ensure object safety using the getter function * fix: add missing "display: flex" property * chore(docs): update modal * docs(modal): replace "justify" shorthand with "justifyContent" * feat: refactor style and changing :first-child to :first-of-type of Drawer component * fix(SSR): change the unreliable pseudo class :first-child to :first-of-type * fix(Component): change Box to PseudoBox of DrawerHeader * refactor: import header styles from styles.js * docs: update modal.mdx * docs: update drawer.mdx and modal.mdx * docs: replace "for" with "htmlFor" Co-authored-by: Cheton Wu <[email protected]> Co-authored-by: austin_hung <[email protected]>
trendmicro-frontend · Nov 6, 2020 · 7a9cc8a · 7a9cc8a
1 parent 392e4d2
commit 7a9cc8a
Show file tree

Hide file tree

Showing 21 changed files with 212 additions and 130 deletions.
diff --git a/packages/react-styled-ui/src/Checkbox/styles.js b/packages/react-styled-ui/src/Checkbox/styles.js
@@ -158,7 +158,7 @@ const interactionProps = ({ color, colorMode }) => {
       bg: 'inherit',
       borderColor: checkedAndFocusBorderColor,
       color: checkedAndFocusColor, // Icon color
-      '& > :first-child': {
+      '& > div:first-of-type': {
         bg: checkedAndFocusBgColor,
       },
     },

diff --git a/packages/react-styled-ui/src/Drawer/DrawerBody.js b/packages/react-styled-ui/src/Drawer/DrawerBody.js
@@ -1,20 +1,15 @@
 import React, { forwardRef } from 'react';
-import Box from '../Box';
+import PseudoBox from '../PseudoBox';
+import {
+  useDrawerBodyStyle,
+} from './styles';
 
 const DrawerBody = forwardRef((props, ref) => {
+  const styleProps = useDrawerBodyStyle();
   return (
-    <Box
+    <PseudoBox
       ref={ref}
-      px="6x"
-      pb="6x"
-      flex="1"
-      h="auto"
-      overflowY="auto"
-      css={{
-        '&:first-child': {
-          marginTop: (16 + 28 + 12),
-        },
-      }}
+      {...styleProps}
       {...props}
     />
   );

diff --git a/packages/react-styled-ui/src/Drawer/DrawerContent.js b/packages/react-styled-ui/src/Drawer/DrawerContent.js
@@ -5,7 +5,7 @@ import Icon from '../Icon';
 import useForkRef from '../utils/useForkRef';
 import { useDrawer } from './context';
 import {
-  useDrawerContentStyles,
+  useDrawerContentStyle,
   useDrawerCloseButtonStyle,
 } from './styles';
 
@@ -62,7 +62,7 @@ const DrawerContentFront = forwardRef(({ children, ...props }, ref) => {
     contentRef,
   } = { ...context };
   const combinedRef = useForkRef(ref, contentRef);
-  const contentStyleProps = useDrawerContentStyles({ placement, size });
+  const contentStyleProps = useDrawerContentStyle({ placement, size });
 
   return (
     <Box

diff --git a/packages/react-styled-ui/src/Drawer/DrawerFooter.js b/packages/react-styled-ui/src/Drawer/DrawerFooter.js
@@ -1,27 +1,15 @@
 import React, { forwardRef } from 'react';
-import Flex from '../Flex';
-import useColorMode from '../useColorMode';
+import PseudoBox from '../PseudoBox';
+import {
+  useDrawerFooterStyle,
+} from './styles';
 
 const DrawerFooter = forwardRef((props, ref) => {
-  const { colorMode } = useColorMode();
-  const borderColor = {
-    dark: 'gray:80',
-    light: 'gray:20', // TBD: light mode is not ready yet
-  }[colorMode];
-
+  const styleProps = useDrawerFooterStyle();
   return (
-    <Flex
+    <PseudoBox
       ref={ref}
-      justify="flex-end"
-      px="6x"
-      py="4x"
-      borderTop={1}
-      borderTopColor={borderColor}
-      css={{
-        '&:first-child': {
-          marginTop: (16 + 28 + 12),
-        },
-      }}
+      {...styleProps}
       {...props}
     />
   );

diff --git a/packages/react-styled-ui/src/Drawer/DrawerHeader.js b/packages/react-styled-ui/src/Drawer/DrawerHeader.js
@@ -1,17 +1,16 @@
 import React, { forwardRef } from 'react';
-import Box from '../Box';
+import PseudoBox from '../PseudoBox';
+import {
+  useDrawerHeaderStyle,
+} from './styles';
 
 const DrawerHeader = forwardRef((props, ref) => {
+  const styleProps = useDrawerHeaderStyle();
+
   return (
-    <Box
+    <PseudoBox
       ref={ref}
-      pt="4x"
-      pb="3x"
-      pl="6x"
-      pr="12x"
-      position="relative"
-      fontSize="xl"
-      lineHeight="xl"
+      {...styleProps}
       {...props}
     />
   );

diff --git a/packages/react-styled-ui/src/Drawer/styles.js b/packages/react-styled-ui/src/Drawer/styles.js
@@ -97,7 +97,7 @@ const useDrawerCloseButtonStyle = () => {
   };
 };
 
-const useDrawerContentStyles = ({
+const useDrawerContentStyle = ({
   placement,
   size,
 }) => {
@@ -110,7 +110,7 @@ const useDrawerContentStyles = ({
     display: 'flex',
     flexDirection: 'column',
   };
-  const colorModeStyles = {
+  const colorModeStyle = {
     light: {
       color: 'black:primary',
       bg: 'white',
@@ -133,13 +133,64 @@ const useDrawerContentStyles = ({
 
   return {
     ...baseStyle,
-    ...colorModeStyles,
+    ...colorModeStyle,
     ...placementProps,
     ...sizeProps,
   };
 };
 
+const useDrawerHeaderStyle = () => {
+  return {
+    pt: '4x',
+    pb: '3x',
+    pl: '6x',
+    pr: '12x',
+    position: 'relative',
+    fontSize: 'xl',
+    lineHeight: 'xl',
+  };
+};
+
+const useDrawerBodyStyle = () => {
+  const { sizes, lineHeights } = useTheme();
+
+  return {
+    px: '6x',
+    pb: '6x',
+    flex: 1,
+    height: 'auto',
+    overflowY: 'auto',
+    _firstOfType: {
+      marginTop: `calc(${get(sizes, '4x')} + ${get(lineHeights, 'xl')} + ${get(sizes, '3x')})`,
+    },
+  };
+};
+
+const useDrawerFooterStyle = () => {
+  const { colorMode } = useColorMode();
+  const { sizes, lineHeights } = useTheme();
+  const borderColor = {
+    dark: 'gray:80',
+    light: 'gray:20', // TBD: light mode is not ready yet
+  }[colorMode];
+
+  return {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    px: '6x',
+    py: '4x',
+    borderTop: 1,
+    borderTopColor: borderColor,
+    _firstOfType: {
+      marginTop: `calc(${get(sizes, '4x')} + ${get(lineHeights, 'xl')} + ${get(sizes, '3x')})`,
+    },
+  };
+};
+
 export {
   useDrawerCloseButtonStyle,
-  useDrawerContentStyles,
+  useDrawerContentStyle,
+  useDrawerHeaderStyle,
+  useDrawerBodyStyle,
+  useDrawerFooterStyle,
 };
diff --git a/packages/react-styled-ui/src/Input/styles.js b/packages/react-styled-ui/src/Input/styles.js
@@ -172,7 +172,7 @@ const getInputGroupCSS = ({
   const useNegativeMargin = (variant === 'outline' || variant === 'filled');
 
   return {
-    '&:not(:first-child)': {
+    '&:not(:first-of-type)': {
       borderTopLeftRadius: 0,
       borderBottomLeftRadius: 0,
     },

diff --git a/packages/react-styled-ui/src/InputGroupAppend/styles.js b/packages/react-styled-ui/src/InputGroupAppend/styles.js
@@ -11,8 +11,8 @@ const notLastChildStyle = {
 const baseProps = {
   ml: -1,
   css: {
-    '& > *:first-child': notFirstChildStyle,
-    '&:not(:last-child) > *:first-child': notLastChildStyle,
+    '& > *:first-of-type': notFirstChildStyle,
+    '&:not(:last-child) > *:first-of-type': notLastChildStyle,
   }
 };
 

diff --git a/packages/react-styled-ui/src/InputGroupPrepend/styles.js b/packages/react-styled-ui/src/InputGroupPrepend/styles.js
@@ -11,8 +11,8 @@ const notLastChildStyle = {
 const baseProps = {
   mr: -1,
   css: {
-    '& > *:first-child': notLastChildStyle,
-    '&:not(:first-child) > *:first-child': notFirstChildStyle,
+    '& > *:first-of-type': notLastChildStyle,
+    '&:not(:first-of-type) > *:first-of-type': notFirstChildStyle,
   },
 };
 

diff --git a/packages/react-styled-ui/src/Modal/ModalBody.js b/packages/react-styled-ui/src/Modal/ModalBody.js
@@ -1,20 +1,16 @@
 import React, { forwardRef } from 'react';
-import Box from '../Box';
+import PseudoBox from '../PseudoBox';
+import {
+  useModalBodyStyle,
+} from './styles';
 
 const ModalBody = forwardRef((props, ref) => {
+  const styleProps = useModalBodyStyle();
+
   return (
-    <Box
+    <PseudoBox
       ref={ref}
-      px="6x"
-      pb="6x"
-      flex="1"
-      h="auto"
-      overflowY="auto"
-      css={{
-        '&:first-child': {
-          marginTop: (16 + 28 + 12),
-        },
-      }}
+      {...styleProps}
       {...props}
     />
   );

diff --git a/packages/react-styled-ui/src/Modal/ModalContent.js b/packages/react-styled-ui/src/Modal/ModalContent.js
@@ -5,7 +5,7 @@ import Icon from '../Icon';
 import useForkRef from '../utils/useForkRef';
 import { useModal } from './context';
 import {
-  useModalContentStyles,
+  useModalContentStyle,
   useModalCloseButtonStyle,
 } from './styles';
 
@@ -61,7 +61,7 @@ const ModalContentFront = forwardRef(({ children, ...props }, ref) => {
     contentRef,
   } = { ...context };
   const combinedRef = useForkRef(ref, contentRef);
-  const contentStyleProps = useModalContentStyles({ size });
+  const contentStyleProps = useModalContentStyle({ size });
 
   return (
     <Box

diff --git a/packages/react-styled-ui/src/Modal/ModalFooter.js b/packages/react-styled-ui/src/Modal/ModalFooter.js
@@ -1,27 +1,16 @@
 import React, { forwardRef } from 'react';
-import Flex from '../Flex';
-import useColorMode from '../useColorMode';
+import PseudoBox from '../PseudoBox';
+import {
+  useModalFooterStyle,
+} from './styles';
 
 const ModalFooter = forwardRef((props, ref) => {
-  const { colorMode } = useColorMode();
-  const borderColor = {
-    dark: 'gray:80',
-    light: 'gray:20', // TBD: light mode is not ready yet
-  }[colorMode];
+  const styleProps = useModalFooterStyle();
 
   return (
-    <Flex
+    <PseudoBox
       ref={ref}
-      justify="flex-end"
-      px="6x"
-      py="4x"
-      borderTop={1}
-      borderTopColor={borderColor}
-      css={{
-        '&:first-child': {
-          marginTop: (16 + 28 + 12),
-        },
-      }}
+      {...styleProps}
       {...props}
     />
   );

diff --git a/packages/react-styled-ui/src/Modal/ModalHeader.js b/packages/react-styled-ui/src/Modal/ModalHeader.js
@@ -1,17 +1,16 @@
 import React, { forwardRef } from 'react';
-import Box from '../Box';
+import PseudoBox from '../PseudoBox';
+import {
+  useModalHeaderStyle,
+} from './styles';
 
 const ModalHeader = forwardRef((props, ref) => {
+  const styleProps = useModalHeaderStyle();
+
   return (
-    <Box
+    <PseudoBox
       ref={ref}
-      pt="4x"
-      pb="3x"
-      pl="6x"
-      pr="12x"
-      position="relative"
-      fontSize="xl"
-      lineHeight="xl"
+      {...styleProps}
       {...props}
     />
   );