jprdonnelly/nebula.js
1
0
Fork 0
mirror of https://github.com/qlik-oss/nebula.js.git synced 2025-12-19 17:58:43 -05:00
Code Issues Projects Releases Wiki Activity

feat: add support for disableThemeBorder option (#1735)

Browse Source 
* feat: add support for disableThemeBorder option

* refactor: use object argument
This commit is contained in:
Tobias Linsefors
2025-05-07 13:37:55 +02:00
committed by GitHub
parent 445d6949e7
commit d5742dae8a
4 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apis/nucleus/src/components/Cell.jsx
View File

@@ -368,12 +368,13 @@ const Cell = forwardRef(
const [selections] = useObjectSelections(app, model, [`#${cellElementId}`, '.njs-action-toolbar-popover']); // elements which will not trigger the click out listener
const [hovering, setHover] = useState(false);
const hoveringDebouncer = useRef({ enter: null, leave: null });
const { titleStyles, bgColor, bgImage, border, borderRadius, boxShadow } = useStyling(
const { titleStyles, bgColor, bgImage, border, borderRadius, boxShadow } = useStyling({
layout,
halo.public.theme,
halo.app,
themeName
);
theme: halo.public.theme,
app: halo.app,
themeName,
disableThemeBorder: snOptions?.disableThemeBorder,
});
const focusHandler = useRef({
focusToolbarButton(last) {

6
apis/nucleus/src/hooks/useStyling.js
View File

@@ -35,7 +35,7 @@ const getThemeObjectType = (visualization) => {
return visualization;
};
const useStyling = (layout, theme, app, themeName) => {
const useStyling = ({ layout, theme, app, themeName, disableThemeBorder }) => {
const styling = useMemo(() => {
if (layout && theme) {
const generalComp = layout.components ? layout.components.find((comp) => comp.key === 'general') : null;
@@ -47,13 +47,13 @@ const useStyling = (layout, theme, app, themeName) => {
};
const bgColor = resolveBgColor(generalComp, theme, objectType);
const bgImage = resolveBgImage(generalComp, app);
const border = resolveBorder(generalComp, theme, objectType);
const border = resolveBorder(generalComp, theme, objectType, disableThemeBorder);
const borderRadius = resolveBorderRadius(generalComp, theme, objectType);
const boxShadow = resolveBoxShadow(generalComp, theme, objectType);
return { titleStyles, bgColor, bgImage, border, borderRadius, boxShadow };
}
return {};
}, [layout, theme, app, themeName]);
}, [layout, theme, app, themeName, disableThemeBorder]);
return styling;
};

11
apis/nucleus/src/utils/style/__tests__/styling-props.test.js
View File

@@ -250,6 +250,17 @@ describe('Styling property resolver', () => {
expect(resolveProperty.default).toHaveBeenCalledWith('', 'borderWidth', styleService, objectType);
expect(res).toEqual(undefined);
});
test('should not get border from theme when disableThemeBorder is set', () => {
jest.spyOn(resolveProperty, 'default').mockReturnValue('5px');
jest.spyOn(resolveColor, 'default').mockReturnValue('red');
const disableThemeBorder = true;
const res = resolveBorder(comp, styleService, objectType, disableThemeBorder);
expect(resolveColor.default).toHaveBeenCalledTimes(1);
expect(resolveColor.default).toHaveBeenCalledWith(undefined, '', 'borderColor', styleService, objectType);
expect(resolveProperty.default).toHaveBeenCalledTimes(0);
expect(res).toEqual(undefined);
});
});
describe('resolveBorderRadius', () => {

8
apis/nucleus/src/utils/style/styling-props.js
View File

@@ -94,9 +94,13 @@ export function resolveBgColor(comp, theme, objectType) {
return resolveColor(bgColor?.color, '', 'backgroundColor', theme, objectType);
}
export function resolveBorder(comp, theme, objectType) {
export function resolveBorder(comp, theme, objectType, disableThemeBorder) {
const borderColor = resolveColor(comp?.borderColor, '', 'borderColor', theme, objectType);
const borderWidth = comp?.borderWidth || resolveProperty('', 'borderWidth', theme, objectType);
let borderWidth = comp?.borderWidth;
const shouldGetborderFromTheme = !borderWidth && !disableThemeBorder;
if (shouldGetborderFromTheme) {
borderWidth = resolveProperty('', 'borderWidth', theme, objectType);
}
return borderWidth && borderColor ? `${borderWidth} solid ${borderColor}` : undefined;
}