Skip to content

feat(ui5-timepicker): implement valuestatemessage slot #1482

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 14, 2020
Merged

feat(ui5-timepicker): implement valuestatemessage slot #1482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7ebc3fb
feat(ui5-timepicker): implement valuestatemessage slot
fifoosid Apr 15, 2020
e9f1b12
Merge branch 'master' into timepicker-valuestatemessage
fifoosid May 5, 2020
d1e4d91
timepicker-valuestatemessage
fifoosid May 5, 2020
23e28f4
add test
fifoosid May 7, 2020
475df2e
fix typo
fifoosid May 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/main/src/TimePicker.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@
@ui5-change="{{_handleInputChange}}"
@ui5-input="{{_handleInputLiveChange}}"
>

{{#if valueStateMessage.length}}
<slot name="valueStateMessage" slot="valueStateMessage"></slot>
{{/if}}

{{#unless readonly}}
<ui5-icon
slot="icon"
Expand Down
22 changes: 19 additions & 3 deletions packages/main/src/TimePicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm
*/
const metadata = {
tag: "ui5-timepicker",
managedSlots: true,
properties: /** @lends sap.ui.webcomponents.main.TimePicker.prototype */ {
/**
* Defines a formatted time value.
Expand Down Expand Up @@ -161,7 +162,22 @@ const metadata = {
},
},
slots: /** @lends sap.ui.webcomponents.main.TimePicker.prototype */ {
//
/**
* Defines the value state message that will be displayed as pop up under the <code>ui5-timepicker</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-timepicker</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
* @type {HTMLElement}
* @since 1.0.0-rc.8
* @slot
* @public
*/
valueStateMessage: {
type: HTMLElement,
},
},
events: /** @lends sap.ui.webcomponents.main.TimePicker.prototype */ {
/**
Expand Down Expand Up @@ -301,12 +317,12 @@ class TimePicker extends UI5Element {
this._initHoursFormatParameters();
}

_handleInputClick() {
async _handleInputClick() {
if (this._isPickerOpen) {
return;
}

const inputField = this._getInputField();
const inputField = await this._getInputField();

if (inputField) {
inputField.select();
Expand Down
7 changes: 7 additions & 0 deletions packages/main/test/pages/TimePicker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,13 @@
<ui5-timepicker id="timepickerEmptyValue"></ui5-timepicker>
<ui5-button id="testBtn">btn for testing</ui5-button>

<br /><br />
<ui5-title>Test valueStateMessage slot</ui5-title>
<ui5-timepicker id="timepickerValueStateMessage" value-state="Error">
<div slot="valueStateMessage" id="customValueStateMessage">Please provide valid value</div>
</ui5-timepicker>
<ui5-button id="testBtn">btn for testing</ui5-button>

<script>
var counter = 0;
timepickerChange.addEventListener("change", function() {
Expand Down
16 changes: 15 additions & 1 deletion packages/main/test/samples/TimePicker.sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,21 @@ <h3>TimePicker with only minutes and seconds</h3>
<ui5-timepicker id="timepicker1" format-pattern="mm:ss"></ui5-timepicker>
</div>
<pre class="prettyprint lang-html"><xmp>
<ui5-timepicker id="timepicker1" format-pattern="mm:ss"></ui5-timepicker>
<ui5-timepicker id="timepicker2" format-pattern="mm:ss"></ui5-timepicker>
</xmp></pre>
</section>

<section>
<h3>TimePicker with value-state and valueStateMessage</h3>
<div class="snippet">
<ui5-timepicker id="timepicker3" format-pattern="mm:ss" value-state="Error">
<div slot="valueStateMessage">Please provide valid value</div>
</ui5-timepicker>
</div>
<pre class="prettyprint lang-html"><xmp>
<ui5-timepicker id="timepicker3" format-pattern="mm:ss" value-state="Error">
<div slot="valueStateMessage">Please provide valid value</div>
</ui5-timepicker>
</xmp></pre>
</section>

Expand Down
12 changes: 12 additions & 0 deletions packages/main/test/specs/TimePicker.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,18 @@ describe("TimePicker general interaction", () => {
assert.strictEqual(timepicker.shadow$("ui5-input").getProperty("valueState"), "Error", "The value state is on error");
});

it("tests valueStateMessage slot", () => {
const timepicker = browser.$("#timepickerValueStateMessage");

timepicker.click();

const inputId = timepicker.shadow$("ui5-input").getProperty("_id");
const inputStaticAreaItem = browser.$(`.${inputId}`);
const slot = inputStaticAreaItem.shadow$("ui5-popover").$("#customValueStateMessage");

assert.notOk(slot.error, "cValue State message slot is working");
});

it("tests value state", () => {
const timepicker = browser.$("#timepickerEmptyValue");
const button = browser.$("#testBtn");
Expand Down