content: ion-backdrop basic usage demo should have tinted backdrop

[harlig]

Describe the Bug

The "basic usage" example of the ion-backdrop page isn't functional. Clicking on it does nothing.

Expected Behavior

The example should demonstrate the backdrop functionality.

Steps to Reproduce

1. Navigate to ion-backdrop docs page
2. Go to "Basic Usage" section
3. Attempt to interact with the example

Screenshots

ion-backdrop.mov

Operating System

No response

Browser

Firefox 117.0

Version

No response

Additional Information

No response

[averyjohnston]

Thank you for the issue. As described in the paragraph above the demo, the behavior you're describing actually is the backdrop functionality -- it prevents clicking or tapping on any of the elements underneath it. Does that help answer your question?

[harlig]

I did see that but I guess the example was then confusing to me since it doesn't feel like it's truly demonstrating the backdrop functionality. The following example showing a clickable overlay paired with the backdrop seems like a much more common use case and perhaps should be used as the primary example.

[averyjohnston]

Would it help if the backdrop was tinted to better mimic the functionality it'd have in an overlay? The idea behind the demo is to show the backdrop's functionality by itself, without implying that it necessarily needs to be used with any other components.

[harlig]

Personally that'd be more clear to me. I understand the desire to show the basic usage without any other components, I just think for this component in particular it may make sense to show with a tinted backdrop.

[averyjohnston]

I've added a tint to the backdrop in #3200. Thanks again!