Skip to content

Improve and homogenize popover-type components

Jaladh Singhal requested to merge jaladh-singhal/exosphere:popover into master

This MR addresses following from the point 3 and 4 in #668 (closed):

UI elements with a popover (toggleTip, dropdown, etc.) should have soft edges (border color with very low opacity) and uniform & larger-than-current padding to give content a room to breathe.

Defined default popover style in Style.Helpers and made all popover type components defined in different modules use it.

Also fixes #707 (closed).


They should be smart enough in orienting them as per viewport so that they don't get clipped if the visibility-control button is on left edge or don't cause horizontal scroll bar to appear if the button is on right edge.

Since popover is always a elm-ui "nearby element" that is passed as attributes to the target element (say a button), created a function that takes following as parameters: a popover component, position of popover, and its distance from target. Now all the modules attaching popover to target use this function. Position parameter is inspired from popover component in PatternFly and AntDesign (another design system I've worked with before). We could have made it "smart" by introducing an "auto" type position but that will require JavaScript sorcery (calculating target's position wrt viewport, accounting popover width & height, and then estimating a best fit position). So manual positioning is good for now IMO - developer can just decide where popover will be positioned depending on where they are placing the popover target in UI. Feel free to let me know if you think the position I've chosen for a popover should be different.


Specific to toggleTip, it should not have grey background (same as point 1) and should use smaller font size (and perhaps we can try to make font color lighter) - it's tip, it's supposed to draw lesser attention than everything else. Also the font on settings page's toggletip is bold which it shouldn't be - they all should be same in style.

Added style attributes (in addition to default popover style) to make it possible. At some places that use toggletip (like in settings page), several unwanted styles were getting inherited from parent element so I added additional styles to toggle tip contents element.


Besides,

  • Removed dropdownAttributes that's no longer relevant
  • Made "create" dropdown that has a vertical list of selectable items visually same as "connect to" dropdown in server list
  • Made toogle tip icon visually indicate show/hide status by darkening/lightening it (also suggested in PF)
  • Added stories for popover position in Design System Explorer

I'll address auto-closing the popovers in next MR.

How to Test

Check all affected files and go to each page it corresponds in UI and then click all popover targets.

Screenshots

There are multiple changes to capture, only attaching a few:

Screenshot_from_2022-03-30_01-16-52

Screenshot_from_2022-03-30_01-19-12

Screenshot_from_2022-03-30_01-15-28

QA Checklist

  • Any changes to 'widgets' in src/Style/Widgets/? If so:
    • Update src/Style/StyleGuide.elm showing example usage of that widget
  • Were any app flags created, modified, or removed? If so:
    • Update config.js and all files in environment-configs/, including docker-config.js
    • Update "Runtime configuration options" documentation in README.md

Post-Merge Checklist

  • Create follow-up issues for anything left over for another merge request
    • If any technical debt is introduced, assign these follow-up issues to the MR submitter
Edited by Chris Martin

Merge request reports