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.