feat: contextual menu css position

[petermakowski]

Done

This PR removes the need for using JavaScript for vertical positioning of the contextual menu and will subsequently allow to simplify implementations of this pattern.

• feat: contextual menu css position

QA

• Open demo
• Go to /docs/patterns/contextual-menu and ensure all examples are displayed exactly the same as before

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

No visual changes, looks exactly the same way as before. E.g.:

Notes

Somewhat related PR in react-components: canonical/react-components#1000

[bartaz]

How is margin on the dropdown related to placement?

Contextual menu is absolutely positioned, so I'm not sure if bottom margin on it affects anything?

[bartaz]

I'm not sure if we can do that. In our example p-contextual-menu__toggle is used on the button, and in such case it would override the default margin on the button.

The fact that button has contextual menu should not affect its margin.

I guess this was the main reason to use JS for positioning - so we can calculate top position regardless of margin that element having contextual menu may have.