feat: DC-4959 Tabs ui revision (prisma#7089)

carlagn · jlecordier · commit 44d2845960ba · 2025-09-03T13:14:14.000Z
* 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
diff --git a/content/200-orm/200-prisma-client/100-queries/062-computed-fields.mdx b/content/200-orm/200-prisma-client/100-queries/062-computed-fields.mdx
@@ -10,7 +10,7 @@ Computed fields allow you to derive a new field based on existing data. A common
 
 The following example illustrates how to create a [Prisma Client extension](/orm/prisma-client/client-extensions) that adds a `fullName` computed field at runtime to the `User` model in a Prisma schema.
 
-<TabbedContent transparent code>
+<TabbedContent code>
 
 <TabItem value="Prisma Client extension">
 
diff --git a/content/200-orm/200-prisma-client/150-using-raw-sql/100-typedsql.mdx b/content/200-orm/200-prisma-client/150-using-raw-sql/100-typedsql.mdx
@@ -84,7 +84,7 @@ To pass arguments to your TypedSQL queries, you can use parameterized queries. T
 
 1. In your SQL file, use placeholders for the parameters you want to pass. The syntax for placeholders depends on your database engine:
 
-   <TabbedContent transparent fullWidth>
+   <TabbedContent transparent>
    <TabItem value="PostgreSQL">
    For PostgreSQL, use the positional placeholders `$1`, `$2`, etc.:
 
diff --git a/content/200-orm/200-prisma-client/600-observability-and-logging/130-logging.mdx b/content/200-orm/200-prisma-client/600-observability-and-logging/130-logging.mdx
@@ -71,7 +71,7 @@ To use event-based logging:
 
 The following example subscribes to all `query` events and write the `duration` and `query` to console:
 
-<TabbedContent transparent code customStyles={{ transform: `translateY(-2rem)` }}>
+<TabbedContent code>
 
 <TabItem value="Relational databases">
 
diff --git a/content/200-orm/300-prisma-migrate/300-workflows/10-seeding.mdx b/content/200-orm/300-prisma-migrate/300-workflows/10-seeding.mdx
@@ -18,10 +18,8 @@ This guide describes how to seed your database using Prisma Client and Prisma OR
 
 Prisma ORM's integrated seeding functionality expects a command in the `"seed"` key in the `"prisma"` key of your `package.json` file. This can be any command, `prisma db seed` will just execute it. In this guide and as a default, we recommend writing a seed script inside your project's `prisma/` folder and starting it with the command.
 
-<TabbedContent transparent code>
+<TabbedContent>
 <TabItem value="TypeScript">
-<br/>
-
 ```json
 "prisma": {
   "seed": "ts-node prisma/seed.ts"
@@ -43,14 +41,11 @@ This can be useful to reduce memory usage (RAM) and increase execution speed of
 </TabItem>
 
 <TabItem value="JavaScript">
-<br/>
-
 ```json
 "prisma": {
   "seed": "node prisma/seed.js"
 },
 ```
-
 </TabItem>
 
 </TabbedContent>
@@ -77,7 +72,7 @@ Here we suggest some specific seed scripts for different situations. You are fre
 
 ### Seeding your database with TypeScript or JavaScript
 
-<TabbedContent transparent code>
+<TabbedContent>
 
 <TabItem value="TypeScript">
 
@@ -346,7 +341,7 @@ main()
 
 In addition to TypeScript and JavaScript, you can also use a Bash script (`seed.sh`) to seed your database in another language such as Go, or plain SQL.
 
-<TabbedContent transparent code>
+<TabbedContent>
 
 <TabItem value="Go">
 <br/>
diff --git a/content/200-orm/500-reference/050-prisma-client-reference.mdx b/content/200-orm/500-reference/050-prisma-client-reference.mdx
@@ -5328,7 +5328,7 @@ const getUsers = await prisma.user.findMany({
 
 The following query returns all users where the `sanctuaries` array contains the value `"RSPCA"`:
 
-<TabbedContent fullWidth>
+<TabbedContent>
 <TabItem value="PostgreSQL">
 
 ```ts
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -1028,73 +1028,6 @@ hr {
 }
 
 /* TABS */
-.tabs-container {
-  width: fit-content;
-  margin: 1rem 0;
-  max-width: 100%;
-}
-
-.tabs-container > div {
-  padding: 32px;
-  margin-top: 0 !important;
-  background-color: var(--main-bgd-color);
-  border: 1px solid var(--ifm-tabs-bg-color-active);
-  border-radius: 0px 8px 8px;
-  font-family: Inter;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  letter-spacing: 0em;
-  text-align: left;
-}
-
-.tabs-container:has(.code-children) {
-  width: auto;
-}
-
-.tabs-container > div:has(.code-children) {
-  padding: 0;
-}
-
-:root[data-theme="light"] .tabs-container > div {
-  border-color: #e2e8f0;
-}
-
-.tabs-container p {
-  margin: 0;
-}
-
-.tabs__item {
-  padding: 6px 12px;
-  margin-right: 4px;
-  font-weight: 600;
-  font-size: 0.875rem;
-  align-items: center;
-  border-radius: 4px 4px 0px 0px !important;
-  background-color: var(--ifm-tabs-bg-color);
-  border: none !important;
-  /* color: rgb(113, 128, 150); */
-  cursor: pointer;
-  -webkit-box-align: center;
-  align-items: center;
-  display: flex;
-  --ifm-tabs-color-active: #fff;
-}
-
-.tabs__item:hover {
-  background: var(--ifm-tabs-bg-color-active);
-  color: var(--ifm-tabs-color-active);
-}
-
-.tabs__item--active {
-  background: var(--ifm-tabs-bg-color-active);
-  color: var(--ifm-tabs-color-active);
-}
-
-.tabs__item--active:hover {
-  background: var(--ifm-tabs-bg-color-active);
-  color: var(--ifm-tabs-color-active);
-}
 
 .theme-doc-toc-mobile .table-of-contents {
   padding: 0 0.8rem 0.8rem;
@@ -1553,6 +1486,10 @@ article h6 {
   left: var(--ifm-pre-padding);
 }
 
+.language-terminal code > .token-line {
+  padding: 0 0 0 calc(var(--ifm-pre-padding) * 2) !important
+}
+
 code {
   font-variant: no-common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual;
   vertical-align: baseline;
diff --git a/src/css/gettingStarted.module.scss b/src/css/gettingStarted.module.scss
@@ -140,17 +140,15 @@
   padding: 22px;
   display: inline-block;
   border: 1px solid var(--border-color);
-  background: var(--header-bg-color);
+  background: var(--surface-primary);
   border-radius: 8px;
   transition: all 300ms ease-out;
   cursor: pointer;
 
   border-color: var(--ifm-btn-border-color);
-  background: transparent;
   color: var(--main-font-color);
   &:hover {
     border-color: var(--ifm-btn-border-color-active);
-    background: transparent;
   }
   &:active,
   &:focus {
@@ -169,7 +167,7 @@
   display: grid;
   gap: 16px;
   margin-top: 16px;
-  justify-content: space-between;
+  max-width: fit-content;
   grid-template-columns: repeat(2, auto);
   &:not(.framedList) {
     @media (min-width: 1400px) {
@@ -210,7 +208,7 @@
       grid-template-columns: repeat(3, auto);
     }
     .squareWrapper {
-      background: var(--header-bg-color);
+      background: var(--surface-primary);
     }
   }
   &.splitList {
diff --git a/src/css/theming.css b/src/css/theming.css
@@ -502,7 +502,6 @@ html[data-theme="dark"] {
     --navbar-items-bg: #090a15cc;
     --surface-secondary: #e2e8f0;
     --ifm-code-background: #1a202c;
-    --surface-primary: #090a15;
     --surface-brand-grey: #161d2b;
     --surface-brand-grey-strong: #2d3748;
     --surface-brand-light: #0d3a38;
diff --git a/src/theme/CodeBlock/Line/styles.module.scss b/src/theme/CodeBlock/Line/styles.module.scss
@@ -81,7 +81,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
 }
 
 .noLineNumbers {
-  padding: 0 0 0 calc(var(--ifm-pre-padding));
+  padding: 0 0 0 calc(var(--ifm-pre-padding)) !important;
   margin: 0;
 }
 
diff --git a/src/theme/TabItem/styles.module.scss b/src/theme/TabItem/styles.module.scss
@@ -14,6 +14,19 @@
 .codeChildren {
   width: max-content;
   max-width: 100%;
+  > div {
+    box-shadow: none;
+    margin-bottom: 0;
+  }
+  > div, cmd > div {
+    background: transparent !important;
+    > div {
+      margin: 0;
+    }
+  }
+  cmdresult > div > div {
+    margin: 0;
+  }
 }
 
 .terminal {
diff --git a/src/theme/Tabs/index.tsx b/src/theme/Tabs/index.tsx
@@ -65,7 +65,7 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
           onClick={handleTabChange}
           {...attributes}
           className={clsx("tabs__item", styles.tabItem, attributes?.className, {
-            "tabs__item--active": selectedValue === value,
+            [`tabs__item--active ${styles.activeTab}`]: selectedValue === value,
           })}
         >
           {label ?? value}
@@ -81,7 +81,6 @@ function TabContent({
   transparent,
   code,
   terminal,
-  fullWidth,
   customStyles,
 }) {
   const childTabs = (Array.isArray(children) ? children : [children]).filter(Boolean);
@@ -99,7 +98,7 @@ function TabContent({
       className={clsx(
         transparent && styles.transparent,
         code && styles.code,
-        fullWidth && styles[`full-width`]
+        styles[`full-width`]
       )}
       style={customStyles ? customStyles : {}}
     >
diff --git a/src/theme/Tabs/styles.module.scss b/src/theme/Tabs/styles.module.scss
@@ -1,12 +1,88 @@
+
+:root[data-theme="light"] .tabs-container > div {
+  border-color: #e2e8f0;
+}
+
 .tabList {
   margin-bottom: var(--ifm-leading);
+  width: fit-content;
+  margin: 1rem 0;
+  max-width: 100%;
   &:has(.full-width) {
     width: 100%;
   }
+  > ul {
+    overflow: unset;
+  }
+  > div {
+    padding: 32px;
+    margin-top: 0 !important;
+    background-color: var(--surface-brand-grey);
+    border: 1px solid var(--border-color);
+    border-radius: 0px 8px 8px;
+    font-family: Inter;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0em;
+    text-align: left;
+    &:has(.code-children) {
+      padding: 0;
+    }
+  }
+  &:has(.code-children) {
+    width: auto;
+  }
+  p {
+    margin: 0
+  }
 }
 
 .tabItem {
   margin-top: 0 !important;
+  padding: 6px 12px;
+  margin-right: 4px;
+  margin-bottom: -1px;
+  font-weight: 600;
+  font-size: 0.875rem;
+  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;
+  display: flex;
+  color: var(--tertiary-font-color);
+  z-index: 0;
+  &:hover {
+    background: var(--disabled-font-color);
+    position: relative;
+    &::after {
+      content: "";
+      background-color: var(--border-color);
+      width: calc(100% + 6px);
+      height: 1px;
+      position: absolute;
+      left: -1px;
+      top: 100%;
+    }
+  }
+  &.activeTab {
+    border: 1px solid var(--border-color);
+    z-index: 2;
+    background: var(--surface-brand-grey);
+    position: relative;
+    &::after {
+      content: "";
+      background: var(--surface-brand-grey);
+      width: 100%;
+      height: 1px;
+      position: absolute;
+      left: 0;
+      top: 100%;
+    }
+  }
 }
 
 .transparent {
@@ -19,10 +95,11 @@
 }
 
 .code {
-  margin-top: 0 !important;
+  padding: 0 !important;
   pre {
     border-top-left-radius: 0;
     padding-bottom: 0 !important;
+    background: transparent !important;
     code {
       padding-bottom: var(--ifm-pre-padding) !important;
     }
diff --git a/src/theme/styles.module.scss b/src/theme/styles.module.scss
@@ -6,6 +6,9 @@
       border-radius: 8px 8px 0 0;
     }
   }
+  cmd > div > div, cmdresult > div > div {
+    margin: 0;
+  }
   .result {
     background-color: var(--code-with-result) !important;
     color: var(--code-inline-bgd-color) !important;

Original file line number	Diff line number	Diff line change
`@@ -81,7 +81,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus`
`81`	`81`	`}`
`82`	`82`
`83`	`83`	`.noLineNumbers {`
`84`		`- padding: 0 0 0 calc(var(--ifm-pre-padding));`
	`84`	`+ padding: 0 0 0 calc(var(--ifm-pre-padding)) !important;`
`85`	`85`	`margin: 0;`
`86`	`86`	`}`
`87`	`87`