Add (SVG) icon support to Button component and clean up variants#7743
Open
Add (SVG) icon support to Button component and clean up variants#7743
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThis PR refactors the Button component architecture to use Radix's Slot pattern for composition, renames button variants and sizes, and migrates all Button usages across the codebase from passing Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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. Comment |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 9
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/site/src/components/enterprise/switch-enterprise.tsx (1)
40-48:⚠️ Potential issue | 🔴 Critical
size="4xl"no longer exists — button will render at default size.The
4xlsize variant was removed frombuttonVariantsin this PR (merged into3xl). Sinceclass-variance-authoritysilently ignores unknown variant values and falls back todefaultVariants, this button will render withsize="lg"instead of the intended large size.🐛 Proposed fix: update to size="3xl"
<Button key={tab.id} - size="4xl" + size="3xl" variant={activeTab === idx ? "orm" : "default-strong"} aria-pressed={activeTab === idx} onClick={() => setActiveTab(idx)} >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/enterprise/switch-enterprise.tsx` around lines 40 - 48, The Button in switch-enterprise.tsx is using a removed size prop value ("4xl") so it silently falls back to the default; update the Button usage that renders each tab (the JSX with key={tab.id}, aria-pressed and onClick={() => setActiveTab(idx)}) to use size="3xl" instead of size="4xl" (and confirm this aligns with your buttonVariants default/available sizes).packages/eclipse/src/components/button.tsx (1)
42-42:⚠️ Potential issue | 🟠 MajorUpdate
size="4xl"tosize="3xl"on Button at line 42.The Button component only supports size variants:
lg,xl,2xl,3xl, and icon variants.size="4xl"doesn't exist in the component definition, so the button will fall back to the default size (lg) instead of the intended larger size.<Button key={tab.id} - size="4xl" + size="3xl" variant={activeTab === idx ? "orm" : "default-strong"} aria-pressed={activeTab === idx} onClick={() => setActiveTab(idx)} >This is part of a broader migration—there are 24+ other
size="4xl"usages across the codebase (mostly using theActioncomponent) that need the same update tosize="3xl".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/eclipse/src/components/button.tsx` at line 42, Update the Button usage that currently sets size="4xl" (Button component at the reported spot) to size="3xl" because the Button only supports lg, xl, 2xl, 3xl and icon sizes; locate the Button JSX (symbol: Button) where size="4xl" is used (notably the instance mentioned at line 42) and change the prop value to "3xl". Also scan for other occurrences of size="4xl" (e.g., in Action components) and apply the same replacement to ensure consistent sizing across the codebase.
🧹 Nitpick comments (1)
apps/site/src/app/migrate/page.tsx (1)
107-115: Variant updated in commented-out code.The
default-stronger→default-strongrename was applied even to this commented-out button, which is good for consistency if/when it's re-enabled. However, consider either removing this dead code or tracking it with a TODO if there's intent to restore it.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/migrate/page.tsx` around lines 107 - 115, The commented-out Button block still contains the old variant name change (uses variant="default-strong"), so either remove this dead code or annotate it with a TODO explaining intent to restore; specifically update the commented Button block (the <Button ... variant="default-strong" ...> snippet) by deleting the entire commented section if unused, or add a TODO comment above it referencing why it's kept and when to re-enable (or link an issue/PR) so the commented Button is tracked; do not leave stale commented code without intent.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/docs/src/components/eclipse-showcase.tsx`:
- Line 142: The h3 heading text "Border Radius-" in the Eclipse showcase
component is mistyped with a trailing hyphen; update the heading string in the
eclipse-showcase.tsx component (the <h3 className="text-xl font-semibold
text-foreground-neutral"> element that currently reads "Border Radius-") to
remove the hyphen (e.g., "Border Radius") so the UI displays the correct
heading.
- Around line 38-39: Update the visible labels in the showcase to match the
renamed variant props: change the text inside the Button with
variant="default-strong" from "Default Stronger" to "Default Strong" and the
Button with variant="default-weak" from "Default Weaker" to "Default Weak" so
the displayed labels align with the variant prop names (locate the Button
components in eclipse-showcase.tsx).
In `@apps/eclipse/content/design-system/components/button.mdx`:
- Around line 86-126: The MDX uses the <Command /> icon but never imports it;
add an import for Command from lucide-react (e.g., import { Command } from
"lucide-react";) near the top of the file so the ButtonSizes component and the
live example can render without a runtime undefined component error; ensure the
import name matches the used <Command /> symbol.
In `@apps/eclipse/content/design-system/components/empty.mdx`:
- Around line 675-694: The JSX block containing the ternary expression using
isLoading/Spinner/Empty/ItemsList currently ends with a trailing semicolon
inside the JSX braces; remove that semicolon so the expression is a valid JSX
expression (i.e., change "{ isLoading ? (...) : (...) ; }" to "{ isLoading ?
(...) : (...) }" in the render where isLoading, Spinner, Empty, and ItemsList
are used).
In `@apps/eclipse/src/components/eclipse-showcase.tsx`:
- Line 142: In the EclipseShowcase React component update the section title text
that currently reads "Border Radius-" to remove the trailing hyphen so it reads
"Border Radius"; locate the <h3> element rendering that header in the
eclipse-showcase.tsx component and change the string content accordingly.
- Around line 38-39: Update the button labels in the Eclipse showcase to match
the actual variant names: change the rendered text for the Button components
that use variant="default-strong" and variant="default-weak" so they read
"Default Strong" and "Default Weak" (locate the Button JSX in
eclipse-showcase.tsx where those variants are used and update the inner text
accordingly).
In `@apps/site/src/app/`(index)/page.tsx:
- Around line 19-20: There's a visible typo in the page copy in page.tsx where
the sentence "deploy.Your choice..." is missing a space after the period; edit
the JSX/text node in apps/site/src/app/(index)/page.tsx (the string containing
"Works with your existing stack, wherever you deploy.Your choice...") and insert
a single space after the period so it reads "deploy. Your choice..." to correct
the spacing.
In `@apps/site/src/app/postgres/page.tsx`:
- Around line 247-248: The pricing copy contains a hidden/unusual whitespace
character between the sentence ending "free tier." and "Spend limits included"
which can break rendering; open apps/site/src/app/postgres/page.tsx, find the
string containing "Usage-based pricing, with a generous free tier." and
remove/replace the hidden separator with a normal ASCII space or a standard
newline so the text becomes "Usage-based pricing, with a generous free tier.
Spend limits included, so you never get surprised." Ensure no other non-standard
whitespace characters remain in that string.
In `@packages/eclipse/src/components/pagination.tsx`:
- Line 40: The variant mapping in PaginationLink is inverted: currently it uses
variant: isActive ? "default-weak" : "default" which makes active pages weaker;
update the mapping so active pages use the stronger style by changing the
expression to variant: isActive ? "default" : "default-weak" in the
PaginationLink component (look for the isActive variable/prop and the variant
assignment).
---
Outside diff comments:
In `@apps/site/src/components/enterprise/switch-enterprise.tsx`:
- Around line 40-48: The Button in switch-enterprise.tsx is using a removed size
prop value ("4xl") so it silently falls back to the default; update the Button
usage that renders each tab (the JSX with key={tab.id}, aria-pressed and
onClick={() => setActiveTab(idx)}) to use size="3xl" instead of size="4xl" (and
confirm this aligns with your buttonVariants default/available sizes).
In `@packages/eclipse/src/components/button.tsx`:
- Line 42: Update the Button usage that currently sets size="4xl" (Button
component at the reported spot) to size="3xl" because the Button only supports
lg, xl, 2xl, 3xl and icon sizes; locate the Button JSX (symbol: Button) where
size="4xl" is used (notably the instance mentioned at line 42) and change the
prop value to "3xl". Also scan for other occurrences of size="4xl" (e.g., in
Action components) and apply the same replacement to ensure consistent sizing
across the codebase.
---
Nitpick comments:
In `@apps/site/src/app/migrate/page.tsx`:
- Around line 107-115: The commented-out Button block still contains the old
variant name change (uses variant="default-strong"), so either remove this dead
code or annotate it with a TODO explaining intent to restore; specifically
update the commented Button block (the <Button ... variant="default-strong" ...>
snippet) by deleting the entire commented section if unused, or add a TODO
comment above it referencing why it's kept and when to re-enable (or link an
issue/PR) so the commented Button is tracked; do not leave stale commented code
without intent.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 855b3525-4d8d-4497-8280-458f759431db
📒 Files selected for processing (31)
apps/docs/src/components/eclipse-showcase.tsxapps/eclipse/content/design-system/components/button.mdxapps/eclipse/content/design-system/components/card.mdxapps/eclipse/content/design-system/components/empty.mdxapps/eclipse/content/design-system/components/field.mdxapps/eclipse/content/design-system/components/pagination.mdxapps/eclipse/content/design-system/components/separator.mdxapps/eclipse/src/components/eclipse-showcase.tsxapps/site/src/app/(index)/page.tsxapps/site/src/app/about/page.tsxapps/site/src/app/client/page.tsxapps/site/src/app/community/page.tsxapps/site/src/app/mcp/_components/mcp-cta-section.tsxapps/site/src/app/migrate/page.tsxapps/site/src/app/orm/page.tsxapps/site/src/app/postgres/page.tsxapps/site/src/app/pricing/page.tsxapps/site/src/app/pricing/pricing-calculator.tsxapps/site/src/app/pricing/pricing-hero-plans.tsxapps/site/src/app/startups/page.tsxapps/site/src/app/studio/page.tsxapps/site/src/app/typedsql/page.tsxapps/site/src/components/client/technology.tsxapps/site/src/components/ecosystem/grid.tsxapps/site/src/components/enterprise/switch-enterprise.tsxapps/site/src/components/homepage/copy-btn.tsxapps/site/src/components/technology.tsxpackages/eclipse/src/components/button.tsxpackages/eclipse/src/components/pagination.tsxpackages/ui/src/components/navigation-menu.tsxpackages/ui/src/components/web-navigation.tsx
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
apps/site/src/app/enterprise/page.tsx (1)
374-374: Mark the decorative envelope icon as hidden for screen readers.On Line 374, this icon is visual-only (the button already has text), so add
aria-hidden="true"to avoid noisy announcements by assistive tech.Suggested tweak
- <i className="fa-regular fa-envelope" /> + <i className="fa-regular fa-envelope" aria-hidden="true" />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/enterprise/page.tsx` at line 374, The decorative envelope icon <i className="fa-regular fa-envelope" /> is announced by screen readers even though the surrounding button includes visible text; mark this icon as purely decorative by adding aria-hidden="true" to that JSX element (the <i className="fa-regular fa-envelope" /> in apps/site/src/app/enterprise/page.tsx) so assistive tech will ignore it.apps/site/src/app/typedsql/page.tsx (1)
26-27: Mark decorative arrow icons as hidden from assistive tech.These icons are purely visual next to explicit button text, so they should be
aria-hiddento avoid noisy announcements in some AT flows.Proposed patch
- <i className="fa-regular fa-arrow-right" /> + <i className="fa-regular fa-arrow-right" aria-hidden="true" /> ... - <i className="fa-regular fa-arrow-right" /> + <i className="fa-regular fa-arrow-right" aria-hidden="true" /> ... - <i className="fa-regular fa-arrow-right" /> + <i className="fa-regular fa-arrow-right" aria-hidden="true" /> ... - <i className="fa-regular fa-arrow-right" /> + <i className="fa-regular fa-arrow-right" aria-hidden="true" /> ... - <i className="fa-regular fa-arrow-right" /> + <i className="fa-regular fa-arrow-right" aria-hidden="true" /> ... - <i className="fa-regular fa-arrow-right" /> + <i className="fa-regular fa-arrow-right" aria-hidden="true" />Also applies to: 60-61, 135-136, 144-145, 175-176, 183-184
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/typedsql/page.tsx` around lines 26 - 27, The decorative arrow <i> icons inside the Button components are being read by assistive tech; update each <i className="fa-regular fa-arrow-right" /> (and other similar arrow <i> instances at the noted locations) to include aria-hidden="true" so they are ignored by screen readers — locate the arrow <i> elements used inside the Button JSX in page.tsx and add aria-hidden="true" to each instance.apps/site/src/app/pricing/pricing-calculator.tsx (1)
504-523: Remove commented-out UI block and empty className wrapper.This section keeps dead/commented JSX and an empty
className, which adds noise and makes maintenance harder.Suggested cleanup
- <div className=""> - {/* <div className="space-y-2"> - <div className="text-sm text-foreground-neutral">Compute Size</div> - <div className="rounded-[12px] border border-stroke-neutral bg-background-neutral px-3 py-3 text-sm text-foreground-neutral-weaker"> - Included and auto-scaled by Prisma Postgres - </div> - <p className="m-0 text-[10px] leading-4 text-foreground-neutral-weaker"> - vCPU, RAM, cores, micro, xl, C-3PO... etc. - </p> - </div> */} - + <div> <div className="space-y-2"> <div className="text-sm text-foreground-neutral">Data Transfer</div> <div className="rounded-[12px] border border-stroke-neutral bg-background-neutral px-3 py-3 text-sm text-foreground-neutral-weaker"> Unlimited included for free </div> <p className="m-0 text-[10px] leading-4 text-foreground-neutral-weaker"> Ingress, egress, sidewaysgress, it's all covered. Just Ship It. </p> </div> </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/pricing/pricing-calculator.tsx` around lines 504 - 523, Remove the dead/commented JSX and the unnecessary empty className wrapper in the PricingCalculator UI: locate the outer <div className=""> in pricing-calculator.tsx (inside the PricingCalculator component) and delete the empty className attribute and the entire commented-out "Compute Size" block so only the active "Data Transfer" section remains, then ensure surrounding markup/spacing is adjusted so the DOM structure and indentation remain correct.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/site/src/app/pricing/pricing-calculator.tsx`:
- Around line 246-249: The paragraph currently uses dangerouslySetInnerHTML to
render the description variable produced by getPlanDescription(); remove the use
of dangerouslySetInnerHTML and render the plain-text description directly (e.g.,
place the description string as the child of the <p> element) to avoid XSS risk;
ensure getPlanDescription() still returns a safe string and that the <p> with
className "m-0 max-w-[277px] text-xs leading-4 text-foreground-neutral-weaker"
now contains {description} instead of using dangerouslySetInnerHTML.
---
Nitpick comments:
In `@apps/site/src/app/enterprise/page.tsx`:
- Line 374: The decorative envelope icon <i className="fa-regular fa-envelope"
/> is announced by screen readers even though the surrounding button includes
visible text; mark this icon as purely decorative by adding aria-hidden="true"
to that JSX element (the <i className="fa-regular fa-envelope" /> in
apps/site/src/app/enterprise/page.tsx) so assistive tech will ignore it.
In `@apps/site/src/app/pricing/pricing-calculator.tsx`:
- Around line 504-523: Remove the dead/commented JSX and the unnecessary empty
className wrapper in the PricingCalculator UI: locate the outer <div
className=""> in pricing-calculator.tsx (inside the PricingCalculator component)
and delete the empty className attribute and the entire commented-out "Compute
Size" block so only the active "Data Transfer" section remains, then ensure
surrounding markup/spacing is adjusted so the DOM structure and indentation
remain correct.
In `@apps/site/src/app/typedsql/page.tsx`:
- Around line 26-27: The decorative arrow <i> icons inside the Button components
are being read by assistive tech; update each <i className="fa-regular
fa-arrow-right" /> (and other similar arrow <i> instances at the noted
locations) to include aria-hidden="true" so they are ignored by screen readers —
locate the arrow <i> elements used inside the Button JSX in page.tsx and add
aria-hidden="true" to each instance.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: a7aa5478-25d4-46ee-9e06-c6f15ed1fc74
📒 Files selected for processing (18)
apps/site/src/app/(index)/page.tsxapps/site/src/app/about/page.tsxapps/site/src/app/careers/page.tsxapps/site/src/app/client/page.tsxapps/site/src/app/community/page.tsxapps/site/src/app/ecosystem/page.tsxapps/site/src/app/enterprise/page.tsxapps/site/src/app/migrate/page.tsxapps/site/src/app/orm/page.tsxapps/site/src/app/postgres/page.tsxapps/site/src/app/pricing/page.tsxapps/site/src/app/pricing/pricing-calculator.tsxapps/site/src/app/pricing/pricing-hero-plans.tsxapps/site/src/app/startups/page.tsxapps/site/src/app/studio/page.tsxapps/site/src/app/typedsql/page.tsxapps/site/src/components/enterprise/switch-enterprise.tsxpackages/eclipse/src/components/button.tsx
✅ Files skipped from review due to trivial changes (4)
- apps/site/src/app/migrate/page.tsx
- apps/site/src/app/startups/page.tsx
- apps/site/src/app/(index)/page.tsx
- apps/site/src/app/studio/page.tsx
🚧 Files skipped from review as they are similar to previous changes (8)
- apps/site/src/app/client/page.tsx
- apps/site/src/components/enterprise/switch-enterprise.tsx
- apps/site/src/app/community/page.tsx
- apps/site/src/app/pricing/page.tsx
- apps/site/src/app/orm/page.tsx
- apps/site/src/app/postgres/page.tsx
- apps/site/src/app/about/page.tsx
- packages/eclipse/src/components/button.tsx
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
apps/site/src/app/orm/page.tsx (1)
319-325: The nested<span>wrapper is inconsistent with other CTAs in this PR.Most other Button+asChild patterns in this PR place the text and icon as direct children of the anchor. Here, the icon is inside an extra
<span>wrapper, which differs from the established pattern and could affect styling.♻️ Suggested simplification for consistency
<Button asChild variant="default-strong" size="xl" className="w-fit"> <a href={stat.btn.url}> - <span> - {stat.btn.label} {stat.btn.icon && <i className={cn("ml-2", stat.btn.icon)} />} - </span> + {stat.btn.label} + {stat.btn.icon && <i className={cn("ml-2", stat.btn.icon)} />} </a> </Button>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/orm/page.tsx` around lines 319 - 325, The Button usage with asChild wraps the anchor's contents in an extra <span>, which is inconsistent with other CTAs; remove the extra <span> so the anchor (<a href={stat.btn.url}>) contains the text and the conditional icon directly (render {stat.btn.label} followed by {stat.btn.icon && <i className={cn("ml-2", stat.btn.icon)} />}), keeping the same Button props (Button asChild variant="default-strong" size="xl" className="w-fit") and conditional icon logic so styling matches the rest of the PR.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/site/src/app/mcp/_components/mcp-cta-section.tsx`:
- Around line 14-15: The CTA sentence in the mcp-cta-section component contains
unnecessary commas around "and agents" which makes it read awkwardly; update the
JSX string in apps/site/src/app/mcp/_components/mcp-cta-section.tsx (the CTA
text inside the MCP CTA component) to remove the extra commas so it reads
smoothly, e.g. "Join thousands of developers and agents already using Prisma MCP
for faster, more intuitive database workflows." Ensure only the punctuation is
changed and the rest of the JSX/markup in the component remains unchanged.
In `@apps/site/src/app/pricing/page.tsx`:
- Around line 173-178: The external CTA anchor inside the Button (Button asChild
variant="ppg" size="2xl") should open in a new tab and include safe rel
attributes; update the <a> element used for "Create your first Database" to add
target="_blank" and rel="noopener noreferrer" so it matches other
console.prisma.io links and preserves UX/security.
In `@apps/site/src/components/careers/open-roles.tsx`:
- Around line 120-124: The anchor wrapping the "View job listing" button (inside
the OpenRoles component where Button asChild renders <a href={job.url}>) should
open external job postings in a new tab; update the <a> element to include
target="_blank" and rel="noopener noreferrer" attributes so job links open in a
new tab safely without exposing the opener.
---
Nitpick comments:
In `@apps/site/src/app/orm/page.tsx`:
- Around line 319-325: The Button usage with asChild wraps the anchor's contents
in an extra <span>, which is inconsistent with other CTAs; remove the extra
<span> so the anchor (<a href={stat.btn.url}>) contains the text and the
conditional icon directly (render {stat.btn.label} followed by {stat.btn.icon &&
<i className={cn("ml-2", stat.btn.icon)} />}), keeping the same Button props
(Button asChild variant="default-strong" size="xl" className="w-fit") and
conditional icon logic so styling matches the rest of the PR.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: d470e1bc-0d44-47d2-b825-08de887a95f9
📒 Files selected for processing (29)
apps/docs/src/components/eclipse-showcase.tsxapps/eclipse/content/design-system/components/button.mdxapps/eclipse/src/components/eclipse-showcase.tsxapps/site/src/app/(index)/page.tsxapps/site/src/app/about/page.tsxapps/site/src/app/careers/page.tsxapps/site/src/app/client/page.tsxapps/site/src/app/community/page.tsxapps/site/src/app/ecosystem/page.tsxapps/site/src/app/enterprise/page.tsxapps/site/src/app/events/page.tsxapps/site/src/app/mcp/_components/mcp-agents-section.tsxapps/site/src/app/mcp/_components/mcp-cta-section.tsxapps/site/src/app/mcp/_components/mcp-hero-section.tsxapps/site/src/app/migrate/page.tsxapps/site/src/app/orm/page.tsxapps/site/src/app/postgres/page.tsxapps/site/src/app/pricing/page.tsxapps/site/src/app/pricing/pricing-hero-plans.tsxapps/site/src/app/startups/page.tsxapps/site/src/app/studio/page.tsxapps/site/src/app/typedsql/page.tsxapps/site/src/components/careers/open-roles.tsxapps/site/src/components/client/api.tsxapps/site/src/components/client/technology.tsxapps/site/src/components/technology.tsxpackages/eclipse/src/components/button.tsxpackages/ui/src/components/navigation-menu.tsxpackages/ui/src/components/web-navigation.tsx
✅ Files skipped from review due to trivial changes (2)
- apps/site/src/app/ecosystem/page.tsx
- apps/site/src/app/startups/page.tsx
🚧 Files skipped from review as they are similar to previous changes (15)
- apps/eclipse/src/components/eclipse-showcase.tsx
- apps/site/src/app/migrate/page.tsx
- apps/site/src/components/client/technology.tsx
- apps/site/src/app/enterprise/page.tsx
- apps/site/src/components/technology.tsx
- apps/site/src/app/client/page.tsx
- apps/site/src/app/pricing/pricing-hero-plans.tsx
- packages/ui/src/components/web-navigation.tsx
- apps/site/src/app/community/page.tsx
- apps/site/src/app/(index)/page.tsx
- apps/site/src/app/typedsql/page.tsx
- apps/site/src/app/careers/page.tsx
- apps/docs/src/components/eclipse-showcase.tsx
- packages/eclipse/src/components/button.tsx
- apps/eclipse/content/design-system/components/button.mdx
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (1)
apps/site/src/app/(index)/page.tsx (1)
19-20:⚠️ Potential issue | 🟡 MinorFix visible copy typo: missing space after period.
Line 19 renders
deploy.Your; it should bedeploy. Your.Suggested fix
- Works with your existing stack, wherever you deploy.Your choice of ORM, frameworks, and + Works with your existing stack, wherever you deploy. Your choice of ORM, frameworks, and🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/`(index)/page.tsx around lines 19 - 20, The visible copy has a missing space in the JSX string "deploy.Your" inside the page.tsx component (default export component in page.tsx); locate the JSX that renders the sentence containing the substring "deploy.Your" and insert a space after the period so it reads "deploy. Your".
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/site/src/app/`(index)/page.tsx:
- Around line 111-116: The decorative <i> icon elements used inside text CTAs
(e.g., the <i className="fa-regular fa-database" /> within the Button asChild
variant="ppg" and the other similar <i className="fa-..."> instances in the same
component) should be hidden from assistive technology; update each
presentational <i> element inside text CTAs to include aria-hidden="true" so
screen readers won’t announce them (apply the same change to the other matching
<i className="fa-..."> occurrences in this file).
- Around line 236-239: The primary CTA Button component (Button) rendering
"Create your first Database" is missing an action handler; add a navigation
target by either providing an href prop, wrapping it with asChild and placing a
Link/NavLink inside, or adding an onClick that calls the router push/navigation
function (e.g., useRouter().push('/databases') or next/navigation's useRouter)
so the button actually navigates to the database creation page; update the
Button invocation to include the chosen navigation method and ensure
accessibility attributes (aria-label) are preserved.
In `@apps/site/src/app/careers/page.tsx`:
- Around line 206-210: The decorative arrow icon inside the CTA should be hidden
from assistive tech: update the <i className="fa-solid fa-arrow-down"> element
used within the Button/anchor (the "View open positions" CTA) to include
aria-hidden="true" so screen readers only announce the link label; keep the
surrounding Button component and <a href="#open-positions"> unchanged.
In `@apps/site/src/app/studio/page.tsx`:
- Around line 146-157: The decorative icon <i> elements used inside the CTA
Buttons (e.g., the elements with className "fa-regular fa-arrow-up-right" and
"fa-regular fa-arrow-down" in the Button/asChild anchor blocks in page.tsx and
the other occurrences around lines referenced) are purely presentational and
should be hidden from screen readers; update each of those <i> tags to include
aria-hidden="true" (add this attribute to every decorative icon instance in the
Button/anchor blocks and the other instances referenced) so assistive tech
ignores them while preserving visual appearance.
---
Duplicate comments:
In `@apps/site/src/app/`(index)/page.tsx:
- Around line 19-20: The visible copy has a missing space in the JSX string
"deploy.Your" inside the page.tsx component (default export component in
page.tsx); locate the JSX that renders the sentence containing the substring
"deploy.Your" and insert a space after the period so it reads "deploy. Your".
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 7f1018d3-b187-42bd-9bbd-3268683c44cb
📒 Files selected for processing (13)
apps/docs/content/docs/orm/prisma-client/special-fields-and-types/working-with-geometry-fields.mdxapps/site/src/app/(index)/page.tsxapps/site/src/app/careers/page.tsxapps/site/src/app/client/page.tsxapps/site/src/app/community/page.tsxapps/site/src/app/enterprise/page.tsxapps/site/src/app/mcp/_components/mcp-hero-section.tsxapps/site/src/app/migrate/page.tsxapps/site/src/app/postgres/page.tsxapps/site/src/app/pricing/pricing-hero-plans.tsxapps/site/src/app/startups/page.tsxapps/site/src/app/studio/page.tsxapps/site/src/app/typedsql/page.tsx
✅ Files skipped from review due to trivial changes (4)
- apps/docs/content/docs/orm/prisma-client/special-fields-and-types/working-with-geometry-fields.mdx
- apps/site/src/app/enterprise/page.tsx
- apps/site/src/app/client/page.tsx
- apps/site/src/app/community/page.tsx
🚧 Files skipped from review as they are similar to previous changes (5)
- apps/site/src/app/mcp/_components/mcp-hero-section.tsx
- apps/site/src/app/typedsql/page.tsx
- apps/site/src/app/postgres/page.tsx
- apps/site/src/app/pricing/pricing-hero-plans.tsx
- apps/site/src/app/migrate/page.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Test plan
Summary by CodeRabbit
Style
Documentation