Skip to content

Commit fcb2e9e

Browse files
fifoosidfifoosid
authored
chore(ui5-time-picker): rename component (#1802)
1 parent d972ec2 commit fcb2e9e

11 files changed

+74
-73
lines changed

‎docs/Public Module Imports.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
6363
| Table Row | `ui5-table-row` | `import "@ui5/webcomponents/dist/TableRow.js";` |
6464
| Table Cell | `ui5-table-cell` | `import "@ui5/webcomponents/dist/TableCell.js";` |
6565
| Textarea | `ui5-textarea` | `import "@ui5/webcomponents/dist/TextArea.js";` |
66-
| TimePicker | `ui5-timepicker` | `import "@ui5/webcomponents/dist/TimePicker.js";` |
66+
| TimePicker | `ui5-time-picker` | `import "@ui5/webcomponents/dist/TimePicker.js";` |
6767
| Timeline | `ui5-timeline` | `import "@ui5/webcomponents/dist/Timeline.js";` |
6868
| Timeline Item | `ui5-timeline-item` | comes with `ui5-timeline` |
6969
| Title | `ui5-title` | `import "@ui5/webcomponents/dist/Title.js";` |

‎packages/main/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
4949
| Table Row | `ui5-table-row` | `import "@ui5/webcomponents/dist/TableRow.js";` |
5050
| Table Cell | `ui5-table-cell` | `import "@ui5/webcomponents/dist/TableCell.js";` |
5151
| Textarea | `ui5-textarea` | `import "@ui5/webcomponents/dist/TextArea.js";` |
52-
| TimePicker | `ui5-timepicker` | `import "@ui5/webcomponents/dist/TimePicker.js";` |
52+
| TimePicker | `ui5-time-picker` | `import "@ui5/webcomponents/dist/TimePicker.js";` |
5353
| Timeline | `ui5-timeline` | `import "@ui5/webcomponents/dist/Timeline.js";` |
5454
| Timeline Item | `ui5-timeline-item` | comes with ui5-timeline |
5555
| Title | `ui5-title` | `import "@ui5/webcomponents/dist/Title.js";` |

‎packages/main/src/TimePicker.hbs

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div id="{{this._id}}" class="ui5-timepicker-root" @keydown="{{_ontimepickerkeydown}}">
1+
<div id="{{this._id}}" class="ui5-time-picker-root" @keydown="{{_ontimepickerkeydown}}">
22
<ui5-input
33
id="{{_id}}-inner"
44
value="{{value}}"
@@ -9,7 +9,7 @@
99
@click="{{_handleInputClick}}"
1010
@ui5-change="{{_handleInputChange}}"
1111
@ui5-input="{{_handleInputLiveChange}}"
12-
class="ui5-timepicker-input"
12+
class="ui5-time-picker-input"
1313
>
1414

1515
{{#if valueStateMessage.length}}
@@ -25,7 +25,7 @@
2525
@click="{{togglePicker}}"
2626
input-icon
2727
?pressed="{{_isPickerOpen}}"
28-
class="ui5-timepicker-input-icon-button"
28+
class="ui5-time-picker-input-icon-button"
2929
></ui5-icon>
3030
{{/unless}}
3131
</ui5-input>

‎packages/main/src/TimePicker.js

+21-20
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,8 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm
4949
* @public
5050
*/
5151
const metadata = {
52-
tag: "ui5-timepicker",
52+
tag: "ui5-time-picker",
53+
altTag: "ui5-timepicker",
5354
languageAware: true,
5455
managedSlots: true,
5556
properties: /** @lends sap.ui.webcomponents.main.TimePicker.prototype */ {
@@ -67,11 +68,11 @@ const metadata = {
6768

6869
/**
6970
* Defines a short hint, intended to aid the user with data entry when the
70-
* <code>ui5-timepicker</code> has no value.
71+
* <code>ui5-time-picker</code> has no value.
7172
*
7273
* <br><br>
7374
* <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder.
74-
* Passing an empty string as the value of this property will make the <code>ui5-timepicker</code> appear empty - without placeholder or format pattern.
75+
* Passing an empty string as the value of this property will make the <code>ui5-time-picker</code> appear empty - without placeholder or format pattern.
7576
*
7677
* @type {string}
7778
* @defaultvalue undefined
@@ -99,7 +100,7 @@ const metadata = {
99100
},
100101

101102
/**
102-
* Defines the value state of the <code>ui5-timepicker</code>.
103+
* Defines the value state of the <code>ui5-time-picker</code>.
103104
* <br><br>
104105
* Available options are:
105106
* <ul>
@@ -120,7 +121,7 @@ const metadata = {
120121
},
121122

122123
/**
123-
* Determines whether the <code>ui5-timepicker</code> is displayed as disabled.
124+
* Determines whether the <code>ui5-time-picker</code> is displayed as disabled.
124125
*
125126
* @type {boolean}
126127
* @defaultvalue false
@@ -131,7 +132,7 @@ const metadata = {
131132
},
132133

133134
/**
134-
* Determines whether the <code>ui5-timepicker</code> is displayed as readonly.
135+
* Determines whether the <code>ui5-time-picker</code> is displayed as readonly.
135136
*
136137
* @type {boolean}
137138
* @defaultvalue false
@@ -164,13 +165,13 @@ const metadata = {
164165
},
165166
slots: /** @lends sap.ui.webcomponents.main.TimePicker.prototype */ {
166167
/**
167-
* Defines the value state message that will be displayed as pop up under the <code>ui5-timepicker</code>.
168+
* Defines the value state message that will be displayed as pop up under the <code>ui5-time-picker</code>.
168169
* <br><br>
169170
*
170171
* <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.
171172
* <br>
172173
* <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
173-
* when the <code>ui5-timepicker</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
174+
* when the <code>ui5-time-picker</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
174175
* @type {HTMLElement}
175176
* @since 1.0.0-rc.8
176177
* @slot
@@ -190,7 +191,7 @@ const metadata = {
190191
*/
191192
change: {},
192193
/**
193-
* Fired when the value of the <code>ui5-timepicker</code> is changed at each key stroke.
194+
* Fired when the value of the <code>ui5-time-picker</code> is changed at each key stroke.
194195
*
195196
* @event
196197
* @public
@@ -203,8 +204,8 @@ const metadata = {
203204
* @class
204205
*
205206
* <h3 class="comment-api-title">Overview</h3>
206-
* The <code>ui5-timepicker</code> component provides an input field with assigned sliders which opens on user action.
207-
* The <code>ui5-timepicker</code> allows users to select a localized time using touch,
207+
* The <code>ui5-time-picker</code> component provides an input field with assigned sliders which opens on user action.
208+
* The <code>ui5-time-picker</code> allows users to select a localized time using touch,
208209
* mouse, or keyboard input. It consists of two parts: the time input field and the
209210
* sliders.
210211
*
@@ -217,7 +218,7 @@ const metadata = {
217218
* <br><br>
218219
* When the user makes an entry and chooses the enter key, the sliders shows the corresponding time.
219220
* When the user directly triggers the sliders display, the actual time is displayed.
220-
* For the <code>ui5-timepicker</code>
221+
* For the <code>ui5-time-picker</code>
221222
*
222223
* <h3>Formatting</h3>
223224
*
@@ -238,7 +239,7 @@ const metadata = {
238239
* @author SAP SE
239240
* @alias sap.ui.webcomponents.main.TimePicker
240241
* @extends UI5Element
241-
* @tagname ui5-timepicker
242+
* @tagname ui5-time-picker
242243
* @public
243244
* @since 1.0.0-rc.6
244245
*/
@@ -488,19 +489,19 @@ class TimePicker extends UI5Element {
488489
}
489490

490491
get secondsSlider() {
491-
return this.responsivePopover && this.responsivePopover.querySelector(".ui5-timepicker-seconds-wheelslider");
492+
return this.responsivePopover && this.responsivePopover.querySelector(".ui5-time-picker-seconds-wheelslider");
492493
}
493494

494495
get minutesSlider() {
495-
return this.responsivePopover && this.responsivePopover.querySelector(".ui5-timepicker-minutes-wheelslider");
496+
return this.responsivePopover && this.responsivePopover.querySelector(".ui5-time-picker-minutes-wheelslider");
496497
}
497498

498499
get hoursSlider() {
499-
return this.responsivePopover && this.responsivePopover.querySelector(".ui5-timepicker-hours-wheelslider");
500+
return this.responsivePopover && this.responsivePopover.querySelector(".ui5-time-picker-hours-wheelslider");
500501
}
501502

502503
get periodsSlider() {
503-
return this.responsivePopover && this.responsivePopover.querySelector(".ui5-timepicker-period-wheelslider");
504+
return this.responsivePopover && this.responsivePopover.querySelector(".ui5-time-picker-period-wheelslider");
504505
}
505506

506507
submitPickers() {
@@ -640,11 +641,11 @@ class TimePicker extends UI5Element {
640641
if (isTabNext(e) && e.target === this._slidersDomRefs[this._slidersDomRefs.length - 1]) {
641642
const responsivePopover = await this._getPopover();
642643
e.preventDefault();
643-
responsivePopover.querySelector(".ui5-timepicker-footer").firstElementChild.focus();
644+
responsivePopover.querySelector(".ui5-time-picker-footer").firstElementChild.focus();
644645
} else if (isTabPrevious(e) && e.target === this._slidersDomRefs[0]) {
645646
const responsivePopover = await this._getPopover();
646647
e.preventDefault();
647-
responsivePopover.querySelector(`.ui5-timepicker-footer`).lastElementChild.focus();
648+
responsivePopover.querySelector(`.ui5-time-picker-footer`).lastElementChild.focus();
648649
}
649650
}
650651

@@ -787,7 +788,7 @@ class TimePicker extends UI5Element {
787788
get classes() {
788789
return {
789790
container: {
790-
"ui5-timepicker-sliders-container": true,
791+
"ui5-time-picker-sliders-container": true,
791792
"ui5-phone": isPhone(),
792793
},
793794
};

‎packages/main/src/TimePickerPopover.hbs

+6-6
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
stay-open-on-scroll="{{_respPopover.stayOpenOnScroll}}"
1010
@ui5-after-close="{{_respPopover.afterClose}}"
1111
@ui5-after-open="{{_respPopover.afterOpen}}"
12-
class="ui5-timepicker-popover"
12+
class="ui5-time-picker-popover"
1313
@keydown="{{_ontimepickerpopoverkeydown}}"
1414
@wheel="{{_handleWheel}}"
1515
>
@@ -19,7 +19,7 @@
1919
label = "{{hoursSliderTitle}}"
2020
._items="{{hoursArray}}"
2121
@click="{{handleSliderClicked}}"
22-
class="ui5-timepicker-wheelslider ui5-timepicker-hours-wheelslider"
22+
class="ui5-time-picker-wheelslider ui5-time-picker-hours-wheelslider"
2323
cyclic
2424
></ui5-wheelslider>
2525
{{/if}}
@@ -28,7 +28,7 @@
2828
label = "{{minutesSliderTitle}}"
2929
._items="{{minutesArray}}"
3030
@click="{{handleSliderClicked}}"
31-
class="ui5-timepicker-wheelslider ui5-timepicker-minutes-wheelslider"
31+
class="ui5-time-picker-wheelslider ui5-time-picker-minutes-wheelslider"
3232
cyclic
3333
></ui5-wheelslider>
3434
{{/if}}
@@ -37,7 +37,7 @@
3737
label = "{{secondsSliderTitle}}"
3838
._items="{{secondsArray}}"
3939
@click="{{handleSliderClicked}}"
40-
class="ui5-timepicker-wheelslider ui5-timepicker-seconds-wheelslider"
40+
class="ui5-time-picker-wheelslider ui5-time-picker-seconds-wheelslider"
4141
cyclic
4242
></ui5-wheelslider>
4343
{{/if}}
@@ -47,11 +47,11 @@
4747
value="AM"
4848
._items="{{periodsArray}}"
4949
@click="{{handleSliderClicked}}"
50-
class="ui5-timepicker-wheelslider ui5-timepicker-period-wheelslider"
50+
class="ui5-time-picker-wheelslider ui5-time-picker-period-wheelslider"
5151
></ui5-wheelslider>
5252
{{/if}}
5353
</div>
54-
<div slot="footer" class="ui5-timepicker-footer" @keydown={{_onfooterkeydown}}>
54+
<div slot="footer" class="ui5-time-picker-footer" @keydown={{_onfooterkeydown}}>
5555
<ui5-button id="submit" design="Emphasized" @click="{{submitPickers}}">{{submitButtonLabel}}</ui5-button>
5656
<ui5-button id="close" design="Transparent" @click="{{closePicker}}">{{cancelButtonLabel}}</ui5-button>
5757
</div>

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,21 @@
22
display: inline-block;
33
}
44

5-
:host .ui5-timepicker-input {
5+
:host .ui5-time-picker-input {
66
width: 100%;
77
}
88

9-
.ui5-timepicker-input-icon-button:hover {
9+
.ui5-time-picker-input-icon-button:hover {
1010
cursor: pointer;
1111
background: var(--sapButton_Hover_Background);
1212
}
1313

14-
.ui5-timepicker-input-icon-button:active {
14+
.ui5-time-picker-input-icon-button:active {
1515
background-color: var(--sapButton_Active_Background);
1616
color: var(--sapButton_Active_TextColor);
1717
}
1818

19-
.ui5-timepicker-input-icon-button[pressed] {
19+
.ui5-time-picker-input-icon-button[pressed] {
2020
background-color: var(--sapButton_Active_Background);
2121
color: var(--sapButton_Active_TextColor);
2222
}

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.ui5-timepicker-sliders-container {
1+
.ui5-time-picker-sliders-container {
22
display: flex;
33
justify-content: center;
44
align-items: stretch;
@@ -8,23 +8,23 @@
88
box-sizing: border-box;
99
}
1010

11-
.ui5-timepicker-sliders-container.ui5-phone{
11+
.ui5-time-picker-sliders-container.ui5-phone{
1212
height: 90vh;
1313
}
1414

15-
.ui5-timepicker-footer {
15+
.ui5-time-picker-footer {
1616
height: fit-content;
1717
display: flex;
1818
justify-content: flex-end;
1919
width: 100%;
2020
}
2121

22-
.ui5-timepicker-wheelslider {
22+
.ui5-time-picker-wheelslider {
2323
padding-left: 0.25rem;
2424
padding-right: 0.25rem;
2525
}
2626

27-
.ui5-timepicker-footer > ui5-button {
27+
.ui5-time-picker-footer > ui5-button {
2828
margin: 1%;
2929
min-width: 20%;
3030
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,7 @@
338338

339339
<section style="display: flex;flex-direction: row; justify-content: space-around">
340340
<ui5-duration-picker value="05:10:02" seconds-step="5" id="duration-picker6"></ui5-duration-picker>
341-
<ui5-timepicker></ui5-timepicker>
341+
<ui5-time-picker></ui5-time-picker>
342342
</section>
343343

344344
<section class="row">

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

+12-12
Original file line numberDiff line numberDiff line change
@@ -20,39 +20,39 @@
2020

2121
</head>
2222
<body style="background-color: var(--sapBackgroundColor);">
23-
<ui5-timepicker id="timepicker" format-pattern="HH:mm:ss"></ui5-timepicker>
24-
<ui5-timepicker id="timepicker2" format-pattern="hh:mm:ss" value=""></ui5-timepicker>
25-
<ui5-timepicker id="timepicker3" format-pattern="hh:mm:ss a"></ui5-timepicker>
26-
<ui5-timepicker id="timepicker4" format-pattern="HH:mm" value="12:05"></ui5-timepicker>
27-
<ui5-timepicker id="timepicker5" format-pattern="hh:mm:ss" value="12:00:01"></ui5-timepicker>
23+
<ui5-time-picker id="timepicker" format-pattern="HH:mm:ss"></ui5-time-picker>
24+
<ui5-time-picker id="timepicker2" format-pattern="hh:mm:ss" value=""></ui5-time-picker>
25+
<ui5-time-picker id="timepicker3" format-pattern="hh:mm:ss a"></ui5-time-picker>
26+
<ui5-time-picker id="timepicker4" format-pattern="HH:mm" value="12:05"></ui5-time-picker>
27+
<ui5-time-picker id="timepicker5" format-pattern="hh:mm:ss" value="12:00:01"></ui5-time-picker>
2828
<br>
29-
<ui5-timepicker style="width:100%"></ui5-timepicker>
29+
<ui5-time-picker style="width:100%"></ui5-time-picker>
3030

3131
<br /><br />
3232
<ui5-title>Test "change" event</ui5-title>
33-
<ui5-timepicker id="timepickerChange" format-pattern="HH:mm" value="12:00"></ui5-timepicker>
33+
<ui5-time-picker id="timepickerChange" format-pattern="HH:mm" value="12:00"></ui5-time-picker>
3434
<ui5-input id="changeResult" value="0"></ui5-input>
3535

3636
<br /><br />
3737
<ui5-title>Test "input" event</ui5-title>
38-
<ui5-timepicker id="timepickerInput"></ui5-timepicker>
38+
<ui5-time-picker id="timepickerInput"></ui5-time-picker>
3939
<ui5-input id="inputResult"></ui5-input>
4040

4141

4242
<br /><br />
4343
<ui5-title>Test empty value</ui5-title>
44-
<ui5-timepicker id="timepickerEmptyValue"></ui5-timepicker>
44+
<ui5-time-picker id="timepickerEmptyValue"></ui5-time-picker>
4545
<ui5-button id="testBtn">btn for testing</ui5-button>
4646

4747
<br /><br />
4848
<ui5-title>Test set time value</ui5-title>
49-
<ui5-timepicker id="timepickerSetTime" value=""></ui5-timepicker>
49+
<ui5-time-picker id="timepickerSetTime" value=""></ui5-time-picker>
5050
<ui5-button id="setTimeButton">Set time</ui5-button>
5151

5252
<ui5-title>Test valueStateMessage slot</ui5-title>
53-
<ui5-timepicker id="timepickerValueStateMessage" value-state="Error">
53+
<ui5-time-picker id="timepickerValueStateMessage" value-state="Error">
5454
<div slot="valueStateMessage" id="customValueStateMessage">Please provide valid value</div>
55-
</ui5-timepicker>
55+
</ui5-time-picker>
5656
<ui5-button id="testBtn">btn for testing</ui5-button>
5757

5858
<script>

0 commit comments

Comments
 (0)