Skip to content

refactor(qvism-preset): use inset shorthand for equal four-side positions#1744

Open
te6-in wants to merge 1 commit into
devfrom
feat/chrome-88-logical-property
Open

refactor(qvism-preset): use inset shorthand for equal four-side positions#1744
te6-in wants to merge 1 commit into
devfrom
feat/chrome-88-logical-property

Conversation

@te6-in

@te6-in te6-in commented Jul 1, 2026

Copy link
Copy Markdown
Member

Summary by CodeRabbit

  • Refactor
    • 여러 컴포넌트의 절대 위치 지정이 top/right/bottom/left에서 inset: 0 방식으로 정리되었습니다.
    • 다이얼로그, 시트, 패널, 메뉴, 입력/선택/이미지 관련 요소의 전체 덮개 레이어와 오버레이 배치가 더 간결해졌습니다.
  • Style
    • 동일한 레이아웃 동작을 유지하면서 스타일 선언이 더 일관되고 읽기 쉬워졌습니다.

…ions

Collapse top/right/bottom/left into the inset shorthand only where all four sides exist in the same style object with the same value. Chrome 88 / Safari 15 baseline supports inset, so no fallback is needed. Regenerated css/recipes.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Jul 1, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 755f260

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@coderabbitai

coderabbitai Bot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: dfe74940-630d-4f10-8eaf-641b603fc368

📥 Commits

Reviewing files that changed from the base of the PR and between c4ce431 and 755f260.

⛔ Files ignored due to path filters (27)
  • packages/css/all.css is excluded by !packages/css/**/*
  • packages/css/all.layered.css is excluded by !packages/css/**/*
  • packages/css/all.layered.min.css is excluded by !packages/css/**/*
  • packages/css/all.min.css is excluded by !packages/css/**/*
  • packages/css/recipes/accordion.css is excluded by !packages/css/**/*
  • packages/css/recipes/action-sheet.css is excluded by !packages/css/**/*
  • packages/css/recipes/app-bar.css is excluded by !packages/css/**/*
  • packages/css/recipes/aspect-ratio.css is excluded by !packages/css/**/*
  • packages/css/recipes/attachment-input-item.css is excluded by !packages/css/**/*
  • packages/css/recipes/avatar.css is excluded by !packages/css/**/*
  • packages/css/recipes/bottom-sheet.css is excluded by !packages/css/**/*
  • packages/css/recipes/checkmark.css is excluded by !packages/css/**/*
  • packages/css/recipes/dialog.css is excluded by !packages/css/**/*
  • packages/css/recipes/extended-action-sheet.css is excluded by !packages/css/**/*
  • packages/css/recipes/image-frame-reaction-button.css is excluded by !packages/css/**/*
  • packages/css/recipes/image-frame-reaction-button.layered.css is excluded by !packages/css/**/*
  • packages/css/recipes/image-frame.css is excluded by !packages/css/**/*
  • packages/css/recipes/input-button.css is excluded by !packages/css/**/*
  • packages/css/recipes/list-item.css is excluded by !packages/css/**/*
  • packages/css/recipes/menu-item.css is excluded by !packages/css/**/*
  • packages/css/recipes/menu-sheet.css is excluded by !packages/css/**/*
  • packages/css/recipes/select-box-checkmark.css is excluded by !packages/css/**/*
  • packages/css/recipes/select-box.css is excluded by !packages/css/**/*
  • packages/css/recipes/side-navigation-menu-item.css is excluded by !packages/css/**/*
  • packages/css/recipes/side-panel.css is excluded by !packages/css/**/*
  • packages/css/recipes/slider.css is excluded by !packages/css/**/*
  • packages/css/recipes/text-input.css is excluded by !packages/css/**/*
📒 Files selected for processing (21)
  • packages/qvism-preset/src/recipes/accordion.ts
  • packages/qvism-preset/src/recipes/action-sheet.ts
  • packages/qvism-preset/src/recipes/aspect-ratio.ts
  • packages/qvism-preset/src/recipes/attachment-input.ts
  • packages/qvism-preset/src/recipes/avatar.ts
  • packages/qvism-preset/src/recipes/bottom-sheet.ts
  • packages/qvism-preset/src/recipes/checkmark.ts
  • packages/qvism-preset/src/recipes/dialog.ts
  • packages/qvism-preset/src/recipes/extended-action-sheet.ts
  • packages/qvism-preset/src/recipes/image-frame-reaction-button.ts
  • packages/qvism-preset/src/recipes/image-frame.ts
  • packages/qvism-preset/src/recipes/input-button.ts
  • packages/qvism-preset/src/recipes/list-item.ts
  • packages/qvism-preset/src/recipes/menu-sheet.ts
  • packages/qvism-preset/src/recipes/menu.ts
  • packages/qvism-preset/src/recipes/select-box.ts
  • packages/qvism-preset/src/recipes/side-navigation.ts
  • packages/qvism-preset/src/recipes/side-panel.ts
  • packages/qvism-preset/src/recipes/slider.ts
  • packages/qvism-preset/src/recipes/text-input.ts
  • packages/qvism-preset/src/stackflow/app-bar.ts

📝 Walkthrough

Walkthrough

qvism-preset 패키지의 여러 레시피 및 stackflow 파일에서, 절대/고정 위치를 지정하던 top/right/bottom/left 개별 CSS 속성을 inset 단일 속성으로 교체했습니다. 동작(레이아웃 결과)은 동일하게 유지되며, 공개 API 변경은 없습니다.

Changes

inset 축약형 전환

Layer / File(s) Summary
시트/다이얼로그류 positioner·backdrop 위치 지정
packages/qvism-preset/src/recipes/action-sheet.ts, bottom-sheet.ts, dialog.ts, extended-action-sheet.ts, menu-sheet.ts, side-panel.ts
시트/다이얼로그 계열의 positioner, backdrop, closeButton 오버레이 위치 지정을 top/right/bottom/left에서 inset(및 calc 기반 inset)으로 통일했습니다.
인터랙션 컨트롤 컴포넌트 오버레이
accordion.ts, checkmark.ts, input-button.ts, select-box.ts, slider.ts, text-input.ts, menu.ts, side-navigation.ts, list-item.ts
트리거, 체크마크, 포커스/터치 오버레이, engaged 상태 배경 등 가상 요소(::before/::after) 위치 지정을 inset으로 변경했습니다.
미디어/시각 요소 오버레이
aspect-ratio.ts, attachment-input.ts, avatar.ts, image-frame.ts, image-frame-reaction-button.ts, stackflow/app-bar.ts
이미지/배경 커버 레이어(직속 자식, 아바타 뱃지, 프레임 테두리 등)의 절대 위치 지정을 inset으로 변경했습니다.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

  • daangn/seed-design#1717: attachment-input.ts의 동일한 ::before 위치 레이어 스타일을 수정한 변경으로 코드 레벨에서 맞물립니다.
  • daangn/seed-design#1742: side-panel.ts의 closeButton/오버레이 위치 지정 로직을 함께 수정한 변경입니다.

Poem

토끼가 CSS 숲을 뛰다가,
top, right, bottom, left 네 잎을 모아
하나의 inset 클로버로 엮었대요 🍀
사각형은 여전히 가득 채워지고
코드는 훨씬 가벼워졌답니다
(´`)⌒)づ

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 여러 레시피에서 동일한 4방향 위치 값을 inset shorthand로 정리한 변경을 정확히 요약합니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/chrome-88-logical-property
⚔️ Resolve merge conflicts
  • Resolve merge conflict in branch feat/chrome-88-logical-property

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Alpha Preview (Docs)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant