How to directly reference the Activities Menu in Flex UI 2.0?

[jefferyyates]

I'm a SA with Twilio ProServices. A customer of ours, running Flex UI 1, had a need for a Flex plugin to add CSS to the Activities menu. They have >30 Activities defined, and the menu does not scroll - meaning their agents could not access the Activities or logout button at the bottom of the menu. We created a very small Flex plugin (here) to leverage injectGlobal to add some styling to JUST the Activities menu - no other menu that may be in Flex.

injectGlobal` .Twilio-Menu.Twilio-UserControls-AccountMenu { overflow-y: scroll; height: 90vh; } `;

I'm currently looking into updating that plugin for Flex UI 2. How do I reference that one Menu in all of the Flex UI when Paste is involved? I did ask the Flex team inside Twilio, they directed me here.

The closest I could figure out using Javascript in the Chrome dev tools looks like this:

document.querySelectorAll("div.Twilio-MainHeader-end")[0].querySelectorAll("div[data-paste-element='MENU']")[0].style.cssText += 'overflow-y: scroll;max-height: 90vh;'

That narrows it down a little, but is still making changes to any Paste MENU in the header. Well, the first occurrence, but there's no way I can see to intelligently choose which MENU. And it introduces timing issues when trying to use that code in a Flex plugin - does the html document exist yet?

I do not have a https://codesandbox.io/ as I can't replicate Twilio Flex that way.

Thanks

[TheSisb]

Hello @jefferyyates,

I'm not sure if this answer will be an immediate unblocker for you.. however the best long-term, maintainable approach would be to work with the Flex team to leverage our Customization Provider.

In a nutshell, the Flex team could add semantically named element props to Paste components throughout the page. In this case, they could pass element="ACTIVITY_MENU" to that particular menu. Then they would need to enable plugins to pass in an object to the Customization.Provider context. After they implement those two things, you will be able to override designs everywhere like this:

  <CustomizationProvider baseTheme="default" elements={{
    "ACTIVITY_MENU": {
       overflowY: 'scroll',
       maxHeight: '90vh',
    }
  }}>

Think of the element prop as similar to a traditional CSS id or class. The key difference is how it is centrally located so you don't have to dig through several files of cascade overrides and is powered by our token and theming system.

Our Customization Provider was carefully designed to enable styling Paste products in a future-proof way. It has tremendous potential when leveraged correctly.

Please let me know if you have any other questions.

[jefferyyates]

Thanks @TheSisb . I did get in touch with the Flex team, who confirmed that at this time, there's no way to target just the Activities menu, only all MENU elements. But now they know and can add an enhancement story to their backlog. Cuz I'd really like to use the elegant approach, not the gnarly js option I hacked together. :)