Fix/2675 docs tabs

[kwongz]

Description

https://github.com/user-attachments/assets/08f3356a-5213-461b-93fd-133ac4faf74f

Notion Docs insturctions https://www.notion.so/Docs-Doc-Tabs-12a5287a4ba08046b7f1cef7f7b03eae

Checklist

• [x] For UI or styling changes, I have added a screenshot or gif showing before & after
• [ ] I have added a changeset
• [x] I have added to the docs where applicable
• [ ] I have added to the VS Code extension where applicable

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: c0d3321b4f97df5de420aca24d2a40a7e68b2742

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 5, 2024 7:12pm
next-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 5, 2024 7:12pm

[netlify[bot]]

✅ Deploy Preview for next-docs-evidence ready!

Name	Link
🔨 Latest commit	8daa75a3c247a44783b2f2baab905c573affea08
🔍 Latest deploy log	https://app.netlify.com/sites/next-docs-evidence/deploys/672a6bda544adb000883f566
😎 Deploy Preview	https://deploy-preview-2681--next-docs-evidence.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

❌ Deploy Preview for evidence-test-env failed. Why did it fail? →

Name	Link
🔨 Latest commit	8daa75a3c247a44783b2f2baab905c573affea08
🔍 Latest deploy log	https://app.netlify.com/sites/evidence-test-env/deploys/672a6bda497d9c0008eeda4c

[netlify[bot]]

✅ Deploy Preview for evidence-development-workspace ready!

Name	Link
🔨 Latest commit	8daa75a3c247a44783b2f2baab905c573affea08
🔍 Latest deploy log	https://app.netlify.com/sites/evidence-development-workspace/deploys/672a6bda9b26c500088995bf
😎 Deploy Preview	https://deploy-preview-2681--evidence-development-workspace.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[kwongz]

fixes #2675

[archiewood]

This will be great!

Couple of suggestions in loom

[mcrascal]

This is cool. Just looking at it in the preview docs:

• the vertical slide transition currently fires on navigation to the page
• text-xs is way too small for this imo
• needs more margin top, probably less margin bottom. Right now in a page with lots of these, it's not clear what sections it's denoting.
• Need a horizontal bottom border for the width of the page
• Possibly need something wrapping the content which is inside the tabs

[kwongz]

@mcrascal

1. Updated Accordion and Slider to DocTabs
2. Switched to svelte animations (still working on the smooth transition w/ svelte transitions

[archiewood]

commited a couple of suggestions on styling, feel free to revert if they feel less good.

• back to font-sans
• more padding around the preview
• adjust preview border colour and shadow to match code

[archiewood]

The svelte slide animation is still too janky IMO.

code -> preview is fine but preview -> code has a weird jump at the end where it adds whitespace after the end of the codeblock

[archiewood]

on testing further, this seems related to the CodeBlock, not the transition.

We can fix that separately

Edit: Fix here https://github.com/evidence-dev/evidence/pull/2706#event-15045563654

[kwongz]

@archiewood I found a solution to the code --> preview, the prism loads in async, adding a margin after they lifecycle methods giving it the height 'jank'

By adding the exact margin as a tailwind style to the div container we avoid this height jank.

[kwongz]

On Another note,

Current svelte transition unmount and mounts the preview content or code content. For pages like DataTable, where the DataTable get remounted, it can really slow down the page, as well as the transitions between the tabs.

A solution I'm looking into is doing CSS transitions and instead of unmounting the component, we can render everything and only make visible the content based on the tab chosen.

[archiewood]

@kwongz the margin jank should have been fixed in #2706, merge in next to get the update

[kwongz]

@archiewood @mcrascal

Summary: used custom CSS animation to solve render issues, need to create more uniform spacing for individual components (slider, Link button, charts etc.)

Added Custom CSS transitions to handle rendering issues with svelte transitions (unmounting/remounting components). Causing particular issues with datatables page.

The margin and padding layout is consistent across the preview and code block, but individual components such as Area Chart can appear to have more spacing due to margin/padding within the component itself.

I think its a pretty suddle difference that users won't notice immediately when they are consistent across components on the same doc page. But I thought we could introduce a standard margin for all components to create a more uniform look in the future.

preview container margin

Component margin

slider spacing not good

[kwongz]

Font changed from xs --> sm

Mouse hover:

Focus ring:

[kwongz]

removed hover, added pointer, matched dropdown focus state