chore: merge master into main (#1441)

* fix: bgColor with useColorExpression property (#1426)

* chore(deps): bump @adobe/css-tools from 4.3.1 to 4.3.2 (#1421)

Bumps [@adobe/css-tools](https://github.com/adobe/css-tools) from 4.3.1 to 4.3.2.
- [Changelog](https://github.com/adobe/css-tools/blob/main/History.md)
- [Commits](https://github.com/adobe/css-tools/commits)

---
updated-dependencies:
- dependency-name: "@adobe/css-tools"
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): update minor and patch (#1429)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency ws to v8.15.0 (#1430)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update minor and patch (#1431)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(listbox): let color resolver pick up the index instead of hex (#1428)

* fix: enable picking up the index instead of hex

* fix: resolve color picker color in other cases too

* fix: apply backdrop filter

* fix: limit backdrop to when we have a bg image

* test: update bg image

* test: update unit test

* chore(deps): update dependency lerna to v8 (#1416)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update minor and patch (#1433)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency rollup to v4.9.1 (#1435)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix: use 12px as default font size in theme (#1427)

* chore(deps): update github/codeql-action action to v3 (#1434)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(listbox): make search focus border color blue (#1432)

* fix: search focus border color

* test: update tests and snapshots

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Christofer Splittorff <cbt@qlik.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Johan Lahti <johanlahti@users.noreply.github.com>
Co-authored-by: Max Gefvert <max.gefvert@qlik.com>
This commit is contained in:
Tobias Åström
2023-12-21 15:32:17 +01:00
committed by GitHub
parent 47eca51525
commit dc199402b1
23 changed files with 835 additions and 721 deletions

View File

@@ -82,7 +82,7 @@ commands:
jobs:
validate:
docker:
- image: cimg/node:21.2.0
- image: cimg/node:21.4.0
working_directory: ~/project
steps:
- attach_workspace:
@@ -106,7 +106,7 @@ jobs:
build:
docker:
- image: cimg/node:21.2.0
- image: cimg/node:21.4.0
working_directory: ~/project
resource_class: large
@@ -130,7 +130,7 @@ jobs:
test-integration:
docker:
- image: cimg/node:21.2.0
- image: cimg/node:21.4.0
- image: browserless/chrome:1-puppeteer-7.1.0
working_directory: ~/project
@@ -161,7 +161,7 @@ jobs:
test-create:
docker:
- image: cimg/node:21.2.0
- image: cimg/node:21.4.0
- image: browserless/chrome:1-puppeteer-7.1.0
working_directory: ~/project

View File

@@ -13,7 +13,7 @@
"enigma.js": "2.12.0"
},
"devDependencies": {
"@babel/core": "7.23.5",
"@babel/core": "7.23.6",
"parcel": "^2.10.3"
}
}

View File

@@ -42,7 +42,7 @@ jobs:
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@v2
uses: github/codeql-action/init@v3
with:
languages: ${{ matrix.language }}
# If you wish to specify custom queries, you can do so here or in a config file.
@@ -53,7 +53,7 @@ jobs:
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
# If this step fails, then you should remove it and run the build manually (see below)
- name: Autobuild
uses: github/codeql-action/autobuild@v2
uses: github/codeql-action/autobuild@v3
# Command-line programs to run using the OS shell.
# 📚 https://git.io/JvXDl
@@ -67,4 +67,4 @@ jobs:
# make release
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v2
uses: github/codeql-action/analyze@v3

View File

@@ -6,8 +6,8 @@
"devDependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.19",
"@mui/material": "^5.14.19",
"@mui/icons-material": "^5.15.0",
"@mui/material": "^5.15.0",
"@nebula.js/conversion": "^5.0.0-alpha.0",
"@nebula.js/locale": "^5.0.0-alpha.0",
"@nebula.js/supernova": "^5.0.0-alpha.0",

View File

@@ -40,6 +40,10 @@ describe('styling', () => {
},
},
palette: {
divider: '#ccc',
custom: {
focusBorder: 'blue',
},
text: {
primary: 'primary',
},
@@ -146,6 +150,7 @@ describe('styling', () => {
content: {
fontSize: 'size-from-component',
fontColor: {
index: -1,
color: undefined, // <- should not trigger a contrast color
},
useContrastColor: true,
@@ -168,6 +173,7 @@ describe('styling', () => {
content: {
fontSize: 'size-from-component',
fontColor: {
index: -1,
color: 'color-from-component',
},
useContrastColor: false,

View File

@@ -12,7 +12,7 @@ export default function getContainerPadding({ isGridMode, dense, height, layoutO
}
containerPadding = layoutOrder === 'row' ? `${paddingY} 4px` : `${paddingY} 6px ${paddingY} 4px`;
} else {
containerPadding = undefined; // to prevent overriding any default padding
containerPadding = undefined;
}
return containerPadding;
}

View File

@@ -62,23 +62,26 @@ export function getOverridesAsObject(components = []) {
return overrides;
}
function getSelectionColors({ theme, getListboxStyle, overrides, checkboxes }) {
const componentContentTextColor = overrides.theme?.content?.fontColor?.color;
function getSelectionColors({ getColorPickerColor, theme, getListboxStyle, overrides, checkboxes }) {
const componentContentTextColor = overrides.theme?.content?.fontColor;
const desiredTextColor =
componentContentTextColor || getListboxStyle('content', 'color') || theme.palette?.text.primary;
getColorPickerColor(componentContentTextColor) ||
getListboxStyle('content', 'color') ||
theme.palette?.text.primary;
const useContrastTextColor = !checkboxes && (overrides.theme?.content?.useContrastColor ?? true);
// Background colors
const selectionColors = overrides.selections?.colors || {};
const selected = selectionColors.selected?.color || theme.palette?.selected.main || '#009845';
const alternative = selectionColors.alternative?.color || theme.palette?.selected.alternative || '#E4E4E4';
const excluded = selectionColors.excluded?.color || theme.palette?.selected.excluded || '#A9A9A9';
const selected = getColorPickerColor(selectionColors.selected) || theme.palette?.selected.main || '#009845';
const alternative =
getColorPickerColor(selectionColors.alternative) || theme.palette?.selected.alternative || '#E4E4E4';
const excluded = getColorPickerColor(selectionColors.excluded) || theme.palette?.selected.excluded || '#A9A9A9';
const selectedExcluded =
selectionColors.selectedExcluded?.color || theme.palette?.selected.selectedExcluded || '#A9A9A9';
getColorPickerColor(selectionColors.selectedExcluded) || theme.palette?.selected.selectedExcluded || '#A9A9A9';
const possible =
selectionColors.possible?.color ||
getColorPickerColor(selectionColors.possible) ||
getListboxStyle('', 'backgroundColor') ||
theme.palette?.selected.possible ||
'#FFFFFF';
@@ -123,7 +126,7 @@ function getBackgroundColor({ themeApi, themeOverrides }) {
if (bgColor?.useExpression) {
color = resolveBgColor({ bgColor }, themeApi, 'listBox');
} else {
color = themeApi.getColorPickerColor(bgColor, true)?.color;
color = themeApi.getColorPickerColor(bgColor?.color, false);
}
return color;
}
@@ -137,11 +140,12 @@ function getSearchColor(getListboxStyle) {
export default function getStyles({ app, themeApi, theme, components = [], checkboxes = false }) {
const overrides = getOverridesAsObject(components);
const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
const getColorPickerColor = (c) => (c?.index > 0 || c?.color ? themeApi.getColorPickerColor(c, false) : undefined);
const selections = getSelectionColors({ theme, getListboxStyle, overrides, checkboxes });
const selections = getSelectionColors({ getColorPickerColor, theme, getListboxStyle, overrides, checkboxes });
const themeOverrides = overrides.theme || {};
const headerColor = themeOverrides.header?.fontColor?.color || getListboxStyle('title.main', 'color');
const headerColor = getColorPickerColor(themeOverrides.header?.fontColor) || getListboxStyle('title.main', 'color');
const bgComponentColor = getBackgroundColor({ themeApi, themeOverrides });
@@ -199,8 +203,9 @@ export default function getStyles({ app, themeApi, theme, components = [], check
search: {
color: searchColor,
borderColor: theme.palette.divider,
highlightBorderColor: theme.palette.primary.main,
highlightBorderColor: theme.palette.custom.focusBorder,
backgroundColor: searchBgColor,
backdropFilter: 'blur(8px)',
},
selections,
};

View File

@@ -29,6 +29,7 @@ const StyledOutlinedInput = styled(OutlinedInput, {
fontSize: 14,
borderRadius: 0,
backgroundColor: styles.search.backgroundColor,
backdropFilter: styles.background.backgroundImage ? styles.search.backdropFilter : undefined,
paddingLeft: `${CELL_PADDING_LEFT}px`,
flexDirection: isRtl ? 'row-reverse' : 'row',
@@ -37,6 +38,9 @@ const StyledOutlinedInput = styled(OutlinedInput, {
borderWidth: '1px 0 1px 0',
borderRadius: 0,
},
'&.Mui-focused fieldset': {
borderColor: `${styles.search.highlightBorderColor} !important`,
},
'& .MuiInputBase-root': {
...styles.search,
},
@@ -47,9 +51,6 @@ const StyledOutlinedInput = styled(OutlinedInput, {
color: styles.search.color,
textAlign: isRtl ? 'right' : 'left',
},
'&.Mui-focused fieldset.OutlinedInput-notchedOutline': {
borderColor: `${styles.search.highlightBorderColor} !important`,
},
...denseProps,
};
});

View File

@@ -15,7 +15,7 @@ const theme = createTheme('dark');
const create = (comp) => renderer.create(<ThemeProvider theme={theme}>{comp}</ThemeProvider>);
let selections = {};
const styles = { content: {}, header: {}, selections: {}, search: {} };
const styles = { content: {}, header: {}, selections: {}, search: {}, background: {} };
const keyboard = {};

View File

@@ -80,6 +80,16 @@ describe('Styling property resolver', () => {
expect(color).toBe('resolvedColor');
});
test('should resolve background color by expression using useColorExpression property', () => {
jest.spyOn(resolveColor, 'default').mockReturnValue('resolvedColor');
bgCompLayout.bgColor.useColorExpression = true;
bgCompLayout.bgColor.useExpression = false;
const color = resolveBgColor(bgCompLayout, t);
expect(resolveColor.default).toHaveBeenCalledTimes(0);
expect(color).toBe('rgb(255, 0, 0)');
});
test('should resolve background color by theme', () => {
jest.spyOn(resolveColor, 'default').mockReturnValue('resolvedColor');
const color = resolveBgColor({}, t, 'peoplechart');

View File

@@ -87,7 +87,7 @@ export function resolveBgImage(bgComp, app) {
export function resolveBgColor(comp, theme, objectType) {
const bgColor = comp?.bgColor;
if (bgColor && theme) {
if (bgColor.useExpression) {
if (bgColor.useExpression || bgColor.useColorExpression) {
return theme.validateColor(bgColor.colorExpression);
}
}

View File

@@ -1,8 +1,8 @@
{
"module": "esm/index.js",
"peerDependencies": {
"@mui/material": "^5.14.19",
"@mui/icons-material": "^5.14.19",
"@mui/material": "^5.15.0",
"@mui/icons-material": "^5.15.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"react": "^17.0.2 || ^18.1.0",

View File

@@ -46,8 +46,8 @@
"devDependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.19",
"@mui/material": "^5.14.19",
"@mui/icons-material": "^5.15.0",
"@mui/material": "^5.15.0",
"@nebula.js/conversion": "^5.0.0-alpha.0",
"@nebula.js/enigma-mocker": "^5.0.0-alpha.0",
"@nebula.js/locale": "^5.0.0-alpha.0",
@@ -66,7 +66,7 @@
"react-virtualized-auto-sizer": "1.0.20",
"react-window": "1.8.10",
"react-window-infinite-loader": "1.0.9",
"regenerator-runtime": "0.14.0",
"regenerator-runtime": "0.14.1",
"semver": "7.5.4"
}
}

View File

@@ -1,5 +1,5 @@
{
"fontSize": "13px",
"fontSize": "12px",
"fontFamily": "'Source Sans Pro', 'Arial', 'sans-serif'",
"backgroundColor": "transparent",
"dataColors": {

View File

@@ -22,19 +22,19 @@
},
"dependencies": {
"@babel/cli": "7.23.4",
"@babel/core": "7.23.5",
"@babel/core": "7.23.6",
"@babel/plugin-transform-react-jsx": "7.23.4",
"@babel/preset-env": "7.23.5",
"@babel/preset-env": "7.23.6",
"@rollup/plugin-babel": "6.0.4",
"@rollup/plugin-commonjs": "25.0.7",
"@rollup/plugin-json": "6.0.1",
"@rollup/plugin-json": "6.1.0",
"@rollup/plugin-node-resolve": "15.2.3",
"@rollup/plugin-replace": "5.0.5",
"@rollup/plugin-terser": "0.4.4",
"chalk": "4.1.2",
"extend": "3.0.2",
"postcss": "^8.4.32",
"rollup": "4.6.1",
"rollup": "4.9.1",
"rollup-plugin-postcss": "4.0.2",
"rollup-plugin-sourcemaps": "0.6.3",
"yargs": "17.7.2"
@@ -42,6 +42,6 @@
"devDependencies": {
"@rollup/plugin-typescript": "11.1.5",
"tslib": "*",
"typescript": ">=5.3.2"
"typescript": ">=5.3.3"
}
}

View File

@@ -28,8 +28,8 @@
},
"dependencies": {
"@babel/cli": "7.23.4",
"@babel/core": "7.23.5",
"@babel/preset-env": "7.23.5",
"@babel/core": "7.23.6",
"@babel/preset-env": "7.23.6",
"@nebula.js/stardust": "^5.0.0-alpha.0",
"@rollup/plugin-babel": "6.0.4",
"@rollup/plugin-commonjs": "25.0.7",
@@ -39,7 +39,7 @@
"extend": "3.0.2",
"fs-extra": "11.2.0",
"node-event-emitter": "0.0.1",
"rollup": "4.6.1",
"rollup": "4.9.1",
"yargs": "17.7.2"
}
}

View File

@@ -38,23 +38,23 @@
"cross-env": "7.0.3",
"express": "4.18.2",
"extend": "3.0.2",
"html-webpack-plugin": "5.5.3",
"html-webpack-plugin": "5.5.4",
"portfinder": "1.0.32",
"puppeteer": "14.4.1",
"regenerator-runtime": "0.14.0",
"regenerator-runtime": "0.14.1",
"source-map-loader": "4.0.1",
"webpack": "5.89.0",
"webpack-cli": "5.1.4",
"webpack-dev-server": "4.15.1",
"ws": "8.14.2",
"ws": "8.15.1",
"yargs": "17.7.2"
},
"devDependencies": {
"@babel/core": "7.23.5",
"@babel/preset-env": "7.23.5",
"@babel/core": "7.23.6",
"@babel/preset-env": "7.23.6",
"@babel/preset-react": "7.23.3",
"@mui/material": "^5.14.19",
"@mui/system": "^5.14.19",
"@mui/material": "^5.15.0",
"@mui/system": "^5.15.0",
"@nebula.js/enigma-mocker": "^5.0.0-alpha.0",
"@nebula.js/nucleus": "^5.0.0-alpha.0",
"@nebula.js/snapshooter": "^5.0.0-alpha.0",
@@ -67,10 +67,10 @@
"eslint-import-resolver-alias": "1.1.2",
"eslint-import-resolver-webpack": "0.13.8",
"file-loader": "^6.2.0",
"monaco-editor": "0.44.0",
"monaco-editor": "0.45.0",
"monaco-editor-webpack-plugin": "7.1.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-router-dom": "6.20.1"
"react-router-dom": "6.21.0"
}
}

View File

@@ -38,18 +38,18 @@
"devDependencies": {
"@after-work.js/aw": "6.0.14",
"@babel/cli": "7.23.4",
"@babel/core": "7.23.5",
"@babel/core": "7.23.6",
"@babel/helper-plugin-utils": "7.22.5",
"@babel/plugin-proposal-object-rest-spread": "7.20.7",
"@babel/plugin-transform-react-jsx": "7.23.4",
"@babel/preset-env": "7.23.5",
"@babel/preset-env": "7.23.6",
"@babel/preset-react": "7.23.3",
"@commitlint/cli": "18.4.3",
"@commitlint/config-conventional": "18.4.3",
"@playwright/test": "1.40.1",
"@rollup/plugin-babel": "6.0.4",
"@rollup/plugin-commonjs": "25.0.7",
"@rollup/plugin-json": "6.0.1",
"@rollup/plugin-json": "6.1.0",
"@rollup/plugin-node-resolve": "15.2.3",
"@rollup/plugin-replace": "5.0.5",
"@rollup/plugin-terser": "0.4.4",
@@ -62,10 +62,10 @@
"cross-env": "7.0.3",
"css-loader": "6.8.1",
"enigma.js": "2.12.0",
"eslint": "8.55.0",
"eslint": "8.56.0",
"eslint-config-airbnb": "19.0.4",
"eslint-config-prettier": "9.1.0",
"eslint-plugin-import": "2.29.0",
"eslint-plugin-import": "2.29.1",
"eslint-plugin-jest": "^27.6.0",
"eslint-plugin-jsx-a11y": "6.8.0",
"eslint-plugin-mocha": "10.2.0",
@@ -78,23 +78,23 @@
"jest-junit": "^16.0.0",
"jest-location-mock": "^2.0.0",
"jimp": "0.22.10",
"lerna": "7.4.2",
"lerna": "8.0.1",
"lint-staged": "^15.2.0",
"mocha-junit-reporter": "2.2.1",
"picasso-plugin-q": "2.2.5",
"picasso.js": "2.2.5",
"prettier": "3.1.0",
"prettier": "3.1.1",
"puppeteer": "19.11.1",
"qix-faker": "0.3.0",
"rollup": "4.6.1",
"rollup": "4.9.1",
"rollup-plugin-dependency-flow": "0.3.0",
"rollup-plugin-sass": "1.12.21",
"style-loader": "3.3.3",
"whatwg-fetch": "^3.6.19",
"whatwg-fetch": "^3.6.20",
"yargs": "17.7.2"
},
"resolutions": {
"**/caniuse-lite": "1.0.30001565",
"**/caniuse-lite": "1.0.30001570",
"**/react": "18.2.0",
"**/react-dom": "18.2.0",
"**/react-is": "18.2.0",

View File

@@ -10,16 +10,16 @@
"peerDependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.19",
"@mui/material": "^5.14.19",
"@mui/icons-material": "^5.15.0",
"@mui/material": "^5.15.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.19",
"@mui/material": "^5.14.19",
"@mui/icons-material": "^5.15.0",
"@mui/material": "^5.15.0",
"react": "18.2.0",
"react-dom": "18.2.0"
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.7 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.0 KiB

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 65 KiB

1404
yarn.lock

File diff suppressed because it is too large Load Diff