From 371ff424e03f14b6c6a9bf9b81b97cdfce1b97a1 Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Tue, 28 Oct 2025 10:25:02 +0200 Subject: [PATCH 1/3] feat(ui5-date-picker,ui5-time-picker): expose input CSS part for styling Add input CSS part to DatePicker and TimePicker components to allow styling of the native input element using ::part(input) selector. - Add @csspart input documentation for both components - Forward part attribute to DateTimeInput in templates - Maintains consistency with ui5-input component API - Enables scoping-friendly styling without deep selectors Enhanced accessibility and styling capabilities following UI5 Web Components Definition of Done guidelines. --- packages/main/src/DatePicker.ts | 1 + packages/main/src/DatePickerInputTemplate.tsx | 1 + packages/main/src/TimePicker.ts | 1 + packages/main/src/TimePickerTemplate.tsx | 1 + packages/main/test/pages/styles/DatePicker.css | 4 ++++ packages/main/test/pages/styles/DateRangePicker.css | 4 ++++ packages/main/test/pages/styles/TimePicker.css | 4 ++++ 7 files changed, 16 insertions(+) diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index 342a0914cd95..854daaa22112 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -172,6 +172,7 @@ type Picker = "day" | "month" | "year"; * @constructor * @extends DateComponentBase * @public + * @csspart input - Used to style the native 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 d19359090731..8376c8135836 100644 --- a/packages/main/src/TimePicker.ts +++ b/packages/main/src/TimePicker.ts @@ -136,6 +136,7 @@ type TimePickerInputEventDetail = TimePickerChangeInputEventDetail; * @extends UI5Element * @public * @since 1.0.0-rc.6 + * @csspart input - Used to style the native input element */ @customElement({ tag: "ui5-time-picker", diff --git a/packages/main/src/TimePickerTemplate.tsx b/packages/main/src/TimePickerTemplate.tsx index 093bc1492c05..059460555fd5 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 ef2436fa33e8..d46cf9d602cc 100644 --- a/packages/main/test/pages/styles/DatePicker.css +++ b/packages/main/test/pages/styles/DatePicker.css @@ -5,3 +5,7 @@ .datepicker1auto { background-color: var(--sapBackgroundColor); } + +#dp6::part(input) { + text-align: right; +} \ No newline at end of file diff --git a/packages/main/test/pages/styles/DateRangePicker.css b/packages/main/test/pages/styles/DateRangePicker.css index 94d4300f0914..018db9fbd64e 100644 --- a/packages/main/test/pages/styles/DateRangePicker.css +++ b/packages/main/test/pages/styles/DateRangePicker.css @@ -5,3 +5,7 @@ .daterangepicker1auto { background-color: var(--sapBackgroundColor); } + +#drpLabel::part(input) { + text-align: right; +} \ No newline at end of file diff --git a/packages/main/test/pages/styles/TimePicker.css b/packages/main/test/pages/styles/TimePicker.css index 6c952e7c4e67..c99d298d8c6e 100644 --- a/packages/main/test/pages/styles/TimePicker.css +++ b/packages/main/test/pages/styles/TimePicker.css @@ -22,3 +22,7 @@ html,body { .timepicker2auto { width: 100% } + +#tpLabel::part(input) { + text-align: right; +} \ No newline at end of file From 808944cf6d02b9069e197d497209b30082809092 Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Mon, 3 Nov 2025 14:40:24 +0200 Subject: [PATCH 2/3] fix: adjust the css part documentation --- packages/main/src/DatePicker.ts | 2 +- packages/main/src/TimePicker.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index 854daaa22112..7201dba0a089 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -172,7 +172,7 @@ type Picker = "day" | "month" | "year"; * @constructor * @extends DateComponentBase * @public - * @csspart input - Used to style the native input element + * @csspart input - Used to style the native input element. This part is forwarded to the underlying ui5-input element. */ @customElement({ diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts index 8376c8135836..5b2908d3b1e1 100644 --- a/packages/main/src/TimePicker.ts +++ b/packages/main/src/TimePicker.ts @@ -136,7 +136,7 @@ type TimePickerInputEventDetail = TimePickerChangeInputEventDetail; * @extends UI5Element * @public * @since 1.0.0-rc.6 - * @csspart input - Used to style the native input element + * @csspart input - Used to style the native input element. This part is forwarded to the underlying ui5-input element. */ @customElement({ tag: "ui5-time-picker", From 82ee2c009d506bc72f91e08d34b3c51c0ceae6c1 Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Mon, 3 Nov 2025 14:52:44 +0200 Subject: [PATCH 3/3] fix: adjust the css part documentation --- packages/main/src/DatePicker.ts | 2 +- packages/main/src/TimePicker.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index 7201dba0a089..0eea8949518b 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -172,7 +172,7 @@ type Picker = "day" | "month" | "year"; * @constructor * @extends DateComponentBase * @public - * @csspart input - Used to style the native input element. This part is forwarded to the underlying ui5-input element. + * @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/TimePicker.ts b/packages/main/src/TimePicker.ts index 5b2908d3b1e1..758ea4ce6519 100644 --- a/packages/main/src/TimePicker.ts +++ b/packages/main/src/TimePicker.ts @@ -136,7 +136,7 @@ type TimePickerInputEventDetail = TimePickerChangeInputEventDetail; * @extends UI5Element * @public * @since 1.0.0-rc.6 - * @csspart input - Used to style the native input element. This part is forwarded to the underlying ui5-input element. + * @csspart input - Used to style the input element. This part is forwarded to the underlying ui5-input element. */ @customElement({ tag: "ui5-time-picker",