chore(ui5-date-picker): rename component (#1801)

docs/Public Module Imports.md

@@ -32,7 +32,7 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
 | Checkbox                 | `ui5-checkbox`       | `import "@ui5/webcomponents/dist/CheckBox.js";`            |
 | ComboBox                 | `ui5-combobox`       | `import "@ui5/webcomponents/dist/ComboBox.js";`            |
 | ComboBox Item            | `ui5-cb-item`        | comes with `ui5-combobox`                                    |
-| Date Picker              | `ui5-datepicker`     | `import "@ui5/webcomponents/dist/DatePicker.js";`          |
+| Date Picker              | `ui5-date-picker`     | `import "@ui5/webcomponents/dist/DatePicker.js";`          |
 | Dialog                   | `ui5-dialog`         | `import "@ui5/webcomponents/dist/Dialog.js";`              |
 | File Uploader            | `ui5-file-uploader`  | `import "@ui5/webcomponents/dist/FileUploader.js";`        |
 | Icon                     | `ui5-icon`           | `import "@ui5/webcomponents/dist/Icon.js";`                |
@@ -114,7 +114,7 @@ If you however need to submit forms, you can import the module above and it will
 - `ui5-textarea`
 - `ui5-checkbox`
 - `ui5-radiobutton`
-- `ui5-datepicker`
+- `ui5-date-picker`
 - `ui5-select`
 
 with functionality, allowing them to be submitted in forms (provided you set their <code>name</code> attribute) just as
@@ -331,7 +331,7 @@ import "@ui5/webcomponents-localization/dist/features/calendar/Japanese.js";
 import "@ui5/webcomponents-localization/dist/features/calendar/Persian.js";
 ```
 
-The `ui5-datepicker` web component supports Gregorian Calendar by default.
+The `ui5-date-picker` web component supports Gregorian Calendar by default.
 
 In order to be able to use Buddhist, Islamic, Japanese, or Persian calendar with this web component
 (by setting its `primaryCalendarType` property), you should import one or more of the modules above.

packages/base/src/UI5Element.js

@@ -938,6 +938,7 @@ class UI5Element extends HTMLElement {
 		}
 
 		const tag = this.getMetadata().getTag();
+		const altTag = this.getMetadata().getAltTag();
 
 		const definedLocally = isTagRegistered(tag);
 		const definedGlobally = customElements.get(tag);
@@ -948,6 +949,12 @@ class UI5Element extends HTMLElement {
 			this._generateAccessors();
 			registerTag(tag);
 			window.customElements.define(tag, this);
+
+			if (altTag && !customElements.get(altTag)) {
+				class oldClassName extends this {}
+				registerTag(altTag);
+				window.customElements.define(altTag, oldClassName);
+			}
 		}
 		return this;
 	}

packages/base/src/UI5ElementMetadata.js

@@ -41,6 +41,14 @@ class UI5ElementMetadata {
 		return this.metadata.tag;
 	}
 
+	/**
+	 * Used to get the tag we need to register for backwards compatibility
+	 * @public
+	 */
+	getAltTag() {
+		return this.metadata.altTag;
+	}
+
 	/**
 	 * Determines whether a property should have an attribute counterpart
 	 * @public

packages/main/README.md

@@ -18,7 +18,7 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
 | Checkbox                 | `ui5-checkbox`       | `import "@ui5/webcomponents/dist/CheckBox.js";`            |
 | ComboBox                 | `ui5-combobox`       | `import "@ui5/webcomponents/dist/ComboBox.js";`            |
 | ComboBox Item            | `ui5-cb-item`        | comes with ui5-combobox                                    |
-| Date Picker              | `ui5-datepicker`     | `import "@ui5/webcomponents/dist/DatePicker.js";`          |
+| Date Picker              | `ui5-date-picker`     | `import "@ui5/webcomponents/dist/DatePicker.js";`          |
 | Dialog                   | `ui5-dialog`         | `import "@ui5/webcomponents/dist/Dialog.js";`              |
 | File Uploader            | `ui5-file-uploader`  | `import "@ui5/webcomponents/dist/FileUploader.js";`        |
 | Icon                     | `ui5-icon`           | `import "@ui5/webcomponents/dist/Icon.js";`                |

packages/main/src/Calendar.js

@@ -127,7 +127,7 @@ const metadata = {
  * @class
  *
  * 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>.
+ * but the main purpose of the <code>ui5-calendar</code> is to be used within a <code>ui5-date-picker</code>.
  *
  * @constructor
  * @author SAP SE

packages/main/src/DatePicker.hbs

@@ -1,12 +1,12 @@
 <div
-		class="ui5-datepicker-root"
+		class="ui5-date-picker-root"
 		style="{{styles.main}}"
 		@keydown={{_onkeydown}}
 >
 	<!-- INPUT -->
 	<ui5-input
 			id="{{_id}}-inner"
-			class="ui5-datepicker-input"
+			class="ui5-date-picker-input"
 			placeholder="{{_placeholder}}"
 			type="{{type}}"
 			value="{{value}}"

packages/main/src/DatePicker.js

@@ -35,7 +35,8 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm
  * @public
  */
 const metadata = {
-	tag: "ui5-datepicker",
+	tag: "ui5-date-picker",
+	altTag: "ui5-datepicker",
 	languageAware: true,
 	managedSlots: true,
 	properties: /** @lends  sap.ui.webcomponents.main.DatePicker.prototype */ {
@@ -51,7 +52,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the value state of the <code>ui5-datepicker</code>.
+		 * Defines the value state of the <code>ui5-date-picker</code>.
 		 * <br><br>
 		 * Available options are:
 		 * <ul>
@@ -129,7 +130,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-datepicker</code> is displayed as disabled.
+		 * Determines whether the <code>ui5-date-picker</code> is displayed as disabled.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -140,7 +141,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-datepicker</code> is displayed as read-only.
+		 * Determines whether the <code>ui5-date-picker</code> is displayed as read-only.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -152,11 +153,11 @@ const metadata = {
 
 		/**
 		 * Defines a short hint, intended to aid the user with data entry when the
-		 * <code>ui5-datepicker</code> has no value.
+		 * <code>ui5-date-picker</code> has no value.
 		 *
 		 * <br><br>
 		 * <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder.
-		 * Passing an empty string as the value of this property will make the <code>ui5-datepicker</code> appear empty - without placeholder or format pattern.
+		 * Passing an empty string as the value of this property will make the <code>ui5-date-picker</code> appear empty - without placeholder or format pattern.
 		 *
 		 * @type {string}
 		 * @defaultvalue undefined
@@ -168,15 +169,15 @@ const metadata = {
 		},
 
 		/**
-		 * Determines the name with which the <code>ui5-datepicker</code> will be submitted in an HTML form.
+		 * Determines the name with which the <code>ui5-date-picker</code> will be submitted in an HTML form.
 		 *
 		 * <br><br>
 		 * <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:
 		 * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
 		 *
 		 * <br><br>
 		 * <b>Note:</b> When set, a native <code>input</code> HTML element
-		 * will be created inside the <code>ui5-datepicker</code> so that it can be submitted as
+		 * will be created inside the <code>ui5-date-picker</code> so that it can be submitted as
 		 * part of an HTML form. Do not use this property unless you need to submit a form.
 		 *
 		 * @type {string}
@@ -203,13 +204,13 @@ const metadata = {
 
 	slots: /** @lends  sap.ui.webcomponents.main.DatePicker.prototype */ {
 		/**
-		 * Defines the value state message that will be displayed as pop up under the <code>ui5-datepicker</code>.
+		 * Defines the value state message that will be displayed as pop up under the <code>ui5-date-picker</code>.
 		 * <br><br>
 		 *
 		 * <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.
 		 * <br>
 		 * <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
-		 * when the <code>ui5-datepicker</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
+		 * when the <code>ui5-date-picker</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
 		 * @type {HTMLElement}
 		 * @since 1.0.0-rc.7
 		 * @slot
@@ -231,7 +232,7 @@ const metadata = {
 		change: {},
 
 		/**
-		 * Fired when the value of the <code>ui5-datepicker</code> is changed at each key stroke.
+		 * Fired when the value of the <code>ui5-date-picker</code> is changed at each key stroke.
 		 *
 		 * @event
 		 * @public
@@ -245,8 +246,8 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>ui5-datepicker</code> component provides an input field with assigned calendar which opens on user action.
- * The <code>ui5-datepicker</code> allows users to select a localized date using touch,
+ * The <code>ui5-date-picker</code> component provides an input field with assigned calendar which opens on user action.
+ * The <code>ui5-date-picker</code> allows users to select a localized date using touch,
  * mouse, or keyboard input. It consists of two parts: the date input field and the
  * date picker.
  *
@@ -273,8 +274,8 @@ const metadata = {
  * a valid value string is "2015-07-30" and the same is displayed in the input.
  *
  * <h3>Keyboard Handling</h3>
- * The <code>ui5-datepicker</code> provides advanced keyboard handling.
- * If the <code>ui5-datepicker</code> is focused,
+ * The <code>ui5-date-picker</code> provides advanced keyboard handling.
+ * If the <code>ui5-date-picker</code> is focused,
  * you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys.
  * Once the drop-down is opened, you can use the <code>UP</code>, <code>DOWN</code>, <code>LEFT</code>, <code>RIGHT</code> arrow keys
  * to navigate through the dates and select one by pressing the <code>Space</code> or <code>Enter</code> keys. Moreover you can
@@ -289,7 +290,7 @@ const metadata = {
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.DatePicker
  * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-datepicker
+ * @tagname ui5-date-picker
  * @public
  */
 class DatePicker extends UI5Element {

packages/main/src/themes/DatePicker.css

@@ -5,6 +5,6 @@
 	display: inline-block;
 }
 
-:host .ui5-datepicker-input {
+:host .ui5-date-picker-input {
 	width: 100%;
 }

packages/main/src/themes/DateTimePicker.css

@@ -1,3 +1,3 @@
-:host .ui5-datepicker-input {
+:host .ui5-date-picker-input {
 	min-width: 15rem;
 }

packages/main/test/pages/Components.html

@@ -25,7 +25,7 @@
 	<ui5-button id="btn">Primary button</ui5-button>
 	<ui5-togglebutton id="toggleBtn">Toggle button</ui5-togglebutton>
 	<ui5-input id="inp"></ui5-input>
-	<ui5-datepicker id="dp"></ui5-datepicker>
+	<ui5-date-picker id="dp"></ui5-date-picker>
 	<ui5-radiobutton id="radioBtn" text="Option A"></ui5-radiobutton>
 	<ui5-checkbox id="cb" text="I agree"></ui5-checkbox>
 	<ui5-switch id="sw"></ui5-switch>
@@ -41,7 +41,7 @@
 	<ui5-button id="btn2" hidden>Primary button</ui5-button>
 	<ui5-card id="card2" hidden header-text="Primary card"></ui5-card>
 	<ui5-checkbox id="cb2" text="I agree" hidden></ui5-checkbox>
-	<ui5-datepicker id="dp2" hidden></ui5-datepicker>
+	<ui5-date-picker id="dp2" hidden></ui5-date-picker>
 	<ui5-icon id="icon2" name="add-equipment" hidden></ui5-icon>
 	<ui5-input id="inp2" hidden></ui5-input>
 	<ui5-label id="lbl2" hidden>Hello world</ui5-label>

packages/main/test/pages/DatePicker.html

@@ -36,86 +36,86 @@
 </head>
 <body style="background-color: var(--sapBackgroundColor);">
 	<div style='width:500px;'>
-		<ui5-datepicker id='ui5-datepicker--startDate'
+		<ui5-date-picker id='ui5-datepicker--startDate'
 			placeholder='Delivery Date...'
 			title='Delivery Date!'>
-		</ui5-datepicker>
+		</ui5-date-picker>
 
-		<ui5-datepicker id='ui5-datepicker-value-state-message'
+		<ui5-date-picker id='ui5-datepicker-value-state-message'
 		placeholder='Delivery Date...'
 		value-state="Error"
 		title='Delivery Date!'>
 			<div slot="valueStateMessage">Information message. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
 			<div slot="valueStateMessage">Information message 2. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
-		</ui5-datepicker>
+		</ui5-date-picker>
 
 		<h3>placeholder + title + events</h3>
-		<ui5-datepicker id='dp5'
+		<ui5-date-picker id='dp5'
 			placeholder='Delivery Date...'
 			title='Delivery Date!'>
-		</ui5-datepicker>
+		</ui5-date-picker>
 		<ui5-label id="lblChange">change: N/A</ui5-label><br/>
 		<ui5-label id="lblLiveChange">input: N/A</ui5-label><br/>
 
 		<h3>format-pattern - 'short'</h3>
-		<ui5-datepicker id='dp6' format-pattern='short'></ui5-datepicker>
+		<ui5-date-picker id='dp6' format-pattern='short'></ui5-date-picker>
 
 		<h3>format-pattern - 'long'</h3>
-		<ui5-datepicker id='dp7' format-pattern='long'></ui5-datepicker>
+		<ui5-date-picker id='dp7' format-pattern='long'></ui5-date-picker>
 
 		<h3>format-pattern - 'QQQ yyyy, MMM dd'</h3>
-		<ui5-datepicker id='dp8' format-pattern='QQQ yyyy, MMM dd'></ui5-datepicker>
+		<ui5-date-picker id='dp8' format-pattern='QQQ yyyy, MMM dd'></ui5-date-picker>
 
 		<h3>format-pattern - 'EEE, M/d/yyyy'</h3>
-		<ui5-datepicker id='dp9'format-pattern='EEE, M/d/yyyy'></ui5-datepicker>
+		<ui5-date-picker id='dp9'format-pattern='EEE, M/d/yyyy'></ui5-date-picker>
 
 		<h3>Try the value - 'today'</h3>
-		<ui5-datepicker id='dp10'></ui5-datepicker>
+		<ui5-date-picker id='dp10'></ui5-date-picker>
 
 		<h3>Value is set using Java Script Date object</h3>
-		<ui5-datepicker id="dp11" value="11/11/2018" format-pattern="long"></ui5-datepicker>
+		<ui5-date-picker id="dp11" value="11/11/2018" format-pattern="long"></ui5-date-picker>
 		<ui5-button id="b1" design="Default">Set date</ui5-button>
 
 		<h3>disabled</h3>
-		<ui5-datepicker id='dp2' value='11/11/2018' disabled></ui5-datepicker>
+		<ui5-date-picker id='dp2' value='11/11/2018' disabled></ui5-date-picker>
 
 		<h3>readonly</h3>
-		<ui5-datepicker id='dp3' placeholder='Delivery Date...' readonly></ui5-datepicker>
+		<ui5-date-picker id='dp3' placeholder='Delivery Date...' readonly></ui5-date-picker>
 
 		<h3>islamic calendar type</h3>
-		<ui5-datepicker primary-calendar-type='Islamic'></ui5-datepicker>
+		<ui5-date-picker primary-calendar-type='Islamic'></ui5-date-picker>
 
 		<h3>buddhist calendar type</h3>
-		<ui5-datepicker primary-calendar-type='Buddhist'></ui5-datepicker>
+		<ui5-date-picker primary-calendar-type='Buddhist'></ui5-date-picker>
 
 		<h3>japanese calendar type</h3>
-		<ui5-datepicker primary-calendar-type='Japanese'></ui5-datepicker>
+		<ui5-date-picker primary-calendar-type='Japanese'></ui5-date-picker>
 
         <h3>explicitly set empty placeholder</h3>
-		<ui5-datepicker placeholder=""></ui5-datepicker>
+		<ui5-date-picker placeholder=""></ui5-date-picker>
 
 		<h3>Date picker with min and max date 9/1/2019 - 11/1/2019</h3>
-		<ui5-datepicker id="dp33" min-date="9/1/2019" max-date="11/1/2019" format-pattern="dd/MM/yyyy"></ui5-datepicker>
+		<ui5-date-picker id="dp33" min-date="9/1/2019" max-date="11/1/2019" format-pattern="dd/MM/yyyy"></ui5-date-picker>
 
 		<h3>Date picker with only min date 1/1/2000</h3>
-		<ui5-datepicker id="dp34" min-date="1/1/2000" format-pattern="dd/MM/yyyy"></ui5-datepicker>
+		<ui5-date-picker id="dp34" min-date="1/1/2000" format-pattern="dd/MM/yyyy"></ui5-date-picker>
 
 		<h3>Date picker with only max date date 1/1/2100</h3>
-		<ui5-datepicker id="dp35" max-date="1/1/2100" format-pattern="dd/MM/yyyy"></ui5-datepicker>
+		<ui5-date-picker id="dp35" max-date="1/1/2100" format-pattern="dd/MM/yyyy"></ui5-date-picker>
 
 		<h3>1 months range</h3>
-		<ui5-datepicker id="minMax1" min-date="6/1/2020" max-date="25/1/2020" format-pattern="dd/MM/yyyy"></ui5-datepicker>
+		<ui5-date-picker id="minMax1" min-date="6/1/2020" max-date="25/1/2020" format-pattern="dd/MM/yyyy"></ui5-date-picker>
 		<h3>2 months range</h3>
-		<ui5-datepicker id="minMax2" min-date="6/1/2020" max-date="25/3/2020" format-pattern="dd/MM/yyyy"></ui5-datepicker>
+		<ui5-date-picker id="minMax2" min-date="6/1/2020" max-date="25/3/2020" format-pattern="dd/MM/yyyy"></ui5-date-picker>
 		<h3>3 months range</h3>
-		<ui5-datepicker id="minMax3" value="5/6/2020" min-date="6/1/2020" max-date="5/1/2021" format-pattern="dd/MM/yyyy"></ui5-datepicker>
+		<ui5-date-picker id="minMax3" value="5/6/2020" min-date="6/1/2020" max-date="5/1/2021" format-pattern="dd/MM/yyyy"></ui5-date-picker>
 		<h3>1 year range</h3>
-		<ui5-datepicker id="minMax4" value="5 Feb 2021" min-date="5 Jan 2020" max-date="5 Jan 2021"></ui5-datepicker>
+		<ui5-date-picker id="minMax4" value="5 Feb 2021" min-date="5 Jan 2020" max-date="5 Jan 2021"></ui5-date-picker>
 
 		<section class="ui5-content-density-compact">
 			<h3>DatePicker in Compact</h3>
 			<div>
-				<ui5-datepicker></ui5-datepicker>
+				<ui5-date-picker></ui5-date-picker>
 			</div>
 		</section>