[Feature Request]: Calendar extended overstyling of internals

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.

https://sap.github.io/ui5-webcomponents/

Apache License 2.0

1.46k stars 253 forks source link

[Feature Request]: Calendar extended overstyling of internals #9209

Open ilhan007 opened 2 weeks ago

ilhan007 commented 2 weeks ago

Feature Request Description

One behalf of our colleagues from SAP Marketing&IT, I am creating a request for extended overstyling for:

calendar month and year views, in particular the font weight of the months/years cells to make the months/years text bolder
the hover text and border color for last item in selected range within the day picker
the text color of items in selected range within the day picker

More details in the comments below.

Proposed Solution

We need to check if we can expose some parts or variables to make this overstyling possible. Could be more difficult with parts as these are elements deeply nested and part of other internal web components like ui5-month-picker, ui5-year-picker, ui5-day-picker.

Proposed Alternatives

No response

Organization

SAP Marketing & IT (building UDeX web components)

Additional Context

No response

Priority

None

Privacy Policy

[X] I’m not disclosing any internal or sensitive information.

ilhan007 commented 2 weeks ago

Hi colleagues,

@SAP/ui5-webcomponents-topic-b

contact me if you need more information on this.

ilhan007 commented 2 weeks ago

FYI @PlutaKatarzyna and as discussed please add the expected state.

PlutaKatarzyna commented 2 weeks ago

Thank @ilhan007 you for the ticket. According to out designs https://sap.frontify.com/document/223142#/-/date-picker here is what we expect to be able to add:

- hover text and border color for last range item - text color of items inside the range

Expected: Current:

- font weight of items in year/month selection

Expected: Calendar Down Months Calendar Down Year

Current:

DMihaylova commented 1 week ago

Hi @PlutaKatarzyna,

For the text color of items inside the range, we'll think of introducing a variable. For font weight of items in year/month selection, could you test whether --_ui5-v2-0-0-rc-6_monthpicker_item_selected_font_wieght: 100 would suit your needs? Example Have in mind that in our current implementation when the text is bold, that means that there is a selection for those month(s)/year(s), so it could be pretty handy. For hover text and border color for last range item, if I understand correctly, you expect to have a hovered end day of an interval. In our current implementation it's still hover, however it looks lighter than yours. Is that the problem?

Thanks & Regards, Diana

PlutaKatarzyna commented 1 week ago

Hi @DMihaylova ,

CSS varibale will be great for text color inside range items.
As for the font weight of items in year/month selection - unfortunately I do not see css variable that you mentioned. Moreover I see that year/month items are not bold anymore. Actually they do not even have any "selected" indicator anymore:

Not sure what happened and when did it happen, but apart from font-weight, we need a border it item is currently selected.

For hover text and border color for last range item - on our designs there is different hover for item if it's inside a range. Also different start and end day of range, and middle day in range hover state. Here is what we currently expect to have (based on latest designs):
This includes changing not only text color and background of hovered item, but also a border.

I see that our designers are constantly changing the designs, so we would appreciate flexibility in scope of text color, background color and borders.

Best regards Kate