Improvements to markdown "Exit full screen" button
What does this MR do and why?
Improvements to markdown "Exit full screen" button
- Align copy with normal markdown editing experience: The button to enter full screen says "Go full screen." The button to exit full screen has been changed from "Leave zen mode" to "Exit full screen". Zen mode is not a term that is presented to the user otherwise.
- Align button style with normal markdown experience. The button should be styled like an icon button.
- Use a tooltip. The button to enter full screen mode uses a tooltip, and this button should use one as well -- especially since this button is the only clickable affordance in the entire UI that the user can use to escape this focus mode.
- Fix alignment. The button was made too tall because it inherited a line height from a parent.
- Increase size. The button was too small compared to the larger text editor in full screen mode.
- Make the button more comfortable on mobile by selectively applying the
btn-sm
class when the viewport is in thexs
breakpoint range
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
State | Before | After |
---|---|---|
At rest | ![]() |
![]() |
At rest when viewport is xs (<576px) |
![]() |
![]() |
Hovering | ![]() |
![]() |
Hovering when viewport is xs (<576px)(obviously this only applies to desktop environments, no hover on mobile) |
![]() |
![]() |
How to set up and validate locally
- Check out this branch
- Edit markdown anywhere in the GDK (an issue description, comment, MR description, etc)
- Click the "Go full screen" button at the top right of the markdown editor
- You will see the larger exit button at the top right, and hovering or focusing it will show a tooltip with "Exit full screen". On hover or focus, the button will have the usual default tertiary button hover/focus styles.
Related to #474921 (closed)
Merge request reports
Activity
changed milestone to %17.4
added UX Paper Cuts bugux groupknowledge pipeline:run-review-app labels
assigned to @clavimoniere
added typebug label
added pipelinetier-1 label
added devopsplan sectiondev labels
- Resolved by Chad Lavimoniere
FYI @msedlakjakubowski since there's a copy change here
- A deleted user
added frontend label
1 Warning This merge request changed undocumented Vue components in
vue_shared/
. Please consider creating Stories for these components:app/assets/javascripts/vue_shared/components/markdown/field.vue
Reviewer roulette
Category Reviewer Maintainer backend @paulobarros
(UTC+2, 6 hours ahead of author)
@jtapiab
(UTC-3, 1 hour ahead of author)
frontend @fernanda.toledo
(UTC-7, 3 hours behind author)
@justin_ho
(UTC+2, 6 hours ahead of author)
Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.
If needed, you can retry the
danger-review
job that generated this comment.Generated by
Danger- Resolved by Paul Slaughter
@clavimoniere maybe this is not for this MR, but wdyt about making the font size smaller? It just feels SO big - one reason I never use it.
Bundle size analysis [beta]
This compares changes in bundle size for entry points between the commits acbd6a22 and e16075ab
Special assetsEntrypoint / Name Size before Size after Diff Diff in percent average 4.35 MB 4.35 MB - 0.0 % mainChunk 3.3 MB 3.3 MB - 0.0 %
Note: We do not have exact data for acbd6a22. So we have used data from: 9618e805.
The target commit was too new, so we used the latest commit from master we have info on.
It might help to rerun thebundle-size-review
job
This might mean that you have a few false positives in this report. If something unrelated to your code changes is reported, you can check this comparison in order to see if they caused this change.Please look at the full report for more details
Read more about how this report works.
Generated by
Dangeradded pipeline:skip-pajamas-adoption label
mentioned in incident gitlab-org/quality/engineering-productivity/review-apps-broken-incidents#1764
added Technical Writing UI text twfinished workflowin dev labels
added pipeline:mr-approved label
added pipelinetier-2 label and removed pipelinetier-1 label
Before you set this MR to auto-merge
This merge request will progress on pipeline tiers until it reaches the last tier: pipelinetier-3. We will trigger a new pipeline for each transition to a higher tier.
Before you set this MR to auto-merge, please check the following:
- You are the last maintainer of this merge request
- The latest pipeline for this merge request is pipelinetier-3 (You can find which tier it is in the pipeline name)
- This pipeline is recent enough (created in the last 8 hours)
If all the criteria above apply, please set auto-merge for this merge request.
See pipeline tiers and merging a merge request for more details.
Hi
@msedlakjakubowski
,GitLab Bot has added the Technical Writing label because a Technical Writer has approved or merged this MR.
This message was generated automatically. You're welcome to improve it.
E2E Test Result Summary
allure-report-publisher
generated test report!e2e-test-on-gdk:
test report for e16075abexpand test summary
+------------------------------------------------------------------+ | suites summary | +-------------+--------+--------+---------+-------+-------+--------+ | | passed | failed | skipped | flaky | total | result | +-------------+--------+--------+---------+-------+-------+--------+ | Create | 128 | 0 | 18 | 0 | 146 | ✅ | | Package | 24 | 0 | 11 | 0 | 35 | ✅ | | Plan | 75 | 0 | 1 | 1 | 76 | ✅ | | Verify | 46 | 0 | 2 | 0 | 48 | ✅ | | Govern | 72 | 0 | 0 | 0 | 72 | ✅ | | Data Stores | 33 | 0 | 1 | 0 | 34 | ✅ | | Release | 5 | 0 | 0 | 0 | 5 | ✅ | | Secure | 4 | 0 | 0 | 0 | 4 | ✅ | | Manage | 1 | 0 | 1 | 0 | 2 | ✅ | | Analytics | 2 | 0 | 0 | 0 | 2 | ✅ | | Monitor | 8 | 0 | 0 | 0 | 8 | ✅ | | Fulfillment | 2 | 0 | 0 | 0 | 2 | ✅ | +-------------+--------+--------+---------+-------+-------+--------+ | Total | 400 | 0 | 34 | 1 | 434 | ✅ | +-------------+--------+--------+---------+-------+-------+--------+
e2e-test-on-omnibus:
test report for e16075abexpand test summary
+-------------------------------------------------------------+ | suites summary | +--------+--------+--------+---------+-------+-------+--------+ | | passed | failed | skipped | flaky | total | result | +--------+--------+--------+---------+-------+-------+--------+ | Plan | 82 | 0 | 9 | 0 | 91 | ✅ | | Create | 405 | 0 | 60 | 0 | 465 | ✅ | +--------+--------+--------+---------+-------+-------+--------+ | Total | 487 | 0 | 69 | 0 | 556 | ✅ | +--------+--------+--------+---------+-------+-------+--------+
mentioned in incident gitlab-org/quality/engineering-productivity/review-apps-broken-incidents#1765
changed milestone to %17.5
added 1183 commits
-
c711c569...a0aa05da - 1182 commits from branch
master
- 3fc58892 - Improvements to markdown "Exit full screen" button
-
c711c569...a0aa05da - 1182 commits from branch
removed pipeline:run-review-app label
@pslaughter can you do a frontend maintainer review on this?
requested review from @pslaughter
Thanks again for working on this @clavimoniere! I'll be able to take a look at this within the next 12-24 hours
- Resolved by Chad Lavimoniere
- Resolved by Paul Slaughter
Thanks for working on this @clavimoniere! I left a comment for your consideration. Back to you!
removed review request for @pslaughter
- A deleted user
added backend label
requested review from @pslaughter
added pipelinetier-3 pipeline:run-e2e-omnibus-once labels and removed pipelinetier-2 label
removed pipeline:run-e2e-omnibus-once label
started a merge train
mentioned in commit cf662c6e
added workflowstaging-canary label and removed workflowin dev label
added workflowcanary label and removed workflowstaging-canary label
added workflowstaging label and removed workflowcanary label
added workflowproduction label and removed workflowstaging label
added workflowpost-deploy-db-staging label and removed workflowproduction label
added workflowpost-deploy-db-production label and removed workflowpost-deploy-db-staging label
added releasedcandidate label
added releasedpublished label and removed releasedcandidate label
mentioned in merge request kubitus-project/kubitus-installer!3429 (merged)
mentioned in issue #474921 (closed)