[Feature] Chip 컴포넌트 구현 #27

eugene028 · 2024-05-25T17:30:51Z

🎉 변경 사항

chip 컴포넌트를 구현했습니다!
키보드 구현을 달았습니다.
서현님과 마찬가지로, Chip은 버튼으로도 쓰이고 div로도 쓰이고 span으로도 쓰일 수 있어서 폴리노믹하게 구현했어요.
Button과 관련된 Props를 쉽게 관리할 수 있도록 BasicButtonProps 타입을 만들었어요!
mono 관련된 컬러 토큰이 없길래 추가했습니당.

🚩 관련 이슈

#24

🙏 여기는 꼭 봐주세요!

예영님께서 Chip과 관련된 명세를 구체화시켜주셔서, 관련하여 이번 PR에서는 아래 사진에 표시된 범위까지의 작업을 진행했습니다.

Filter Chip을 관리하고, Input chip을 관리할 수 있는 FilterChipGroup, InputChipGroup 컴포넌트를 새로 만들 예정입니다. 이 때, 키보드 구현도 같이 해둘 거예요!
(Input Chip은 아래 사진 예시와 같음)

구현하고자 하는 방법... 간단예시

<FilterChipGroup>
   <Chip label='1번 필터 칩'/>
   <Chip label='2번 필터 칩'/>
</FilterChipGroup>

타임어택 이슈로 테스트 코드는 다른 PR에 올릴게요! 🥹

ghdtjgus76

수고하셨습니다 😀

.eslintcache

packages/wow-ui/src/components/Chip/closeButton.tsx

packages/wow-ui/src/components/Chip/index.tsx

packages/wow-ui/src/components/Chip/Chip.stories.ts

packages/wow-ui/src/components/Chip/index.tsx

packages/wow-ui/package.json

packages/wow-ui/src/components/Chip/index.tsx

SeieunYoo

수고하셨습니다🤗

SeieunYoo · 2024-05-26T03:37:51Z

packages/theme/src/color.ts

+import { black } from "../../wow-tokens/dist/color.js";
+


p3;
color 에서 black 을 가져오고 있어서 이 import 는 없어도 될 것 같습니다!

packages/wow-ui/src/components/Chip/index.tsx

packages/wow-ui/src/components/Chip/Chip.stories.ts

packages/wow-ui/src/types/button.ts

ghdtjgus76 · 2024-05-28T10:36:24Z

CloseButton import문만 변경되고 파일명 자체가 변경이 안 돼서 빌드 실패하는 거 같으니 확인 부탁드려요~

packages/wow-ui/src/components/Chip/Chip.stories.ts

github-actions · 2024-05-30T07:10:53Z

🚀 storybook: https://663657b8272769a8d18a5e3f-pgixqnvdsy.chromatic.com/

eugene028 · 2024-05-30T07:14:05Z

Disabled Chip이 color-contrast 관련해서 nonpass를 받아서 a11y-test가 실패하네요! 참고 부탁드립니다! 🥹

ghdtjgus76

수고하셨어요! 😀

packages/wow-ui/src/components/Chip/Chip.stories.ts

apps/wow-docs/app/page.tsx

packages/wow-ui/src/components/Chip/index.tsx

github-actions · 2024-06-01T16:32:48Z

🚀 storybook: https://663657b8272769a8d18a5e3f-ikfdywixst.chromatic.com/

github-actions · 2024-06-01T18:29:40Z

🚀 storybook: https://663657b8272769a8d18a5e3f-jusxlxmazt.chromatic.com/

github-actions · 2024-06-01T19:01:56Z

🚀 storybook: https://663657b8272769a8d18a5e3f-oqhuirsvcf.chromatic.com/

SeieunYoo

수고하셨어용~~

packages/wow-ui/package.json

packages/wow-icons/src/CloseButton.tsx

github-actions · 2024-06-05T07:28:20Z

🚀 storybook: https://663657b8272769a8d18a5e3f-rhneotjvie.chromatic.com/

github-actions · 2024-06-05T09:46:17Z

🚀 storybook: https://663657b8272769a8d18a5e3f-vehozwuqzy.chromatic.com/

github-actions · 2024-06-07T08:25:51Z

🚀 storybook: https://663657b8272769a8d18a5e3f-lvemdqztiq.chromatic.com/

github-actions · 2024-06-07T08:40:14Z

🚀 storybook: https://663657b8272769a8d18a5e3f-apnrceuema.chromatic.com/

github-actions · 2024-06-07T08:40:21Z

🚀 storybook: https://663657b8272769a8d18a5e3f-ldwjxmnsqh.chromatic.com/

github-actions · 2024-06-07T13:42:41Z

🚀 storybook: https://663657b8272769a8d18a5e3f-icudtbpehm.chromatic.com/

hamo-o

수고하셨습니당 -!! 리뷰는 다음 PR에 반영해주셔도 됩니다!

hamo-o · 2024-06-07T13:41:29Z

packages/wow-ui/src/components/Chip/index.tsx

+            bgColor: "blue.500",
+            shadow: "0px 0.25rem 0.5rem 0px rgba(16, 43, 74, 0.20)",
+          },
+          _pressed: { bgColor: "blue.400" },


p2;
pressed 했을 때 스타일이 바뀌지 않는데 확인 부탁드립니다!

허허 clickabled:true 속성을 줘야지만 스타일이 바뀐답니닷 😉

__pressed 는 data-pressed 나 aria-pressed 속성이 있어야 동작하는 것 같아요!
그래서 따로 data-pressed 속성을 전달해야 pressed css 적용이 되는 것 같더라구용

hamo-o · 2024-06-07T13:49:54Z

packages/wow-ui/src/components/Chip/index.tsx

+        if (event.key === "Enter" || event.key === " ") {
+          setIsChecked((prev) => !prev);
+          onKeyDown?.();
+        }
+      }


p3;
KeyUp 시에 토글되도록 하고 KeyDown 했을 때는 pressed 상태로 설정하면 어떨까요? 지금은 꾹 누르면 계속 토글되는 것 같아요!

엇 그렇게 해 두면 항상 토글이 되어서 꾸우욱 누르고있을때만 pressed 상태가 유지될것 같아용
그래서 KeyDown 동작이 끝나면 토글이 1회 되게끔 구현해뒀어요~!!!

엇 뭔가 위 문제도 그렇고 제 노트북 입력이 좀 이상한 것 같기도 하네요...?ˀ 체크박스에서도 pressed를 제가 처음에 확인을 못했거든요 ㅜ ㅜ 저는 clickable 줘도 pressed 스타일링은 안보이고(마우스, 키보드) 꾹 누르면 요렇게 동작합니다(키보드)

default.mov

꾹 눌렀을 때 의도한 동작은 영상 첨부해주신 것이 맞기는 해요!! 🥹 clickable 부여되었을 때 스타일링이 마우스 키보드 눌러주었을때의 스타일링이 적용된거예용 (배경 파란색)

ghdtjgus76

수고하셨습니다.... 👍

아래 forwardRef 타입 관련해서 참고하면 좋을만한 코드가 있어서 가져왔는데 아래 코드에서도 ref는 any로 처리했네요...
추후 더 찾아보고 해결하는 걸로...
https://github.com/radix-ui/primitives/blob/main/packages/react/primitive/src/Primitive.tsx

github-actions · 2024-06-07T16:18:19Z

🚀 storybook: https://663657b8272769a8d18a5e3f-qhjhpbvzba.chromatic.com/

github-actions · 2024-06-07T16:37:48Z

🚀 storybook: https://663657b8272769a8d18a5e3f-menmrcasmt.chromatic.com/

eugene028 added 마감 D-Day 👩‍💻 리뷰 남겨주세요! labels May 25, 2024

eugene028 self-assigned this May 25, 2024

eugene028 requested review from ghdtjgus76, hamo-o, SeieunYoo and kongnayeon as code owners May 25, 2024 17:30

ghdtjgus76 reviewed May 26, 2024

View reviewed changes

SeieunYoo reviewed May 26, 2024

View reviewed changes

ghdtjgus76 reviewed May 28, 2024

View reviewed changes

packages/wow-ui/src/components/Chip/Chip.stories.ts Outdated Show resolved Hide resolved

eugene028 force-pushed the feature/chip-component branch from 4200713 to 8ff133b Compare May 29, 2024 03:33

ghdtjgus76 reviewed May 31, 2024

View reviewed changes

SeieunYoo reviewed Jun 2, 2024

View reviewed changes

packages/wow-ui/package.json Outdated Show resolved Hide resolved

packages/wow-icons/src/CloseButton.tsx Outdated Show resolved Hide resolved

eugene028 added 6 commits June 7, 2024 22:34

feat: button 타입 설정, Chip 컴포넌트 Compound 구성

6befcc7

feat: Chip 모양새 거의 다 다듬어 감

69858fe

feat: Chip Storybook 문서 다듬기

6c92cd4

chore: 주석 제거

7955b59

chore: ally 테스트 통과하기 위해

41cd9d6

chore: 접근성 테스트 직접 해보기

ed165bf

eugene028 added 16 commits June 7, 2024 22:34

chore: 코드리뷰 반영

25039d9

chore:코드리뷰 반영2

1573082

refac: 디자인 명세 교체에 따른 Chip 컴포넌트 동작 방식 수정

98cb8b3

refac: disabled 속성 추가

c1781b0

chore: 오타 수정 및 docs 테스트

52ff6ca

fix: 빌드 에러 제거

5c288c7

chore: displayName 추가

0687839

chore: 버전업

f48dd80

chore: 없어졌던 clickable 추가

9c0bb91

feat: clickable

b217e4d

fix: 모든 내용 해결

2663e90

fix: 코드리뷰 반영

5a0a182

fix: 코드리뷰 반영

13897a2

chore: eslint 해결?

a885cd2

fix: ref 타입 미정

a516c35

fix: 마지막 코드리뷰

c0109bd

eugene028 force-pushed the feature/chip-component branch from 3a66d05 to c0109bd Compare June 7, 2024 13:36

fix: 디펜던시 수정

fe49ab2

hamo-o approved these changes Jun 7, 2024

View reviewed changes

ghdtjgus76 approved these changes Jun 7, 2024

View reviewed changes

fix: a11y 설정 변경

f3457f3

fix: test-runner 설정 변경

5883463

eugene028 merged commit f370ba4 into main Jun 7, 2024
3 checks passed

eugene028 deleted the feature/chip-component branch June 7, 2024 16:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature] Chip 컴포넌트 구현 #27

[Feature] Chip 컴포넌트 구현 #27

eugene028 commented May 25, 2024 •

edited

Loading

ghdtjgus76 left a comment

SeieunYoo left a comment

SeieunYoo May 26, 2024

ghdtjgus76 commented May 28, 2024

github-actions bot commented May 30, 2024

eugene028 commented May 30, 2024

ghdtjgus76 left a comment

github-actions bot commented Jun 1, 2024

github-actions bot commented Jun 1, 2024

github-actions bot commented Jun 1, 2024

SeieunYoo left a comment

github-actions bot commented Jun 5, 2024

github-actions bot commented Jun 5, 2024

github-actions bot commented Jun 7, 2024

github-actions bot commented Jun 7, 2024

github-actions bot commented Jun 7, 2024

github-actions bot commented Jun 7, 2024

hamo-o left a comment

hamo-o Jun 7, 2024

eugene028 Jun 7, 2024

SeieunYoo Jun 7, 2024

hamo-o Jun 7, 2024

eugene028 Jun 7, 2024

hamo-o Jun 7, 2024

eugene028 Jun 7, 2024

ghdtjgus76 left a comment

github-actions bot commented Jun 7, 2024

github-actions bot commented Jun 7, 2024

[Feature] Chip 컴포넌트 구현 #27

[Feature] Chip 컴포넌트 구현 #27

Conversation

eugene028 commented May 25, 2024 • edited Loading

🎉 변경 사항

🚩 관련 이슈

🙏 여기는 꼭 봐주세요!

타임어택 이슈로 테스트 코드는 다른 PR에 올릴게요! 🥹

ghdtjgus76 left a comment

Choose a reason for hiding this comment

SeieunYoo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ghdtjgus76 commented May 28, 2024

github-actions bot commented May 30, 2024

eugene028 commented May 30, 2024

ghdtjgus76 left a comment

Choose a reason for hiding this comment

github-actions bot commented Jun 1, 2024

github-actions bot commented Jun 1, 2024

github-actions bot commented Jun 1, 2024

SeieunYoo left a comment

Choose a reason for hiding this comment

github-actions bot commented Jun 5, 2024

github-actions bot commented Jun 5, 2024

github-actions bot commented Jun 7, 2024

github-actions bot commented Jun 7, 2024

github-actions bot commented Jun 7, 2024

github-actions bot commented Jun 7, 2024

hamo-o left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ghdtjgus76 left a comment

Choose a reason for hiding this comment

github-actions bot commented Jun 7, 2024

github-actions bot commented Jun 7, 2024

eugene028 commented May 25, 2024 •

edited

Loading