[docs] Move file-system diagram under a collapsible

docs/global-styles/global.css

@@ -6,6 +6,11 @@ input {
   appearance: unset;
 }
 
+/* This isn't being included by Tailwind by default */
+.bg-white {
+  background-color: #fff;
+}
+
 #__next[aria-hidden] {
   filter: none !important;
 }

docs/pages/versions/unversioned/sdk/filesystem.mdx

@@ -7,23 +7,29 @@ iconUrl: '/static/images/packages/expo-file-system.png'
 platforms: ['android', 'ios', 'tvos']
 ---
 
+import { Collapsible } from '~/ui/components/Collapsible';
 import ImageSpotlight from '~/components/plugins/ImageSpotlight';
 import { ConfigReactNative } from '~/components/plugins/ConfigSection';
 import { AndroidPermissions } from '~/components/plugins/permissions';
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
+import PlatformsSection from '~/components/plugins/PlatformsSection';
 import { SnackInline } from '~/ui/components/Snippet';
 
-`expo-file-system` provides access to a file system stored locally on the device. Within Expo Go, each project has a separate file system and has no access to the file system of other Expo projects. However, it can save content shared by other projects to the local filesystem, as well as share local files with other projects. It is also capable of uploading and downloading files from network URLs.
+`expo-file-system` provides access to a file system stored locally on the device. It is also capable of uploading and downloading files from network URLs.
 
-{/* TODO: update this image so we don't have to force a white background on it */}
+<Collapsible summary="Diagram explaining how expo-file-system interacts with different resources">
+  <ImageSpotlight
+    alt="Diagram of the various pieces of expo-file-system and how they interact with different resources"
+    src="/static/images/sdk/file-system/file-system-diagram.png"
+    containerClassName="bg-white"
+  />
+</Collapsible>
 
-<ImageSpotlight
-  alt="Diagram of the various pieces of expo-file-system and how they interact with different resources"
-  src="/static/images/sdk/file-system/file-system-diagram.png"
-  style={{ maxWidth: 850, maxHeight: 600 }}
-  containerClassName="bg-white"
-/>
+<Collapsible summary="How expo-file-system works differently inside of the Expo Go app">
+  Within Expo Go, each project has a separate file system scope and has no access to the file system
+  of other projects.
+</Collapsible>
 
 ## Installation
 

docs/pages/versions/v50.0.0/sdk/filesystem.mdx

@@ -6,6 +6,7 @@ packageName: 'expo-file-system'
 iconUrl: '/static/images/packages/expo-file-system.png'
 ---
 
+import { Collapsible } from '~/ui/components/Collapsible';
 import ImageSpotlight from '~/components/plugins/ImageSpotlight';
 import { ConfigReactNative } from '~/components/plugins/ConfigSection';
 import { AndroidPermissions } from '~/components/plugins/permissions';
@@ -14,19 +15,23 @@ import { APIInstallSection } from '~/components/plugins/InstallSection';
 import PlatformsSection from '~/components/plugins/PlatformsSection';
 import { SnackInline } from '~/ui/components/Snippet';
 
-`expo-file-system` provides access to a file system stored locally on the device. Within Expo Go, each project has a separate file system and has no access to the file system of other Expo projects. However, it can save content shared by other projects to the local filesystem, as well as share local files with other projects. It is also capable of uploading and downloading files from network URLs.
-
-{/* TODO: update this image so we don't have to force a white background on it */}
-
-<ImageSpotlight
-  alt="Diagram of the various pieces of expo-file-system and how they interact with different resources"
-  src="/static/images/sdk/file-system/file-system-diagram.png"
-  style={{ maxWidth: 850, maxHeight: 600 }}
-  containerClassName="bg-white"
-/>
+`expo-file-system` provides access to a file system stored locally on the device. It is also capable of uploading and downloading files from network URLs.
 
 <PlatformsSection android emulator ios simulator />
 
+<Collapsible summary="Diagram explaining how expo-file-system interacts with different resources">
+  <ImageSpotlight
+    alt="Diagram of the various pieces of expo-file-system and how they interact with different resources"
+    src="/static/images/sdk/file-system/file-system-diagram.png"
+    containerClassName="bg-white"
+  />
+</Collapsible>
+
+<Collapsible summary="How expo-file-system works differently inside of the Expo Go app">
+  Within Expo Go, each project has a separate file system scope and has no access to the file system
+  of other projects.
+</Collapsible>
+
 ## Installation
 
 <APIInstallSection />