ion-split-pane: expose max-width as CSS custom property

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request

I want to be able to adjust the max width of the ion-split-pane side menu.

Describe Preferred Solution

Have a --max-width CSS custom property on ion-split-pane. Might be as simple as changing

{ max-width: $split-pane-md-side-max-width; }

to

{ max-width: var(--max-width, $split-pane-md-side-max-width); }

Describe Alternatives

Only way to currently make it work is to set

.menu-pane-visible {
  max-width: 270px !important;
}

which applies only for the expanded version. If max-width is set on the ion-menu, it messes up the backdrop for the collapsed version.

[troyanskiy]

@brandyscarney PR is here.

[brandyscarney]

I agree with this. We will need to scope/shadow the split-pane component though. It seems as if the current CSS won’t even work for IE since it has a CSS variable for border. It will need to be something like the following (not tested):

split-pane.md.scss

:host {
  --min-width: #{$split-pane-md-side-min-width};
  --max-width: #{$split-pane-md-side-max-width};
}

:host(.split-pane-visible) .split-pane-side {
  --border: #{$split-pane-md-side-start-border};
}

:host(.split-pane-visible) .split-pane-side[side=end] {
  --border: #{$split-pane-md-side-end-border};
}

split-pane.scss

:host(.split-pane-visible) .split-pane-side {
  min-width: var(--min-width);
  max-width: var(--max-width);

  border: var(--border);
}

Might need to change up the border implementation, but just an idea. cc @manucorporat