Skip to content

Simplify split component by removing pop options (#896) #1110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
stephaniehobson merged 1 commit into from
Jan 16, 2026
+57 −333
Merged

Simplify split component by removing pop options (#896) #1110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ The good news is we don't expect any visible changes in modern browsers and you

Introducing theme variables! CSS variables beginning with `--theme-` will adjust based on media queries.

## Split Component

* **component:** (breaking) Removed `mzp-l-split-pop-top`, `mzp-l-split-pop-bottom`, and `mzp-l-split-pop` layout classes from Split component
* **component:** (breaking) Removed `mzp-l-split-media-overflow` and `mzp-l-split-media-constrain-height` layout classes from Split component

## Typography

Expand Down
260 changes: 3 additions & 257 deletions assets/sass/protocol/components/_split.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,261 +320,18 @@
}
}

// * -------------------------------------------------------------------------- */
// constraints on height or width of media

@supports (display:grid) {
@media #{$mq-md} {
.mzp-c-split-media {
&.mzp-l-split-media-overflow {
.mzp-c-split-media-asset {
max-width: none;

.mzp-l-split-reversed & {
@include bidi((
(float, right, left),
));
}
}
}

&.mzp-l-split-media-constrain-height {
height: 100%;
justify-self: auto !important; /* stylelint-disable-line declaration-no-important */

.mzp-c-split-media-asset {
@include bidi(((left, 0, right, auto),));
bottom: 0;
max-height: 100%;
max-width: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: auto;

.mzp-l-split-reversed & {
@include bidi((
(left, auto, right, 0),
(right, 0, left, auto),
));
}
}
}
}
}
}

// * --------------------------------------------------------------------------- */
// vertical spacing for body or media

@supports (display:grid) {
@media #{$mq-md} {
.mzp-l-split-pop-top,
.mzp-l-split-pop {
&.mzp-c-split {
padding-top: $v-grid-lg * 2;

@supports (--css: variables) {
padding-top: calc(var(--v-grid-lg) * 2);
}
}

.mzp-c-split-media {
margin-top: $v-grid-lg * -1;

@supports (--css: variables) {
margin-top: calc(var(--v-grid-lg) * -1);
}
}

.mzp-c-split-bg & {
.mzp-c-split-media {
margin-top: $v-grid-lg * -2;

@supports (--css: variables) {
margin-top: calc(var(--v-grid-lg) * -2);
}
}
}
}

.mzp-l-split-pop-bottom,
.mzp-l-split-pop {
&.mzp-c-split {
padding-bottom: $v-grid-lg * 2;

@supports (--css: variables) {
padding-bottom: calc(var(--v-grid-lg) * 2);
}
}

.mzp-c-split-media {
margin-bottom: $v-grid-lg * -1;

@supports (--css: variables) {
margin-bottom: calc(var(--v-grid-lg) * -1);
}
}

.mzp-c-split-bg & {
.mzp-c-split-media {
margin-bottom: $v-grid-lg * -2;

@supports (--css: variables) {
margin-bottom: calc(var(--v-grid-lg) * -2);
}
}
}
}

.mzp-l-split-media-constrain-height {
.mzp-l-split-pop-top &,
.mzp-l-split-pop-bottom & {
height: calc(100% + #{$v-grid-lg});

@supports (--css: variables) {
height: calc(100% + var(--v-grid-lg));
}
}

.mzp-l-split-pop & {
height: calc(100% + #{$v-grid-lg * 2});

@supports (--css: variables) {
height: calc(100% + var(--v-grid-lg) * 2);
}
}

.mzp-l-split-pop-top .mzp-c-split-bg &,
.mzp-l-split-pop-bottom .mzp-c-split-bg & {
height: calc(100% + #{$v-grid-lg * 2});

@supports (--css: variables) {
height: calc(100% + var(--v-grid-lg) * 2);
}
}

.mzp-l-split-pop .mzp-c-split-bg & {
height: calc(100% + #{$v-grid-lg * 4});

@supports (--css: variables) {
height: calc(100% + var(--v-grid-lg) * 4);
}
}
}
}

@media #{$mq-xl} {
.mzp-l-split-pop-top,
.mzp-l-split-pop {
&.mzp-c-split {
padding-top: $v-grid-xl * 2;

@supports (--css: variables) {
padding-top: calc(var(--v-grid-xl) * 2);
}
}

.mzp-c-split-media {
margin-top: $v-grid-xl * -1;

@supports (--css: variables) {
margin-top: calc(var(--v-grid-xl) * -1);
}
}

& .mzp-c-split-bg {
.mzp-c-split-media {
margin-top: $v-grid-xl * -2;

@supports (--css: variables) {
margin-top: calc(var(--v-grid-xl) * -2);
}
}
}
}

.mzp-l-split-pop-bottom,
.mzp-l-split-pop {
&.mzp-c-split {
padding-bottom: $v-grid-xl * 2;

@supports (--css: variables) {
padding-bottom: calc(var(--v-grid-xl) * 2);
}
}

.mzp-c-split-media {
margin-bottom: $v-grid-xl * -1;

@supports (--css: variables) {
margin-bottom: calc(var(--v-grid-xl) * -1);
}
}

& .mzp-c-split-bg {
.mzp-c-split-media {
margin-bottom: $v-grid-xl * -2;

@supports (--css: variables) {
margin-bottom: calc(var(--v-grid-xl) * -2);
}
}
}
}

.mzp-l-split-media-constrain-height {
.mzp-l-split-pop-top &,
.mzp-l-split-pop-bottom & {
height: calc(100% + #{$v-grid-xl});

@supports (--css: variables) {
height: calc(100% + var(--v-grid-xl));
}
}

.mzp-l-split-pop & {
height: calc(100% + #{$v-grid-xl * 2});

@supports (--css: variables) {
height: calc(100% + calc(var(--v-grid-xl) * 2));
}
}

.mzp-l-split-pop-top .mzp-c-split-bg &,
.mzp-l-split-pop-bottom .mzp-c-split-bg & {
height: calc(100% + #{$v-grid-xl * 2});

@supports (--css: variables) {
height: calc(100% + calc(var(--v-grid-xl) * 2));
}
}

.mzp-l-split-pop .mzp-c-split-bg & {
height: calc(100% + #{$v-grid-xl * 4});

@supports (--css: variables) {
height: calc(100% + calc(var(--v-grid-xl) * 4));
}
}
}
}
}

// * --------------------------------------------------------------------------- */
// vertical and horizontal aligment for body or media
// vertical and horizontal alignment for body or media

@media #{$mq-md} {
.mzp-c-split {
// horizontal alignment works with float fallbacks.
// horizontal alignment does not apply to constrain-height or overflow because it could expand and obscure the text
// there's an !important in the contrain-height definitions to enforce this
.mzp-l-split-h-start {
@include bidi(((text-align, left, right),));
justify-self: start;
}

.mzp-l-split-h-center:not([class*='mzp-l-split-media-']) {
.mzp-l-split-h-center {
justify-self: center;
text-align: center;

Expand All @@ -583,7 +340,7 @@
}
}

.mzp-l-split-h-end:not([class*='mzp-l-split-media-']) {
.mzp-l-split-h-end {
@include bidi(((text-align, right, left),));
justify-self: end;

Expand All @@ -598,12 +355,6 @@
// vertical alignment relies on grid so don't work for float fallbacks
.mzp-l-split-v-start {
align-self: start;

&.mzp-l-split-media-constrain-height .mzp-c-split-media-asset {
bottom: 0;
top: 0;
transform: none;
}
}

.mzp-l-split-v-center {
Expand All @@ -612,11 +363,6 @@

.mzp-l-split-v-end {
align-self: end;

&.mzp-l-split-media-constrain-height .mzp-c-split-media-asset {
top: auto;
transform: none;
}
}
}
}
15 changes: 0 additions & 15 deletions components/split/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,21 +44,6 @@ variations.
- `mzp-l-split-h-end` - aligned right in left-to-right languages, left in right-to-left.
- `mzp-l-split-v-start` - vertically aligned to the top.
- `mzp-l-split-v-end` - vertically aligned to the bottom.
- Note that the media can only be positioned horizontally if it does _not_ have
a sizing class added, such as `mzp-l-split-media-overflow` or
`mzp-l-split-media-constrain-height`
- You can control the behavior of the media with a class on the media container
(`mzp-c-split-media`):
- `mzp-l-split-media-overflow` - the image can be larger than the Split
container and will "bleed" past the edges. This means some of the image will
be hidden, so choose images wisely.
- `mzp-l-split-media-constrain-height` - the image will scale to fit the height
of the container, which depends on the amount of content in the body.
- The media can "pop" out of the container, protruding past the top and bottom
edges. Apply these classes to the outer container (`mzp-c-split`):
- `mzp-l-split-pop-top` - protrude from the top.
- `mzp-l-split-pop-bottom` - protrude from the bottom.
- `mzp-l-split-pop` - both.
- Choose how to treat the Split on small screens. Apply these classes to the
outer container (`mzp-c-split`):
- `mzp-l-split-center-on-sm-md` - content is centered on small to medium screens.
Expand Down
Loading