EuiPanel shows shadow when hasShadow set to false when there is an onClick property set

[ray-holland-es]

Describe the bug
When the hasShadow property is set to false, it is incorrectly rendering a shadow when focusing the panel (when there is a onClick set to the EuiPanel).

Impact and severity
Low severity

Environment and versions

• EUI version: 87.2.0
• React version: 17.0.2
• Browser: Chrome 127.0.6533.120
• Operating System: MacOS 14.6.1

To Reproduce
Steps to reproduce the behavior:

<EuiPanel
	hasShadow={false}
	hasBorder
	onClick={() => {}}
>
        Hello World
</EuiPanel>

Expected behavior
When hovering or clicking a panel with hasShadow set to false, it should not show a shadow.

Minimum reproducible sandbox
https://codesandbox.io/p/sandbox/epic-kare-xmgpc2?workspaceId=acf84c92-4ee0-41b7-8d85-5c8d5bf54163

Screenshots

[cee-chen]

@MichaelMarcialis Can you respond to this? It looks to me like an intentional design decision based on the styles we're applying to clickable panels.

[MichaelMarcialis]

Thanks for the ping, @cee-chen. And thanks for opening this issue, @ray-holland-es. The addition of the box-shadow styles on hover and focus of an EuiPanel component with an onClick prop is intentional and not one that we currently plan to change. This is designed to give users visual affordance that clicking the panel will perform an action.

Assuming you're attempting to create an interface like your example screenshot above (without the shadow on hover/focus) and you're currently using a combination of EuiPanel and EuiRadio, perhaps switching to EuiCheckableCard component would be a better fit? It does not utilize shadows for its hover/focus styles. See example in EUI docs: https://eui.elastic.co/#/display/card#checkable

For now though, I'm going to go ahead and close this out, as EuiPanel is operating as intended. Thanks!