refactor(ImageLightbox): pin close button via a fixed wrapper
This commit is contained in:
@@ -81,10 +81,10 @@ describe('ImageLightbox', () => {
|
||||
expect(document.body.style.overflow).toBe('');
|
||||
});
|
||||
|
||||
it('close button is positioned fixed', () => {
|
||||
it('close button is pinned via a fixed wrapper', () => {
|
||||
render(<ImageLightbox {...DEFAULT_PROPS} />);
|
||||
const closeBtn = screen.getByRole('button', { name: /close/i, hidden: true });
|
||||
expect(closeBtn).toHaveClass('fixed');
|
||||
expect(closeBtn.parentElement).toHaveClass('fixed');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -188,9 +188,11 @@ export function ImageLightbox({
|
||||
className="lightbox-image block w-auto h-auto"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={close} aria-label="Close image" className="fixed top-3 right-3">
|
||||
<CloseIcon />
|
||||
</Button>
|
||||
<div className="fixed top-3 right-3">
|
||||
<Button variant="outline" size="sm" onClick={close} aria-label="Close image">
|
||||
<CloseIcon />
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user