feat(ui): add JContainer component with max-width constraints#613
feat(ui): add JContainer component with max-width constraints#613JasonXuDeveloper merged 1 commit intomasterfrom
Conversation
Add responsive container component following Tailwind/Bootstrap patterns: - JContainer with ContainerSize enum (Xs/Sm/Md/Lg/Xl/Full) - Fluent API: WithSize(), WithHorizontalPadding(), WithResponsivePadding(), Fluid() - Container tokens in Tokens.cs (480/640/768/1024/1280px) - CSS classes for styling: j-container--xs/sm/md/lg/xl/full - Wrap PanelUI and BootstrapEditorUI content in JContainer(Xs) - Rename .j-container to .j-panel-base in base.uss to avoid conflicts Also adds unit testing requirements to coding guidelines and comprehensive tests for JContainer (45+ test cases covering all functionality). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> Signed-off-by: JasonXuDeveloper - 傑 <jason@xgamedev.net>
There was a problem hiding this comment.
Pull request overview
This PR adds a responsive JContainer layout component that provides max-width constraints and horizontal centering for Unity Editor UI, following Tailwind CSS container patterns.
Changes:
- Adds
JContainercomponent with configurable size constraints (Xs, Sm, Md, Lg, Xl, Full) and fluent API methods for responsive layouts - Wraps PanelUI and BootstrapEditorUI content in
JContainer(ContainerSize.Xs)to create centered, compact layouts - Updates coding guidelines to require unit tests for non-core packages (JEngine.UI, JEngine.Util) with comprehensive documentation and examples
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| JContainer.cs | New responsive container component with max-width constraints, fluent API, and proper inheritance from JComponent |
| JContainer.cs.meta | Unity meta file for new component |
| JContainerTests.cs | Comprehensive unit tests (45+ test cases) covering all public methods, properties, and edge cases |
| JContainerTests.cs.meta | Unity meta file for test class |
| JTheme.cs | Adds ContainerSize enum (Xs, Sm, Md, Lg, Xl, Full) with XML documentation |
| Tokens.cs | Adds Container token class with max-width constants matching Tailwind breakpoints |
| TokensTests.cs | Unit tests validating Container token values and hierarchy |
| components.uss | Adds CSS styles for .j-container and size variants (--xs through --full) |
| base.uss | Renames .j-container to .j-panel-base to avoid naming conflict with new component |
| PanelUI.cs | Wraps content in JContainer(ContainerSize.Xs) for centered panel layout |
| BootstrapEditorUI.cs | Wraps content in JContainer(ContainerSize.Xs) for centered inspector layout (in both initial render and undo/redo rebuild) |
| PanelUITests.cs | Improves integration tests to use existing Init.unity scene instead of creating empty scenes, avoiding lighting errors |
| JEngineTestBase.cs | Updates comments to be more general about suppressing Unity internal errors |
| CLAUDE.md | Adds requirement for unit tests in non-core packages |
| coding-patterns.md | Adds comprehensive unit testing section with patterns, requirements, and examples |
Unity Test Results✅ EditMode: All tests passed Unity Version: 2022.3.55f1 ✅ All tests passed! The PR is ready for review. View workflow run |
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## master #613 +/- ##
==========================================
+ Coverage 85.01% 90.35% +5.33%
==========================================
Files 60 65 +5
Lines 7683 8684 +1001
==========================================
+ Hits 6532 7846 +1314
+ Misses 1151 838 -313
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
Summary
JContainercomponent with max-width constraints following Tailwind/Bootstrap patternsContainerSizeenum with sizes: Xs (480px), Sm (640px), Md (768px), Lg (1024px), Xl (1280px), Full (no limit)WithSize(),WithHorizontalPadding(),WithResponsivePadding(),Fluid()PanelUIandBootstrapEditorUIcontent inJContainer(ContainerSize.Xs)for centered, constrained layoutsTest plan
🤖 Generated with Claude Code