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.

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

Jump to bottom

Correctly stack and space text formatting buttons #10827

Merged
merged 2 commits into from
Mar 5, 2024
Merged

Correctly stack and space text formatting buttons #10827

merged 2 commits into from
Mar 5, 2024

Conversation

abeddow91
Copy link
Contributor

What does this change?

Adjusts the styling of text formatting buttons on discussion so they sit above the post comment buttons. It also adjusts the spacing to give them more room.

Why?

This was requested by design as part of the discussion design audit.

Screenshots

Before After
before after

@abeddow91 abeddow91 requested a review from a team as a code owner March 5, 2024 11:11
@abeddow91 abeddow91 added the run_chromatic Runs chromatic when label is applied label Mar 5, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Mar 5, 2024

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

Click here to see the Chromatic project.

@github-actions GitHub Actions
Copy link

github-actions bot commented Mar 5, 2024

Deploy build 32558 of Mobile::mobile-apps-rendering to CODE

All deployment options

From guardian/actions-riff-raff.

@github-actions GitHub Actions
Copy link

github-actions bot commented Mar 5, 2024 •
edited
Loading

Size Change: -2 B (0%)

Total Size: 762 kB

ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1011.client.web.********************.js 3.14 kB 0 B
dotcom-rendering/dist/112.client.web.********************.js 822 B 0 B
dotcom-rendering/dist/1191.client.web.********************.js 680 B 0 B
dotcom-rendering/dist/1192.client.web.********************.js 3.69 kB 0 B
dotcom-rendering/dist/1407.client.web.********************.js 640 B 0 B
dotcom-rendering/dist/1429.client.web.********************.js 17.9 kB 0 B
dotcom-rendering/dist/1459.client.web.********************.js 876 B 0 B
dotcom-rendering/dist/1519.client.web.********************.js 6.12 kB 0 B
dotcom-rendering/dist/1530.client.web.********************.js 8.63 kB 0 B
dotcom-rendering/dist/1541.client.web.********************.js 2.89 kB 0 B
dotcom-rendering/dist/1549.client.web.********************.js 4.81 kB 0 B
dotcom-rendering/dist/17.client.web.********************.js 1.85 kB 0 B
dotcom-rendering/dist/1749.client.web.********************.js 920 B 0 B
dotcom-rendering/dist/1827.client.web.********************.js 2.65 kB 0 B
dotcom-rendering/dist/1937.client.web.********************.js 2.43 kB 0 B
dotcom-rendering/dist/2293.client.web.********************.js 582 B 0 B
dotcom-rendering/dist/2337.client.web.********************.js 23.2 kB -1 B (0%)
dotcom-rendering/dist/2363.client.web.********************.js 5.87 kB 0 B
dotcom-rendering/dist/2412.client.web.********************.js 3.67 kB 0 B
dotcom-rendering/dist/2443.client.web.********************.js 3 kB 0 B
dotcom-rendering/dist/2572.client.web.********************.js 3.52 kB 0 B
dotcom-rendering/dist/3170.client.web.********************.js 527 B 0 B
dotcom-rendering/dist/3235.client.web.********************.js 529 B 0 B
dotcom-rendering/dist/3375.client.web.********************.js 2.7 kB 0 B
dotcom-rendering/dist/3396.client.web.********************.js 5.75 kB 0 B
dotcom-rendering/dist/351.client.web.********************.js 618 B 0 B
dotcom-rendering/dist/3671.client.web.********************.js 435 B 0 B
dotcom-rendering/dist/3737.client.web.********************.js 2.94 kB 0 B
dotcom-rendering/dist/393.client.web.********************.js 920 B 0 B
dotcom-rendering/dist/3936.client.web.********************.js 2.81 kB 0 B
dotcom-rendering/dist/3986.client.web.********************.js 495 B 0 B
dotcom-rendering/dist/4040.client.web.********************.js 650 B 0 B
dotcom-rendering/dist/4045.client.web.********************.js 643 B 0 B
dotcom-rendering/dist/405.client.web.********************.js 914 B 0 B
dotcom-rendering/dist/4055.client.web.********************.js 3.2 kB 0 B
dotcom-rendering/dist/4269.client.web.********************.js 668 B 0 B
dotcom-rendering/dist/4390.client.web.********************.js 508 B 0 B
dotcom-rendering/dist/4438.client.web.********************.js 801 B 0 B
dotcom-rendering/dist/4442.client.web.********************.js 714 B 0 B
dotcom-rendering/dist/478.client.web.********************.js 595 B 0 B
dotcom-rendering/dist/4870.client.web.********************.js 748 B 0 B
dotcom-rendering/dist/4911.client.web.********************.js 780 B 0 B
dotcom-rendering/dist/5020.client.web.********************.js 994 B 0 B
dotcom-rendering/dist/5047.client.web.********************.js 779 B 0 B
dotcom-rendering/dist/5055.client.web.********************.js 4.6 kB 0 B
dotcom-rendering/dist/5196.client.web.********************.js 13.2 kB 0 B
dotcom-rendering/dist/5569.client.web.********************.js 3.56 kB 0 B
dotcom-rendering/dist/5619.client.web.********************.js 926 B 0 B
dotcom-rendering/dist/5730.client.web.********************.js 954 B 0 B
dotcom-rendering/dist/5985.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/6043.client.web.********************.js 852 B 0 B
dotcom-rendering/dist/6140.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/6302.client.web.********************.js 2.68 kB 0 B
dotcom-rendering/dist/6351.client.web.********************.js 3.42 kB 0 B
dotcom-rendering/dist/6651.client.web.********************.js 904 B 0 B
dotcom-rendering/dist/6693.client.web.********************.js 822 B 0 B
dotcom-rendering/dist/6697.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/6847.client.web.********************.js 4.85 kB 0 B
dotcom-rendering/dist/6853.client.web.********************.js 1 kB 0 B
dotcom-rendering/dist/6981.client.web.********************.js 3.87 kB 0 B
dotcom-rendering/dist/7018.client.web.********************.js 787 B 0 B
dotcom-rendering/dist/7024.client.web.********************.js 3.6 kB 0 B
dotcom-rendering/dist/7324.client.web.********************.js 3.49 kB 0 B
dotcom-rendering/dist/7356.client.web.********************.js 1 kB 0 B
dotcom-rendering/dist/764.client.web.********************.js 6.02 kB 0 B
dotcom-rendering/dist/7673.client.web.********************.js 2.95 kB 0 B
dotcom-rendering/dist/7746.client.web.********************.js 4.78 kB 0 B
dotcom-rendering/dist/7855.client.web.********************.js 788 B 0 B
dotcom-rendering/dist/8002.client.web.********************.js 801 B 0 B
dotcom-rendering/dist/8007.client.web.********************.js 3.81 kB 0 B
dotcom-rendering/dist/8030.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/8166.client.web.********************.js 1.56 kB 0 B
dotcom-rendering/dist/8288.client.web.********************.js 23 kB 0 B
dotcom-rendering/dist/841.client.web.********************.js 789 B 0 B
dotcom-rendering/dist/8430.client.web.********************.js 2.54 kB 0 B
dotcom-rendering/dist/8587.client.web.********************.js 41.7 kB 0 B
dotcom-rendering/dist/8695.client.web.********************.js 8.67 kB 0 B
dotcom-rendering/dist/8749.client.web.********************.js 3.27 kB 0 B
dotcom-rendering/dist/8818.client.web.********************.js 748 B 0 B
dotcom-rendering/dist/8937.client.web.********************.js 888 B 0 B
dotcom-rendering/dist/898.client.web.********************.js 3.74 kB 0 B
dotcom-rendering/dist/9140.client.web.********************.js 8.28 kB 0 B
dotcom-rendering/dist/9173.client.web.********************.js 723 B 0 B
dotcom-rendering/dist/9314.client.web.********************.js 822 B 0 B
dotcom-rendering/dist/9605.client.web.********************.js 4.79 kB 0 B
dotcom-rendering/dist/9621.client.web.********************.js 723 B 0 B
dotcom-rendering/dist/9676.client.web.********************.js 889 B 0 B
dotcom-rendering/dist/9727.client.web.********************.js 5.89 kB 0 B
dotcom-rendering/dist/9886.client.web.********************.js 9.99 kB 0 B
dotcom-rendering/dist/9978.client.web.********************.js 960 B 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 3.75 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 424 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 4.15 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 3.02 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.45 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 2.03 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.65 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 36.9 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.78 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.78 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 4.84 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 5.56 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 5.66 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 538 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 3.29 kB 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 2.46 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 4.06 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.67 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 3.61 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 4.16 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.01 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 2.43 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 3.35 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 611 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 841 B 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 342 B 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.7 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 3.82 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 10.8 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 1.68 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 9.45 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 780 B 0 B
dotcom-rendering/dist/HeaderTopBar-importable.client.web.********************.js 12.3 kB 0 B
dotcom-rendering/dist/index.client.web.********************.js 47.6 kB -1 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 3.7 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 850 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.09 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 4.72 kB 0 B
dotcom-rendering/dist/InteractiveSupportButton-importable.client.web.********************.js 3.49 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 4.59 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.54 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 2.22 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 434 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.46 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.66 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.95 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 6.63 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 5.69 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.29 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 4.04 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 6.73 kB 0 B
dotcom-rendering/dist/MostViewedRightWrapper-importable.client.web.********************.js 4.44 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 4.05 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.66 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 542 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 800 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 749 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 537 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 469 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.89 kB 0 B
dotcom-rendering/dist/ReaderRevenueLinks-importable.client.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 1.99 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.25 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/SendAMessage-importable.client.web.********************.js 4.43 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.13 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 786 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.42 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 485 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 1.52 kB 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.79 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 647 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 5.71 kB 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 3.93 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.04 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 5.64 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.16 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.53 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 5.65 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.25 kB 0 B
dotcom-rendering/dist/SupportTheG-importable.client.web.********************.js 3.77 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.24 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.02 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 5.7 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 3.54 kB 0 B
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js 5.47 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 3.97 kB 0 B

compressed-size-action

@github-actions GitHub Actions
Copy link

github-actions bot commented Mar 5, 2024

Deploy build 8501 of dotcom:rendering-all to CODE

All deployment options

From guardian/actions-riff-raff.

@abeddow91 abeddow91 linked an issue Mar 5, 2024 that may be closed by this pull request
10__Text formatting tools: change position on mobile breakpoints — See Figma file for details #10825
Closed
@abeddow91 abeddow91 merged commit 89c8261 into main Mar 5, 2024
28 checks passed
@abeddow91 abeddow91 deleted the ab/text-formatting-position branch March 5, 2024 12:02
@prout-bot
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ioannakok ioannakok ioannakok approved these changes

Assignees
No one assigned
Labels
dotcom-rendering run_chromatic Runs chromatic when label is applied Seen-on-PROD
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

10__Text formatting tools: change position on mobile breakpoints — See Figma file for details
3 participants
@abeddow91 @prout-bot @ioannakok