feat: Expose scss breakpoints

[abdel-ships-it]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Simply expose this through a const or CSS variable construction of sorts

ionic-framework/core/src/themes/ionic.globals.scss

Lines 27 to 33 in 5e030f9

	$screen-breakpoints: (
	xs: 0,
	sm: 576px,
	md: 768px,
	lg: 992px,
	xl: 1200px
	) !default;

Or

ionic-framework/core/src/components/split-pane/split-pane.tsx

Lines 10 to 17 in 451d220

	const QUERY: { [key: string]: string } = {
	xs: '(min-width: 0px)',
	sm: '(min-width: 576px)',
	md: '(min-width: 768px)',
	lg: '(min-width: 992px)',
	xl: '(min-width: 1200px)',
	never: '',
	};

Describe the Use Case

I want to show / hide elements based on the split pane hiding, right now I have to hardcode the breakpoint which the split pane uses which is 576px. Ideally I use the same value the split pane uses under the hood, to avoid risking out of sync problems should the team update the 576px value to something else internally.

Describe Preferred Solution

There seems to be duplication in your own codebase, the SASS $screen-breakpoints is sometimes used, and in the case of split pane component its hardcoded. Ideally you simplify this by using CSS variables.

Edit

CSS variables dont work in media queries, so exposing the CSS map is only viable solution here

https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[sean-perkins]

Hello @realappie thanks for this feature request!

In your use case, is there a reason that the ionSplitPaneVisible event on ion-split-pane wouldn't provide the information you are needing of responding to elements showing/hiding in the split pane?

Are you needing to know what breakpoint is being shown? If so, that information could be added to the event detail.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!