Skip to content

Commit d972ec2

Browse files
fifoosidfifoosid
authored
chore(ui5-date-picker): rename component (#1801)
1 parent 81d7403 commit d972ec2

34 files changed

+175
-159
lines changed

‎docs/Public Module Imports.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
3232
| Checkbox | `ui5-checkbox` | `import "@ui5/webcomponents/dist/CheckBox.js";` |
3333
| ComboBox | `ui5-combobox` | `import "@ui5/webcomponents/dist/ComboBox.js";` |
3434
| ComboBox Item | `ui5-cb-item` | comes with `ui5-combobox` |
35-
| Date Picker | `ui5-datepicker` | `import "@ui5/webcomponents/dist/DatePicker.js";` |
35+
| Date Picker | `ui5-date-picker` | `import "@ui5/webcomponents/dist/DatePicker.js";` |
3636
| Dialog | `ui5-dialog` | `import "@ui5/webcomponents/dist/Dialog.js";` |
3737
| File Uploader | `ui5-file-uploader` | `import "@ui5/webcomponents/dist/FileUploader.js";` |
3838
| 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
114114
- `ui5-textarea`
115115
- `ui5-checkbox`
116116
- `ui5-radiobutton`
117-
- `ui5-datepicker`
117+
- `ui5-date-picker`
118118
- `ui5-select`
119119

120120
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";
331331
import "@ui5/webcomponents-localization/dist/features/calendar/Persian.js";
332332
```
333333

334-
The `ui5-datepicker` web component supports Gregorian Calendar by default.
334+
The `ui5-date-picker` web component supports Gregorian Calendar by default.
335335

336336
In order to be able to use Buddhist, Islamic, Japanese, or Persian calendar with this web component
337337
(by setting its `primaryCalendarType` property), you should import one or more of the modules above.

‎packages/base/src/UI5Element.js

+7
Original file line numberDiff line numberDiff line change
@@ -938,6 +938,7 @@ class UI5Element extends HTMLElement {
938938
}
939939

940940
const tag = this.getMetadata().getTag();
941+
const altTag = this.getMetadata().getAltTag();
941942

942943
const definedLocally = isTagRegistered(tag);
943944
const definedGlobally = customElements.get(tag);
@@ -948,6 +949,12 @@ class UI5Element extends HTMLElement {
948949
this._generateAccessors();
949950
registerTag(tag);
950951
window.customElements.define(tag, this);
952+
953+
if (altTag && !customElements.get(altTag)) {
954+
class oldClassName extends this {}
955+
registerTag(altTag);
956+
window.customElements.define(altTag, oldClassName);
957+
}
951958
}
952959
return this;
953960
}

‎packages/base/src/UI5ElementMetadata.js

+8
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,14 @@ class UI5ElementMetadata {
4141
return this.metadata.tag;
4242
}
4343

44+
/**
45+
* Used to get the tag we need to register for backwards compatibility
46+
* @public
47+
*/
48+
getAltTag() {
49+
return this.metadata.altTag;
50+
}
51+
4452
/**
4553
* Determines whether a property should have an attribute counterpart
4654
* @public

‎packages/main/README.md

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

‎packages/main/src/Calendar.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ const metadata = {
127127
* @class
128128
*
129129
* The <code>ui5-calendar</code> can be used standale to display the years, months, weeks and days,
130-
* but the main purpose of the <code>ui5-calendar</code> is to be used within a <code>ui5-datepicker</code>.
130+
* but the main purpose of the <code>ui5-calendar</code> is to be used within a <code>ui5-date-picker</code>.
131131
*
132132
* @constructor
133133
* @author SAP SE

‎packages/main/src/DatePicker.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<div
2-
class="ui5-datepicker-root"
2+
class="ui5-date-picker-root"
33
style="{{styles.main}}"
44
@keydown={{_onkeydown}}
55
>
66
<!-- INPUT -->
77
<ui5-input
88
id="{{_id}}-inner"
9-
class="ui5-datepicker-input"
9+
class="ui5-date-picker-input"
1010
placeholder="{{_placeholder}}"
1111
type="{{type}}"
1212
value="{{value}}"

‎packages/main/src/DatePicker.js

+17-16
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm
3535
* @public
3636
*/
3737
const metadata = {
38-
tag: "ui5-datepicker",
38+
tag: "ui5-date-picker",
39+
altTag: "ui5-datepicker",
3940
languageAware: true,
4041
managedSlots: true,
4142
properties: /** @lends sap.ui.webcomponents.main.DatePicker.prototype */ {
@@ -51,7 +52,7 @@ const metadata = {
5152
},
5253

5354
/**
54-
* Defines the value state of the <code>ui5-datepicker</code>.
55+
* Defines the value state of the <code>ui5-date-picker</code>.
5556
* <br><br>
5657
* Available options are:
5758
* <ul>
@@ -129,7 +130,7 @@ const metadata = {
129130
},
130131

131132
/**
132-
* Determines whether the <code>ui5-datepicker</code> is displayed as disabled.
133+
* Determines whether the <code>ui5-date-picker</code> is displayed as disabled.
133134
*
134135
* @type {boolean}
135136
* @defaultvalue false
@@ -140,7 +141,7 @@ const metadata = {
140141
},
141142

142143
/**
143-
* Determines whether the <code>ui5-datepicker</code> is displayed as read-only.
144+
* Determines whether the <code>ui5-date-picker</code> is displayed as read-only.
144145
*
145146
* @type {boolean}
146147
* @defaultvalue false
@@ -152,11 +153,11 @@ const metadata = {
152153

153154
/**
154155
* Defines a short hint, intended to aid the user with data entry when the
155-
* <code>ui5-datepicker</code> has no value.
156+
* <code>ui5-date-picker</code> has no value.
156157
*
157158
* <br><br>
158159
* <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder.
159-
* Passing an empty string as the value of this property will make the <code>ui5-datepicker</code> appear empty - without placeholder or format pattern.
160+
* 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.
160161
*
161162
* @type {string}
162163
* @defaultvalue undefined
@@ -168,15 +169,15 @@ const metadata = {
168169
},
169170

170171
/**
171-
* Determines the name with which the <code>ui5-datepicker</code> will be submitted in an HTML form.
172+
* Determines the name with which the <code>ui5-date-picker</code> will be submitted in an HTML form.
172173
*
173174
* <br><br>
174175
* <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:
175176
* <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
176177
*
177178
* <br><br>
178179
* <b>Note:</b> When set, a native <code>input</code> HTML element
179-
* will be created inside the <code>ui5-datepicker</code> so that it can be submitted as
180+
* will be created inside the <code>ui5-date-picker</code> so that it can be submitted as
180181
* part of an HTML form. Do not use this property unless you need to submit a form.
181182
*
182183
* @type {string}
@@ -203,13 +204,13 @@ const metadata = {
203204

204205
slots: /** @lends sap.ui.webcomponents.main.DatePicker.prototype */ {
205206
/**
206-
* Defines the value state message that will be displayed as pop up under the <code>ui5-datepicker</code>.
207+
* Defines the value state message that will be displayed as pop up under the <code>ui5-date-picker</code>.
207208
* <br><br>
208209
*
209210
* <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.
210211
* <br>
211212
* <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
212-
* when the <code>ui5-datepicker</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
213+
* when the <code>ui5-date-picker</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
213214
* @type {HTMLElement}
214215
* @since 1.0.0-rc.7
215216
* @slot
@@ -231,7 +232,7 @@ const metadata = {
231232
change: {},
232233

233234
/**
234-
* Fired when the value of the <code>ui5-datepicker</code> is changed at each key stroke.
235+
* Fired when the value of the <code>ui5-date-picker</code> is changed at each key stroke.
235236
*
236237
* @event
237238
* @public
@@ -245,8 +246,8 @@ const metadata = {
245246
*
246247
* <h3 class="comment-api-title">Overview</h3>
247248
*
248-
* The <code>ui5-datepicker</code> component provides an input field with assigned calendar which opens on user action.
249-
* The <code>ui5-datepicker</code> allows users to select a localized date using touch,
249+
* The <code>ui5-date-picker</code> component provides an input field with assigned calendar which opens on user action.
250+
* The <code>ui5-date-picker</code> allows users to select a localized date using touch,
250251
* mouse, or keyboard input. It consists of two parts: the date input field and the
251252
* date picker.
252253
*
@@ -273,8 +274,8 @@ const metadata = {
273274
* a valid value string is "2015-07-30" and the same is displayed in the input.
274275
*
275276
* <h3>Keyboard Handling</h3>
276-
* The <code>ui5-datepicker</code> provides advanced keyboard handling.
277-
* If the <code>ui5-datepicker</code> is focused,
277+
* The <code>ui5-date-picker</code> provides advanced keyboard handling.
278+
* If the <code>ui5-date-picker</code> is focused,
278279
* you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys.
279280
* Once the drop-down is opened, you can use the <code>UP</code>, <code>DOWN</code>, <code>LEFT</code>, <code>RIGHT</code> arrow keys
280281
* 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 = {
289290
* @author SAP SE
290291
* @alias sap.ui.webcomponents.main.DatePicker
291292
* @extends sap.ui.webcomponents.base.UI5Element
292-
* @tagname ui5-datepicker
293+
* @tagname ui5-date-picker
293294
* @public
294295
*/
295296
class DatePicker extends UI5Element {

‎packages/main/src/themes/DatePicker.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
display: inline-block;
66
}
77

8-
:host .ui5-datepicker-input {
8+
:host .ui5-date-picker-input {
99
width: 100%;
1010
}

‎packages/main/src/themes/DateTimePicker.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
:host .ui5-datepicker-input {
1+
:host .ui5-date-picker-input {
22
min-width: 15rem;
33
}

‎packages/main/test/pages/Components.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<ui5-button id="btn">Primary button</ui5-button>
2626
<ui5-togglebutton id="toggleBtn">Toggle button</ui5-togglebutton>
2727
<ui5-input id="inp"></ui5-input>
28-
<ui5-datepicker id="dp"></ui5-datepicker>
28+
<ui5-date-picker id="dp"></ui5-date-picker>
2929
<ui5-radiobutton id="radioBtn" text="Option A"></ui5-radiobutton>
3030
<ui5-checkbox id="cb" text="I agree"></ui5-checkbox>
3131
<ui5-switch id="sw"></ui5-switch>
@@ -41,7 +41,7 @@
4141
<ui5-button id="btn2" hidden>Primary button</ui5-button>
4242
<ui5-card id="card2" hidden header-text="Primary card"></ui5-card>
4343
<ui5-checkbox id="cb2" text="I agree" hidden></ui5-checkbox>
44-
<ui5-datepicker id="dp2" hidden></ui5-datepicker>
44+
<ui5-date-picker id="dp2" hidden></ui5-date-picker>
4545
<ui5-icon id="icon2" name="add-equipment" hidden></ui5-icon>
4646
<ui5-input id="inp2" hidden></ui5-input>
4747
<ui5-label id="lbl2" hidden>Hello world</ui5-label>

‎packages/main/test/pages/DatePicker.html

+26-26
Original file line numberDiff line numberDiff line change
@@ -36,86 +36,86 @@
3636
</head>
3737
<body style="background-color: var(--sapBackgroundColor);">
3838
<div style='width:500px;'>
39-
<ui5-datepicker id='ui5-datepicker--startDate'
39+
<ui5-date-picker id='ui5-datepicker--startDate'
4040
placeholder='Delivery Date...'
4141
title='Delivery Date!'>
42-
</ui5-datepicker>
42+
</ui5-date-picker>
4343

44-
<ui5-datepicker id='ui5-datepicker-value-state-message'
44+
<ui5-date-picker id='ui5-datepicker-value-state-message'
4545
placeholder='Delivery Date...'
4646
value-state="Error"
4747
title='Delivery Date!'>
4848
<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>
4949
<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>
50-
</ui5-datepicker>
50+
</ui5-date-picker>
5151

5252
<h3>placeholder + title + events</h3>
53-
<ui5-datepicker id='dp5'
53+
<ui5-date-picker id='dp5'
5454
placeholder='Delivery Date...'
5555
title='Delivery Date!'>
56-
</ui5-datepicker>
56+
</ui5-date-picker>
5757
<ui5-label id="lblChange">change: N/A</ui5-label><br/>
5858
<ui5-label id="lblLiveChange">input: N/A</ui5-label><br/>
5959

6060
<h3>format-pattern - 'short'</h3>
61-
<ui5-datepicker id='dp6' format-pattern='short'></ui5-datepicker>
61+
<ui5-date-picker id='dp6' format-pattern='short'></ui5-date-picker>
6262

6363
<h3>format-pattern - 'long'</h3>
64-
<ui5-datepicker id='dp7' format-pattern='long'></ui5-datepicker>
64+
<ui5-date-picker id='dp7' format-pattern='long'></ui5-date-picker>
6565

6666
<h3>format-pattern - 'QQQ yyyy, MMM dd'</h3>
67-
<ui5-datepicker id='dp8' format-pattern='QQQ yyyy, MMM dd'></ui5-datepicker>
67+
<ui5-date-picker id='dp8' format-pattern='QQQ yyyy, MMM dd'></ui5-date-picker>
6868

6969
<h3>format-pattern - 'EEE, M/d/yyyy'</h3>
70-
<ui5-datepicker id='dp9'format-pattern='EEE, M/d/yyyy'></ui5-datepicker>
70+
<ui5-date-picker id='dp9'format-pattern='EEE, M/d/yyyy'></ui5-date-picker>
7171

7272
<h3>Try the value - 'today'</h3>
73-
<ui5-datepicker id='dp10'></ui5-datepicker>
73+
<ui5-date-picker id='dp10'></ui5-date-picker>
7474

7575
<h3>Value is set using Java Script Date object</h3>
76-
<ui5-datepicker id="dp11" value="11/11/2018" format-pattern="long"></ui5-datepicker>
76+
<ui5-date-picker id="dp11" value="11/11/2018" format-pattern="long"></ui5-date-picker>
7777
<ui5-button id="b1" design="Default">Set date</ui5-button>
7878

7979
<h3>disabled</h3>
80-
<ui5-datepicker id='dp2' value='11/11/2018' disabled></ui5-datepicker>
80+
<ui5-date-picker id='dp2' value='11/11/2018' disabled></ui5-date-picker>
8181

8282
<h3>readonly</h3>
83-
<ui5-datepicker id='dp3' placeholder='Delivery Date...' readonly></ui5-datepicker>
83+
<ui5-date-picker id='dp3' placeholder='Delivery Date...' readonly></ui5-date-picker>
8484

8585
<h3>islamic calendar type</h3>
86-
<ui5-datepicker primary-calendar-type='Islamic'></ui5-datepicker>
86+
<ui5-date-picker primary-calendar-type='Islamic'></ui5-date-picker>
8787

8888
<h3>buddhist calendar type</h3>
89-
<ui5-datepicker primary-calendar-type='Buddhist'></ui5-datepicker>
89+
<ui5-date-picker primary-calendar-type='Buddhist'></ui5-date-picker>
9090

9191
<h3>japanese calendar type</h3>
92-
<ui5-datepicker primary-calendar-type='Japanese'></ui5-datepicker>
92+
<ui5-date-picker primary-calendar-type='Japanese'></ui5-date-picker>
9393

9494
<h3>explicitly set empty placeholder</h3>
95-
<ui5-datepicker placeholder=""></ui5-datepicker>
95+
<ui5-date-picker placeholder=""></ui5-date-picker>
9696

9797
<h3>Date picker with min and max date 9/1/2019 - 11/1/2019</h3>
98-
<ui5-datepicker id="dp33" min-date="9/1/2019" max-date="11/1/2019" format-pattern="dd/MM/yyyy"></ui5-datepicker>
98+
<ui5-date-picker id="dp33" min-date="9/1/2019" max-date="11/1/2019" format-pattern="dd/MM/yyyy"></ui5-date-picker>
9999

100100
<h3>Date picker with only min date 1/1/2000</h3>
101-
<ui5-datepicker id="dp34" min-date="1/1/2000" format-pattern="dd/MM/yyyy"></ui5-datepicker>
101+
<ui5-date-picker id="dp34" min-date="1/1/2000" format-pattern="dd/MM/yyyy"></ui5-date-picker>
102102

103103
<h3>Date picker with only max date date 1/1/2100</h3>
104-
<ui5-datepicker id="dp35" max-date="1/1/2100" format-pattern="dd/MM/yyyy"></ui5-datepicker>
104+
<ui5-date-picker id="dp35" max-date="1/1/2100" format-pattern="dd/MM/yyyy"></ui5-date-picker>
105105

106106
<h3>1 months range</h3>
107-
<ui5-datepicker id="minMax1" min-date="6/1/2020" max-date="25/1/2020" format-pattern="dd/MM/yyyy"></ui5-datepicker>
107+
<ui5-date-picker id="minMax1" min-date="6/1/2020" max-date="25/1/2020" format-pattern="dd/MM/yyyy"></ui5-date-picker>
108108
<h3>2 months range</h3>
109-
<ui5-datepicker id="minMax2" min-date="6/1/2020" max-date="25/3/2020" format-pattern="dd/MM/yyyy"></ui5-datepicker>
109+
<ui5-date-picker id="minMax2" min-date="6/1/2020" max-date="25/3/2020" format-pattern="dd/MM/yyyy"></ui5-date-picker>
110110
<h3>3 months range</h3>
111-
<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>
111+
<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>
112112
<h3>1 year range</h3>
113-
<ui5-datepicker id="minMax4" value="5 Feb 2021" min-date="5 Jan 2020" max-date="5 Jan 2021"></ui5-datepicker>
113+
<ui5-date-picker id="minMax4" value="5 Feb 2021" min-date="5 Jan 2020" max-date="5 Jan 2021"></ui5-date-picker>
114114

115115
<section class="ui5-content-density-compact">
116116
<h3>DatePicker in Compact</h3>
117117
<div>
118-
<ui5-datepicker></ui5-datepicker>
118+
<ui5-date-picker></ui5-date-picker>
119119
</div>
120120
</section>
121121

0 commit comments

Comments
 (0)