Skip to content

feat: style popup resize grip and keyboard hint - #358

Closed
yordan-st wants to merge 1 commit into
mainfrom
feat/WC-3495_popup-resize-grip
Closed

yordan-st wants to merge 1 commit into
mainfrom
feat/WC-3495_popup-resize-grip

Conversation

@yordan-st

Copy link
Copy Markdown
Contributor

Summary

  • Adds Atlas Core styling for the new keyboard resize grip (.mx-resizer.mx-resizer-grip) and its keyboard hint (.mx-resizer-hint*) in resizable popups.
  • Adds an Unreleased entry to the Atlas Core changelog.

Context

The Mendix client renders the grip and the hint as part of making popup resize controls accessible: WC-3495, with the design from CD-1007. Runtime change: https://gitlab.rnd.mendix.com/appdev/appdev/-/merge_requests/38848

The two changes can be merged in either order:

  • Without this PR, the grip still works from the keyboard and shows a focus outline, but it is invisible, like the current resize handles.
  • Without the runtime change, these selectors match nothing.

Details

  • Grip: overrides the legacy .mx-resizer-se position (20×20 px, inset 2 px from the corner). It shows a dot icon drawn with a CSS mask in currentColor, which changes to --brand-primary on hover and focus.
  • Hint: positioned absolutely below the popup, laid out as a three-column grid. It is hidden through [hidden] (toggled by the client), and its kbd styling overrides Bootstrap's.
  • Uses only existing CSS variables with SCSS fallbacks; no new variables.

Test plan

  • main.scss compiles with sass (only the existing warnings in _flex.scss)
  • Visual check in a Studio Pro test app running the client from the appdev branch
  • Check whether the e2e popup screenshots change

@yordan-st yordan-st closed this Oct 19, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant