diff --git a/packages/main/cypress/specs/DatePicker.cy.tsx b/packages/main/cypress/specs/DatePicker.cy.tsx index 4a1f01602864..cea1694d5558 100644 --- a/packages/main/cypress/specs/DatePicker.cy.tsx +++ b/packages/main/cypress/specs/DatePicker.cy.tsx @@ -1937,3 +1937,14 @@ describe("Accessibility", () => { .should("have.text", DESCRIPTION); }); }); + +describe("CSS Parts", () => { + it("DatePicker exposes input CSS part through DateTimeInput", () => { + cy.mount(); + + cy.get("[ui5-date-picker]") + .shadow() + .find("[ui5-datetime-input]") + .should("have.attr", "part", "input"); + }); +}); \ No newline at end of file diff --git a/packages/main/cypress/specs/TimePicker.cy.tsx b/packages/main/cypress/specs/TimePicker.cy.tsx index b2d96e1f399e..6849a81efbaf 100644 --- a/packages/main/cypress/specs/TimePicker.cy.tsx +++ b/packages/main/cypress/specs/TimePicker.cy.tsx @@ -543,4 +543,15 @@ describe("Validation inside a form", () => { cy.get("#timePicker:invalid") .should("not.exist", "Timepicker with correct formatted value should not have :invalid CSS class"); }); +}); + +describe("CSS Parts", () => { + it("TimePicker exposes input CSS part through DateTimeInput", () => { + cy.mount(); + + cy.get("[ui5-time-picker]") + .shadow() + .find("[ui5-datetime-input]") + .should("have.attr", "part", "input"); + }); }); \ No newline at end of file diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index b3281a78c4d8..5f6e0b5e59e9 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -175,6 +175,7 @@ type Picker = "day" | "month" | "year"; * @constructor * @extends DateComponentBase * @public + * @csspart input - Used to style the input element. This part is forwarded to the underlying ui5-input element. */ @customElement({ diff --git a/packages/main/src/DatePickerInputTemplate.tsx b/packages/main/src/DatePickerInputTemplate.tsx index cef6e36c8128..d1cc46e08b54 100644 --- a/packages/main/src/DatePickerInputTemplate.tsx +++ b/packages/main/src/DatePickerInputTemplate.tsx @@ -14,6 +14,7 @@ export default function DatePickerInputTemplate(this: DatePicker) { data-sap-focus-ref id={`${this._id}-inner`} class="ui5-date-picker-input" + part="input" placeholder={this._placeholder} type={this.type} value={this.displayValue} diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts index 723b42ea7299..4b48bf3e5940 100644 --- a/packages/main/src/TimePicker.ts +++ b/packages/main/src/TimePicker.ts @@ -138,6 +138,7 @@ type TimePickerInputEventDetail = TimePickerChangeInputEventDetail; * @extends UI5Element * @public * @since 1.0.0-rc.6 + * @csspart input - Used to style the input element. This part is forwarded to the underlying ui5-input element. */ @customElement({ tag: "ui5-time-picker", diff --git a/packages/main/src/TimePickerTemplate.tsx b/packages/main/src/TimePickerTemplate.tsx index 8f0fc39e2dd9..d48123e7ffdd 100644 --- a/packages/main/src/TimePickerTemplate.tsx +++ b/packages/main/src/TimePickerTemplate.tsx @@ -12,6 +12,7 @@ export default function TimePickerTemplate(this: TimePicker) { data-sap-focus-ref id={`${this._id}-inner`} class="ui5-time-picker-input" + part="input" value={this.value} placeholder={this._placeholder} disabled={this.disabled} diff --git a/packages/main/test/pages/styles/DatePicker.css b/packages/main/test/pages/styles/DatePicker.css index 5abb4db30720..db8f5543c177 100644 --- a/packages/main/test/pages/styles/DatePicker.css +++ b/packages/main/test/pages/styles/DatePicker.css @@ -6,6 +6,8 @@ background-color: var(--sapBackgroundColor); } +#dp6::part(input) { + text-align: right; form ui5-date-picker:invalid { outline: 2px solid var(--sapNegativeColor); diff --git a/packages/main/test/pages/styles/DateRangePicker.css b/packages/main/test/pages/styles/DateRangePicker.css index 7cf005729231..ecbca3e5ebef 100644 --- a/packages/main/test/pages/styles/DateRangePicker.css +++ b/packages/main/test/pages/styles/DateRangePicker.css @@ -6,6 +6,9 @@ background-color: var(--sapBackgroundColor); } +#drpLabel::part(input) { + text-align: right; +} form ui5-daterange-picker:invalid { outline: 2px solid var(--sapNegativeColor); } diff --git a/packages/main/test/pages/styles/TimePicker.css b/packages/main/test/pages/styles/TimePicker.css index fbddb5f3af96..27b4185b8526 100644 --- a/packages/main/test/pages/styles/TimePicker.css +++ b/packages/main/test/pages/styles/TimePicker.css @@ -23,6 +23,9 @@ html,body { width: 100% } +#tpLabel::part(input) { + text-align: right; +} form ui5-time-picker:invalid { outline: 2px solid var(--sapNegativeColor); }