ROU-12506: Checkbox column not showing the checkboxes (#483)

* Add checkbox appearance styles for dropdowns and data grids to fix the issue where the checkboxes do not appear

* add pseudoelement to overlap the default checkmark to be consistent with the other ones

* fix checkbox pseudoelement to better fit the checkmark

* Update version to 2.21.1 in package.json, DefaultSpecs.js, and Constants.ts

* revert checkboxes colors

Author: OS-giulianasilva

gulp/DefaultSpecs.js

@@ -19,7 +19,7 @@ const constants = {
 
 // Store the default project specifications
 const specs = {
-	version: '2.21.0',
+	version: '2.21.1',
 	name: 'OutSystems DataGrid',
 	description: '',
 	url: 'Website:\n • ' + constants.websiteUrl,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "outsystems-datagrid",
-  "version": "2.21.0",
+  "version": "2.21.1",
   "description": "OutSystems Data Grid for Reactive Web",
   "author": "UI Components Team",
   "license": "BSD-3-Clause",

src/OSFramework/DataGrid/Constants.ts

@@ -1,7 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 namespace OSFramework.DataGrid.Constants {
 	/* OutSystems Data Grid Version */
-	export const OSDataGridVersion = '2.21.0';
+	export const OSDataGridVersion = '2.21.1';
 	/* OutSystems null values */
 	export const OSNullDate = '1900-01-01';
 	export const OSNullDateTime = '1900-01-01T00:00:00';

styles/Grid.css

@@ -102,6 +102,14 @@
 }
 
 /**** OUTSYSTEMSUI OVERRIDES ****/
+.wj-dropdown-panel [type='checkbox']:not(.checkbox),
+.datagrid-container [type='checkbox']:not(.checkbox),
+.column-picker [type='checkbox']:not(.checkbox) {
+    appearance: checkbox;
+    -moz-appearance: checkbox;
+    -webkit-appearance: checkbox;
+}
+
 .wj-dropdown-panel [type='radio']:not(.radio),
 .datagrid-container [type='radio']:not(.radio),
 .column-picker [type='radio']:not(.radio) {
@@ -942,15 +950,10 @@ div[wj-part="ch"]:has(.wj-header.wj-frozen-col) {
 
 /* checklist checkbox */
 .wj-dropdown-panel.wj-control.wj-content.wj-columnfiltereditor .wj-checklist-item .wj-checklist-base {
-    border-color: var(--color-primary);
     height: var(--datagrid-filter-input-size);
     width: var(--datagrid-filter-input-size);
 }
 
-.wj-dropdown-panel.wj-control.wj-content.wj-columnfiltereditor [aria-selected=true] .wj-checklist-item .wj-checklist-base {
-    background: var(--color-primary);
-}
-
 /* checklist item checkbox */
 .wj-dropdown-panel.wj-control.wj-content.wj-columnfiltereditor div[wj-part=div-values] .wj-checklist-item span.wj-checklist-mark {
     top: 55%;