Skip to content

fix(date-picker): fix discrepencies in datepicker#17282

Open
didimmova wants to merge 2 commits into
masterfrom
didimmova/fix-date-picker-discrepancies
Open

fix(date-picker): fix discrepencies in datepicker#17282
didimmova wants to merge 2 commits into
masterfrom
didimmova/fix-date-picker-discrepancies

Conversation

@didimmova
Copy link
Copy Markdown
Contributor

Closes #16741

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR addresses Date Range Picker sizing/styling discrepancies by adjusting dialog action spacing and enabling Indigo-specific action button variants.

Changes:

  • Adds theme-aware Indigo dialog button variants for Date Range Picker actions.
  • Makes calendar container action button types configurable.
  • Replaces inner button padding with an 8px gap to avoid double-padding in picker footers.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File Description
projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts Sets Indigo dialog action buttons to contained/outlined variants.
projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.ts Adds configurable button type properties for close/cancel actions.
projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.html Binds close/cancel buttons to configurable IgxButton types.
projects/igniteui-angular/core/src/core/styles/components/date-picker/_date-picker-theme.scss Updates footer button spacing to use an 8px gap instead of inner padding.

Comment on lines +1343 to +1345
if (!this.isDropdown && this.themeToken.theme === 'indigo') {
componentInstance.closeButtonType = 'contained';
componentInstance.cancelButtonType = 'outlined';
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I set the default button types to 'flat' and the change is only applicable for indigo date-range-picker in dialog mode, so maybe the additional checks are not necessary, also the spec files are written only for the material theme, so we don't need tests for the indigo button types

<button
#cancelButton type="button"
igxButton="flat" igxRipple
[igxButton]="cancelButtonType" igxRipple
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Date Range Picker] Dropdown / Dialog has some sizing discrepancies

3 participants