Skip to content
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.

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

Adjust container spacing for containers with defined collectionLevel #12922

Merged
merged 2 commits into from
Nov 29, 2024

Conversation

cemms1
Copy link
Contributor

@cemms1 cemms1 commented Nov 28, 2024

What does this change?

For containers with a defined collectionLevel prop, there is no longer spacing applied to the FrontSection as this is now expected to happen within the container component itself.

We now add the spacing value to the ScrollableCarousel component instead of allowing FrontSection to control this.

Also adjusts the naming of the prop isFlexibleContainer to hasLargeSpacing to separate the contextual information from the details the component needs to render.

Why?

We noticed there was double spacing applied to some containers so this aligns closer to the designs.

Trello ticket

Screenshots

Before After
before after

@cemms1 cemms1 self-assigned this Nov 28, 2024
@cemms1 cemms1 changed the base branch from main to cemms1/container-spacing November 28, 2024 11:11
Copy link

github-actions bot commented Nov 28, 2024

Size Change: +24 B (0%)

Total Size: 958 kB

ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1000.client.web.********************.js 999 B 0 B
dotcom-rendering/dist/1026.client.web.********************.js 784 B 0 B
dotcom-rendering/dist/1090.client.web.********************.js 752 B 0 B
dotcom-rendering/dist/1261.client.web.********************.js 1.89 kB 0 B
dotcom-rendering/dist/1391.client.web.********************.js 725 B 0 B
dotcom-rendering/dist/1458.client.web.********************.js 4.87 kB 0 B
dotcom-rendering/dist/1476.client.web.********************.js 784 B 0 B
dotcom-rendering/dist/1483.client.web.********************.js 3.19 kB 0 B
dotcom-rendering/dist/152.client.web.********************.js 5.3 kB 0 B
dotcom-rendering/dist/1559.client.web.********************.js 11.3 kB 0 B
dotcom-rendering/dist/1667.client.web.********************.js 918 B 0 B
dotcom-rendering/dist/169.client.web.********************.js 8.09 kB 0 B
dotcom-rendering/dist/1940.client.web.********************.js 507 B 0 B
dotcom-rendering/dist/222.client.web.********************.js 6.15 kB 0 B
dotcom-rendering/dist/2283.client.web.********************.js 3.03 kB 0 B
dotcom-rendering/dist/2310.client.web.********************.js 880 B 0 B
dotcom-rendering/dist/2368.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/2462.client.web.********************.js 3.87 kB 0 B
dotcom-rendering/dist/2487.client.web.********************.js 157 B 0 B
dotcom-rendering/dist/249.client.web.********************.js 3.69 kB 0 B
dotcom-rendering/dist/2611.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/267.client.web.********************.js 917 B 0 B
dotcom-rendering/dist/2751.client.web.********************.js 6.29 kB +1 B (+0.02%)
dotcom-rendering/dist/2784.client.web.********************.js 3.64 kB 0 B
dotcom-rendering/dist/281.client.web.********************.js 642 B 0 B
dotcom-rendering/dist/2927.client.web.********************.js 441 B 0 B
dotcom-rendering/dist/3004.client.web.********************.js 3.29 kB 0 B
dotcom-rendering/dist/302.client.web.********************.js 4.52 kB 0 B
dotcom-rendering/dist/3060.client.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/3109.client.web.********************.js 803 B 0 B
dotcom-rendering/dist/3270.client.web.********************.js 961 B 0 B
dotcom-rendering/dist/3304.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/3539.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/3570.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/3613.client.web.********************.js 3.42 kB 0 B
dotcom-rendering/dist/3634.client.web.********************.js 3.87 kB 0 B
dotcom-rendering/dist/371.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/3769.client.web.********************.js 999 B 0 B
dotcom-rendering/dist/3777.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/3833.client.web.********************.js 4.55 kB 0 B
dotcom-rendering/dist/3839.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/403.client.web.********************.js 3.64 kB 0 B
dotcom-rendering/dist/4120.client.web.********************.js 11.1 kB 0 B
dotcom-rendering/dist/4132.client.web.********************.js 3.51 kB 0 B
dotcom-rendering/dist/4173.client.web.********************.js 3.14 kB 0 B
dotcom-rendering/dist/4215.client.web.********************.js 10.3 kB 0 B
dotcom-rendering/dist/4282.client.web.********************.js 685 B 0 B
dotcom-rendering/dist/4364.client.web.********************.js 13 kB 0 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/4553.client.web.********************.js 3.35 kB 0 B
dotcom-rendering/dist/4556.client.web.********************.js 4.15 kB 0 B
dotcom-rendering/dist/456.client.web.********************.js 2.42 kB 0 B
dotcom-rendering/dist/4628.client.web.********************.js 654 B 0 B
dotcom-rendering/dist/4941.client.web.********************.js 890 B 0 B
dotcom-rendering/dist/4985.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/5019.client.web.********************.js 619 B 0 B
dotcom-rendering/dist/5209.client.web.********************.js 22.7 kB 0 B
dotcom-rendering/dist/5222.client.web.********************.js 2.28 kB 0 B
dotcom-rendering/dist/5400.client.web.********************.js 4.94 kB 0 B
dotcom-rendering/dist/5410.client.web.********************.js 4.49 kB 0 B
dotcom-rendering/dist/5658.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/5695.client.web.********************.js 2.59 kB 0 B
dotcom-rendering/dist/5757.client.web.********************.js 931 B 0 B
dotcom-rendering/dist/576.client.web.********************.js 11.2 kB 0 B
dotcom-rendering/dist/5880.client.web.********************.js 828 B 0 B
dotcom-rendering/dist/5920.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/6042.client.web.********************.js 4.04 kB 0 B
dotcom-rendering/dist/6044.client.web.********************.js 726 B 0 B
dotcom-rendering/dist/6071.client.web.********************.js 577 B 0 B
dotcom-rendering/dist/6135.client.web.********************.js 779 B 0 B
dotcom-rendering/dist/632.client.web.********************.js 6.86 kB 0 B
dotcom-rendering/dist/6389.client.web.********************.js 5.88 kB 0 B
dotcom-rendering/dist/6390.client.web.********************.js 529 B 0 B
dotcom-rendering/dist/6505.client.web.********************.js 1 kB 0 B
dotcom-rendering/dist/6587.client.web.********************.js 4.41 kB 0 B
dotcom-rendering/dist/6598.client.web.********************.js 780 B 0 B
dotcom-rendering/dist/6638.client.web.********************.js 907 B 0 B
dotcom-rendering/dist/6655.client.web.********************.js 3.64 kB 0 B
dotcom-rendering/dist/6662.client.web.********************.js 523 B 0 B
dotcom-rendering/dist/678.client.web.********************.js 804 B 0 B
dotcom-rendering/dist/6976.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/6988.client.web.********************.js 4.27 kB 0 B
dotcom-rendering/dist/6990.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/7045.client.web.********************.js 5.13 kB 0 B
dotcom-rendering/dist/7047.client.web.********************.js 44.3 kB 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23 kB 0 B
dotcom-rendering/dist/7366.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/7392.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/7691.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/7729.client.web.********************.js 20.3 kB 0 B
dotcom-rendering/dist/7807.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/7824.client.web.********************.js 2.86 kB 0 B
dotcom-rendering/dist/7955.client.web.********************.js 5.03 kB 0 B
dotcom-rendering/dist/8122.client.web.********************.js 6 kB 0 B
dotcom-rendering/dist/83.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/8347.client.web.********************.js 4.37 kB 0 B
dotcom-rendering/dist/8504.client.web.********************.js 827 B 0 B
dotcom-rendering/dist/8536.client.web.********************.js 595 B 0 B
dotcom-rendering/dist/8586.client.web.********************.js 2 kB 0 B
dotcom-rendering/dist/8590.client.web.********************.js 4.01 kB 0 B
dotcom-rendering/dist/8626.client.web.********************.js 890 B 0 B
dotcom-rendering/dist/8637.client.web.********************.js 3.92 kB 0 B
dotcom-rendering/dist/8697.client.web.********************.js 956 B 0 B
dotcom-rendering/dist/8833.client.web.********************.js 829 B 0 B
dotcom-rendering/dist/9184.client.web.********************.js 493 B 0 B
dotcom-rendering/dist/9203.client.web.********************.js 3.06 kB 0 B
dotcom-rendering/dist/9395.client.web.********************.js 4.41 kB 0 B
dotcom-rendering/dist/9460.client.web.********************.js 7.27 kB 0 B
dotcom-rendering/dist/9493.client.web.********************.js 785 B 0 B
dotcom-rendering/dist/9557.client.web.********************.js 921 B 0 B
dotcom-rendering/dist/9721.client.web.********************.js 717 B 0 B
dotcom-rendering/dist/9835.client.web.********************.js 647 B 0 B
dotcom-rendering/dist/9899.client.web.********************.js 669 B 0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 6.66 kB -10 B (-0.15%)
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.85 kB 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 422 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.57 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 3.17 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 3.46 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.52 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 3.08 kB 0 B
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.32 kB 0 B
dotcom-rendering/dist/AuEoy2024Wrapper-importable.client.web.********************.js 5.04 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 2.3 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.54 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 37.2 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.96 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.72 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 8.22 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.95 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.73 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.53 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 541 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 1.22 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.74 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 3.14 kB 0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB 0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 5.98 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.74 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB 0 B
dotcom-rendering/dist/ExpandableMarketingCardWrapper-importable.client.web.********************.js 4.38 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.94 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 967 B 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 619 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 3.44 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 345 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB 0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.63 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 3.81 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 10.7 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.41 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.22 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.8 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 782 B 0 B
dotcom-rendering/dist/index.client.web.********************.js 46.2 kB -2 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.79 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.56 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 4.25 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 4.86 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.62 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 4.56 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 435 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.52 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.82 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 5.27 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.82 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 9.89 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 4.97 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.69 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 6.07 kB 0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.22 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.33 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 545 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 805 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 749 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 543 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 469 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.96 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.53 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.39 kB 0 B
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 7.28 kB +10 B (+0.14%)
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 5.17 kB 0 B
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 3.83 kB +12 B (+0.31%)
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 3.83 kB +13 B (+0.34%)
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 6.98 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.19 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 794 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.86 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 485 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 3.94 kB 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 728 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 1.82 kB 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.51 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.6 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 3.16 kB 0 B
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js 4.23 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 3.61 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 4.8 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 4.23 kB 0 B
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js 7.68 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.17 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB 0 B
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 12.8 kB 0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.24 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.73 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/UsEoy2024Wrapper-importable.client.web.********************.js 5.48 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 4.98 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 2.65 kB 0 B
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js 6.55 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 6.3 kB 0 B

compressed-size-action

Base automatically changed from cemms1/container-spacing to main November 29, 2024 09:27
@cemms1 cemms1 force-pushed the cemms1/adjust-container-spacing branch from b4ffc50 to 96dbc0c Compare November 29, 2024 11:37
@cemms1 cemms1 marked this pull request as ready for review November 29, 2024 11:37
@cemms1 cemms1 requested a review from a team as a code owner November 29, 2024 11:37
Copy link

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

@cemms1 cemms1 added the run_chromatic Runs chromatic when label is applied label Nov 29, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Nov 29, 2024
Copy link
Contributor

@jamesmockett jamesmockett left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! ✨ Nice to make the spacing toggle more generic rather than tied to a particular container type.

@cemms1 cemms1 merged commit 257bb95 into main Nov 29, 2024
33 checks passed
@cemms1 cemms1 deleted the cemms1/adjust-container-spacing branch November 29, 2024 14:19
@prout-bot
Copy link

Seen on PROD (merged by @cemms1 9 minutes and 57 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants