From 4be9d56e1c0b829670db3dae564c4707a6b0bdb7 Mon Sep 17 00:00:00 2001
From: ilhan <ilhan.myumyun@sap.com>
Date: Thu, 18 Jul 2019 17:36:00 +0300
Subject: [PATCH 1/2] refactor(ui5-calendar): clean up styles

---
 packages/main/src/Calendar.hbs              |  2 +-
 packages/main/src/Calendar.js               | 32 +++++++++---------
 packages/main/src/CalendarHeader.hbs        |  2 +-
 packages/main/src/CalendarHeader.js         | 10 +++---
 packages/main/src/themes/Calendar.css       | 18 +++++------
 packages/main/src/themes/CalendarHeader.css | 36 ++++++++++-----------
 6 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/packages/main/src/Calendar.hbs b/packages/main/src/Calendar.hbs
index 3bfa10ccc136..bb74ae3a3568 100644
--- a/packages/main/src/Calendar.hbs
+++ b/packages/main/src/Calendar.hbs
@@ -11,7 +11,7 @@
 		@ui5-btn2Press="{{_header.onBtn2Press}}"
 	></ui5-calendar-header>
 
-	<div id="{{_id}}-content" class="sapUiCalContent">
+	<div id="{{_id}}-content">
 		<ui5-daypicker
 			id="{{_id}}-daypicker"
 			class="{{classes.dayPicker}}"
diff --git a/packages/main/src/Calendar.js b/packages/main/src/Calendar.js
index 4dc979e6d4a3..b96c7ede2fe0 100644
--- a/packages/main/src/Calendar.js
+++ b/packages/main/src/Calendar.js
@@ -15,11 +15,13 @@ import CalendarHeader from "./CalendarHeader.js";
 import DayPicker from "./DayPicker.js";
 import MonthPicker from "./MonthPicker.js";
 import YearPicker from "./YearPicker.js";
-import CalendarTemplate from "./generated/templates/CalendarTemplate.lit.js";
 
-// default calendar for bundling
+// Default calendar for bundling
 import "@ui5/webcomponents-core/dist/sap/ui/core/date/Gregorian.js";
 
+// Template
+import CalendarTemplate from "./generated/templates/CalendarTemplate.lit.js";
+
 // Styles
 import calendarCSS from "./generated/themes/Calendar.css.js";
 
@@ -30,7 +32,7 @@ const metadata = {
 	tag: "ui5-calendar",
 	properties: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
 		/**
-		 * It's a UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970.
+		 * Defines the UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970.
 		 * @type {Integer}
 		 * @public
 		*/
@@ -39,8 +41,8 @@ const metadata = {
 		},
 
 		/**
-		 * Sets a calendar type used for display.
-		 * If not set, the calendar type of the global configuration is used.
+		 * Defines the calendar type used for display.
+		 * If not defined, the calendar type of the global configuration is used.
 		 * Available options are: "Gregorian", "Islamic", "Japanese", "Buddhist" and "Persian".
 		 * @type {string}
 		 * @public
@@ -50,7 +52,7 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the selected dates as UTC timestamps.
+		 * Defines the selected dates as UTC timestamps.
 		 * @type {Array}
 		 * @public
 		 */
@@ -72,11 +74,9 @@ const metadata = {
 		_yearPicker: {
 			type: Object,
 		},
-
 		_calendarWidth: {
 			type: String,
 		},
-
 		_calendarHeight: {
 			type: String,
 		},
@@ -98,7 +98,8 @@ const metadata = {
 /**
  * @class
  *
- * It can be used for a date picker.
+ * The <code>ui5-calendar</code> can be used standale to display the years, months, weeks and days,
+ * but the main purpose of the <code>ui5-calendar</code> is to be used within a <code>ui5-datepicker</code>.
  *
  * @constructor
  * @author SAP SE
@@ -434,7 +435,7 @@ class Calendar extends UI5Element {
 		this._monthPicker._hidden = false;
 		this._oMonth._hidden = true;
 
-		const calendarRect = this.shadowRoot.querySelector(".sapUiCal").getBoundingClientRect();
+		const calendarRect = this.shadowRoot.querySelector(".ui5-cal-root").getBoundingClientRect();
 
 		this._calendarWidth = calendarRect.width.toString();
 		this._calendarHeight = calendarRect.height.toString();
@@ -449,7 +450,7 @@ class Calendar extends UI5Element {
 		this._yearPicker._hidden = false;
 		this._oMonth._hidden = true;
 
-		const calendarRect = this.shadowRoot.querySelector(".sapUiCal").getBoundingClientRect();
+		const calendarRect = this.shadowRoot.querySelector(".ui5-cal-root").getBoundingClientRect();
 
 		this._calendarWidth = calendarRect.width.toString();
 		this._calendarHeight = calendarRect.height.toString();
@@ -484,17 +485,16 @@ class Calendar extends UI5Element {
 	get classes() {
 		return {
 			main: {
-				sapUiCal: true,
-				sapUiCalIslamic: this.primaryCalendarType === CalendarType.Islamic,
+				"ui5-cal-root": true,
 			},
 			dayPicker: {
-				"sapWCDayPickerHidden": !this._yearPicker._hidden || !this._monthPicker._hidden,
+				".ui5-daypicker--hidden": !this._yearPicker._hidden || !this._monthPicker._hidden,
 			},
 			yearPicker: {
-				"sapWCYearPickerHidden": this._yearPicker._hidden,
+				"ui5-yearpicker--hidden": this._yearPicker._hidden,
 			},
 			monthPicker: {
-				"sapWCMonthPickerHidden": this._monthPicker._hidden,
+				"ui5-monthpicker--hidden": this._monthPicker._hidden,
 			},
 		};
 	}
diff --git a/packages/main/src/CalendarHeader.hbs b/packages/main/src/CalendarHeader.hbs
index 27191f2ddb16..447150b5e0e9 100644
--- a/packages/main/src/CalendarHeader.hbs
+++ b/packages/main/src/CalendarHeader.hbs
@@ -9,7 +9,7 @@
 		data-sap-cal-head-button="Prev">
 	</ui5-icon>
 
-	<div class="sapWCCalHeadMidButtonContainer">
+	<div class="ui5-calheader-midcontainer">
 		<div
 			id="{{_id}}-btn1"
 			class="{{classes.middleButtons}}"
diff --git a/packages/main/src/CalendarHeader.js b/packages/main/src/CalendarHeader.js
index 68412a35c374..3f8a8a8302da 100644
--- a/packages/main/src/CalendarHeader.js
+++ b/packages/main/src/CalendarHeader.js
@@ -129,15 +129,15 @@ class CalendarHeader extends UI5Element {
 	get classes() {
 		return {
 			main: {
-				sapWCCalHead: true,
-				sapUiSizeCompact: getCompactSize(),
+				"ui5-calheader-root": true,
+				"sapUiSizeCompact": getCompactSize(),
 			},
 			buttons: {
-				sapWCCalHeadArrowButton: true,
+				"ui5-calheader-arrowbtn": true,
 			},
 			middleButtons: {
-				sapWCCalHeadMiddleButton: true,
-				sapWCCalHeadArrowButton: true,
+				"ui5-calheader-middlebtn": true,
+				"ui5-calheader-arrowbtn": true,
 			},
 		};
 	}
diff --git a/packages/main/src/themes/Calendar.css b/packages/main/src/themes/Calendar.css
index 0a2ff59ec27f..25832416b810 100644
--- a/packages/main/src/themes/Calendar.css
+++ b/packages/main/src/themes/Calendar.css
@@ -1,23 +1,23 @@
-ui5-calendar {
+:host {
 	display: inline-block;
 }
 
-:host(ui5-calendar) {
+ui5-calendar {
 	display: inline-block;
 }
 
-.sapWCYearPickerHidden,
-.sapWCMonthPickerHidden,
-.sapWCDayPickerHidden {
+.ui5-yearpicker--hidden,
+.ui5-monthpicker--hidden,
+.ui5-daypicker--hidden {
 	display: none;
 }
 
-.sapUiCal {
+.ui5-cal-root {
 	background: var(--sapUiListBackground);
 }
 
-.sapUiCal ui5-daypicker,
-.sapUiCal ui5-month-picker,
-.sapUiCal ui5-yearpicker {
+.ui5-cal-root ui5-daypicker,
+.ui5-cal-root ui5-month-picker,
+.ui5-cal-root ui5-yearpicker {
 	vertical-align: top;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/CalendarHeader.css b/packages/main/src/themes/CalendarHeader.css
index ad6bd728310a..1ecf7ae4b830 100644
--- a/packages/main/src/themes/CalendarHeader.css
+++ b/packages/main/src/themes/CalendarHeader.css
@@ -1,4 +1,4 @@
-:host(ui5-calendar-header) {
+:host {
 	display: inline-block;
 	width: 100%;
 }
@@ -8,18 +8,18 @@ ui5-calendar-header {
 	width: 100%;
 }
 
-.sapWCCalHead {
+.ui5-calheader-root {
 	display: flex;
 	height: 3rem;
 	padding: 0.25rem 0;
 	box-sizing: border-box;
 }
 
-.sapWCCalHead ui5-button {
+.ui5-calheader-root ui5-button {
 	height: 100%;
 }
 
-.sapWCCalHeadArrowButton {
+.ui5-calheader-arrowbtn {
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -33,38 +33,38 @@ ui5-calendar-header {
 	font-size: var(--sapMFontMediumSize);
 }
 
-.sapWCCalHeadArrowButton:focus {
+.ui5-calheader-arrowbtn:focus {
 	outline: none;
 }
 
-.sapWCCalHeadArrowButton:hover {
+.ui5-calheader-arrowbtn:hover {
 	background-color: var(--sapUiButtonHoverBackground);
 	color: var(--sapUiButtonHoverTextColor);
 }
 
-.sapWCCalHeadArrowButton:active {
+.ui5-calheader-arrowbtn:active {
 	background-color: var(--sapUiButtonActiveBackground);
 	color: var(--sapUiButtonActiveTextColor);
 }
 
-.sapWCCalHeadArrowButton,
-.sapWCCalHeadMiddleButton {
+.ui5-calheader-arrowbtn,
+.ui5-calheader-middlebtn {
 	border: var(--_ui5_calendar_header_arrow_button_border);
 	border-radius: var(--_ui5_calendar_header_arrow_button_border_radius);
 }
 
-.sapWCCalHeadMidButtonContainer {
+.ui5-calheader-midcontainer {
 	display: flex;
 	justify-content: space-around;
 	flex: 1;
 	padding: 0 0.5rem;
 }
 
-.sapWCCalHeadMidButtonContainer .sapWCCalHeadMiddleButton:first-child {
+.ui5-calheader-midcontainer .ui5-calheader-middlebtn:first-child {
 	margin-right: 0.5rem;
 }
 
-.sapWCCalHeadMiddleButton {
+.ui5-calheader-middlebtn {
 	font-family: var(--sapUiFontFamily);
 	width: var(--_ui5_calendar_header_middle_button_width);
 	flex: var(--_ui5_calendar_header_middle_button_flex);
@@ -76,12 +76,12 @@ ui5-calendar-header {
 	user-select: none;
 }
 
-.sapWCCalHeadMiddleButton:focus {
+.ui5-calheader-middlebtn:focus {
 	border: var(--_ui5_calendar_header_middle_button_focus_border);
 	border-radius: var(--_ui5_calendar_header_middle_button_focus_border_radius);
 }
 
-.sapWCCalHeadMiddleButton:focus::after {
+.ui5-calheader-middlebtn:focus::after {
 	content: "";
 	display: var(--_ui5_calendar_header_middle_button_focus_after_display);
 	width: var(--_ui5_calendar_header_middle_button_focus_after_width);
@@ -92,20 +92,20 @@ ui5-calendar-header {
 	left: var(--_ui5_calendar_header_middle_button_focus_after_left_offset);
 }
 
-.sapWCCalHeadMiddleButton:focus:active::after {
+.ui5-calheader-middlebtn:focus:active::after {
 	border-color: var(--sapUiContentContrastFocusColor);
 }
 
-.sapUiSizeCompact.sapWCCalHead {
+.sapUiSizeCompact.ui5-calheader-root {
 	height: 2rem;
 	padding: 0;
 }
 
-.sapUiSizeCompact.sapWCCalHeadArrowButton {
+.sapUiSizeCompact .ui5-calheader-arrowbtn {
 	width: 2rem;
 }
 
-[dir=rtl] .sapWCCalHeadMidButtonContainer .sapWCCalHeadMiddleButton:first-child {
+[dir=rtl] .ui5-calheader-root-midcontainer .ui5-calheader-middlebtn:first-child {
 	margin-left: 0.5rem;
 	margin-right: 0;
 }

From 7e67fb4d655a0658b3368da75c9a9a615e742b3d Mon Sep 17 00:00:00 2001
From: ilhan <ilhan.myumyun@sap.com>
Date: Tue, 23 Jul 2019 13:06:49 +0300
Subject: [PATCH 2/2] add pointer-events:none to ui5-icon

---
 packages/main/src/themes/CalendarHeader.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/main/src/themes/CalendarHeader.css b/packages/main/src/themes/CalendarHeader.css
index 81a7f1410df6..b6bef2fc8eb4 100644
--- a/packages/main/src/themes/CalendarHeader.css
+++ b/packages/main/src/themes/CalendarHeader.css
@@ -50,6 +50,7 @@
 
 .ui5-calheader-arrowicon {
 	color: currentColor;
+	pointer-events: none;
 }
 
 .ui5-calheader-midcontainer {