[WC-3178] Update language selector to combobox in atlas 3

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

packages/atlas-core/package.json

@@ -1,21 +1,21 @@
 {
   "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": {
     "type": "git",
     "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",

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;

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;
+        }
+    }
+}

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"
+                }
+            ]
+        }
     ]
 }

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();