Upgraded themes do not include CSS files need by the Language Selector

• Type: Bug
• Status: Verified
• Resolution: Unresolved
• Affects Version/s: 7.4.0 CE GA1
• Fix Version/s: None
• Component/s: JS Themes Toolkit > Theme Generator
• Labels: None
• Fix Priority: 3
• Bug Type: Code Upgrade

Summary

The @import lines in the css_portal.scss differ between a new 7.4 theme created using yo and an upgrade 7.3 theme using gulp upgrade. Both are intended to target 7.4. The issue is only visible in themes which include the language selector widget.

Steps to Reproduce

Any 7.3 theme can be used instead of steps 2 and 3

1. Update liferay-theme-tasks to the latest version 

   npm update liferay-theme-tasks

2. Create a new theme based on classic

   yo liferay-theme:classic

   1. Ensure version of Liferay for the theme is 7.3
3. Upgrade the theme using

   gulp upgrade

4. Edit portal_normal.ftl and add the following code. For example, before the <@liferay.user_personal_bar /> line. This assumes there is already a Freemarker assign for the preferences used by the <@liferay.search_bar /> element.

   <div class="autofit-col language-selector mr-1 mr-md-2">
     <@liferay_portlet["runtime"]
           defaultPreferences=preferences
           portletProviderAction=portletProviderAction.VIEW
           portletProviderClassName="com.liferay.portal.kernel.servlet.taglib.ui.LanguageEntry"
     />
   </div>
   

5. Save all changes and build the theme using

   gulp build

6. Deploy the theme to a Liferay 7.4 instance and make it the theme.
7. Click on the language selector

The drop-down area should open next to the button itself rather than pushing the page down.

Root Cause

The issue appears to be a missing overlay class which sets the position of the drop-down area to absolute instead of relative.

The issue can be worked around by updating the _portal.scss to import ./portal/au.scss (this file will need to be copied from another theme, i.e. a newly created 7.4 theme based on classic). However, there are also some other differences in this SCSS file so there may be implications which need a deeper understanding.

I have attached screenshots to help describe the behaviour seen and the workaround, which may not be the correct approach