Skip to content

In Changelog allow input group previews to grow with multi line Text-area #8627

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+1,649 −6,239
Open

In Changelog allow input group previews to grow with multi line Text-area #8627

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a50ce71
fix(docs): allow input group previews to grow with multiline text
successbyte Oct 29, 2025
43b7189
fix(docs): allow input group previews to grow with multiline text
successbyte Oct 29, 2025
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
2 changes: 1 addition & 1 deletion apps/v4/components/component-preview-tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function ComponentPreviewTabs({
data-align={align}
className={cn(
"preview flex w-full justify-center data-[align=center]:items-center data-[align=end]:items-end data-[align=start]:items-start",
chromeLessOnMobile ? "sm:p-10" : "h-[450px] p-10"
chromeLessOnMobile ? "sm:p-10" : "min-h-[450px] p-10"
)}
>
{component}
Expand Down
14 changes: 7 additions & 7 deletions apps/v4/content/docs/(root)/changelog.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,35 +165,35 @@ Here's a preview with icons:

<ComponentPreview
name="input-group-icon"
className="[&_.preview]:h-[300px] [&_pre]:!h-[300px]"
className="[&_.preview]:min-h-[300px] [&_pre]:!h-[300px]"
/>

You can also add buttons to the input group.

<ComponentPreview
name="input-group-button"
className="[&_.preview]:h-[300px] [&_pre]:!h-[300px]"
className="[&_.preview]:min-h-[300px] [&_pre]:!h-[300px]"
/>

Or text, labels, tooltips,...

<ComponentPreview
name="input-group-text"
className="[&_.preview]:h-[350px] [&_pre]:!h-[350px]"
className="[&_.preview]:min-h-[350px] [&_pre]:!h-[350px]"
/>

It also works with textareas so you can build really complex components with lots of knobs and dials or yet another prompt form.

<ComponentPreview
name="input-group-textarea"
className="[&_.preview]:h-[450px] [&_pre]:!h-[450px]"
className="[&_.preview]:min-h-[450px] [&_pre]:!h-[450px]"
/>

Oh here are some cool ones with spinners:

<ComponentPreview
name="input-group-spinner"
className="[&_.preview]:h-[350px] [&_pre]:!h-[350px]"
className="[&_.preview]:min-h-[350px] [&_pre]:!h-[350px]"
/>

### Field
Expand Down Expand Up @@ -232,7 +232,7 @@ It works with all form controls. Inputs, textareas, selects, checkboxes, radios,

<ComponentPreview
name="field-demo"
className="[&_.preview]:h-[850px] [&_pre]:!h-[850px]"
className="[&_.preview]:min-h-[850px] [&_pre]:!h-[850px]"
/>

Here are some checkbox fields:
Expand Down Expand Up @@ -265,7 +265,7 @@ between vertical and horizontal layouts based on container width. Done.

<ComponentPreview
name="field-responsive"
className="[&_.preview]:h-[600px] [&_pre]:!h-[600px]"
className="[&_.preview]:min-h-[600px] [&_pre]:!h-[600px]"
/>

Wait here's more. Wrap your fields in `FieldLabel` to create a selectable field group. Really easy. And it looks great.
Expand Down
Loading