refactor(ui5-calendar): clean up styles

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

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

packages/main/src/CalendarHeader.hbs

@@ -1,24 +1,24 @@
 <div
-	class="{{classes.main}}"
+	class="ui5-calheader-root"
 	dir="{{rtl}}"
 >
 	<div
 		id="{{_id}}-btnPrev"
-		class="{{classes.buttons}}"
+		class="ui5-calheader-arrowbtn"
 		@click={{_handlePrevPress}}
 		data-sap-cal-head-button="Prev"
 	>
 		<ui5-icon
-			class="sapWCCalHeadArrowIcon"
+			class="ui5-calheader-arrowicon"
 			src="{{_btnPrev.icon}}"
 		>
 		</ui5-icon>
 	</div>
 
-	<div class="sapWCCalHeadMidButtonContainer">
+	<div class="ui5-calheader-midcontainer">
 		<div
 			id="{{_id}}-btn1"
-			class="{{classes.middleButtons}}"
+			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
 			type="{{_btn1.type}}"
 			tabindex="0"
 			@click={{_showMonthPicker}}
@@ -29,7 +29,7 @@
 
 		<div
 			id="{{_id}}-btn2"
-			class="{{classes.middleButtons}}"
+			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
 			type="{{_btn2.type}}"
 			tabindex="0"
 			@click={{_showYearPicker}}
@@ -40,13 +40,13 @@
 	</div>
 
 	<div
-		class="{{classes.buttons}}"
+		class="ui5-calheader-arrowbtn"
 		@click={{_handleNextPress}}
 		id="{{_id}}-btnNext"
 		data-sap-cal-head-button="Next"
 	>
 		<ui5-icon
-			class="sapWCCalHeadArrowIcon"
+			class="ui5-calheader-arrowicon"
 			src="{{_btnNext.icon}}"
 		>
 		</ui5-icon>

packages/main/src/CalendarHeader.js

@@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import getShadowDOMTarget from "@ui5/webcomponents-base/dist/events/getShadowDOMTarget.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
-import { getCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.js";
 import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import "@ui5/webcomponents-base/dist/icons/slim-arrow-left.js";
 import "@ui5/webcomponents-base/dist/icons/slim-arrow-right.js";
@@ -109,22 +108,6 @@ class CalendarHeader extends UI5Element {
 		}
 	}
 
-	get classes() {
-		return {
-			main: {
-				sapWCCalHead: true,
-				sapUiSizeCompact: getCompactSize(),
-			},
-			buttons: {
-				sapWCCalHeadArrowButton: true,
-			},
-			middleButtons: {
-				sapWCCalHeadMiddleButton: true,
-				sapWCCalHeadArrowButton: true,
-			},
-		};
-	}
-
 	get rtl() {
 		return getRTL() ? "rtl" : undefined;
 	}

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

packages/main/src/themes/CalendarHeader.css

@@ -1,39 +1,20 @@
-:host(ui5-calendar-header) {
+:host {
 	display: inline-block;
 	width: 100%;
 }
 
-ui5-calendar-header {
-	display: inline-block;
-	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%;
 }
 
-.sapWCCalHeadArrowIcon {
-	color: var(--sapUiButtonTextColor);
-	width: 1rem;
-	pointer-events: none;	/* enable IE11 to receive :active state on above elements */
-}
-
-.sapWCCalHeadArrowButton:active .sapWCCalHeadArrowIcon {
-	color: var(--sapUiButtonActiveTextColor);
-}
-
-.sapWCCalHeadArrowButton:hover:not(:active) .sapWCCalHeadArrowIcon {
-	color: var(--sapUiButtonHoverTextColor);
-}
-
-.sapWCCalHeadArrowButton {
+.ui5-calheader-arrowbtn {
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -47,38 +28,43 @@ 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-arrowicon {
+	color: currentColor;
+	pointer-events: none;
+}
+
+.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);
@@ -90,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);
@@ -106,20 +92,38 @@ 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 {
+:host([data-ui5-compact-size]) .ui5-calheader-root {
 	height: 2rem;
 	padding: 0;
 }
 
-.sapUiSizeCompact.sapWCCalHeadArrowButton {
+:host([data-ui5-compact-size]) .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;
 }
+
+/* 
+ * IE pair of styles
+ * to be removed later on
+ */
+ui5-calendar-header {
+	display: inline-block;
+	width: 100%;
+}
+
+ui5-calendar-header[data-ui5-compact-size] .ui5-calheader-root {
+	height: 2rem;
+	padding: 0;
+}
+
+ui5-calendar-header[data-ui5-compact-size] .ui5-calheader-arrowbtn {
+	width: 2rem;
+}