Skip to content

docs: add Lightbox examples and fix playground preview#3301

Open
harshavardhan194 wants to merge 1 commit into
facebook:mainfrom
harshavardhan194:fix/xdslightbox-docs-2851
Open

docs: add Lightbox examples and fix playground preview#3301
harshavardhan194 wants to merge 1 commit into
facebook:mainfrom
harshavardhan194:fix/xdslightbox-docs-2851

Conversation

@harshavardhan194

@harshavardhan194 harshavardhan194 commented Jul 1, 2026

Copy link
Copy Markdown

Fixes #2851

Summary

This PR improves the XDSLightbox documentation by:

  • Adding example blocks demonstrating:
    • Gallery mode
    • Zoom functionality
    • Video usage
  • Adding a default media value for the documentation playground so the Properties tab can render the component.

Verification

  • Verified the new example blocks appear in the local docsite.
  • Verified the Properties tab no longer shows:
Interactive preview needs required props that cannot be generated automatically.
Missing: media
  • Verified the interactive playground renders successfully with the provided default media value.
@vercel

vercel Bot commented Jul 1, 2026

Copy link
Copy Markdown

@harshavardhan194 is attempting to deploy a commit to the Meta Open Source Team on Vercel.

A member of the Team first needs to authorize it.
@meta-cla

meta-cla Bot commented Jul 1, 2026

Copy link
Copy Markdown

Hi @harshavardhan194!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!
@meta-cla

meta-cla Bot commented Jul 1, 2026

Copy link
Copy Markdown

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!
@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Jul 1, 2026
nynexman4464
nynexman4464 requested changes Jul 1, 2026
View reviewed changes

@nynexman4464 nynexman4464 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the contribution here! We need to better formalize the rule, but we should be using images from our CDN and not external sites (the template contrib guide) covers this, but we should also add for docsite.

Also generally we prefer the component examples use real astryx components (vs manually constructing HTML). Generally I like the added examples though! Just need some tweaks to get it over the line!
Comment thread packages/cli/templates/blocks/components/Lightbox/LightboxGallery.tsx
Comment on lines +9 to +27
src: 'https://picsum.photos/id/10/1200/800',
alt: 'Forest path',
caption: 'A winding path through the forest',
},
{
src: 'https://picsum.photos/id/15/1200/800',
alt: 'Mountain lake',
caption: 'Still waters of a mountain lake',
},
{
src: 'https://picsum.photos/id/20/1200/800',
alt: 'Beach at sunset',
caption: 'Golden hour at the beach',
},
{
src: 'https://picsum.photos/id/25/1200/800',
alt: 'City skyline',
},
];

@nynexman4464 nynexman4464 Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey thanks for the contribution. We're still figuring out the best way to list available example images, but for now can we use something from the following list:

https://lookaside.facebook.com/assets/astryx/Neutral-Backpack.png
https://lookaside.facebook.com/assets/astryx/Neutral-Blanket.png
https://lookaside.facebook.com/assets/astryx/Neutral-Headphones.png
https://lookaside.facebook.com/assets/astryx/Neutral-Tumbler.png
https://lookaside.facebook.com/assets/astryx/Neutral-Wallet.png
https://lookaside.facebook.com/assets/astryx/Neutral-Watch.png
https://lookaside.facebook.com/assets/astryx/building.png
https://lookaside.facebook.com/assets/astryx/colorful-home-horizontal-1.png
https://lookaside.facebook.com/assets/astryx/colorful-home-horizontal-2.png
https://lookaside.facebook.com/assets/astryx/colorful-home-vertical-1.png
https://lookaside.facebook.com/assets/astryx/colorful-home-vertical-2.png
https://lookaside.facebook.com/assets/astryx/colorful-home-vertical-3.png
https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-horizontal-1.png
https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-horizontal-2.png
https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-vertical-1.png
https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-vertical-2.png
https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-vertical-3.png
https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-vertical-4.png
https://lookaside.facebook.com/assets/astryx/colorful-product-1.png
https://lookaside.facebook.com/assets/astryx/colorful-product-2.png
https://lookaside.facebook.com/assets/astryx/colorful-product-3.png
https://lookaside.facebook.com/assets/astryx/colorful-product-4.png
https://lookaside.facebook.com/assets/astryx/colorful-product-5.png
https://lookaside.facebook.com/assets/astryx/colorful-product-6.png
https://lookaside.facebook.com/assets/astryx/colorful-product-7.png
https://lookaside.facebook.com/assets/astryx/colorful-product-8.png
https://lookaside.facebook.com/assets/astryx/colorful-working-horizontal-1.png
https://lookaside.facebook.com/assets/astryx/colorful-working-horizontal-2.png
https://lookaside.facebook.com/assets/astryx/colorful-working-horizontal-3.png
https://lookaside.facebook.com/assets/astryx/illustration-horizontal-1.png
https://lookaside.facebook.com/assets/astryx/illustration-horizontal-2.png
https://lookaside.facebook.com/assets/astryx/illustration-horizontal-3.png
https://lookaside.facebook.com/assets/astryx/illustration-horizontal-4.png
https://lookaside.facebook.com/assets/astryx/illustration-horizontal-5.png
https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-1.png
https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-2.png
https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-3.png
https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-4.png
https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-5.png
https://lookaside.facebook.com/assets/astryx/illustrative-vertical-1.png
https://lookaside.facebook.com/assets/astryx/illustrative-vertical-2.png
https://lookaside.facebook.com/assets/astryx/illustrative-vertical-3.png
https://lookaside.facebook.com/assets/astryx/illustrative-vertical-4.png
https://lookaside.facebook.com/assets/astryx/illustrative-vertical-5.png
https://lookaside.facebook.com/assets/astryx/illustrative-vertical-6.png
https://lookaside.facebook.com/assets/astryx/illustrative-vertical-7.png
https://lookaside.facebook.com/assets/astryx/light-home-horizontal-1.png
https://lookaside.facebook.com/assets/astryx/light-home-square-1.png
https://lookaside.facebook.com/assets/astryx/light-home-square-2.png
https://lookaside.facebook.com/assets/astryx/light-home-vertical-1.png
https://lookaside.facebook.com/assets/astryx/light-home-vertical-2.png
https://lookaside.facebook.com/assets/astryx/light-lifestyle-horizontal-1.png
https://lookaside.facebook.com/assets/astryx/light-lifestyle-vertical-1.png
https://lookaside.facebook.com/assets/astryx/light-lifestyle-vertical-2.png
https://lookaside.facebook.com/assets/astryx/light-lifestyle-vertical-3.png
https://lookaside.facebook.com/assets/astryx/light-lifestyle-vertical-4.png
https://lookaside.facebook.com/assets/astryx/light-product-1.png
https://lookaside.facebook.com/assets/astryx/light-product-2.png
https://lookaside.facebook.com/assets/astryx/light-product-3.png
https://lookaside.facebook.com/assets/astryx/light-product-4.png
https://lookaside.facebook.com/assets/astryx/light-product-5.png
https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png
https://lookaside.facebook.com/assets/astryx/light-scene-vertical-1.png
https://lookaside.facebook.com/assets/astryx/light-scene-vertical-2.png
https://lookaside.facebook.com/assets/astryx/light-working-horizontal-1.png
https://lookaside.facebook.com/assets/astryx/light-working-horizontal-2.png
https://lookaside.facebook.com/assets/astryx/light-working-horizontal-3.png
https://lookaside.facebook.com/assets/astryx/light-working-horizontal-4.png
https://lookaside.facebook.com/assets/astryx/light-working-vertical-1.png
https://lookaside.facebook.com/assets/astryx/light-working-vertical-2.png
https://lookaside.facebook.com/assets/astryx/light-working-vertical-3.png
https://lookaside.facebook.com/assets/astryx/moody-home-horizontal-1.png
https://lookaside.facebook.com/assets/astryx/moody-home-horizontal-2.png
https://lookaside.facebook.com/assets/astryx/moody-home-vertical-1.png
https://lookaside.facebook.com/assets/astryx/moody-home-vertical-2.png
https://lookaside.facebook.com/assets/astryx/moody-lifestyle-horizontal-1.png
https://lookaside.facebook.com/assets/astryx/moody-lifestyle-horizontal-2.png
https://lookaside.facebook.com/assets/astryx/moody-lifestyle-vertical-1.png
https://lookaside.facebook.com/assets/astryx/moody-lifestyle-vertical-2.png
https://lookaside.facebook.com/assets/astryx/moody-lifestyle-vertical-3.png
https://lookaside.facebook.com/assets/astryx/moody-scene-horizontal-1.png
https://lookaside.facebook.com/assets/astryx/moody-scene-horizontal-2.png
https://lookaside.facebook.com/assets/astryx/moody-scene-vertical-1.png
https://lookaside.facebook.com/assets/astryx/moody-scene-vertical-2.png
https://lookaside.facebook.com/assets/astryx/moody-working-horizontal-1.png
https://lookaside.facebook.com/assets/astryx/moody-working-horizontal-2.png
https://lookaside.facebook.com/assets/astryx/moody-working-horizontal-3.png
https://lookaside.facebook.com/assets/astryx/moody-working-vertical-1.png
https://lookaside.facebook.com/assets/astryx/moody-working-vertical-2.png
https://lookaside.facebook.com/assets/astryx/texture-beige-horizontal-1.png
https://lookaside.facebook.com/assets/astryx/texture-beige-horizontal-2.png
https://lookaside.facebook.com/assets/astryx/texture-beige-horizontal-3.png
https://lookaside.facebook.com/assets/astryx/texture-beige-vertical-1.png
https://lookaside.facebook.com/assets/astryx/texture-beige-vertical-2.png
https://lookaside.facebook.com/assets/astryx/texture-colorful-horizontal-1.png
https://lookaside.facebook.com/assets/astryx/texture-colorful-vertical-1.png
https://lookaside.facebook.com/assets/astryx/texture-colorful-vertical-2.png
https://lookaside.facebook.com/assets/astryx/texture-dark-horizontal-1.png
https://lookaside.facebook.com/assets/astryx/texture-dark-horizontal-2.png
https://lookaside.facebook.com/assets/astryx/texture-dark-vertical-1.png
https://lookaside.facebook.com/assets/astryx/texture-dark-vertical-2.png
https://lookaside.facebook.com/assets/astryx/texture-white-horizontal-1.png
https://lookaside.facebook.com/assets/astryx/texture-white-vertical-1.png
https://lookaside.facebook.com/assets/astryx/texture-white-vertical-2.png
Comment thread packages/cli/templates/blocks/components/Lightbox/LightboxVideo.tsx
Comment on lines +13 to +25
<button
onClick={() => setIsOpen(true)}
style={{
display: 'flex',
alignItems: 'center',
gap: 8,
padding: '10px 16px',
borderRadius: 8,
border: '1px solid var(--color-border, #e0e0e0)',
background: 'var(--color-surface, #fff)',
cursor: 'pointer',
fontSize: 14,
}}>

@nynexman4464 nynexman4464 Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a little weird to use a raw button element here. This should use an astryx button. Or some kind of thumbnail image (we can probably add one if you need).
Comment thread packages/cli/templates/blocks/components/Lightbox/LightboxVideo.tsx
isOpen={isOpen}
onOpenChange={setIsOpen}
media={{
src: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm',

@nynexman4464 nynexman4464 Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For video you can use https://lookaside.facebook.com/assets/?set=astryx&name=Nature-1&density=1 for now.
Comment thread packages/cli/templates/blocks/components/Lightbox/LightboxGallery.tsx
Comment on lines +34 to +40
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(2, 1fr)',
gap: 8,
maxWidth: 480,
}}>

@nynexman4464 nynexman4464 Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should prefer to use Grid here vs manually style one.
Comment thread packages/cli/templates/blocks/components/Lightbox/LightboxGallery.tsx
display: 'block',
}}
{...lightbox.getTriggerProps(i)}
/>

@nynexman4464 nynexman4464 Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think using Thumbnail here would be more appropriate than manually constructing img tags. The only caveat is the preview image would be made square. However ClickableCard might be an OK alternative in that case.
Comment thread packages/cli/templates/blocks/components/Lightbox/LightboxZoom.tsx
Comment on lines +13 to +34
<img
src="https://picsum.photos/id/10/1200/800"
alt="Forest path"
style={{
width: 320,
aspectRatio: '3 / 2',
objectFit: 'cover',
borderRadius: 8,
cursor: 'zoom-in',
display: 'block',
}}
role="button"
tabIndex={0}
aria-haspopup="dialog"
onClick={() => setIsOpen(true)}
onKeyDown={e => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
setIsOpen(true);
}
}}
/>

@nynexman4464 nynexman4464 Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar to other comments I think we should use Thumbnail, Button or ClickableCard here vs a plain img tag.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Meta Open Source bot.

2 participants

@harshavardhan194 @nynexman4464