From d9d45ae7740fc5f1c0b08932e5a09dd1793e55e6 Mon Sep 17 00:00:00 2001 From: Gwang Soo <114225974+gs0428@users.noreply.github.com> Date: Tue, 1 Oct 2024 01:02:20 +0900 Subject: [PATCH] =?UTF-8?q?feat/#101=20Divider=20=ED=83=9C=EA=B7=B8?= =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20style=20=EC=B4=88=EA=B8=B0?= =?UTF-8?q?=ED=99=94=20(#107)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: hr 태그 style 초기화하는 로직 생성 * docs: Horizontal일 떄 args 추가 * test/#84 Divider vrt 테스트 추가 (#91) * test: Divider 컴포넌트의 e2e 테스트 코드 작성 * chore: Button 관련 파일들 모두 삭제 * rename: 컴포넌트명 케밥케이스로 변경 * chore: 테스트 파일 내부 텍스트 변경 * chore: 캐시된 내용 삭제 * rename: e2e 테스트 폴더 구조 변경 * feat/#50 github action 워크플로우 최적화 (#90) * chore: 크로마틱 배포 시 pnpm 캐시 사용하도록 변경 * chore: VRT 스냅샷 업데이트 시 pnpm, playwright 캐시 사용하도록 변경 * chore: PR VRT 테스트 시 pnpm, playwright 캐시 사용하도록 변경 * chore: chromatic_auto_deploy 코드 리뷰 반영 Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore: 코드 리뷰 반영 * chore: ${action} 캐시 형식으로 각 step name 변경 * chore: 각 action 최신 버전을 사용하도록 버전 수정 * chore: 의존성 설치 관련 스크립트 분리 후 재사용 * chore: playwright 설치 관련 스크립트 분리 후 재사용 * chore: 잘못된 경로 설정 수정 * chore: 잘못된 경로 설정 수정 * chore: pnpm, node 버전 환경 변수로 불러오도록 설정 * chore: 환경 변수 설정 별도 스크립트로 분리 * chore: pnpm/action-setup v4 버전으로 변경 * chore: eol 이슈 해결 * chore: 워크플로우 name 변경 --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat/#85 codegen에 e2e 테스트 코드 템플릿 생성 및 적용 (#92) * feat: e2e 테스트 코드 템플릿 파일 생성 * feat: e2e 테스트 코드 템플릿 파일 생성기 config 작성 * chore: e2e 테스트 파일 생성기 파일명 kebabCase로 수정 * chore: 예시 버튼 e2e 테스트 파일 삭제 * chore: 스토리북 템플릿 id ui로 시작되도록 수정 * fix: e2e 테스트 plob 템플릿 수정 --------- Co-authored-by: 홍서현 Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore/#93 husky 오류 해결 (#112) * fix: pre-commit 오류 일으키는 코드 제거 * fix: jest testMatch 수정 * refactor: husky 구버전 관련 코드 pre push에서 제거 --------- Co-authored-by: 홍서현 Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: ShinYoung-Kim <83866983+ShinYoung-Kim@users.noreply.github.com> --- .../components/divider/src/divider.tsx | 25 +++++++++++++++++-- .../divider/stories/divider.stories.tsx | 10 +++++++- 2 files changed, 32 insertions(+), 3 deletions(-) diff --git a/packages/primitive/components/divider/src/divider.tsx b/packages/primitive/components/divider/src/divider.tsx index 4f318f6..42d8f49 100644 --- a/packages/primitive/components/divider/src/divider.tsx +++ b/packages/primitive/components/divider/src/divider.tsx @@ -12,18 +12,39 @@ export type DividerProps = DivProps & }; const Divider = forwardRef((props, ref) => { - const { orientation: orientationProp = DEFAULT_ORIENTATION, ...restProps } = props; + const { + orientation: orientationProp = DEFAULT_ORIENTATION, + style: styleProp, + ...restProps + } = props; const isVertical = orientationProp === "vertical"; const Component = isVertical ? "div" : "hr"; const orientation = isVertical ? "vertical" : DEFAULT_ORIENTATION; + const style = isVertical + ? styleProp + : { + marginInline: 0, + marginBlock: 0, + border: "none", + height: 0, + color: "transparent", + backgroundColor: "transparent", + ...styleProp, + }; const typedRef = ref as ForwardedRef< typeof orientation extends "vertical" ? HTMLDivElement : HTMLHRElement >; return ( - + ); }); diff --git a/packages/primitive/components/divider/stories/divider.stories.tsx b/packages/primitive/components/divider/stories/divider.stories.tsx index bc5de2c..735e38d 100644 --- a/packages/primitive/components/divider/stories/divider.stories.tsx +++ b/packages/primitive/components/divider/stories/divider.stories.tsx @@ -26,7 +26,15 @@ export default meta; type Story = StoryObj; -export const Horizontal: Story = {}; +export const Horizontal: Story = { + args: { + style: { + width: "100%", + height: "1px", + backgroundColor: "black", + }, + }, +}; export const Vertical: Story = { args: {