diff --git a/packages/atlas-core/CHANGELOG.md b/packages/atlas-core/CHANGELOG.md index c5749c238..a70afd949 100644 --- a/packages/atlas-core/CHANGELOG.md +++ b/packages/atlas-core/CHANGELOG.md @@ -10,6 +10,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - We fixed an issue with radio buttons being distorted in some cases. +### Added + +- We added design properties for combobox to allow usage as language selector. + +### Breaking Changed + +- We added removed language selector widgets from layouts and use combobox widget to support strict mode. + ## [3.19.0] Atlas Core - 2025-9-26 ### Changed diff --git a/packages/atlas-core/package.json b/packages/atlas-core/package.json index bd6755d21..4a5adfb00 100644 --- a/packages/atlas-core/package.json +++ b/packages/atlas-core/package.json @@ -1,7 +1,7 @@ { "name": "atlas-core", "moduleName": "Atlas Core", - "version": "3.20.0", + "version": "3.21.0", "license": "Apache-2.0", "copyright": "© Mendix Technology BV 2024. All rights reserved.", "repository": { @@ -9,13 +9,13 @@ "url": "https://github.com/mendix/atlas.git" }, "marketplace": { - "minimumMXVersion": "10.21.0.64362", + "minimumMXVersion": "10.24.0.73019", "marketplaceId": 117187 }, "testProject": { "githubUrl": "https://github.com/mendix/Atlas-Design-System", "branchName": "lts/10.24", - "mxVersion": "10.21.0.64362" + "mxVersion": "10.24.0.73019" }, "scripts": { "build:module": "ts-node ./scripts/build.ts build", diff --git a/packages/atlas/src/themesource/atlas_core/web/_exclusion-variables-defaults.scss b/packages/atlas/src/themesource/atlas_core/web/_exclusion-variables-defaults.scss index de282b76f..c1fc30db4 100644 --- a/packages/atlas/src/themesource/atlas_core/web/_exclusion-variables-defaults.scss +++ b/packages/atlas/src/themesource/atlas_core/web/_exclusion-variables-defaults.scss @@ -27,6 +27,7 @@ $exclude-button: false; $exclude-button-helpers: false; $exclude-check-box: false; $exclude-check-box-radio-button: false; +$exclude-combobox: false; $exclude-custom-dijit-widget: false; $exclude-custom-switch: false; $exclude-data-grid: false; diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_combobox.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_combobox.scss new file mode 100644 index 000000000..3de4042c1 --- /dev/null +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_combobox.scss @@ -0,0 +1,48 @@ +// +// DISCLAIMER: +// Do not change this file because it is core styling. +// Customizing core files will make updating Atlas much more difficult in the future. +// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. +// + +@mixin combobox() { + /* ========================================================================== + Combobox + + Combobox input field inside form-group with hide-bg class + ========================================================================== */ + .hide-bg.form-group .widget-combobox { + .widget-combobox { + &-input-container { + background-color: transparent; + border: unset; + outline: transparent; + input { + background-color: transparent; + } + } + } + + .form-control{ + &:hover:not(:focus):not([disabled]) { + border-color: transparent; + background-color: transparent; + } + } + + .widget-combobox-icon-container{ + svg{ + fill: var(--cb-text-color); + } + } + } + + .language-selector { + --font-color-contrast: #{$navtopbar-color-active}; + margin-bottom: 0; + + .widget-combobox .widget-combobox-input-container:not(.widget-combobox-input-container-active) .widget-combobox-input { + width: inherit; + } + } +} \ No newline at end of file diff --git a/packages/atlas/src/themesource/atlas_core/web/design-properties.json b/packages/atlas/src/themesource/atlas_core/web/design-properties.json index 91cf67249..9d2f84156 100644 --- a/packages/atlas/src/themesource/atlas_core/web/design-properties.json +++ b/packages/atlas/src/themesource/atlas_core/web/design-properties.json @@ -1423,5 +1423,51 @@ } ] } + ], + "com.mendix.widget.web.combobox.Combobox": [ + { + "name": "Hide background", + "type": "Toggle", + "class": "hide-bg" + }, + { + "name": "Color", + "type": "ColorPicker", + "property": "--cb-text-color", + "options": [ + { + "name": "Header color", + "variable": "--font-color-header" + }, + { + "name": "Detail color", + "variable": "--font-color-detail" + }, + { + "name": "Brand Primary", + "variable": "--brand-primary" + }, + { + "name": "Default", + "variable": "--font-color-default" + }, + { + "name": "Brand Success", + "variable": "--brand-success" + }, + { + "name": "Brand Warning", + "variable": "--brand-warning" + }, + { + "name": "Brand Danger", + "variable": "--brand-danger" + }, + { + "name": "Contrast", + "variable": "--font-color-contrast" + } + ] + } ] } diff --git a/packages/atlas/src/themesource/atlas_core/web/main.scss b/packages/atlas/src/themesource/atlas_core/web/main.scss index b599827e5..f2eac73d3 100644 --- a/packages/atlas/src/themesource/atlas_core/web/main.scss +++ b/packages/atlas/src/themesource/atlas_core/web/main.scss @@ -286,6 +286,11 @@ @include progress(); } +@import "core/widgets/combobox"; +@if not $exclude-combobox { + @include combobox(); +} + @import "core/widgets/progress-bar"; @if not $exclude-progress-bar { @include progress-bar();