[WC-1698]: Replace glyphicons in pluggableWidgets (#504)

Author: rahmanunver

packages/modules/data-widgets/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+-   We replaced glyphicons with internal icons
+
 ## [2.7.2] DataWidgets - 2023-05-02
 
 ### [2.7.1] Datagrid

packages/modules/data-widgets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mendix/data-widgets",
   "moduleName": "Data Widgets",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "license": "Apache-2.0",
   "copyright": "© Mendix Technology BV 2023. All rights reserved.",
   "private": true,

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-filters.scss

@@ -29,6 +29,10 @@ $item-min-height: 32px;
 
     .btn-calendar {
         margin-left: 5px; //Review in atlas, the current date picker is also 5px
+        .button-icon {
+            width: 18px;
+            height: 18px;
+        }
     }
 }
 

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss

@@ -313,6 +313,13 @@ $grid-selected-row-background: $brand-light;
             outline: 1px solid $brand-primary;
         }
     }
+    .pagination-icon {
+        position: relative;
+        top: 4px;
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+    }
 }
 
 /* Column selector for hidable columns outside DG context */

packages/pluggableWidgets/datagrid-date-filter-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+-   We replaced glyphicons with internal icons
+
 ## [2.5.0] - 2023-05-01
 
 ### Fixed

packages/pluggableWidgets/datagrid-date-filter-web/cypress-visual-screenshots/baseline/DataGridDateFilter.spec-dataGridDateFilter-chrome.png

@@ -1,7 +1,7 @@
 {
   "name": "@mendix/datagrid-date-filter-web",
   "widgetName": "DatagridDateFilter",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "",
   "copyright": "© Mendix Technology BV 2023. All rights reserved.",
   "private": true,

packages/pluggableWidgets/datagrid-date-filter-web/cypress-visual-screenshots/baseline/DataGridDateFilter.spec-dataGridDateFilterDatePicker-chrome.png

@@ -0,0 +1,12 @@
+import { createElement } from "react";
+
+export default function CalendarIcon() {
+    return (
+        <svg className="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+            <path
+                fill="currentColor"
+                d="M27,5h-3V3h-4v2H12V3h-4v2h-3c-.55,0-1,.45-1,1V28c0,.55,.45,1,1,1H27c.55,0,1-.45,1-1V6c0-.55-.45-1-1-1ZM12,23h-4v-2h4v2Zm0-5h-4v-2h4v2Zm6,5h-4v-2h4v2Zm0-5h-4v-2h4v2Zm6,0h-4v-2h4v2Zm0-5H8v-2H24v2Z"
+            />
+        </svg>
+    );
+}

packages/pluggableWidgets/datagrid-date-filter-web/package.json

@@ -17,6 +17,7 @@ import { isDate, isValid } from "date-fns";
 import { createPortal } from "react-dom";
 import replaceAllInserter from "string.prototype.replaceall";
 import { doubleMonthOrDayWhenSingle } from "../utils/utils";
+import CalendarIcon from "./CalendarIcon";
 
 export type RangeDateValue = [Date | undefined, Date | undefined];
 
@@ -147,7 +148,7 @@ export const DatePicker = forwardRef(
                         }
                     }}
                 >
-                    <span className="glyphicon glyphicon-calendar" />
+                    <CalendarIcon />
                 </button>
             </Fragment>
         );