v0.2.19

Author: jwoo0122

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/design-system",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "description": "Design System by Channel",
   "repository": {
     "type": "git",

package.json

@@ -4,7 +4,7 @@ import { isNil } from 'lodash-es'
 /* Internal dependencies */
 import { styled } from '../../../styling/Theme'
 import { Icon } from '../../Icon'
-import { StyledWrapperProps } from './ListMenuGroup.types'
+import { StyledWrapperProps, StyledContentWrapperProps } from './ListMenuGroup.types'
 
 export const GroupItemWrapper = styled.div<StyledWrapperProps>`
   display: flex;
@@ -20,28 +20,34 @@ export const GroupItemWrapper = styled.div<StyledWrapperProps>`
   cursor: pointer;
   border-radius: 6px;
 
-  &:hover {
-    background-color: ${props => (props.open ? 'initial' : props.theme?.colors?.background3)};
-  }
-
   ${props => !isNil(props.currentMenuItemIndex) && `
       color: ${props.theme?.colors?.focus5};
       background-color: ${props.theme?.colors?.background2};
   `}
+
+  &:hover {
+    background-color: ${props => (isNil(props.currentMenuItemIndex) && props.theme?.colors?.background3)};
+  }
 `
 
 export const StyledIcon = styled(Icon)`
   color: ${props => props.theme?.colors?.text5};
 `
 
-export const GroupItemContentWrapper = styled.div`
+export const GroupItemContentWrapper = styled.div<StyledContentWrapperProps>`
   display: flex;
   flex: 1;
   align-items: center;
+
+  ${props => !isNil(props.currentMenuItemIndex) && `
+      svg {
+        color: ${props.theme?.colors?.focus5};
+      }
+  `}
 `
 
 export const ChildrenWrapper = styled.div`
   & > * {
-    padding-left: 42px;
+    padding-left: 38px;
   }
 `

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

@@ -86,7 +86,10 @@ forwardedRef: React.Ref<HTMLElement>,
 
   const Content = useMemo(() => (
     <>
-      <GroupItemContentWrapper>
+      <GroupItemContentWrapper
+        currentMenuItemIndex={currentMenuItemIndex}
+        open={open}
+      >
         { !isNil(leftIcon) && (
           <StyledIcon
             name={leftIcon}
@@ -115,6 +118,7 @@ forwardedRef: React.Ref<HTMLElement>,
     rightContent,
     children,
     handleClickIcon,
+    currentMenuItemIndex,
   ])
 
   const Items = useMemo(() => (

src/components/List/ListMenuGroup/ListMenuGroup.tsx

@@ -19,10 +19,14 @@ export default interface ListMenuGroupProps extends ContentComponentProps {
 
 export interface StyledWrapperProps extends ContentComponentProps {
   open?: boolean
-  content?: React.ReactNode
   rightContent?: React.ReactNode
   currentMenuItemIndex?: number | null
   arrowClassName?: string
   selectedOptionIndex?: number
   onChangeOption?: (optionKey?: string, optionIndex?: number) => void
 }
+
+export interface StyledContentWrapperProps extends ContentComponentProps {
+  open?: boolean
+  currentMenuItemIndex?: number | null
+}