v0.2.18

Author: jwoo0122

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/design-system",
-  "version": "0.2.17",
+  "version": "0.2.18",
   "description": "Design System by Channel",
   "repository": {
     "type": "git",
@@ -147,6 +147,7 @@
     "prosemirror-model": "^1.12.0",
     "prosemirror-state": "^1.3.3",
     "prosemirror-view": "^1.16.0",
+    "ssr-window": "^2.0.0",
     "uuid": "^8.3.1"
   }
 }

package.json

@@ -1,7 +1,6 @@
 /* Internal dependencies */
 import { styled } from '../../styling/Theme'
 import { absoluteCenter } from '../../styling/Mixins'
-import Palette from '../../styling/Palette'
 import { StyledWrapperProps, StyledCheckerProps, StyledContentProps } from './Checkbox.types'
 import CheckType from './CheckType'
 
@@ -27,18 +26,18 @@ const checkerBase = (props: StyledCheckerProps) => `
     height: 9px;
     border-right: solid ${CHECKER_ICON_THICKNESS}px transparent;
     border-bottom: solid ${CHECKER_ICON_THICKNESS}px transparent;
-    border-color: ${Palette.white};
+    border-color: ${props.theme?.colors?.border0};
     content: '';
     transition: ${props.theme?.transition?.BorderTransition};
   }
 
   ${(props.checkStatus === CheckType.True || props.checkStatus === CheckType.Partial) ? `
-    background-color: ${Palette.green400};
+    background-color: ${props.theme?.colors?.success1};
     border-color: transparent;
 
     ${!props.disabled ? `
       &:hover {
-        background-color: ${Palette.green500};
+        background-color: ${props.theme?.colors.success1Hover};
       }
     ` : ''}
   ` : ''}
@@ -49,7 +48,7 @@ const partialChecked = (props: StyledCheckerProps) => ((props.checkStatus === Ch
     ${absoluteCenter`translateY(-36%) rotate(0)`}
     width: 10px;
     border-right: none;
-    border-bottom: solid 2px ${Palette.white};
+    border-bottom: solid 2px ${props.theme?.colors?.border0};
   }
 ` : '')
 
@@ -62,7 +61,7 @@ const disabled = (props: StyledCheckerProps) => ((props.disabled) ? `
     }
   ` : `
     &::after {
-      border-color: ${Palette.grey500};
+      border-color: ${props.theme?.colors?.border5}
     }
   `}
 ` : '')
@@ -79,15 +78,15 @@ export const Checker = styled.div<StyledCheckerProps>`
   min-height: ${CHECKER_BOX_SIZE}px;
   font-size: 10px;
   color: transparent;
-  background-color: ${Palette.white};
+  background-color: ${props => props.theme?.colors?.background0};
   border: ${CHECKER_BORDER_THICKNESS}px solid ${props => props.theme?.colors?.border3};
   border-radius: 4px;
   transition: ${props => props.theme?.transition?.BackgroundTransition}, ${props => props.theme?.transition?.ColorTransition};
 
   ${props => (!props.disabled ? `
     &:hover {
       &::after {
-        border-color: ${Palette.grey200};
+        border-color: ${props.theme?.colors?.border2};
       }
     }
   ` : '')}

src/components/Checkbox/Checkbox.styled.ts

@@ -10,6 +10,7 @@ import React, {
 } from 'react'
 import { DOMParser, ResolvedPos } from 'prosemirror-model'
 import { isEmpty, noop } from 'lodash-es'
+import { window, document } from 'ssr-window'
 
 /* Internal dependencies */
 import useMergeRefs from '../../hooks/useMergeRefs'
@@ -112,16 +113,16 @@ function Editor(
          * 따라서 newline 을 지켜주는 parser 를 새로 구성함.
          * 참조: https://prosemirror.net/docs/ref/#view.EditorProps.clipboardTextParser
          */
-        const dom = window.document.createElement('div')
+        const dom = window.document!.createElement('div')
 
         pastedText
           .trim()
           .split('\n')
           .forEach(block => {
             if (isEmpty(block)) {
-              dom.appendChild(document.createElement('p'))
+              dom.appendChild(document.createElement!('p'))
             } else {
-              dom.appendChild(document.createElement('p')).textContent = block
+              dom.appendChild(document.createElement!('p')).textContent = block
             }
           })
 

src/components/Editor/Editor.tsx

@@ -2,6 +2,7 @@
 import { ReactElement } from 'react'
 import { NodeView } from 'prosemirror-view'
 import { Node as ProsemirrorNode } from 'prosemirror-model'
+import { window } from 'ssr-window'
 
 /* Internal dependencies */
 import ReactNodeViewProvider from './ReactNodeViewProvider'
@@ -15,7 +16,7 @@ abstract class ReactNodeView implements NodeView {
 
   constructor(node: ProsemirrorNode, provider: ReactNodeViewProvider) {
     this.provider = provider
-    this.dom = window.document.createElement('span')
+    this.dom = window.document!.createElement('span')
     this.node = node
     this.update()
   }

src/components/Editor/utils/ReactNodeView/ReactNodeView.ts

@@ -1,11 +1,10 @@
 /* Internal dependencies */
 import { css, styled } from '../../../styling/Theme'
-import Palette from '../../../styling/Palette'
 import { StyledWrapperProps } from './ListItem.types'
 
 const ActiveItemStyle = css<StyledWrapperProps>`
-  color: ${Palette.blue500};
-  background-color: ${Palette.blue100};
+  color: ${props => props.theme?.colors?.focus5};
+  background-color: ${props => props.theme?.colors?.focus1};
 `
 
 export const Wrapper = styled.div<StyledWrapperProps>`

src/components/List/ListItem/ListItem.styled.ts

@@ -3,6 +3,7 @@ import { isNil } from 'lodash-es'
 
 /* Internal dependencies */
 import { styled } from '../../../styling/Theme'
+import { Icon } from '../../Icon'
 import { StyledWrapperProps } from './ListMenuGroup.types'
 
 export const GroupItemWrapper = styled.div<StyledWrapperProps>`
@@ -20,7 +21,7 @@ export const GroupItemWrapper = styled.div<StyledWrapperProps>`
   border-radius: 6px;
 
   &:hover {
-    background-color: ${props => props.theme?.colors?.background3};
+    background-color: ${props => (props.open ? 'initial' : props.theme?.colors?.background3)};
   }
 
   ${props => !isNil(props.currentMenuItemIndex) && `
@@ -29,6 +30,10 @@ export const GroupItemWrapper = styled.div<StyledWrapperProps>`
   `}
 `
 
+export const StyledIcon = styled(Icon)`
+  color: ${props => props.theme?.colors?.text5};
+`
+
 export const GroupItemContentWrapper = styled.div`
   display: flex;
   flex: 1;

src/components/List/ListMenuGroup/ListMenuGroup.styled.ts

@@ -4,9 +4,14 @@ import { noop, isNil, isEmpty } from 'lodash-es'
 
 /* Internal dependencies */
 import { isListItem } from '../ListItem/ListItem'
-import { Icon, IconSize } from '../../Icon'
+import { IconSize } from '../../Icon'
 import ListMenuGroupProps from './ListMenuGroup.types'
-import { GroupItemWrapper, ChildrenWrapper, GroupItemContentWrapper } from './ListMenuGroup.styled'
+import {
+  GroupItemWrapper,
+  ChildrenWrapper,
+  GroupItemContentWrapper,
+  StyledIcon,
+} from './ListMenuGroup.styled'
 
 export const SIDEBAR_MENU_GROUP_TEST_ID = 'ch-design-system-sidebar-menu-group'
 
@@ -83,7 +88,7 @@ forwardedRef: React.Ref<HTMLElement>,
     <>
       <GroupItemContentWrapper>
         { !isNil(leftIcon) && (
-          <Icon
+          <StyledIcon
             name={leftIcon}
             size={IconSize.S}
             marginRight={10}
@@ -93,7 +98,7 @@ forwardedRef: React.Ref<HTMLElement>,
       </GroupItemContentWrapper>
       {
         !isEmpty(children) && !rightContent ? (
-          <Icon
+          <StyledIcon
             className={arrowClassName}
             name={open ? 'chevron-up' : 'chevron-down'}
             size={IconSize.XS}
@@ -139,6 +144,7 @@ forwardedRef: React.Ref<HTMLElement>,
         ref={forwardedRef}
         name={name}
         className={className}
+        open={open}
         currentMenuItemIndex={currentMenuItemIndex}
         onClick={handleClickGroup}
         data-testid={testId}

src/components/List/ListMenuGroup/ListMenuGroup.tsx

@@ -5,7 +5,6 @@ import { base } from 'paths.macro'
 /* Internal dependencies */
 import { getTitle } from '../../utils/utils'
 import { styled } from '../../styling/Theme'
-import Palette from '../../styling/Palette'
 import Overlay from './Overlay'
 import { OverlayPosition } from './Overlay.types'
 
@@ -55,7 +54,7 @@ const Container = styled.div`
   width: 600px;
   height: 500px;
   overflow: scroll;
-  border: 1px solid ${Palette.grey700};
+  border: 1px solid ${props => props.theme?.colors?.border7};
 `
 
 const Wrapper = styled.div`
@@ -72,15 +71,15 @@ const Target = styled.div`
   align-items: center;
   width: 70px;
   height: 40px;
-  background-color: ${Palette.grey300};
+  background-color: ${props => props.theme?.colors?.background3};
   border-radius: 4px;
 `
 
 const Children = styled.div`
   width: 250px;
   height: 150px;
   overflow-y: scroll;
-  background-color: ${Palette.grey500};
+  background-color: ${props => props.theme?.colors?.background5};
   border-radius: 4px;
 `
 
@@ -132,4 +131,5 @@ Primary.args = {
   placement: OverlayPosition.BottomCenter,
   marginX: 0,
   marginY: 0,
+  keepInContainer: false,
 }

src/components/Overlay/Overlay.stories.tsx

@@ -10,6 +10,7 @@ import React, {
 } from 'react'
 import ReactDOM from 'react-dom'
 import { noop } from 'lodash-es'
+import { document } from 'ssr-window'
 
 /* Internal dependencies */
 import useMergeRefs from '../../hooks/useMergeRefs'
@@ -28,9 +29,9 @@ export const OVERLAY_TEST_ID = 'ch-design-system-overlay'
 
 const ESCAPE_KEY = 'Escape'
 const rootElement =
-  document.getElementById('main') ||
-  document.getElementById('root') ||
-  document.getElementsByTagName('body')[0] as HTMLElement
+  document.getElementById!('main') ||
+  document.getElementById!('root') ||
+  document.getElementById!('__next') as HTMLElement
 
 function listen<K extends keyof HTMLElementEventMap>(element: any, eventName: K, handler: EventHandler<K>) {
   if (!element) return noop
@@ -59,6 +60,7 @@ function getOverlayTranslation({
   placement,
   marginX,
   marginY,
+  keepInContainer,
 }: GetOverlayTranslatationProps): React.CSSProperties {
   if (target) {
     const {
@@ -120,16 +122,18 @@ function getOverlayTranslation({
         break
     }
 
-    const isOverTop = targetTop + translateY < rootTop
-    const isOverBottom = targetTop + translateY + overlayHeight > rootTop + rootHeight
-    const isOverLeft = targetLeft + translateX < rootLeft
-    const isOverRight = targetLeft + translateX + overlayWidth > rootLeft + rootWidth
+    if (keepInContainer) {
+      const isOverTop = targetTop + translateY < rootTop
+      const isOverBottom = targetTop + translateY + overlayHeight > rootTop + rootHeight
+      const isOverLeft = targetLeft + translateX < rootLeft
+      const isOverRight = targetLeft + translateX + overlayWidth > rootLeft + rootWidth
 
-    if (isOverTop || isOverBottom) {
-      translateY = targetHeight - translateY - overlayHeight
-    }
-    if (isOverLeft || isOverRight) {
-      translateX = targetWidth - translateX - overlayWidth
+      if (isOverTop || isOverBottom) {
+        translateY = targetHeight - translateY - overlayHeight
+      }
+      if (isOverLeft || isOverRight) {
+        translateX = targetWidth - translateX - overlayWidth
+      }
     }
 
     const transform = `translate(${translateX}px, ${translateY}px)`
@@ -144,10 +148,11 @@ function getOverlayStyle({
   placement,
   marginX,
   marginY,
+  keepInContainer,
 }: GetOverlayStyleProps): React.CSSProperties {
   if (target) {
     const overlayPositionStyle = getOverlayPosition({ target })
-    const overlayTranslateStyle = getOverlayTranslation({ target, overlay, placement, marginX, marginY })
+    const overlayTranslateStyle = getOverlayTranslation({ target, overlay, placement, marginX, marginY, keepInContainer })
 
     const combinedStyle = {
       ...overlayPositionStyle,
@@ -175,6 +180,7 @@ function Overlay(
     placement = OverlayPosition.LeftCenter,
     marginX = 0,
     marginY = 0,
+    keepInContainer = false,
     children,
     onHide = noop,
     ...otherProps
@@ -273,6 +279,7 @@ function Overlay(
         placement,
         marginX,
         marginY,
+        keepInContainer,
       })
       setOverlayStyle(tempOverlayStyle)
       setIsHidden(false)
@@ -283,7 +290,7 @@ function Overlay(
       }
     }
     return noop
-  }, [show, marginX, marginY, placement, target])
+  }, [show, marginX, marginY, placement, target, keepInContainer])
 
   if (!show) return null