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

Calendar - expose views as separate components + advanced KB navigation #3855

Merged
merged 42 commits into from
Feb 14, 2019

Conversation

SAndreeva
Copy link
Contributor

@SAndreeva SAndreeva commented Feb 7, 2019

Closes #3023,
Related #3126

Additional information (check all that apply):

  • Bug fix
  • New functionality
  • Documentation
  • Demos
  • CI/CD

Checklist:

  • All relevant tags have been applied to this PR
  • This PR includes unit tests covering all the new code
  • This PR includes API docs for newly added methods/properties
  • This PR includes feature/README.MD updates for the feature docs
  • This PR includes general feature table updates in the root README.MD
  • This PR includes CHANGELOG.MD updates for newly added functionality
  • This PR contains breaking changes
  • This PR includes ng update migrations for the breaking changes
  • This PR includes behavioral changes and the feature specification has been updated with them

@@ -2773,7 +2773,7 @@ describe('IgxGrid - Filtering Row UI actions', () => {
fix.detectChanges();

const calendar = fix.debugElement.query(By.css('igx-calendar'));
const sundayLabel = calendar.nativeElement.children[1].children[1].children[0].children[0].innerText
const sundayLabel = calendar.nativeElement.children[1].children[1].children[0].children[0].innerText;
Copy link
Collaborator

Choose a reason for hiding this comment

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

yikes

@bkulov bkulov added 💥 status: in-test PRs currently being tested and removed 🛠️ status: in-development Issues and PRs with active development on them labels Feb 13, 2019
- `Tab` will navigate through the subheader buttons;

When `prev` or `next` month buttons (in the subheader) are focused:
- `Space` will scroll into view the next or previous month.
Copy link
Contributor

Choose a reason for hiding this comment

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

Space and Enter.

[selection]="selection"
[disabledDates]="disabledDates"
[specialDates]="specialDates"
(onViewChnaged)="viewChanged($event)"
Copy link
Contributor

Choose a reason for hiding this comment

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

Typo onViewChnaged.

[disabledDates]="disabledDates"
[specialDates]="specialDates"
(onViewChnaged)="viewChanged($event)"
(onDateSelection)="childClicked($event)">
Copy link
Contributor

Choose a reason for hiding this comment

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

Rename onDateSelection to onSelection. Applicable to all new views.

<igx-months-view *ngIf="isYearView" [@animateView]="activeView" #months
[date]="viewDate"
[locale]="locale"
[monthFormat]="_formatOptions.month"
Copy link
Contributor

Choose a reason for hiding this comment

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

Use public property formatOptions instead of the protected field (which is currently public).

<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade
[date]="viewDate"
[locale]="locale"
[yearFormat]="_formatOptions.year"
Copy link
Contributor

Choose a reason for hiding this comment

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

Use public property formatOptions instead of the protected field (which is currently public).

event.preventDefault();
event.stopPropagation();

this.previousMonth();
Copy link
Contributor

Choose a reason for hiding this comment

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

You could add a parameter isKeydownTrigger to this method with default value false. That way you won't need the code bellow.

event.preventDefault();
event.stopPropagation();

this.nextMonth();
Copy link
Contributor

Choose a reason for hiding this comment

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

The same as the previous comment. Use parameter and remove the duplicated code bellow.

public specialDates: DateRangeDescriptor[];

@Output()
public onDateSelection = new EventEmitter<ICalendarDate>();
Copy link
Contributor

Choose a reason for hiding this comment

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

Should be onDateSelection.

/**
* Returns the locale representation of the year in the years view.
*
* @hidden
Copy link
Contributor

Choose a reason for hiding this comment

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

This could be useful so it shouldn't be hidden.

(@animateChange.done)="animationDone()"
[date]="viewDate"
[locale]="locale"
[monthFormat]="_formatOptions.month"
Copy link
Contributor

Choose a reason for hiding this comment

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

Use the public property instead of the protected field _formatOptions.

<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade
[date]="viewDate"
[locale]="locale"
[yearFormat]="_formatOptions.year"
Copy link
Contributor

Choose a reason for hiding this comment

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

Same as above.

* @hidden
*/
@HostListener('keydown.arrowdown', ['$event'])
public onKeydownArrowDown(event) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Add type of the event argument. Applicable to all keyboard event handlers.

selector: 'igx-month-picker',
templateUrl: 'month-picker.component.html'
})
export class IgxMonthPickerComponent extends IgxCalendarComponent {
Copy link
Contributor

Choose a reason for hiding this comment

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

Shouldn't we have some public API for this component? An input to set the initial month and an event to notify on selection changes. Etc.

Copy link
Contributor

Choose a reason for hiding this comment

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

We need to import what's exported by this file in the public_api.ts similar to what's done with the calendar component.

@bkulov
Copy link
Contributor

bkulov commented Feb 13, 2019

Please add changelog note.

@bkulov bkulov added the squash-merge Merge PR with "Squash and Merge" option label Feb 13, 2019
bkulov
bkulov previously approved these changes Feb 14, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📆 calendar 📈 enhancement squash-merge Merge PR with "Squash and Merge" option version: 7.2.x ✅ status: verified Applies to PRs that have passed manual verification
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Calendar and DatePicker: Advanced keyboard navigation
5 participants