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('');
|
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} />);
|
render(<ImageLightbox {...DEFAULT_PROPS} />);
|
||||||
const closeBtn = screen.getByRole('button', { name: /close/i, hidden: true });
|
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"
|
className="lightbox-image block w-auto h-auto"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Button variant="outline" size="sm" onClick={close} aria-label="Close image" className="fixed top-3 right-3">
|
<div className="fixed top-3 right-3">
|
||||||
|
<Button variant="outline" size="sm" onClick={close} aria-label="Close image">
|
||||||
<CloseIcon />
|
<CloseIcon />
|
||||||
</Button>
|
</Button>
|
||||||
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user