fix: remove the minimum width to truncate text on richcombo select

[diegonvs]

Why?

It was necessary to make texts like: "Headers: First Column" fit inside richcombo select without truncating

Before:

After

[markocikos]

@diegonvs see comment inline.

[markocikos]

Setting width to a fixed value, in my experience, is rarely the best solution. Truncating may happen again in a different locale, and hardcoding large width may look weird and break on small resolutions. It's typically best to have something like 100% width and fixed max-width. Or change layout to flex instead of using floats. Maybe @edalgrin can give us some tips here.

[edalgrin]

@markocikos is right, setting the width to a fixed value might be limiting in other situations, but that's also true for the other proposals. Considering mobile scenarios with width of 320px or select options larger than 130px (due to customizations or translations). Ideally, we shouldn't truncate the select at any point and rather split the toolbar in 2 lines when it reaches the browser (or editor) limit. Another solution would be to group the secondary options inside a new icon on mobile (Lexicon and our Squad were working on an alternative solution for the management-toolbar component but it doesn't seem to be ready yet) so my recommendation is to take the first solution and remove the width value completely. If everything is right we should obtain the desired result by default (POC: https://codepen.io/eduardoallegrini/pen/NWwaKjj)

[diegonvs]

my recommendation is to take the first solution and remove the width value completely

When removing width on small screens it will look like:

[diegonvs]

This solution looks fine but I would hear more from a design perspective.

Calling the lexicon rangers 📞 : @drakonux @emiliano-cicero

[drakonux]

Hello everyone,

We agree with @edalgrin that the first solution is the most feasible.

Some doubts:

• The margin between the left edge and the dropdown / row dropdown must be 8px
• The icon-caret-down-l seems different in the header dropdown to the ones shown for the row/column/cell dropdowns.
• Besides the alloy editor design doesn't show carets for those row/column/cell dropdowns (They could)
• The balloon width doesn't has to reach the right edge.

[diegonvs]

The margin between the left edge and the dropdown / row dropdown must be 8px

The icon-caret-down-l seems different in the header dropdown to the ones shown for the row/column/cell dropdowns.

Besides the alloy editor design doesn't show carets for those row/column/cell dropdowns (They could)

The balloon width doesn't has to reach the right edge.

I spent a time trying to fix these issues and it will take more time than I thought. Can you create more detailed images about the issues and send to me to create new tickets for it?

[drakonux]

I'll create a design ticket for it @diegonvs . However, it would be great to reproduce the actual implementation in my local DXP. Could you give me the steps to get the use case you are fixing?

[diegonvs]

Could you give me the steps to get the use case you are fixing?

For sure.

We can have the easy way[1] and the correct way[2]:
both ways assume that you aren't using liferay running on docker

For 1) *It will not require all the work we should do with [2]

1. gw clean deploy on frontend-editor-sample-ckeditor-web module
2. Go to Page Editor and add a widget called CKEditor Sample on the page
3. See it rendering and open Chrome DevTools
4. Click on the editor area and then click on insert button and create a table from it
5. Search for cke_combo_text inside "Elements" panel (See the attached video)
6. Remove the width property inside it and voìla

Screen.Recording.2022-02-18.at.18.22.58.mov

[diegonvs]

For 2)

1. Clone this repo and fetch this PR
2. Run yarn install inside this repo
3. Run ./ck.sh setup inside this repo
4. Run ./ck.sh build inside this repo

Nice, we have now the artifacts to be updated on DXP.

On DXP side:

1. Go to modules/ folder
2. Run rm -rf node_modules/liferay-ckeditor && cp -R PATH_TO_CLONED_LIFERAY_CKEDITOR node_modules/
3. Navigate to frontend-editor-ckeditor-web module
4. Run gw clean deploy
5. Get back to frontend-editor-ckeditor-sample-web module and gw clean deploy it too
6. Go to Page Editor and add a widget called CKEditor Sample on the page
7. Publish the page and see it working(at least the styles because it will not work completely because you'll need to fetch changes from LPS-146407 Bring table headers functionallity to BalloonEditor liferay-frontend/liferay-portal#1910 and I don't want to add more complexity

[diegonvs]

Notes:

1. We should have control of DXP source code. I can't see it working or how it can be bundled on a docker image for example
2. My dream ™️ is one day have deploy previews as we have on Clay but on DXP side it's impossible and we don't own the tooling of this repo and the code necessary to make BalloonEditor work is distributed between this repo and DXP source code due to other reasons. /cc @markocikos

[markocikos]

LGTM, as a temporary fix.