Describe the bug
I have a caption that is supposed to be rendered underneath the pacman loader, but the pacman's head overlaps with nearby content;
To Reproduce
JSX similar to the following
<div id={name} className="mx-spinner"> <PacmanLoader aria-label="Loading Pacman Spinner" color={spinnerColor} speedMultiplier={speedMultiplier} size={spinnerSize} /> <span>{spinnerCaption?.value}</span> </div>
Expected behavior
The bounds of the loader should push other content.
Screenshots
Current:
Expected:
Additional context
Note this can be fixed by setting Width and Height of the parent container with 2x the user's size value
Package Version 0.13.6
Describe the bug I have a caption that is supposed to be rendered underneath the pacman loader, but the pacman's head overlaps with nearby content;
To Reproduce JSX similar to the following
<div id={name} className="mx-spinner"> <PacmanLoader aria-label="Loading Pacman Spinner" color={spinnerColor} speedMultiplier={speedMultiplier} size={spinnerSize} /> <span>{spinnerCaption?.value}</span> </div>
Expected behavior The bounds of the loader should push other content.
Screenshots Current:![Screenshot 2022-11-01 at 10 54 01 AM](https://user-images.githubusercontent.com/47681665/199264632-e42443c2-0458-4f88-bca2-2fab38064288.png)
Expected:![Screenshot 2022-11-01 at 10 35 02 AM](https://user-images.githubusercontent.com/47681665/199264647-c86adc14-35a4-4d6a-ae8b-fe996cd9c304.png)
Additional context Note this can be fixed by setting Width and Height of the parent container with 2x the user's size value
cssOverride={{width:
calc(${spinnerSize} * 2)
, height:calc(${spinnerSize} * 2)
}}