Skip to content

Commit

Permalink
v0.2.18
Browse files Browse the repository at this point in the history
  • Loading branch information
jwoo0122 authored Nov 4, 2020
2 parents dd6d143 + b1f8cda commit 63cbabf
Show file tree
Hide file tree
Showing 14 changed files with 92 additions and 49 deletions.
7 changes: 6 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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"
}
}
15 changes: 7 additions & 8 deletions src/components/Checkbox/Checkbox.styled.ts
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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};
}
` : ''}
` : ''}
Expand All @@ -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};
}
` : '')

Expand All @@ -62,7 +61,7 @@ const disabled = (props: StyledCheckerProps) => ((props.disabled) ? `
}
` : `
&::after {
border-color: ${Palette.grey500};
border-color: ${props.theme?.colors?.border5}
}
`}
` : '')
Expand All @@ -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};
}
}
` : '')}
Expand Down
7 changes: 4 additions & 3 deletions src/components/Editor/Editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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
}
})

Expand Down
3 changes: 2 additions & 1 deletion src/components/Editor/utils/ReactNodeView/ReactNodeView.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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()
}
Expand Down
5 changes: 2 additions & 3 deletions src/components/List/ListItem/ListItem.styled.ts
Original file line number Diff line number Diff line change
@@ -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>`
Expand Down
7 changes: 6 additions & 1 deletion src/components/List/ListMenuGroup/ListMenuGroup.styled.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>`
Expand All @@ -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) && `
Expand All @@ -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;
Expand Down
14 changes: 10 additions & 4 deletions src/components/List/ListMenuGroup/ListMenuGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -83,7 +88,7 @@ forwardedRef: React.Ref<HTMLElement>,
<>
<GroupItemContentWrapper>
{ !isNil(leftIcon) && (
<Icon
<StyledIcon
name={leftIcon}
size={IconSize.S}
marginRight={10}
Expand All @@ -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}
Expand Down Expand Up @@ -139,6 +144,7 @@ forwardedRef: React.Ref<HTMLElement>,
ref={forwardedRef}
name={name}
className={className}
open={open}
currentMenuItemIndex={currentMenuItemIndex}
onClick={handleClickGroup}
data-testid={testId}
Expand Down
8 changes: 4 additions & 4 deletions src/components/Overlay/Overlay.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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`
Expand All @@ -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;
`

Expand Down Expand Up @@ -132,4 +131,5 @@ Primary.args = {
placement: OverlayPosition.BottomCenter,
marginX: 0,
marginY: 0,
keepInContainer: false,
}
35 changes: 21 additions & 14 deletions src/components/Overlay/Overlay.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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
Expand Down Expand Up @@ -59,6 +60,7 @@ function getOverlayTranslation({
placement,
marginX,
marginY,
keepInContainer,
}: GetOverlayTranslatationProps): React.CSSProperties {
if (target) {
const {
Expand Down Expand Up @@ -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)`
Expand All @@ -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,
Expand Down Expand Up @@ -175,6 +180,7 @@ function Overlay(
placement = OverlayPosition.LeftCenter,
marginX = 0,
marginY = 0,
keepInContainer = false,
children,
onHide = noop,
...otherProps
Expand Down Expand Up @@ -273,6 +279,7 @@ function Overlay(
placement,
marginX,
marginY,
keepInContainer,
})
setOverlayStyle(tempOverlayStyle)
setIsHidden(false)
Expand All @@ -283,7 +290,7 @@ function Overlay(
}
}
return noop
}, [show, marginX, marginY, placement, target])
}, [show, marginX, marginY, placement, target, keepInContainer])

if (!show) return null

Expand Down
3 changes: 3 additions & 0 deletions src/components/Overlay/Overlay.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export default interface OverlayProps extends UIComponentProps, ChildrenComponen
placement?: OverlayPosition
marginX?: number
marginY?: number
keepInContainer?: boolean
onHide?: () => void
}

Expand All @@ -21,6 +22,7 @@ export interface GetOverlayStyleProps {
placement: OverlayPosition
marginX: number
marginY: number
keepInContainer: boolean
}

export interface GetOverlayPositionProps {
Expand All @@ -33,6 +35,7 @@ export interface GetOverlayTranslatationProps {
placement: OverlayPosition
marginX: number
marginY: number
keepInContainer: boolean
}

export interface StyledOverlayProps {
Expand Down
Loading

0 comments on commit 63cbabf

Please sign in to comment.