From 16b75b50dc5c00ce23fef0a95fc4186ff4ee2a86 Mon Sep 17 00:00:00 2001 From: Devin Logan Date: Fri, 15 Aug 2025 15:50:00 -0400 Subject: [PATCH 1/4] clarify language sync for tabs and code blocks --- .../default-components/code-blocks.mdx | 15 ++- .../default-components/tabs.mdx | 92 ++++++++++++++----- 2 files changed, 82 insertions(+), 25 deletions(-) diff --git a/fern/products/docs/pages/component-library/default-components/code-blocks.mdx b/fern/products/docs/pages/component-library/default-components/code-blocks.mdx index 3cb115852..6235fdcbb 100644 --- a/fern/products/docs/pages/component-library/default-components/code-blocks.mdx +++ b/fern/products/docs/pages/component-library/default-components/code-blocks.mdx @@ -306,9 +306,16 @@ The `CodeBlocks` component allows you to display multiple code blocks in a tabbe -## Example of Synchronized Blocks +## Language synchronization -Multiple `CodeBlocks` on a page automatically synchronize, showing the same language across all blocks. +Multiple `CodeBlocks` on a documentation site automatically synchronize. This +means when a user selects a `CodeBlock` with a specific language, all other +`CodeBlocks` across your documentation site with the same language will +automatically sync and switch to match. Language preferences are stored in +client-side local storage and persist across browser sessions. + +The example below demonstrates language sync in action – choosing a language in +either set of code blocks will automatically update both sets to match: ```python title="Python" @@ -362,6 +369,10 @@ Multiple `CodeBlocks` on a page automatically synchronize, showing the same lang ``` + + `CodeBlocks` automatically synchronize with [`` components that have a `language` property](/docs/writing-content/components/tabs#language-synchronization). + + ### Override synchronization You can override the synchronization of code blocks by setting the `for` prop. diff --git a/fern/products/docs/pages/component-library/default-components/tabs.mdx b/fern/products/docs/pages/component-library/default-components/tabs.mdx index 9c79372fc..c439afbf2 100644 --- a/fern/products/docs/pages/component-library/default-components/tabs.mdx +++ b/fern/products/docs/pages/component-library/default-components/tabs.mdx @@ -1,26 +1,9 @@ --- -title: 'Tabs' -description: 'The Tabs component allows you to display related content in a tabbed view.' +title: Tabs +description: The Tabs component allows you to display related content in a tabbed view with support for language synchronization. --- -The Tabs component organizes content into separate tabs that users can switch between. Each tab can contain different types of content like examples or code snippets. - -## Properties - - The title displayed in the tab header - - - - The language associated with the code block. Any arbitrary string may be used. - - When a user selects a tab with a specific language, all other tabs assigned to the same language will automatically sync and switch to match. - - - - The content to be displayed when the tab is selected. Can include text, markdown, and components. - - -
+The Tabs component organizes content into separate tabs that users can switch between. Each tab can contain different types of content like examples, code snippets, or documentation sections. @@ -34,8 +17,6 @@ The Tabs component organizes content into separate tabs that users can switch be - +## Properties + + + The title displayed in the tab header + + + + The language associated with the code block. Any arbitrary string may be used. + + When specified, enables global language synchronization across all tabs and code blocks with the same language value. + + + + The content to be displayed when the tab is selected. Can include text, markdown, and components. + + +## Language synchronization + +Multiple `Tabs` with a `language` property automatically synchronize. This means +when a user selects a tab with a specific language, all other tabs across your +documentation site with the same language will automatically sync and switch to +match. Language preferences are stored in client-side local storage and persist +across browser sessions. + +The example below demonstrates language sync in action – choosing a language in +either set of tabs will automatically update both sets to match: + + + + ```typescript + console.log("First code block!"); + ``` + + + ```python + print("First code block!") + ``` + + + ```java + System.out.println("First code block!"); + ``` + + + + + + ```typescript + console.log("Second code block – language syncs with the one above!"); + ``` + + + ```python + print("Second code block – language syncs with the one above!") + ``` + + + ```java + System.out.println("Second code block – language syncs with the one above!"); + ``` + + + + + Language-enabled `Tabs` automatically synchronize with [`CodeBlocks` in that same language](/docs/writing-content/components/code-blocks#language-synchronization). + From f9799510b808c5c49046e08eaa431c3bf91de5a6 Mon Sep 17 00:00:00 2001 From: Devin Logan Date: Fri, 15 Aug 2025 18:26:32 -0400 Subject: [PATCH 2/4] add example without sync --- .../default-components/tabs.mdx | 42 ++++++++++++++++++- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/fern/products/docs/pages/component-library/default-components/tabs.mdx b/fern/products/docs/pages/component-library/default-components/tabs.mdx index c439afbf2..76017f04a 100644 --- a/fern/products/docs/pages/component-library/default-components/tabs.mdx +++ b/fern/products/docs/pages/component-library/default-components/tabs.mdx @@ -57,8 +57,46 @@ documentation site with the same language will automatically sync and switch to match. Language preferences are stored in client-side local storage and persist across browser sessions. -The example below demonstrates language sync in action – choosing a language in -either set of tabs will automatically update both sets to match: +Tabs **without** the `language` property don't stay in sync with other tabs on your site. In the below example, choosing a language in +either set of tabs doesn't affect the other set of tabs: + + + + ```typescript + console.log("First code block!"); + ``` + + + ```python + print("First code block!") + ``` + + + ```java + System.out.println("First code block!"); + ``` + + + + + + ```typescript + console.log("Second code block – this won't sync with the one above!"); + ``` + + + ```python + print("Second code block – this won't sync with the one above!") + ``` + + + ```java + System.out.println("Second code block – this won't sync with the one above!"); + ``` + + + +Compare this to tabs **with** the `language` property. Choosing a language in either set below will automatically update both sets to match: From f47c3b88c0e3843226b6a5c3114c48e8a2de43e0 Mon Sep 17 00:00:00 2001 From: Devin Logan Date: Mon, 18 Aug 2025 11:13:10 -0400 Subject: [PATCH 3/4] change order of examples --- .../default-components/tabs.mdx | 50 +++++++++---------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/fern/products/docs/pages/component-library/default-components/tabs.mdx b/fern/products/docs/pages/component-library/default-components/tabs.mdx index 76017f04a..08ec7b3f9 100644 --- a/fern/products/docs/pages/component-library/default-components/tabs.mdx +++ b/fern/products/docs/pages/component-library/default-components/tabs.mdx @@ -57,21 +57,20 @@ documentation site with the same language will automatically sync and switch to match. Language preferences are stored in client-side local storage and persist across browser sessions. -Tabs **without** the `language` property don't stay in sync with other tabs on your site. In the below example, choosing a language in -either set of tabs doesn't affect the other set of tabs: +In the example below, choosing a language in either set of tabs will automatically update both sets to match: - + ```typescript console.log("First code block!"); ``` - + ```python print("First code block!") ``` - + ```java System.out.println("First code block!"); ``` @@ -79,37 +78,42 @@ either set of tabs doesn't affect the other set of tabs: - + ```typescript - console.log("Second code block – this won't sync with the one above!"); + console.log("Second code block – language syncs with the one above!"); ``` - + ```python - print("Second code block – this won't sync with the one above!") + print("Second code block – language syncs with the one above!") ``` - + ```java - System.out.println("Second code block – this won't sync with the one above!"); + System.out.println("Second code block – language syncs with the one above!"); ``` -Compare this to tabs **with** the `language` property. Choosing a language in either set below will automatically update both sets to match: + + Language-enabled `Tabs` automatically synchronize with [`CodeBlocks` in that same language](/docs/writing-content/components/code-blocks#language-synchronization). + + +Tabs **without** the `language` property don't stay in sync with other tabs on your site. In the below example, choosing a language in +either set of tabs doesn't affect the other set of tabs: - + ```typescript console.log("First code block!"); ``` - + ```python print("First code block!") ``` - + ```java System.out.println("First code block!"); ``` @@ -117,23 +121,19 @@ Compare this to tabs **with** the `language` property. Choosing a language in ei - + ```typescript - console.log("Second code block – language syncs with the one above!"); + console.log("Second code block – this won't sync with the one above!"); ``` - + ```python - print("Second code block – language syncs with the one above!") + print("Second code block – this won't sync with the one above!") ``` - + ```java - System.out.println("Second code block – language syncs with the one above!"); + System.out.println("Second code block – this won't sync with the one above!"); ``` - - - Language-enabled `Tabs` automatically synchronize with [`CodeBlocks` in that same language](/docs/writing-content/components/code-blocks#language-synchronization). - From ae9a914c34a92152b7305fc3370739f310652e2b Mon Sep 17 00:00:00 2001 From: Devin Logan Date: Mon, 18 Aug 2025 11:37:15 -0400 Subject: [PATCH 4/4] add in markdown examples --- .../default-components/tabs.mdx | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/fern/products/docs/pages/component-library/default-components/tabs.mdx b/fern/products/docs/pages/component-library/default-components/tabs.mdx index 08ec7b3f9..1290970e4 100644 --- a/fern/products/docs/pages/component-library/default-components/tabs.mdx +++ b/fern/products/docs/pages/component-library/default-components/tabs.mdx @@ -95,10 +95,34 @@ In the example below, choosing a language in either set of tabs will automatical + +````jsx + + + ```typescript + console.log("Content inside the TypeScript tab"); + ``` + + + ```python + print("Content inside the Python tab") + ``` + + + ```java + System.out.println("Content inside the Java tab"); + ``` + + +```` + + Language-enabled `Tabs` automatically synchronize with [`CodeBlocks` in that same language](/docs/writing-content/components/code-blocks#language-synchronization). + + Tabs **without** the `language` property don't stay in sync with other tabs on your site. In the below example, choosing a language in either set of tabs doesn't affect the other set of tabs: @@ -137,3 +161,28 @@ either set of tabs doesn't affect the other set of tabs: ``` + + +````jsx + + + ```typescript + console.log("Content inside the TypeScript tab, with no language property"); + ``` + + + ```python + print("Content inside the Python tab, with no language property") + ``` + + + ```java + System.out.println("Content inside the Java tab, with no language property"); + ``` + + +```` + + + +