Replace text in DetailsPage story

Author: laurkim

polaris-react/playground/DetailsPage.tsx

@@ -19,8 +19,6 @@ import {
 import {
   ActionList,
   Badge,
-  // eslint-disable-next-line import/no-deprecated
-  Caption,
   Card,
   ContextualSaveBar,
   DropZone,
@@ -37,13 +35,12 @@ import {
   SkeletonDisplayText,
   SkeletonPage,
   Stack,
+  Text,
   TextContainer,
   TextField,
   Thumbnail,
   Toast,
   TopBar,
-  // eslint-disable-next-line import/no-deprecated
-  VisuallyHidden,
 } from '../src';
 
 import styles from './DetailsPage.scss';
@@ -453,7 +450,7 @@ export function DetailsPage() {
   const loadingMarkup = isLoading ? <Loading /> : null;
 
   const skipToContentTarget = (
-    <VisuallyHidden>
+    <Text as="span" variant="bodySm" visuallyHidden>
       <a
         href="#SkipToContent"
         id="SkipToContentTarget"
@@ -462,7 +459,7 @@ export function DetailsPage() {
       >
         Page content
       </a>
-    </VisuallyHidden>
+    </Text>
   );
 
   const [title, setTitle] = useState(
@@ -536,7 +533,10 @@ export function DetailsPage() {
             }
           />
           <div>
-            {file.name} <Caption>{file.size} bytes</Caption>
+            {file.name}{' '}
+            <Text as="p" variant="bodySm">
+              {file.size} bytes
+            </Text>
           </div>
         </Stack>
       ))}