Support of "New layout with top bar [Alpha]" feature in monday.com

[Ma1kovich]

There is new alpha feature in monday.com which enables new top bar layout. Apart from refreshed layout, there are new accent colors depending on what product user is in.

It is done through applying "*-product-theme" class name to the body tag of the monday.com platform. We've tried the same with our application, which uses monday-ui-react-core package, but it didn't work (although it works with normal light, dark and night color themes).

Is it planned to support these new product dependant themes in monday-ui-react-core package or maybe there are already some nightly builds supporting this that we can test ourselves?

Thanks!

[shlomitc]

Hey George and thanks for this insight.
Can you please share your exact use case? Are you developing a third-party app?

[Ma1kovich]

Hey!
Sure, we are developing a third-party app for monday.com marketplace. We actively use controls/inputs from Monday Vibe, as well as css custom properties for our own parts of UI to natively support all 3 monday color themes (light, dark, night).
And now, opening our app from monday dev product creates a distortion - all monday.com accent colors are green-ish, but in our app they are still blue-ish.

[shlomitc]

Thanks for clarifying.
I'm adding this to our backlog tasks and will update once we will have some progress

[Ma1kovich]

Thank you, it would be very beneficial improvement for us, we'll wait for the update

[Ma1kovich]

Hello, @shlomitc!
Is there any update on ETA for this? It seems like monday.com enabled it for everyone (or at least started rolling it out), because it is no more possible to disable this feature in experemental features (although it is still marked like "alpha" for some reason).

[shlomitc]

Hey @Ma1kovich. Didn't forget you.
We'll be working on it in the upcoming weeks. This will also require a change in the Apps SDK so we'll be working together with the Apps team for an appropriate solution.

You can start preparing your project by making sure you're using the latest vibe@2 as these changes will affect only on that major version

[Ma1kovich]

Hi there,

Thank you for releasing ThemeProvider, I believe it serves the purpose described here. I see that it's in an Alpha state, and while I understand that, I thought it's worth inquiring early on.

In the Storybook section, there's a mention of "product themes" (you can find it here: mentioning product themes), which is exactly what we need. However, these product themes are not exported from the packages, and we can't use them directly without copying from Storybook and hardcoding on our end.

Are there any plans to make these themes accessible from the package itself? And could you also consider naming these product themes to match the real product names on monday.com for easier identification?

Thanks!

[Ma1kovich]

Currently, third-party apps get through the monday.com SDK only the system theme

Actually, I believe there is a "productKind" property as well, which is not described in the documentation, but exists in monday sdk context and tells us in which product the app is currently opened. We can identify the product by that and therefore apply correct product theme.

This is what we indent to do, and we want to try even at this stage. To be able to do that at this stage we will need to copy product style definition objects from storybook. My question is - are these definitions up to date with how product themes are defined in monday.com? If we copy them to our code at this stage, will it give us solid enough appearance to match each product correctly?

[Ma1kovich]

Sorry, "productKind" is not in the SDK context anymore. I remember it was there at some point 🤕
That means we can't do it currently. Do you have any ETA for SDK changes for us to be alpha testers of this feature then?

[shlomitc]

1. copying the styles from the storybook is not the right way to go. They might be out of sync and if future products come, you will always need to catch up.
2. We are currently working on this with the SDK team. I'll update once we have something working

[shlomitc]

Hey @Ma1kovich
The SDK is now exposing the themeConfig object.
All you need to do is get it from the SDK and pass it to the ThemeProvider and it will simply work.

You don't need to copy any values as you've stated before, you will always get the updated values given the system and product theme you're rendered in

https://developer.monday.com/apps/changelog/new-themeconfig-property-in-the-context-of-view-apps

[Ma1kovich]

Hey @shlomitc
Thanks! We've, of course, already implemented that with ThemeProvider and themeConfig object from the SDK couple of weeks ago 🙂

If you are interested to check how it end up looking in a big marketplace application - welcome here https://monday.com/marketplace/10000283

[SergeyRoyt]

Hey, @Ma1kovich !
Just wanted, to give you a heads up, that we've made a few improvements to the ThemeProvider.
One of them is breaking - before ThemeProvider was populating the className with the theme override to the child element directly, now it always adds a wrapping div element and populates a className there
You can check out corresponding PR here #1870

[Ma1kovich]

Hey,
Thank you for notifying, we will take a look!