diff --git a/packages/main/cypress/specs/DatePicker.cy.tsx b/packages/main/cypress/specs/DatePicker.cy.tsx index 83994151c71d..6226e9d7b4b6 100644 --- a/packages/main/cypress/specs/DatePicker.cy.tsx +++ b/packages/main/cypress/specs/DatePicker.cy.tsx @@ -201,7 +201,36 @@ describe("Date Picker Tests", () => { .should("have.attr", "placeholder", "test placeholder"); }); + it("clear icon", () => { + cy.mount(); + cy.get("[ui5-date-picker]") + .as("datePicker"); + + cy.get("@datePicker") + .shadow() + .find("ui5-datetime-input") + .shadow() + .find(".ui5-input-clear-icon") + .should("exist"); + + cy.get("@datePicker") + .shadow() + .find("ui5-datetime-input") + .shadow() + .find(".ui5-input-clear-icon-wrapper") + .click(); + + cy.get("@datePicker") + .shadow() + .find("ui5-datetime-input") + .shadow() + .find(".ui5-input-clear-icon") + .should("not.exist"); + + cy.get("@datePicker") + .should("have.value", ""); + }); it("Selected date from daypicker is the same as datepicker date", () => { cy.mount(); diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index 78d24a3044cc..a25ea16adbb9 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -367,6 +367,15 @@ class DatePicker extends DateComponentBase implements IFormInputElement { @property() accessibleDescriptionRef?: string; + /** + * Defines whether the clear icon of the input will be shown. + * @default false + * @public + * @since 2.20.0 + */ + @property({ type: Boolean }) + showClearIcon = false; + @property({ type: Object }) _respPopoverConfig?: object; @@ -660,6 +669,15 @@ class DatePicker extends DateComponentBase implements IFormInputElement { this._updateValueAndFireEvents((e.target as DatePicker).value, false, ["input"], false); } + _handleClearIconClick() { + this.value = ""; + this._dateTimeInput.value = ""; + this._updateValueState(); + this._dateTimeInput.focus(); + this.fireDecoratorEvent("change", { value: this.value, valid: true }); + this.fireDecoratorEvent("value-changed", { value: this.value, valid: true }); + } + /** * Checks if the provided value is valid and within valid range. * @protected diff --git a/packages/main/src/DatePickerInputTemplate.tsx b/packages/main/src/DatePickerInputTemplate.tsx index 1d830c4e149e..dce19b92138b 100644 --- a/packages/main/src/DatePickerInputTemplate.tsx +++ b/packages/main/src/DatePickerInputTemplate.tsx @@ -28,6 +28,7 @@ export default function DatePickerInputTemplate(this: DatePicker) { onInput={this._onInputInput} onui5-_request-submit={this._onInputRequestSubmit} onKeyDown={this._onkeydown} + showClearIcon={this.showClearIcon} > {!this.open && this.valueStateMessage.length > 0 && diff --git a/packages/main/src/themes/DatePicker.css b/packages/main/src/themes/DatePicker.css index b55aaa304c09..c320ccf4a391 100644 --- a/packages/main/src/themes/DatePicker.css +++ b/packages/main/src/themes/DatePicker.css @@ -63,4 +63,9 @@ .ui5-date-picker-popover::part(header) { padding: 0; +} + +:host([show-clear-icon]) .ui5-date-picker-input:not([value]), +:host([show-clear-icon]) .ui5-date-picker-input[value=""] { + width: calc(100% + 36px); } \ No newline at end of file diff --git a/packages/main/src/themes/DateRangePicker.css b/packages/main/src/themes/DateRangePicker.css index 876c30c6a13e..d519390decef 100644 --- a/packages/main/src/themes/DateRangePicker.css +++ b/packages/main/src/themes/DateRangePicker.css @@ -13,4 +13,10 @@ min-width:inherit; color: inherit; background-color: inherit; +} + +:host([show-clear-icon]) .ui5-date-picker-input:not([value]), +:host([show-clear-icon]) .ui5-date-picker-input[value=""] { + width: 100%; + min-width:inherit; } \ No newline at end of file diff --git a/packages/main/src/themes/DateTimePicker.css b/packages/main/src/themes/DateTimePicker.css index 3eb355628e84..f059755a01e5 100644 --- a/packages/main/src/themes/DateTimePicker.css +++ b/packages/main/src/themes/DateTimePicker.css @@ -8,4 +8,10 @@ min-width: inherit; color: inherit; background-color: inherit; +} + +:host([show-clear-icon]) .ui5-date-picker-input:not([value]), +:host([show-clear-icon]) .ui5-date-picker-input[value=""] { + width: 100%; + min-width:inherit; } \ No newline at end of file diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html index c7ccc8104f15..062679431bce 100644 --- a/packages/main/test/pages/Button.html +++ b/packages/main/test/pages/Button.html @@ -19,401 +19,8 @@ - Reject - Add - - - Navigation Button - - - - - - - Press - - - Action Bar Button - Primary
button - Secondary button - Inactive - Accept - Decline - -
-
- -
- - -
- -
-
- - - - Action
Bar
- Button - Primary button - Secondary button - Inactive - Agree - Decline - Warning - Warning - -
-
-
- - - Action Bar Button - - - Action Bar Button - Action Bar Button - - Button with accessibleDescription: - Scan - -
-
- - Download Application - From This Button - - Action Bar Button - - - Action Bar Button - - - - -
-
-
- - Default - Default -
-
- - Agree - Agree -
-
- - Decline - Decline -
-
- - Transparent - Transparent - -
-
- - Cozy - - Emphasized - - - - Emphasized - - - Emphasized - - - -

- - Compact - -
- Emphasized - - - - Emphasized - - - Emphasized - - -
- -
- Cozy - - Emphasized - - - - Emphasized - - - Emphasized - - - -

- - Compact - -
- Emphasized - - - - Emphasized - - - Emphasized - - -
-
- -

- - Emphasized - -
-
-
-
-
- - Icon last - - Disabled Buton - - - - - -
- "This is a label, this is a label" - -
-
-
-
-
- - Action Bar Button - Primary button - Secondary button - Inactive - Agree - Decline - -
-
-
- - Action Bar Button - - - -
-
-
- - Default - Default -
-
- - Agree - Agree -
-
- - Decline - Decline -
-
- - Transparent - Transparent -
-
- - Emphasized - Emphasized - -
-
- Download - Download - Download - -
-
- Buttons with tooltip -
- - - - - - - -
-
- Buttons with busy indicator -
- - Busy Indicator - Busy Indicator - Busy Indicator - Busy Indicator - Busy Indicator - Busy Indicator - -
-
- Menu Buttons -
- Menu Button - - Menu Button - - - - - - - -
-
- Menu Buttons with fixed width -
- Menu Button - - Menu Button -
-
- -
- - - Submit - Reset -
- - Show Registration Dialog - - - - -
-
- Register -
- - - - Submit - - + Delete + \ No newline at end of file diff --git a/packages/main/test/pages/DatePicker.html b/packages/main/test/pages/DatePicker.html index 17d3689a3969..077ee35b8392 100644 --- a/packages/main/test/pages/DatePicker.html +++ b/packages/main/test/pages/DatePicker.html @@ -133,6 +133,9 @@

3 months range

1 year range

+

Date picker with clear icon

+ +

Test accessibleName and accessibleNameRef

diff --git a/packages/main/test/pages/DateRangePicker.html b/packages/main/test/pages/DateRangePicker.html index 39475cd3a0c4..4da0dc7d30bd 100644 --- a/packages/main/test/pages/DateRangePicker.html +++ b/packages/main/test/pages/DateRangePicker.html @@ -81,6 +81,9 @@

daterange-picker with value state

Information message. This is a Link. 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.
+

DateRangePicker with clear icon

+ +
Form validation
diff --git a/packages/main/test/pages/DateTimePicker.html b/packages/main/test/pages/DateTimePicker.html index 671958485d9a..9a0fe2c33c4d 100644 --- a/packages/main/test/pages/DateTimePicker.html +++ b/packages/main/test/pages/DateTimePicker.html @@ -200,6 +200,14 @@

display-fomat='medium' value-fomat='yyyy-MM-dd'

+
+ DateTimePicker with clear icon + +
+
Form validation diff --git a/packages/website/docs/_components_pages/main/DatePicker.mdx b/packages/website/docs/_components_pages/main/DatePicker.mdx index 18f6059ca834..d63129ae2e35 100644 --- a/packages/website/docs/_components_pages/main/DatePicker.mdx +++ b/packages/website/docs/_components_pages/main/DatePicker.mdx @@ -9,6 +9,7 @@ import CalendarTypes from "../../_samples/main/DatePicker/CalendarTypes/Calendar import CalendarWeekNumbering from "../../_samples/main/DatePicker/CalendarWeekNumbering/CalendarWeekNumbering.md"; import DatePickerInDifferentTimezone from "../../_samples/main/DatePicker/DatePickerInDifferentTimezone/DatePickerInDifferentTimezone.md"; import CustomFormatting from "../../_samples/main/DatePicker/CustomFormatting/CustomFormatting.md"; +import ClearIcon from "../../_samples/main/DatePicker/ClearIcon/ClearIcon.md"; <%COMPONENT_OVERVIEW%> @@ -43,4 +44,9 @@ You can use the component, the preferred week numbering and first day of week. You can have custom formatting for the display value and the value property. Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see UTS #35: Unicode Locale Data Markup Language. - \ No newline at end of file + + +### DatePicker with Clear Icon + +This sample demonstrates the DatePicker component with the `show-clear-icon` property enabled, which displays a clear button to reset the selected date. + \ No newline at end of file diff --git a/packages/website/docs/_samples/main/DatePicker/ClearIcon/ClearIcon.md b/packages/website/docs/_samples/main/DatePicker/ClearIcon/ClearIcon.md new file mode 100644 index 000000000000..17798ecc59ab --- /dev/null +++ b/packages/website/docs/_samples/main/DatePicker/ClearIcon/ClearIcon.md @@ -0,0 +1,4 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; + + diff --git a/packages/website/docs/_samples/main/DatePicker/ClearIcon/main.js b/packages/website/docs/_samples/main/DatePicker/ClearIcon/main.js new file mode 100644 index 000000000000..c53f2f7385e7 --- /dev/null +++ b/packages/website/docs/_samples/main/DatePicker/ClearIcon/main.js @@ -0,0 +1,2 @@ +import "@ui5/webcomponents/dist/Assets-fetch.js"; +import "@ui5/webcomponents/dist/DatePicker.js"; \ No newline at end of file diff --git a/packages/website/docs/_samples/main/DatePicker/ClearIcon/sample.html b/packages/website/docs/_samples/main/DatePicker/ClearIcon/sample.html new file mode 100644 index 000000000000..f274b3c2f941 --- /dev/null +++ b/packages/website/docs/_samples/main/DatePicker/ClearIcon/sample.html @@ -0,0 +1,21 @@ + + + + + + + + Sample + + + + + + + + + + + + +