fix: WEB-625 Update fullwidth prop (#6201)

* Update fullwidth prop * Update width of tablist for full
prisma · Aug 19, 2024 · 01c7d79 · 01c7d79
1 parent 2a830ca
commit 01c7d79
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/...-prisma/200-add-to-existing-project/110-relational-databases/300-next-steps.mdx b/...-prisma/200-add-to-existing-project/110-relational-databases/300-next-steps.mdx
@@ -96,7 +96,7 @@ To evolve the app, you need to follow the same flow of the tutorial:
 
 The [`prisma-examples`](https://github.com/prisma/prisma-examples/) repository contains a number of ready-to-run examples:
 
-<TabbedContent>
+<TabbedContent fullWidth>
 
 <TabItem value="TypeScript">
 

diff --git a/content/100-getting-started/index.mdx b/content/100-getting-started/index.mdx
@@ -69,7 +69,7 @@ _These options don't require you to have your own database running._
 
 _Select one of these options if you want to connect Prisma ORM to your own database._
 
-<TabbedContent gettingStarted>
+<TabbedContent>
   <TabItem value="New database">
     <p>
       Set up Prisma ORM <b>from scratch</b> with your favorite database and

diff --git a/src/theme/Tabs/index.tsx b/src/theme/Tabs/index.tsx
@@ -1,4 +1,4 @@
-import React, { cloneElement } from "react";
+import React, { cloneElement, useEffect } from "react";
 import clsx from "clsx";
 import {
   useScrollPositionBlocker,
@@ -74,7 +74,7 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
     </ul>
   );
 }
-function TabContent({ lazy, children, selectedValue, transparent, code, terminal, customStyles }) {
+function TabContent({ lazy, children, selectedValue, transparent, code, terminal, fullWidth, customStyles }) {
   const childTabs = (Array.isArray(children) ? children : [children]).filter(Boolean);
   if (lazy) {
     const selectedTabItem = childTabs.find((tabItem) => tabItem.props.value === selectedValue);
@@ -87,7 +87,7 @@ function TabContent({ lazy, children, selectedValue, transparent, code, terminal
 
   return (
     <div
-      className={clsx("margin-top--md", transparent && styles.transparent, code && styles.code)}
+      className={clsx("margin-top--md", transparent && styles.transparent, code && styles.code, fullWidth && styles[`full-width`])}
       style={customStyles ? customStyles : {}}
     >
       {childTabs.map((tabItem, i) =>
@@ -112,6 +112,7 @@ function TabsComponent(props) {
 }
 export default function Tabs(props) {
   const isBrowser = useIsBrowser();
+  console.log(props)
   return (
     <TabsComponent
       // Remount tabs after hydration

diff --git a/src/theme/Tabs/styles.module.scss b/src/theme/Tabs/styles.module.scss
@@ -23,3 +23,10 @@
     }
   }
 }
+
+.full-width {
+  display: block;
+  > div > div {
+    width: 100%;
+  }
+}