From 0a0bf729db7c358799798a3af405dab87534a3d2 Mon Sep 17 00:00:00 2001 From: Alexey Pichugin Date: Thu, 20 Nov 2025 13:00:44 +0700 Subject: [PATCH 1/2] DS-98 clear button was fixed for calendar and autocomplete --- .../components/input/_autocomplete.scss | 4 ++ .../components/input/_calendar.scss | 4 ++ .../doc/calendar/calendardoc.module.ts | 2 + src/app/showcase/doc/calendar/cleardoc.ts | 40 +++++++++++++++++++ .../showcase/pages/calendar/calendardemo.ts | 6 +++ 5 files changed, 56 insertions(+) create mode 100644 src/app/showcase/doc/calendar/cleardoc.ts diff --git a/primeng-sass-theme/theme-base/components/input/_autocomplete.scss b/primeng-sass-theme/theme-base/components/input/_autocomplete.scss index 45b9901..dd77f84 100644 --- a/primeng-sass-theme/theme-base/components/input/_autocomplete.scss +++ b/primeng-sass-theme/theme-base/components/input/_autocomplete.scss @@ -221,6 +221,10 @@ .p-autocomplete-clearable { position: relative; + .p-inputtext { + padding-right: 2.5rem; + } + .p-autocomplete-clear-icon { right: 0.75rem; } diff --git a/primeng-sass-theme/theme-base/components/input/_calendar.scss b/primeng-sass-theme/theme-base/components/input/_calendar.scss index 20728b8..9f6c19a 100644 --- a/primeng-sass-theme/theme-base/components/input/_calendar.scss +++ b/primeng-sass-theme/theme-base/components/input/_calendar.scss @@ -8,6 +8,10 @@ } } +.p-calendar-clear-icon.p-icon { + right: $inputPaddingLeftRight; +} + .p-datepicker { margin-top: $inputListPadding; padding: $calendarPadding; diff --git a/src/app/showcase/doc/calendar/calendardoc.module.ts b/src/app/showcase/doc/calendar/calendardoc.module.ts index 7327b0a..a419a22 100644 --- a/src/app/showcase/doc/calendar/calendardoc.module.ts +++ b/src/app/showcase/doc/calendar/calendardoc.module.ts @@ -7,6 +7,7 @@ import { AppCodeModule } from '@layout/doc/app.code.component'; import { CalendarModule } from 'primeng/calendar'; import { ImportDoc } from './importdoc'; import { BasicDoc } from './basicdoc'; +import { ClearDoc } from './cleardoc'; import { FormatDoc } from './formatdoc'; import { LocaleDoc } from './localedoc'; import { IconDoc } from './icondoc'; @@ -40,6 +41,7 @@ import { FloatLabelModule } from 'primeng/floatlabel'; declarations: [ ImportDoc, BasicDoc, + ClearDoc, FormatDoc, LocaleDoc, IconDoc, diff --git a/src/app/showcase/doc/calendar/cleardoc.ts b/src/app/showcase/doc/calendar/cleardoc.ts new file mode 100644 index 0000000..e01ea93 --- /dev/null +++ b/src/app/showcase/doc/calendar/cleardoc.ts @@ -0,0 +1,40 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'calendar-clear-demo', + template: ` + +

When showClear is present, the value can be cleared.

+
+
+ +
+ + ` +}) +export class ClearDoc { + date: Date | undefined; + + code: Code = { + basic: ``, + + html: `
+ +
`, + + typescript: `import { Component } from '@angular/core'; +import { CalendarModule } from 'primeng/calendar'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'calendar-clear-demo', + templateUrl: './calendar-clear-demo.html', + standalone: true, + imports: [FormsModule, CalendarModule] +}) +export class CalendarClearDemo { + date: Date | undefined; +}` + }; +} diff --git a/src/app/showcase/pages/calendar/calendardemo.ts b/src/app/showcase/pages/calendar/calendardemo.ts index a2c5a08..ce3048c 100644 --- a/src/app/showcase/pages/calendar/calendardemo.ts +++ b/src/app/showcase/pages/calendar/calendardemo.ts @@ -22,6 +22,7 @@ import { FloatLabelDoc } from '@doc/calendar/floatlabeldoc'; import { InvalidDoc } from '@doc/calendar/invaliddoc'; import { DisabledDoc } from '@doc/calendar/disableddoc'; import { FilledDoc } from '@doc/calendar/filleddoc'; +import { ClearDoc } from '@doc/calendar/cleardoc'; @Component({ templateUrl: './calendardemo.html' }) @@ -132,6 +133,11 @@ export class CalendarDemo { label: 'Disabled', component: DisabledDoc }, + { + id: 'clear', + label: 'Clear', + component: ClearDoc + }, { id: 'style', label: 'Style', From 2ee12775597a95463550259ff045b37904697391 Mon Sep 17 00:00:00 2001 From: Alexey Pichugin Date: Thu, 20 Nov 2025 13:01:03 +0700 Subject: [PATCH 2/2] DS-98 stretched button with icon is centered --- .../theme-base/components/button/_button.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/primeng-sass-theme/theme-base/components/button/_button.scss b/primeng-sass-theme/theme-base/components/button/_button.scss index fc6e9bf..7ad86d7 100644 --- a/primeng-sass-theme/theme-base/components/button/_button.scss +++ b/primeng-sass-theme/theme-base/components/button/_button.scss @@ -190,7 +190,13 @@ p-button { .p-fluid { .p-button:not(.p-button-icon-only) { width: 100%; + justify-content: center; + + .p-button-label { + flex: none; // иконка прижата к label + } } + .p-button-group { .p-button:not(.p-button-icon-only) { flex: 1;