Skip to content

feat: new box component #100

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

Closed
scriptcoded wants to merge 1 commit into from
Closed

feat: new box component #100

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions packages/ui-webc/src/components/my-component/lab/box.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# Box Example
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

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

The PR title says "feat: new box component" but the changes only add a documentation file (box.mdx) for the existing my-component. No actual box component is being created. Either:

  1. The PR title should be updated to reflect that this is just adding documentation
  2. Or a new box component should be created to match the PR description

If a new box component is intended, it should be created in packages/ui-webc/src/components/box/ following the component structure conventions (with box.tsx, box.css, readme.md files).

Copilot uses AI. Check for mistakes.

## Loops

{['a', 'b', 'c'].map(item => (
<my-component first={item} last="!" />
))}

## Object props

<my-component
first="Stencil"
middle="'Don't call me a framework'"
last="JS"
test={{
name: 'dummy'
}}
/>
Comment on lines +3 to +18
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

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

The new file box.mdx is almost identical to the existing basic.mdx file, with only the title being different ("Box Example" vs "Basic Example"). This appears to be duplicate documentation content that doesn't add value. If this is intended to demonstrate a box component, the content should be updated to reflect box-specific examples. Otherwise, this file should be removed.

Suggested change
## Loops
{['a', 'b', 'c'].map(item => (
<my-component first={item} last="!" />
))}
## Object props
<my-component
first="Stencil"
middle="'Don't call me a framework'"
last="JS"
test={{
name: 'dummy'
}}
/>
This page shows how to render `my-component` inside a simple "box" container
using plain HTML and inline styles. You can replace the inline styles with
your own CSS classes in a real application.
## Single boxed component
<div
style={{
border: '1px solid #ccc',
padding: '1rem',
borderRadius: '4px',
backgroundColor: '#f9f9f9',
}}
>
<my-component first="Boxed" middle="single" last="example" />
</div>
## Multiple components in boxes
<div
style={{
display: 'grid',
gap: '0.75rem',
}}
>
{['a', 'b', 'c'].map((item) => (
<div
key={item}
style={{
border: '1px solid #ddd',
padding: '0.75rem',
borderRadius: '4px',
}}
>
<my-component first={item} middle="inside" last="box" />
</div>
))}
</div>
## Box with additional props
<div
style={{
border: '2px dashed #999',
padding: '1rem',
borderRadius: '6px',
}}
>
<my-component
first="Stencil"
middle="'Don't call me a framework'"
last="JS"
test={{
name: 'boxed example',
}}
/>
</div>

Copilot uses AI. Check for mistakes.