feat: DC-4959 Tabs ui revision #7089
Conversation
carlagn
requested review from
Techboidesign,
aidankmcalister,
ankur-arch,
mhessdev,
nikolasburk and
nurul3101
WalkthroughUpdated TabbedContent usage across MDX (removed/changed Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TabsComp as Tabs Component
participant CSSModule as Tabs SCSS
participant Browser
Note over User,TabsComp: User clicks a tab
User->>TabsComp: click(tab)
TabsComp->>TabsComp: update selectedValue
TabsComp->>CSSModule: compute applied classes (global + styles.activeTab)
CSSModule-->>Browser: render styles (active/hover/full-width, code-child rules)
Browser-->>User: updated tab UI and content
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
Dangerous URL checkNo absolute URLs to prisma.io/docs found. |
Redirect checkThis PR probably requires the following redirects to be added to static/_redirects:
|
Deploying docs with
|
| Latest commit: |
62cf409
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://8bf078d6.docs-51g.pages.dev |
| Branch Preview URL: | https://feat-dc-4959-tabscontent.docs-51g.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/theme/Tabs/index.tsx (1)
22-43: Improve keyboard a11y: Space/Home/End support and preventDefaultAdd Space to activate the tab, and Home/End to jump to first/last. Prevent default on arrow/home/end to avoid incidental scrolling.
const handleKeydown = (event) => { let focusElement = null; switch (event.key) { case "Enter": { handleTabChange(event); break; } + case " ": // Space + case "Spacebar": { + event.preventDefault(); + handleTabChange(event); + break; + } case "ArrowRight": { + event.preventDefault(); const nextTab = tabRefs.indexOf(event.currentTarget) + 1; focusElement = tabRefs[nextTab] ?? tabRefs[0]; break; } case "ArrowLeft": { + event.preventDefault(); const prevTab = tabRefs.indexOf(event.currentTarget) - 1; focusElement = tabRefs[prevTab] ?? tabRefs[tabRefs.length - 1]; break; } + case "Home": { + event.preventDefault(); + focusElement = tabRefs[0]; + break; + } + case "End": { + event.preventDefault(); + focusElement = tabRefs[tabRefs.length - 1]; + break; + } default: break; } focusElement?.focus(); };
🧹 Nitpick comments (5)
src/theme/styles.module.scss (1)
9-11: Harden selector; target both cmd and cmdResult with lower specificityCurrent selector is brittle to DOM depth. Use :where() and a single group; keeps specificity low and intent clear.
- cmd > div > div, cmdresult > div > div { - margin: 0; - } + :where(cmd, cmdresult) > div > div { + margin: 0; + }src/theme/CodeBlock/Line/styles.module.scss (1)
83-86: Consolidate duplicate .noLineNumbers rulesYou now have two .noLineNumbers blocks; the later overrides the earlier. Collapse into one to avoid confusion.
- .noLineNumbers { - margin: 0 -16px 0 0; - } - -.noLineNumbers { - padding: 0 0 0 calc(var(--ifm-pre-padding)) !important; - margin: 0; -} +.noLineNumbers { + padding: 0 0 0 calc(var(--ifm-pre-padding)) !important; + margin: 0; /* if the -16px was intentional, restore it here instead */ +}src/theme/TabItem/styles.module.scss (1)
17-25: Make selectors resilient and reduce !important usageAlign with custom elements in MDX and avoid over-specific depth assumptions.
- > div, cmd > div { - background: transparent !important; - > div { - margin: 0; - } - } - cmdresult > div > div { - margin: 0; - } + > div, + :where(cmd) > div { + background: transparent; /* drop !important if not strictly needed */ + } + > div > div, + :where(cmd, cmdresult) > div > div { + margin: 0; + }src/css/custom.css (1)
1489-1492: Terminal prompt padding tweak: add trailing semicolon and confirm specificity
- Add a trailing semicolon for consistency with the codebase’s style.
- With
!importanthere and also inCodeBlock/Line/styles.module.scss, confirm there’s no unintended override cascade on terminal blocks.Apply:
-.language-terminal code > .token-line { - padding: 0 0 0 calc(var(--ifm-pre-padding) * 2) !important -} +.language-terminal code > .token-line { + padding: 0 0 0 calc(var(--ifm-pre-padding) * 2) !important; +}src/theme/Tabs/index.tsx (1)
68-69: Avoid space-joined class key in clsxUsing a computed object key with a space works but is brittle. Pass classes separately for clarity and tooling friendliness.
- className={clsx("tabs__item", styles.tabItem, attributes?.className, { - [`tabs__item--active ${styles.activeTab}`]: selectedValue === value, - })} + className={clsx( + "tabs__item", + styles.tabItem, + attributes?.className, + selectedValue === value && "tabs__item--active", + selectedValue === value && styles.activeTab + )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (9)
content/200-orm/200-prisma-client/100-queries/062-computed-fields.mdx(1 hunks)content/200-orm/200-prisma-client/600-observability-and-logging/130-logging.mdx(1 hunks)content/200-orm/300-prisma-migrate/300-workflows/10-seeding.mdx(3 hunks)src/css/custom.css(1 hunks)src/theme/CodeBlock/Line/styles.module.scss(1 hunks)src/theme/TabItem/styles.module.scss(1 hunks)src/theme/Tabs/index.tsx(1 hunks)src/theme/Tabs/styles.module.scss(2 hunks)src/theme/styles.module.scss(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: runner / linkspector
- GitHub Check: Lost Pixel
🔇 Additional comments (8)
content/200-orm/200-prisma-client/100-queries/062-computed-fields.mdx (1)
13-13: Verify removal of “transparent” doesn’t regress code block backgrounds/paddingCheck light/dark themes and mobile for unintended background bleed or spacing shifts around CodeWithResult.
content/200-orm/200-prisma-client/600-observability-and-logging/130-logging.mdx (1)
74-74: Confirm visual parity after switching toPreviously there was custom transform/transparent styling. Please sanity-check spacing of the tab list vs. code on narrow viewports.
content/200-orm/300-prisma-migrate/300-workflows/10-seeding.mdx (3)
21-56: Standardizing TabbedContent to code looks goodSwitching to
<TabbedContent code>matches the new Tabs styling model and removes reliance on the old transparent variant.
80-107: Use of fullWidth is appropriate; please verify mobile overflow
<TabbedContent fullWidth>pairs with.tabList:has(.full-width)to expand the panel. Please sanity-check on small screens that long code lines don’t create horizontal overflow beyond the article grid.Also applies to: 197-207
349-385: Consistent fullWidth usage across Bash/SQL tabsSecond use of
fullWidthis consistent with the TS/JS example block.src/theme/Tabs/styles.module.scss (3)
2-4: Light theme border color override—LGTMKeeps content panel borders aligned with the light palette after removing global tabs CSS.
8-16: Container sizing: fit-content + full-width — verify wrapping behavior
width: fit-contentwith an override via:has(.full-width)is sensible. Please verify that tab labels wrap or scroll gracefully when many tabs are present, especially within narrow columns.Also applies to: 33-38
83-88: Code panel background reset—LGTM
background: transparent !important;onpreavoids double backgrounds with the container. Good.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
content/200-orm/300-prisma-migrate/300-workflows/10-seeding.mdx(3 hunks)src/theme/TabItem/styles.module.scss(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- content/200-orm/300-prisma-migrate/300-workflows/10-seeding.mdx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Check internal links
- GitHub Check: runner / linkspector
- GitHub Check: Lost Pixel
🔇 Additional comments (2)
src/theme/TabItem/styles.module.scss (2)
20-28: Ignore custom‐elements suggestion
Markup consistently uses<cmd>and<cmdresult>custom elements (noclass="cmd"orclass="cmdresult"found), so the existing element selectors instyles.module.scssare correct.Likely an incorrect or invalid review comment.
17-19: Confirm intended shadow removal. Audit found no downstream rules reintroducing shadows; the> divoverride strips all box-shadows (including the CodeBlock container’s). Ensure this aligns with the new visual spec.
carlagn
dismissed stale reviews from coderabbitai[bot] and aidankmcalister
via
4b03c69
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
src/theme/Tabs/styles.module.scss (2)
29-31: Scope fix::has(.code-children)will not match — use:global()or change TabItem to use the module class
This was flagged earlier; still present. SinceTabItemrenders a literalclass="code-children", the current selector won’t apply from a CSS module.Use either approach (pick one and keep consistent):
- Keep TabItem global class → globalize selector here:
- &:has(.code-children) { + &:has(:global(.code-children)) { padding: 0; }- &:has(.code-children) { + &:has(:global(.code-children)) { width: auto; }
- Or, change TabItem to use
styles.codeChildren, then update selectors accordingly:- &:has(.code-children) { + &:has(.codeChildren) { padding: 0; }- &:has(.code-children) { + &:has(.codeChildren) { width: auto; }Also applies to: 33-35
41-86: Add a visible keyboard focus state on tabs
No visible focus indication on.tabItem. Add:focus-visiblefor accessibility. (Echoing prior suggestion.)Apply:
.tabItem { margin-top: 0 !important; + &:focus-visible { + outline: 2px solid var(--ifm-color-primary); + outline-offset: 2px; + }
🧹 Nitpick comments (2)
src/theme/Tabs/styles.module.scss (2)
48-55: Remove duplicate alignment and obsolete vendor prefix
align-itemsis declared twice and-webkit-box-alignis unnecessary in target browsers.Apply:
- align-items: center; border-radius: 4px 4px 0px 0px !important; background-color: var(--border-color); border: 1px solid transparent; cursor: pointer; - -webkit-box-align: center; - align-items: center; + align-items: center; display: flex;
23-26: Use theme font token instead of hardcodingInter
Keeps typography consistent with site theming and avoids FOUC if Inter isn’t loaded.- font-family: Inter; + font-family: var(--ifm-font-family-base);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
src/theme/Tabs/styles.module.scss(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Check internal links
- GitHub Check: runner / linkspector
- GitHub Check: Lost Pixel
🔇 Additional comments (1)
src/theme/Tabs/styles.module.scss (1)
11-13: Ignore suggestion to globalize.full-widthThe class is applied via CSS Modules (styles['full-width']insrc/theme/Tabs/index.tsx), so both&:has(.full-width)and.full-width {…}instyles.module.scssare correctly scoped.Likely an incorrect or invalid review comment.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/css/gettingStarted.module.scss (2)
212-214: Keep tile background on hover in framed lists and add a safe fallback.The base
.squareWrapper:hoversetsbackground: transparent, which overrides this framed variant. Also, add a fallback in case--surface-primaryis missing.&.framedList { @@ - .squareWrapper { - background: var(--surface-primary); - } + .squareWrapper { + background: var(--surface-primary, var(--header-bg-color)); + } + .squareWrapper:hover { + background: var(--surface-primary, var(--header-bg-color)); + }
136-154: Remove redundant background; it’s immediately overridden.
background: var(--header-bg-color);is superseded bybackground: transparent;later in the same rule..squareWrapper { width: 90px; height: 90px; text-decoration: none; padding: 22px; display: inline-block; border: 1px solid var(--border-color); - background: var(--header-bg-color); border-radius: 8px; transition: all 300ms ease-out; cursor: pointer; border-color: var(--ifm-btn-border-color); background: transparent;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (6)
content/200-orm/200-prisma-client/150-using-raw-sql/100-typedsql.mdx(1 hunks)content/200-orm/300-prisma-migrate/300-workflows/10-seeding.mdx(3 hunks)content/200-orm/500-reference/050-prisma-client-reference.mdx(1 hunks)src/css/gettingStarted.module.scss(1 hunks)src/css/theming.css(0 hunks)src/theme/Tabs/index.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- src/css/theming.css
✅ Files skipped from review due to trivial changes (2)
- content/200-orm/200-prisma-client/150-using-raw-sql/100-typedsql.mdx
- content/200-orm/500-reference/050-prisma-client-reference.mdx
🚧 Files skipped from review as they are similar to previous changes (2)
- src/theme/Tabs/index.tsx
- content/200-orm/300-prisma-migrate/300-workflows/10-seeding.mdx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Check internal links
- GitHub Check: runner / linkspector
- GitHub Check: Lost Pixel
* Update UI for tabs * Update tabbedcontent * Update all tabbedcontent references * Update seeding * Update seeding spacings * Add hover * Update border thickness of tab items * Update margin-bottom for codewithresult * Update fullwidth as the default * Update squarewrapper * Update max-width and flex alignment
3 participants
Fixes #DC-4959
Summary by CodeRabbit
Documentation
Style