Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 25 commits into from
Jun 7, 2024
Merged

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

merged 25 commits into from
Jun 7, 2024

Conversation

eugene028
Copy link
Collaborator

@eugene028 eugene028 commented May 25, 2024 •
edited
Loading

🎉 변경 사항

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

🚩 관련 이슈

#24

🙏 여기는 꼭 봐주세요!

  • 예영님께서 Chip과 관련된 명세를 구체화시켜주셔서, 관련하여 이번 PR에서는 아래 사진에 표시된 범위까지의 작업을 진행했습니다.
스크린샷 2024-05-30 오후 3 33 45
  • Filter Chip을 관리하고, Input chip을 관리할 수 있는 FilterChipGroup, InputChipGroup 컴포넌트를 새로 만들 예정입니다. 이 때, 키보드 구현도 같이 해둘 거예요!
    (Input Chip은 아래 사진 예시와 같음)
스크린샷 2024-05-26 오전 2 28 06

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

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

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

@eugene028 eugene028 self-assigned this May 25, 2024
ghdtjgus76
ghdtjgus76 reviewed May 26, 2024
View reviewed changes
Copy link
Collaborator

@ghdtjgus76 ghdtjgus76 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다 😀

.eslintcache Outdated Show resolved Hide resolved
packages/wow-ui/src/components/Chip/closeButton.tsx Outdated Show resolved Hide resolved
packages/wow-ui/src/components/Chip/index.tsx Outdated Show resolved Hide resolved
packages/wow-ui/src/components/Chip/Chip.stories.ts Outdated Show resolved Hide resolved
packages/wow-ui/src/components/Chip/Chip.stories.ts Outdated Show resolved Hide resolved
packages/wow-ui/src/components/Chip/index.tsx Outdated Show resolved Hide resolved
packages/wow-ui/src/components/Chip/index.tsx Outdated Show resolved Hide resolved
packages/wow-ui/package.json Outdated Show resolved Hide resolved
packages/wow-ui/src/components/Chip/index.tsx Outdated Show resolved Hide resolved
packages/wow-ui/src/components/Chip/index.tsx Outdated Show resolved Hide resolved
SeieunYoo
SeieunYoo reviewed May 26, 2024
View reviewed changes
Copy link
Collaborator

@SeieunYoo SeieunYoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다🤗

packages/theme/src/color.ts Outdated
Comment on lines 4 to 5
import { black } from "../../wow-tokens/dist/color.js";

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

packages/wow-ui/src/components/Chip/index.tsx Outdated Show resolved Hide resolved
packages/wow-ui/src/components/Chip/Chip.stories.ts Outdated Show resolved Hide resolved
packages/wow-ui/src/types/button.ts Show resolved Hide resolved
@ghdtjgus76
Copy link
Collaborator

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

@github-actions GitHub Actions
Copy link
Contributor

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

@eugene028
Copy link
Collaborator Author

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

ghdtjgus76
ghdtjgus76 reviewed May 31, 2024
View reviewed changes
Copy link
Collaborator

@ghdtjgus76 ghdtjgus76 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨어요! 😀

packages/wow-ui/src/components/Chip/Chip.stories.ts Outdated Show resolved Hide resolved
packages/wow-ui/src/components/Chip/Chip.stories.ts Show resolved Hide resolved
apps/wow-docs/app/page.tsx Outdated Show resolved Hide resolved
packages/wow-ui/src/components/Chip/index.tsx Outdated Show resolved Hide resolved
packages/wow-ui/src/components/Chip/index.tsx Show resolved Hide resolved
packages/wow-ui/src/components/Chip/index.tsx Outdated Show resolved Hide resolved
packages/wow-ui/src/components/Chip/index.tsx Outdated Show resolved Hide resolved
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 1, 2024

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

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 1, 2024

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

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 1, 2024

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

SeieunYoo
SeieunYoo reviewed Jun 2, 2024
View reviewed changes
Copy link
Collaborator

@SeieunYoo SeieunYoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨어용~~

packages/wow-ui/package.json Outdated Show resolved Hide resolved
packages/wow-icons/src/CloseButton.tsx Outdated Show resolved Hide resolved
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 5, 2024

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

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 5, 2024

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

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 7, 2024

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

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 7, 2024

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

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 7, 2024

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

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 7, 2024

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

hamo-o
hamo-o approved these changes Jun 7, 2024
View reviewed changes
Copy link
Member

@hamo-o hamo-o left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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" },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

image

packages/wow-ui/src/components/Chip/index.tsx
Comment on lines +102 to +106
if (event.key === "Enter" || event.key === " ") {
setIsChecked((prev) => !prev);
onKeyDown?.();
}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

default.mov

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

ghdtjgus76
ghdtjgus76 approved these changes Jun 7, 2024
View reviewed changes
Copy link
Collaborator

@ghdtjgus76 ghdtjgus76 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 7, 2024

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

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 7, 2024

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

@eugene028 eugene028 merged commit f370ba4 into main Jun 7, 2024
3 checks passed
@eugene028 eugene028 deleted the feature/chip-component branch June 7, 2024 16:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@SeieunYoo SeieunYoo SeieunYoo left review comments

@hamo-o hamo-o hamo-o approved these changes

@ghdtjgus76 ghdtjgus76 ghdtjgus76 approved these changes

@kongnayeon kongnayeon Awaiting requested review from kongnayeon

Assignees

@eugene028 eugene028

Labels
마감 D-Day 👩‍💻 리뷰 남겨주세요!
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@eugene028 @ghdtjgus76 @hamo-o @SeieunYoo