From 8342bf03bb8b868bb7b84e0c2deb035e96e30d16 Mon Sep 17 00:00:00 2001
From: Ed <sungik.dev@gmail.com>
Date: Wed, 13 Nov 2024 20:23:11 +0900
Subject: [PATCH] Improves the styling of the `ListItem` component based on
 whether it is interactive or not (#2501)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue

<!-- Please link to issue if one exists -->

<!-- Fixes #0000 -->

## Summary

<!-- Please brief explanation of the changes made -->

Improves the styling of the `ListItem` component based on whether it is
interactive or not

## Details

<!-- Please elaborate description of the changes -->

- `onClick` 여부에 따라 커서, 호버 스타일을 차등 적용합니다.
- `disabled` 상태의 커서를 기본값이 아니라, 다른 컴포넌트와 마찬가지로 `not-allowed` 를 사용하도록
변경합니다.

### Breaking change? (Yes/No)

<!-- If Yes, please describe the impact and migration path for users -->

No

## References

<!-- Please list any other resources or points the reviewer should be
aware of -->
---
 .changeset/long-hornets-grin.md                        |  5 +++++
 .../src/components/ListItem/ListItem.module.scss       | 10 ++++++----
 .../bezier-react/src/components/ListItem/ListItem.tsx  |  2 ++
 3 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/long-hornets-grin.md

diff --git a/.changeset/long-hornets-grin.md b/.changeset/long-hornets-grin.md
new file mode 100644
index 0000000000..0c82d6e5ac
--- /dev/null
+++ b/.changeset/long-hornets-grin.md
@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': patch
+---
+
+Improves the styling of the `ListItem` component based on whether it is interacted with or not.
diff --git a/packages/bezier-react/src/components/ListItem/ListItem.module.scss b/packages/bezier-react/src/components/ListItem/ListItem.module.scss
index b477f9a3a0..ea80bce589 100644
--- a/packages/bezier-react/src/components/ListItem/ListItem.module.scss
+++ b/packages/bezier-react/src/components/ListItem/ListItem.module.scss
@@ -3,8 +3,6 @@
 }
 
 .ListItem {
-  cursor: pointer;
-
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -43,12 +41,16 @@
     border-radius: var(--radius-12);
   }
 
+  &:where(.clickable) {
+    cursor: pointer;
+  }
+
   &:where(.disabled) {
-    cursor: default;
+    cursor: not-allowed;
     opacity: var(--opacity-disabled);
   }
 
-  &:where(:not(.disabled, .active)) {
+  &:where(.clickable:not(.disabled, .active)) {
     &:where(.focused, :focus-visible) {
       background-color: var(--bg-black-lighter);
     }
diff --git a/packages/bezier-react/src/components/ListItem/ListItem.tsx b/packages/bezier-react/src/components/ListItem/ListItem.tsx
index f5a52ddc69..9b91f07bb8 100644
--- a/packages/bezier-react/src/components/ListItem/ListItem.tsx
+++ b/packages/bezier-react/src/components/ListItem/ListItem.tsx
@@ -49,6 +49,7 @@ export const ListItem = forwardRef<ListItemRef, ListItemProps>(
     },
     forwardedRef
   ) {
+    const clickable = !isNil(onClick)
     const isLink = !isEmpty(href)
     const Comp = isLink ? 'a' : ((as ?? 'div') as 'div')
 
@@ -67,6 +68,7 @@ export const ListItem = forwardRef<ListItemRef, ListItemProps>(
           disabled && styles.disabled,
           focused && styles.focused,
           active && styles.active,
+          clickable && styles.clickable,
           className
         )}
         ref={forwardedRef}