fix: fix getting listbox theme (#1156)

* fix: fix getting listbox theme

* fix: add base settings and loadTheme func

* chore: add missing file

* chore: update unit tests

* chore: update baseline

* chore: add more words to long title

* chore: update last baseline

* chore: update last baseline, again

---------

Co-authored-by: caele <tsm@qlik.com>

apis/nucleus/src/app-theme.js

@@ -8,15 +8,18 @@ const timed = (t, v) =>
 
 const LOAD_THEME_TIMEOUT = 5000;
 
-export default function appTheme({ themes = [], root } = {}) {
+export default function appTheme({ themes = [], loadTheme, root } = {}) {
   const wrappedTheme = themeFn();
 
   const setTheme = async (themeId) => {
-    const found = themes.filter((t) => t.id === themeId)[0];
+    let found = themes.filter((t) => t.id === themeId)[0];
     let muiTheme = themeId === 'dark' ? 'dark' : 'light';
+    if (!found && loadTheme) {
+      found = { load: loadTheme };
+    }
     if (found && found.load) {
       try {
-        const raw = await Promise.race([found.load(), timed(LOAD_THEME_TIMEOUT, { __timedOut: true })]);
+        const raw = await Promise.race([found.load(themeId), timed(LOAD_THEME_TIMEOUT, { __timedOut: true })]);
         if (raw.__timedOut) {
           if (__NEBULA_DEV__) {
             console.warn(`Timeout when loading theme '${themeId}'`); // eslint-disable-line no-console

apis/nucleus/src/components/listbox/ListBoxInline.jsx

@@ -58,6 +58,7 @@ const Title = styled(Typography)(({ theme }) => ({
   color: theme.listBox?.title?.main?.color,
   fontSize: theme.listBox?.title?.main?.fontSize,
   fontFamily: theme.listBox?.title?.main?.fontFamily,
+  fontWeight: theme.listBox?.title?.main?.fontWeight || 'bold',
 }));
 
 function ListBoxInline({ options, layout }) {

apis/nucleus/src/components/listbox/assets/addListboxTheme.js

@@ -1,19 +1,20 @@
 const addListboxTheme = (themeApi) => {
-  const getListboxStyle = (prop) => themeApi.getStyle('object', '', `listBox.${prop}`);
+  const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
 
   return {
-    backgroundColor: getListboxStyle('backgroundColor'),
+    backgroundColor: getListboxStyle('', 'backgroundColor'),
     title: {
       main: {
-        color: getListboxStyle('title.main.color'),
-        fontSize: getListboxStyle('title.main.fontSize'),
-        fontFamily: getListboxStyle('title.main.fontFamily'),
+        color: getListboxStyle('title.main', 'color'),
+        fontSize: getListboxStyle('title.main', 'fontSize'),
+        fontFamily: getListboxStyle('title.main', 'fontFamily'),
+        fontWeight: getListboxStyle('title.main', 'fontWeight'),
       },
     },
     content: {
-      color: getListboxStyle('content.color'),
-      fontSize: getListboxStyle('content.fontSize'),
-      fontFamily: getListboxStyle('content.fontFamily'),
+      color: getListboxStyle('content', 'color'),
+      fontSize: getListboxStyle('content', 'fontSize'),
+      fontFamily: getListboxStyle('content', 'fontFamily'),
     },
   };
 };

apis/nucleus/src/components/listbox/components/ListBoxSearch.jsx

@@ -144,6 +144,7 @@ export default function ListBoxSearch({
       sx={[
         {
           border: 'none',
+          fontSize: 14,
           borderRadius: 0,
           backgroundColor: 'transparent',
           '& fieldset': {

apis/nucleus/src/index.js

@@ -124,6 +124,7 @@ const mergeArray = (a1 = [], a2 = []) =>
 const mergeConfigs = (base, c) => ({
   context: mergeObj(base.context, c.context),
   load: c.load || base.load,
+  loadTheme: c.loadTheme || base.loadTheme,
   snapshot: {
     ...(c.snapshot || base.snapshot),
   },
@@ -175,6 +176,7 @@ function nuked(configuration = {}) {
 
     const appTheme = appThemeFn({
       themes: configuration.themes,
+      loadTheme: configuration.loadTheme,
       root,
     });
     currentContext.themeApi = appTheme.externalAPI;

apis/theme/src/__tests__/set-theme.test.js

@@ -3,6 +3,7 @@ import create from '../set-theme';
 import base from '../themes/base.json';
 import light from '../themes/light.json';
 import dark from '../themes/dark.json';
+import baseIn from '../themes/base_inherit.json';
 
 jest.mock('extend');
 jest.mock('../themes/base.json', () => ({
@@ -36,17 +37,26 @@ describe('set theme', () => {
       palettes: {},
     });
 
-    create({}, resolveMock);
-    expect(extendMock.mock.calls[0]).toEqual([true, {}, base, light]);
+    create({ _inherit: false }, resolveMock);
+    expect(extendMock.mock.calls[0]).toEqual([true, {}, base, light, {}]);
   });
 
   test('should extend from dark theme when type is dark', () => {
     extendMock.mockReturnValue({
       palettes: {},
     });
 
-    create({ type: 'dark' }, resolveMock);
-    expect(extendMock.mock.calls[0]).toEqual([true, {}, base, dark]);
+    create({ type: 'dark', _inherit: false }, resolveMock);
+    expect(extendMock.mock.calls[0]).toEqual([true, {}, base, dark, {}]);
+  });
+
+  test('should extend and add base inheritance', () => {
+    extendMock.mockReturnValue({
+      palettes: {},
+    });
+
+    create({}, resolveMock);
+    expect(extendMock.mock.calls[0]).toEqual([true, {}, base, light, baseIn]);
   });
 
   test('should not extend scales and palette arrays', () => {

apis/theme/src/set-theme.js

@@ -1,12 +1,18 @@
+/* eslint no-underscore-dangle:0 */
 import extend from 'extend';
 
 import baseRawJSON from './themes/base.json';
 import lightRawJSON from './themes/light.json';
 import darkRawJSON from './themes/dark.json';
+import baseInheritRawJSON from './themes/base_inherit.json';
 
 export default function setTheme(t, resolve) {
   const colorRawJSON = t.type === 'dark' ? darkRawJSON : lightRawJSON;
-  const root = extend(true, {}, baseRawJSON, colorRawJSON);
+  let baseInherit = baseInheritRawJSON;
+  if (t._inherit === false || t._inherit === 'false') {
+    baseInherit = {};
+  }
+  const root = extend(true, {}, baseRawJSON, colorRawJSON, baseInherit);
   // avoid merging known array objects as it could cause issues if they are of different types (pyramid vs class) or length
   const rawThemeJSON = extend(true, {}, root, { scales: null, palettes: { data: null, ui: null } }, t);
   if (!rawThemeJSON.palettes.data || !rawThemeJSON.palettes.data.length) {

apis/theme/src/themes/base_inherit.json

@@ -0,0 +1,18 @@
+{
+  "object": {
+    "listBox": {
+      "backgroundColor": "#ffffff",
+      "title": {
+        "main": {
+          "color": "#404040",
+          "fontSize": "14px",
+          "fontWeight": "bold"
+        }
+      },
+      "content": {
+        "color": "#404040",
+        "fontSize": "12px"
+      }
+    }
+  }
+}

test/rendering/listbox/listbox.js

@@ -66,7 +66,7 @@
         sc = { toolbar: false };
         break;
       case 'longTitle':
-        sc = { title: 'Alpha long title' };
+        sc = { title: 'Alpha long title that needs more words' };
         break;
       default:
         throw new Error('Invalid test scenario', s);