feat(responsive): add responsive modifier support - #3123
Open
dazgreer wants to merge 9 commits into
Open
Conversation
- added responsive helper to use existing modifierEngine - extended modifierEngine to support advanced selector targeting - added --responsive attributes across body components - added regression tests for selector suffix behavior and component output contracts (image/social/table) - Updated documentation with responsive modifier classes
- added extra units to `font-size--responsive` (rem) and `line-height--responsive` (em, rem)
- Updated `font-size--responsive` option to use comma instead of full stop
There was a problem hiding this comment.
Pull request overview
Adds mobile-responsive modifier support across MJML body components using a shared modifier engine.
Changes:
- Introduces responsive rule registration and selector targeting.
- Adds
--responsiveattributes across components. - Adds regression tests and component documentation.
Reviewed changes
Copilot reviewed 40 out of 40 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/mjml-wrapper/src/index.js | Adds responsive gap validation. |
| packages/mjml-wrapper/README.md | Documents responsive wrapper attributes. |
| packages/mjml-text/src/index.js | Adds responsive text styling. |
| packages/mjml-text/README.md | Documents responsive text attributes. |
| packages/mjml-table/src/index.js | Adds responsive table styling. |
| packages/mjml-table/README.md | Documents responsive table attributes. |
| packages/mjml-spacer/src/index.js | Adds responsive spacer styling. |
| packages/mjml-spacer/README.md | Documents responsive spacer attributes. |
| packages/mjml-social/src/SocialElement.js | Adds element-level responsive styling. |
| packages/mjml-social/src/Social.js | Propagates responsive social attributes. |
| packages/mjml-social/README.md | Documents responsive social attributes. |
| packages/mjml-section/src/index.js | Adds responsive section layout styling. |
| packages/mjml-section/README.md | Documents responsive section attributes. |
| packages/mjml-navbar/src/NavbarLink.js | Adds responsive link styling. |
| packages/mjml-navbar/src/Navbar.js | Adds responsive navbar layout styling. |
| packages/mjml-navbar/README.md | Documents responsive navbar attributes. |
| packages/mjml-image/src/index.js | Adds responsive image sizing and alignment. |
| packages/mjml-image/README.md | Documents responsive image attributes. |
| packages/mjml-hero/src/index.js | Adds responsive hero dimensions and padding. |
| packages/mjml-hero/README.md | Documents responsive hero attributes. |
| packages/mjml-group/src/index.js | Adds responsive group width and direction. |
| packages/mjml-group/README.md | Documents responsive group attributes. |
| packages/mjml-divider/src/index.js | Adds responsive divider sizing and alignment. |
| packages/mjml-divider/README.md | Documents responsive divider attributes. |
| packages/mjml-core/tests/responsiveModeModifiers.test.js | Tests responsive modifier helpers. |
| packages/mjml-core/tests/responsiveComponentsRegression.test.js | Tests component output regressions. |
| packages/mjml-core/src/helpers/responsiveMode.js | Implements responsive modifier helpers. |
| packages/mjml-core/src/helpers/modifierEngine.js | Supports selector suffix targeting. |
| packages/mjml-column/src/index.js | Adds responsive column layout support. |
| packages/mjml-column/README.md | Documents responsive column attributes. |
| packages/mjml-carousel/src/CarouselImage.js | Applies responsive thumbnail classes. |
| packages/mjml-carousel/src/Carousel.js | Adds responsive carousel controls. |
| packages/mjml-carousel/README.md | Documents responsive carousel attributes. |
| packages/mjml-button/src/index.js | Adds responsive button styling. |
| packages/mjml-button/README.md | Documents responsive button attributes. |
| packages/mjml-accordion/src/AccordionTitle.js | Adds responsive title and icon styling. |
| packages/mjml-accordion/src/AccordionText.js | Adds responsive accordion text styling. |
| packages/mjml-accordion/src/AccordionElement.js | Propagates responsive icon dimensions. |
| packages/mjml-accordion/src/Accordion.js | Adds responsive accordion padding. |
| packages/mjml-accordion/README.md | Documents responsive accordion attributes. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
|
|
||
| const DEFAULT_MODIFIER_DEFINITIONS = { | ||
| responsive: { | ||
| mediaQuery: 'only screen and (max-width:479px)', |
| 'height--responsive': 'unit(px,%)', | ||
| 'letter-spacing': 'unitWithNegative(px,em)', | ||
| 'line-height': 'unit(px,%,em,rem)', | ||
| 'line-height--responsive': 'unit(px,%,em.rem)', |
| 'color--dark': 'color', | ||
| 'font-family': 'string', | ||
| 'font-size': 'unit(px,rem)', | ||
| 'font-size--responsive': 'unit(px, rem)', |
| ${this.htmlAttributes({ | ||
| src: icon, | ||
| alt: direction, | ||
| class: iconImage, |
Comment on lines
+259
to
+260
| ['width', this.attributes['width--responsive']], | ||
| ['padding', contentPaddingResponsive], |
Comment on lines
+156
to
+157
| | icon-height--responsive | `px` `%` | icon width | | | ||
| | icon-width--responsive | `px` `%` | icon height | | |
| | attribute | accepts | description | default value | | ||
| | -------------------------- | ---------- | ------------------------------------------- | ------------- | | ||
| | font-size--responsive | `px` `rem` | text size | | | ||
| | line-height--responsive | `px` `%` | space between the lines | | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What's changed
Feature
Testing
Documentation