docs: add migration guide (#685)

packages/docs/src/components/docs/DocsContent.tsx

@@ -32,7 +32,7 @@ const DocsContent = styled('div')(
     & p:not(:first-of-type) {
       margin-top: 8px;
     }
-    
+
     & pre + p:not(:first-of-type) {
       margin-top: 20px;
     }
@@ -174,6 +174,15 @@ const DocsContent = styled('div')(
       padding: 1rem;
       overflow: auto;
       margin: 0;
+      border-radius: 12px;
+    }
+
+    .dark & pre.code-tabpanel,
+    .dark & pre.code-tabpanel[class*='language-'],
+    .light & pre.code-tabpanel,
+    .light & pre.code-tabpanel[class*='language-'] {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
     }
 
     & pre code {

packages/docs/src/components/docs/components/CodeTabs.tsx

@@ -142,7 +142,7 @@ const CodeTabs = ({ children }: CodeTabsProps) => {
       </Box>
       {tabs.map((tabData, index) => (
         <TabPanel key={tabData.className} value={value} index={index}>
-          <pre className={tabData.className}>
+          <pre className={`code-tabpanel ${tabData.className}`} tabIndex={0}>
             <code
               className={tabData.className}
               dangerouslySetInnerHTML={{ __html: tabData.content }}

packages/docs/src/components/docs/table_of_contents/DocsTableOfContents.tsx

@@ -18,7 +18,11 @@ const getNestedHeadings = (headingElements: HTMLHeadingElement[]) => {
   const nestedHeadings: NestedHeading[] = [];
 
   headingElements.forEach(heading => {
-    const { innerText: title, id } = heading;
+    const { innerText, id } = heading;
+    const title = innerText
+      .replace(/\n/g, '')
+      .replace(/Beta Feature$/g, '')
+      .trim();
 
     if (heading.nodeName === 'H1' || heading.nodeName === 'H2') {
       nestedHeadings.push({ id, title, items: [] });
@@ -118,7 +122,7 @@ const StyledNav = styled('nav')(
     max-height: calc(100vh - 72px);
     overflow-y: auto;
     top: 16px;
-    
+
     ${theme.breakpoints.between('md', 'lg')} {
       top: 24px;
     }