Skip to content
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.

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

feat(ui5-calendar-legend): introduce ui5-calendar-legend component #7706

Merged
merged 44 commits into from
Feb 14, 2024

Conversation

hinzzx
Copy link
Contributor

@hinzzx hinzzx commented Oct 13, 2023

Part 1:

Introducing the <ui5-calendar-legend> components as Part 1 of the feature request about having Classic UI5-like Calendar Legend component.

Currently our <ui5-calendar-legend> component presents only the default 4 types (Today, Selected, Working and NonWorking).

It has 4 properties:

  • hideToday (hide-today) - Hides the 'Today' item in the Calendar Legend;
  • hideSelectedDay (hide-selected-day) - Hides the 'Selected' item in the Calendar Legend;
  • hideWorkingDay (hide-working-day) - Hides the 'Working Day' item in the Calendar Legend;
  • hideNonWorkingDay (hide-non-working-day) - Hides the 'Non-Working Day' item in the Calendar Legend;

Part 2:

  • Introducing the custom ui5-calendar-legend-item's types (Type01 - Type20)
  • Introducing text property, for setting up the text of the custom ui5-calendar-legend-item;
  • Align Item Navigation Behavior with the one in Classic UI5;

Part 3:

  • Connecting the <ui5-calendar-legend> with the <ui5-calendar>.
    • The way it works is when a certain item in the Calendar Legend is focused, the corresponding type of the item located in the Calendar (if such exists) gets emphasized and filtered among other types. When the focus is removed from the legend all days marked as special in the calendar are showed (if such exist).
    • Introduced SpecialCalendarDates, emphasizing special days in the Calendar;

packages/main/src/CalendarLegend.ts Outdated Show resolved Hide resolved
packages/main/src/CalendarLegend.ts Outdated Show resolved Hide resolved
@hinzzx hinzzx requested a review from ilhan007 October 31, 2023 12:58
@hinzzx hinzzx changed the title feat(ui5-calendar-legend): introduce ui5-calendar-legend component WIP(ui5-calendar-legend): introduce ui5-calendar-legend component Nov 6, 2023
packages/main/src/Calendar.hbs Outdated Show resolved Hide resolved
packages/main/src/CalendarLegend.ts Outdated Show resolved Hide resolved
packages/main/src/CalendarLegend.ts Show resolved Hide resolved
packages/main/src/CalendarLegendItem.ts Outdated Show resolved Hide resolved
packages/main/src/CalendarLegend.ts Outdated Show resolved Hide resolved
packages/main/src/Calendar.ts Show resolved Hide resolved
packages/main/src/Calendar.ts Show resolved Hide resolved
packages/main/src/CalendarLegend.hbs Outdated Show resolved Hide resolved
packages/main/src/Calendar.ts Outdated Show resolved Hide resolved
packages/main/src/Calendar.ts Outdated Show resolved Hide resolved
Copy link
Contributor

@nnaydenow nnaydenow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In openui5 you can reach the calendar legend with tab, but here it's not possible.

In ui5 tabchain is: month , year, calendar and finishes with legend
Here tabchain is: calendar, month, year (legend is inclued if you click on some item inside it and then the chain is calendar, month, year, legend)

Also please change all since tag that remain to version 1.23.0

packages/main/src/CalendarLegendItem.ts Outdated Show resolved Hide resolved
packages/main/src/DayPicker.ts Outdated Show resolved Hide resolved
packages/main/src/SpecialCalendarDate.ts Outdated Show resolved Hide resolved
@hinzzx hinzzx requested a review from nnaydenow February 8, 2024 12:50
Copy link
Contributor

@nnaydenow nnaydenow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For me it looks good. Please request review from the team again

@hinzzx hinzzx merged commit 909a602 into main Feb 14, 2024
8 checks passed
@hinzzx hinzzx deleted the feat-calendar-legend branch February 14, 2024 14:34
@DMihaylova
Copy link

DMihaylova commented Feb 15, 2024

Fixes #4756
Fixes #3011

tsanislavgatev pushed a commit that referenced this pull request Feb 20, 2024
…7706)

Introducing the new CalendarLegend, CalendarLegendItem, SpecialCalendarDate Web Components.
The Calendar Legend has four properties:
*hideToday (hide-today) - Hides the 'Today' item in the Calendar Legend;
*hideSelectedDay (hide-selected-day) - Hides the 'Selected' item in the Calendar Legend;
*hideWorkingDay (hide-working-day) - Hides the 'Working Day' item in the Calendar Legend;
*hideNonWorkingDay (hide-non-working-day) - Hides the 'Non-Working Day' item in the Calendar Legend;
Accepting <ui5-calendar-legend-item>;
-------
The Calendar Legend Item has two properties:
type - Accepting string value of ("Type01"..."Type20");
-------
SpecialCalendarDate accepts the property:
type - which should be a string value of ("Type01"..."Type20"); emphasizing the special days in the Calendar.
@vladitasev
Copy link
Contributor

Is there a particular reason for not having a top-level element in the calendar's shadow root? @hinzzx

UI5Element.ts:563 The shadow DOM for ui5-calendar does not have a top level element, the getDomRef() method might not work as expected

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants