diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6b24e5f54..23562b6a2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -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
diff --git a/assets/sass/protocol/components/_split.scss b/assets/sass/protocol/components/_split.scss
index 609455dd8..723aa71e8 100644
--- a/assets/sass/protocol/components/_split.scss
+++ b/assets/sass/protocol/components/_split.scss
@@ -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;
@@ -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;
@@ -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 {
@@ -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;
- }
}
}
}
diff --git a/components/split/readme.md b/components/split/readme.md
index eefbb1805..74296bb8f 100644
--- a/components/split/readme.md
+++ b/components/split/readme.md
@@ -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.
diff --git a/components/split/split.config.yml b/components/split/split.config.yml
index f0780c07b..9366916b2 100644
--- a/components/split/split.config.yml
+++ b/components/split/split.config.yml
@@ -29,8 +29,7 @@ variants:
notes: |
The Split component can include an extra inner wrapper element to carry a
background (it needs this inner container to allow the media to overflow
- beyond the background area while preserving vertical spacing. See the
- [Pop-out Media variation](split--pop-out-media)).
+ beyond the background area while preserving vertical spacing).
The wrapper element has the class `mzp-c-split-bg` and you can add any of
the standard background classes or apply your own CSS:
@@ -44,9 +43,7 @@ variants:
without additional vertical spacing, add the class `mzp-t-split-nospace`
to the outer container (`mzp-c-split`). This is especially useful when
using Split as a hero section at the very top of a page, or if you have a
- stack of splits with alternating background colors. Note that images can’t
- “pop out” of a Split without that additional space, so the nospace and pop
- variations are incompatible.
+ stack of splits with alternating background colors.
context:
background_class: mzp-t-dark mzp-t-background-secondary
content: |
@@ -54,58 +51,6 @@ variants:
Lorem ipsum dolor sit amet, amet dolores tincidunt te sea. His aliquid
epicuri detraxit in, cum tantas populo periculis te. Ei vix idque noster.
Call to Action
- - name: Media Overflow
- notes: |
- Add the class `mzp-l-split-media-overflow` to the media container
- (`mzp-c-split-media`) to allow a large image to “bleed” horizontally past
- the edge of the component (and the viewport). This means some of the image
- will be hidden so choose your images wisely.
-
- ### No-nos:
-
- Don’t use this option with videos. Not only will part of the video be hidden,
- some of the controls would be hidden as well.
- context:
- background_class: mzp-t-background-tertiary
- media_class: mzp-l-split-media-overflow
- - name: Constrained Media
- notes: |
- The class `mzp-l-split-media-constrain-height` added to the `mzp-c-split-media`
- wrapper will make the media scale to fit the height of the container,
- determined by the amount of content in the body. It will shrink to fit a
- short container or expand to fit a tall one (but won’t be upscaled beyond
- the image’s native dimensions).
-
- As with the [media overflow option](split--media-overflow), height-constrained
- media can overflow if the container is tall, causing part of the image to
- be hidden, so choose wisely.
- context:
- image: '/img/image-1-1.jpg'
- media_class: mzp-l-split-media-constrain-height
- - name: Pop-out Media
- notes: |
- Ordinarily the top and bottom edges of the media align with the body text.
- Alternatively, the media can “pop” out of its container in larger viewports,
- protruding a fixed distance beyond the top and/or bottom edges of the body.
- The protrusion corresponds to the vertical padding of the outer container
- so the media won’t overlap adjacent content. Note that images can’t “pop out”
- of a Split without that additional space so this is incompatible with the
- `mzp-t-split-nospace` class.
-
- Apply these classes to the outer container (`mzp-c-split`):
- - `mzp-l-split-pop-top` - protrude past the top.
- - `mzp-l-split-pop-bottom` - protrude past the bottom.
- - `mzp-l-split-pop` - both.
-
- ### Tips:
-
- - The media only protrudes if it exceeds the height of the body.
- - This only takes effect in larger viewports. The media will fit within
- the container in medium viewports and will stack in smaller viewports.
- context:
- block_class: mzp-l-split-pop
- background_class: mzp-t-background-tertiary
- image: '/img/image-1-1.jpg'
- name: Body Alignment
notes: |
Align the body in different positions, horizontally and vertically (it’s
@@ -139,10 +84,7 @@ variants:
### Tips:
- - The media can only be positioned horizontally if it is _not_ allowed to
- overflow by an `mzp-l-split-media-overflow` or `mzp-l-split-media-constrain-height`
- class.
- - The vertical position is only effective if the media’s height is less
+ - The vertical position is only effective if the media's height is less
than the body height. Taller images will scale to fit.
context:
media_class: mzp-l-split-h-end mzp-l-split-v-end
diff --git a/docs/02-usage/migration.md b/docs/02-usage/migration.md
index aa35800a6..16c90d371 100644
--- a/docs/02-usage/migration.md
+++ b/docs/02-usage/migration.md
@@ -224,6 +224,53 @@ sed -i '' 's/old/new/g' file
sed -i 's/old/new/g' file
```
+## Split Component
+
+### Removed Pop Classes
+
+The following classes have been removed from the Split component:
+- `mzp-l-split-pop-top`
+- `mzp-l-split-pop-bottom`
+- `mzp-l-split-pop`
+
+**Migration steps:**
+1. Remove these classes from your HTML/templates
+2. If you need similar visual effects, implement custom CSS using negative margins
+
+**Find usages in your codebase:**
+
+VS Code Find:
+```text
+Find: mzp-l-split-pop(-top|-bottom)?
+```
+
+Terminal:
+```bash
+grep -r "mzp-l-split-pop" --include="*.html" --include="*.njk" .
+```
+
+### Removed Media Sizing Classes
+
+The following classes have been removed from the Split component:
+- `mzp-l-split-media-overflow`
+- `mzp-l-split-media-constrain-height`
+
+**Migration steps:**
+1. Remove these classes from your HTML/templates
+2. If you need similar visual effects, implement custom CSS for media sizing
+
+**Find usages in your codebase:**
+
+VS Code Find:
+```text
+Find: mzp-l-split-media-(overflow|constrain-height)
+```
+
+Terminal:
+```bash
+grep -r "mzp-l-split-media-overflow\|mzp-l-split-media-constrain-height" --include="*.html" --include="*.njk" .
+```
+
## After Migration
1. Run your build to check for any Sass compilation errors