feat(react,css,rootage): adjust BottomSheet title padding and layout styling

[junghyeonsu]

Summary by CodeRabbit

• 버그 수정

  • BottomSheet 닫기 버튼의 마진(패딩 기반) 및 오프셋이 조정되어 레이아웃 안정성이 향상되었습니다.
  • 닫기 버튼 표시 시 제목 정렬과 여백 동작이 최적화되었습니다.
  • 제목의 단어 줄바꿈 처리와 설명 영역 너비가 개선되었습니다.

• 신규/개선

  • BottomSheet 제목 컴포넌트가 ref 전달 및 닫기 버튼 표시 상태를 반영하도록 개선되어 통합성과 접근성이 향상되었습니다.
  • 예제에서 헤더 정렬(center) 및 설명(description) 속성이 추가되어 시연이 업데이트되었습니다.

• 스타일/설정

  • 제목 및 설명의 좌우 패딩 속성이 추가되어 헤더 레이아웃 제어가 강화되었습니다.

[changeset-bot]

🦋 Changeset detected

Latest commit: c5bc403

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@seed-design/rootage-artifacts	Patch
@seed-design/react	Patch
@seed-design/css	Patch
@seed-design/figma	Patch
@seed-design/mcp	Patch

Not sure what this means? Click here to learn what changesets are.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

BottomSheet의 제목·설명 패딩과 word-break 설정을 title로 이동하고, React 컴포넌트가 Drawer 컨텍스트의 닫기 버튼 렌더 상태를 data-show-close-button 속성으로 전달하도록 변경했습니다. Rootage 스키마, 프리셋, 예제도 관련 조정이 포함됩니다. (≤50단어)

Changes

Cohort / File(s)	요약
Changeset 항목 \.changeset/tired-poets-argue.md	세 패키지(@seed-design/rootage-artifacts, @seed-design/react, @seed-design/css)에 대한 패치 릴리스 항목 추가 및 BottomSheet 관련 한국어 메모 추가.
Preset 스타일 규칙 packages/qvism-preset/src/recipes/bottom-sheet.ts	제목에 wordBreak: "keep-all" 추가. header 변형들에서 기존 header 패딩을 title로 이동하여 title/description에 paddingLeft/paddingRight/paddingX 적용 및 닫기 버튼 존재 여부에 따른 title 패딩 조건부 재구성.
React 컴포넌트 구현 packages/react/src/components/BottomSheet/BottomSheet.tsx	useDrawerContext, dataAttr 도입. BottomSheetTitle을 forwardRef로 래핑해 Drawer.Title로 렌더링하고, 드로어 컨텍스트의 닫기 버튼 렌더 상태를 data-show-close-button 속성으로 전달. BottomSheetTitle.displayName 추가.
Rootage 컴포넌트 스키마 packages/rootage/components/bottom-sheet.yaml	title에 paddingLeft/paddingRight 속성 추가, description에 paddingX 추가. closeButton 오프셋 값 조정(fromTop: x5→x6, fromRight: x5→x4). headerAlignment별로 header→title 블록으로 이동 및 닫기 버튼 유무별 패딩 변형 추가(예: center closeButton에서 paddingLeft/Right 60px 등).
예제 변경 examples/stackflow-spa/src/activities/ActivityBottomSheetModalTest.tsx	예제에서 BottomSheetRoot에 headerAlign="center" 추가 및 BottomSheetContent에 description 텍스트 추가.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

시

닫는 버튼 보이면 살짝 폴짝 뛰어 🐇
제목엔 줄바꿈 막는 속삭임 붙이고
설명은 좌우 여백 포근히 안아주네 🍯
컨텍스트가 전하는 데이터 하나로
BottomSheet가 조용히 문을 닫네 ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목이 pull request의 주요 변경 사항을 명확하게 요약하고 있습니다. BottomSheet의 제목(title) 패딩 및 레이아웃 스타일 조정이 모든 수정 파일(react, css, rootage)에서 일관되게 반영되어 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/bottom-sheet-header-title

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cloudflare-workers-and-pages]

Deploying seed-design-v3 with    Cloudflare Pages

Latest commit:	c5bc403
Status:	✅  Deploy successful!
Preview URL:	https://ff776f68.seed-design.pages.dev
Branch Preview URL:	https://feat-bottom-sheet-header-tit.seed-design.pages.dev

View logs

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@packages/react/src/components/BottomSheet/BottomSheet.tsx`:
- Around line 67-79: BottomSheetTitle currently spreads {...props} after the
internal data-show-close-button prop, allowing consumer props to overwrite the
context-derived value; update the JSX in the forwardRef render so that
{...props} is applied before the explicit data-show-close-button (the component
using Drawer.Title and the useDrawerContext call), ensuring the internal
data-show-close-button computed from useDrawerContext always takes precedence
over consumer-supplied props.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@packages/rootage/components/bottom-sheet.yaml`:
- Around line 142-148: Replace the hardcoded "50px" values under the title
paddingRight (and title paddingLeft/paddingRight inside headerAlignment=center
-> enabled) with a design token; either switch to the nearest existing token
($dimension.x12 or $dimension.x13), or add a new token (e.g. $dimension.x12_5 =
50px) and use that token; confirm whether the intended size is exactly 50px and
then apply the chosen token consistently to the title.paddingRight and
headerAlignment=center.enabled.title.paddingLeft/paddingRight entries.

🧹 Nitpick comments (1)

examples/stackflow-spa/src/activities/ActivityBottomSheetModalTest.tsx (1)

28-33: LGTM!

닫기 버튼 표시 활성화가 PR의 BottomSheet 레이아웃/패딩 변경 사항과 잘 연동되어 테스트 목적에 부합합니다.

선택적으로, boolean prop은 간결하게 작성할 수 있습니다:

-        showCloseButton={true}
+        showCloseButton