diff --git a/apis/nucleus/src/app-theme.js b/apis/nucleus/src/app-theme.js index 62d705fbd..9ce0930a5 100644 --- a/apis/nucleus/src/app-theme.js +++ b/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 diff --git a/apis/nucleus/src/components/listbox/ListBoxInline.jsx b/apis/nucleus/src/components/listbox/ListBoxInline.jsx index 17d6999fa..d061c8682 100644 --- a/apis/nucleus/src/components/listbox/ListBoxInline.jsx +++ b/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 }) { diff --git a/apis/nucleus/src/components/listbox/assets/addListboxTheme.js b/apis/nucleus/src/components/listbox/assets/addListboxTheme.js index cc1a33654..8b8b1495c 100644 --- a/apis/nucleus/src/components/listbox/assets/addListboxTheme.js +++ b/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'), }, }; }; diff --git a/apis/nucleus/src/components/listbox/components/ListBoxSearch.jsx b/apis/nucleus/src/components/listbox/components/ListBoxSearch.jsx index d25752d10..b0154c585 100644 --- a/apis/nucleus/src/components/listbox/components/ListBoxSearch.jsx +++ b/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': { diff --git a/apis/nucleus/src/index.js b/apis/nucleus/src/index.js index e5490c1c0..b5317eb32 100644 --- a/apis/nucleus/src/index.js +++ b/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; diff --git a/apis/theme/src/__tests__/set-theme.test.js b/apis/theme/src/__tests__/set-theme.test.js index 75ea6060a..f703aef5c 100644 --- a/apis/theme/src/__tests__/set-theme.test.js +++ b/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,8 +37,8 @@ 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', () => { @@ -45,8 +46,17 @@ describe('set theme', () => { 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', () => { diff --git a/apis/theme/src/set-theme.js b/apis/theme/src/set-theme.js index ee8e6833d..47b794c0d 100644 --- a/apis/theme/src/set-theme.js +++ b/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) { diff --git a/apis/theme/src/themes/base_inherit.json b/apis/theme/src/themes/base_inherit.json new file mode 100644 index 000000000..c3293d6f3 --- /dev/null +++ b/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" + } + } + } +} diff --git a/test/rendering/listbox/listbox.js b/test/rendering/listbox/listbox.js index 63994aede..e2b0c7768 100644 --- a/test/rendering/listbox/listbox.js +++ b/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); diff --git a/test/rendering/listbox/listbox.spec.js-snapshots/grid-auto-two-rows-js-linux.png b/test/rendering/listbox/listbox.spec.js-snapshots/grid-auto-two-rows-js-linux.png index 556c5d563..99721a46e 100644 Binary files a/test/rendering/listbox/listbox.spec.js-snapshots/grid-auto-two-rows-js-linux.png and b/test/rendering/listbox/listbox.spec.js-snapshots/grid-auto-two-rows-js-linux.png differ diff --git a/test/rendering/listbox/listbox.spec.js-snapshots/grid-one-row-js-linux.png b/test/rendering/listbox/listbox.spec.js-snapshots/grid-one-row-js-linux.png index 120e2c701..98f023d05 100644 Binary files a/test/rendering/listbox/listbox.spec.js-snapshots/grid-one-row-js-linux.png and b/test/rendering/listbox/listbox.spec.js-snapshots/grid-one-row-js-linux.png differ diff --git a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-basic-linux.png b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-basic-linux.png index b8ca0eca7..7e97cbd9b 100644 Binary files a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-basic-linux.png and b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-basic-linux.png differ diff --git a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-detached-toolbar-linux.png b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-detached-toolbar-linux.png index 63d094269..bc76e1783 100644 Binary files a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-detached-toolbar-linux.png and b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-detached-toolbar-linux.png differ diff --git a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-key-scroll-linux.png b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-key-scroll-linux.png index bfdcdde85..67f9b3b27 100644 Binary files a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-key-scroll-linux.png and b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-key-scroll-linux.png differ diff --git a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-no-toolbar-linux.png b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-no-toolbar-linux.png index a949ac573..47364699b 100644 Binary files a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-no-toolbar-linux.png and b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-no-toolbar-linux.png differ diff --git a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-search-B-linux.png b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-search-B-linux.png index dd4fadd20..198e0f719 100644 Binary files a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-search-B-linux.png and b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-search-B-linux.png differ diff --git a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-select-EH-linux.png b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-select-EH-linux.png index 040a46b85..9aa2fdc57 100644 Binary files a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-select-EH-linux.png and b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-select-EH-linux.png differ diff --git a/test/rendering/listbox/listbox.spec.js-snapshots/locked-states-js-linux.png b/test/rendering/listbox/listbox.spec.js-snapshots/locked-states-js-linux.png index 10e13618d..522744d10 100644 Binary files a/test/rendering/listbox/listbox.spec.js-snapshots/locked-states-js-linux.png and b/test/rendering/listbox/listbox.spec.js-snapshots/locked-states-js-linux.png differ diff --git a/test/rendering/listbox/listbox.spec.js-snapshots/not-locked-states-js-linux.png b/test/rendering/listbox/listbox.spec.js-snapshots/not-locked-states-js-linux.png index 7693111d6..399f48ec6 100644 Binary files a/test/rendering/listbox/listbox.spec.js-snapshots/not-locked-states-js-linux.png and b/test/rendering/listbox/listbox.spec.js-snapshots/not-locked-states-js-linux.png differ