fix: calendar and calendar month markup change #1242

libs/components/src/lib/components/calendar-month/calendar-month.component.less

@@ -1,12 +1,15 @@
 @import '../../../styles/ui-local.less';
 
-.picker(3.6875rem);
+@itemWidth: 85px;
+@itemHeight: 45px;
+
+.picker(@itemWidth, @itemHeight);
 
 :host {
  display: block;
- height: 13.625rem;
- width: 15.75rem;
- padding: 1.125rem;
+ height: 222px;
+ width: 256px;
+ padding: 16px;
  box-sizing: content-box;
 
  .year-btn {
@@ -16,16 +19,12 @@
 
 .z-row {
  flex-wrap: wrap;
- margin-top: 1.4375rem;
+ justify-content: center;
 }
 
 .z-cell {
  box-sizing: content-box;
 
- &:nth-child(n + 5) {
- margin-top: 1.75rem;
- }
-
  &:not([data-range='start']):not([data-range='single']):not([data-range='end']):hover {
  background-color: var(--prizm-v3-button-ghost-hover);
 

libs/components/src/lib/components/calendar/calendar.component.less

@@ -1,23 +1,17 @@
-@verticalSpace: 1rem;
-@horizontalSpace: 1.125rem;
-@itemSize: 2.25rem;
-@paginationSize: 1.5rem;
-@calendarSize: @itemSize * 7;
-@height: @paginationSize + @verticalSpace + @calendarSize;
+@paddings: 16px;
+@paginationHeight: 40px;
+@calendarWidth: 280px;
+@calendarHeight: 312px + @paginationHeight;
 
 :host {
  display: block;
- height: calc(@height + var(--prizm-calendar-footer-height, 0));
- width: @calendarSize;
- padding: 16px;
+ height: calc(@calendarHeight + var(--prizm-calendar-footer-height, 0));
+ width: @calendarWidth;
+ padding: @paddings;
  box-sizing: content-box;
 }
 
 .z-scrollbar {
- height: @paginationSize + @verticalSpace + @calendarSize - 2rem;
- width: @calendarSize + @horizontalSpace;
-}
-
-.z-pagination {
- margin-bottom: @verticalSpace;
+ height: @calendarHeight - @paginationHeight - (@paddings * 2);
+ width: @calendarWidth + @paddings;
 }

libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less

@@ -1,11 +1,15 @@
 @import '../../../../styles/ui-local.less';
 
-@itemSize: 2.25rem;
+@itemSize: 40px;
 
-.picker(@itemSize);
+.picker(@itemSize, @itemSize);
 
 :host {
  width: @itemSize * 7;
+
+ .footer:not(:empty) {
+ margin-top: 8px;
+ }
 }
 
 .z-item {

libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.component.less

@@ -1,27 +1,14 @@
 @import '../../../../styles/ui-local.less';
 
-@itemSize: 3.9375rem;
+@itemWidth: 93px;
+@itemHeight: 70px;
 
-.picker(@itemSize);
+.picker(@itemWidth, @itemHeight);
 
 :host {
- width: @itemSize * 4;
-}
-
-.z-row {
- margin: 16px 0;
- gap: 4px;
-
- &:first-child {
- margin-top: 0;
- }
-
- &:last-child {
- margin-bottom: 0;
- }
+ width: 280px;
 }
 
 .z-cell {
  flex-grow: 1;
- width: 100%;
 }

libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.module.ts

@@ -1,12 +1,5 @@
 import { NgModule } from '@angular/core';
 import { PrizmPrimitiveMonthPickerComponent } from './primitive-month-picker.component';
-import { PrizmLetModule } from '@prizm-ui/helpers';
-import { PrizmRepeatTimesModule } from '../../../directives/repeat-times/repeat-times.module';
-import { PrizmHoveredModule } from '../../../directives/hovered/hovered.module';
-import { PrizmPressedModule } from '../../../directives/pressed/pressed.module';
-import { PrizmScrollIntoViewModule } from '../../../directives/scroll-into-view/scroll-into-view.module';
-import { PrizmMonthPipeModule } from '../../../pipes/month';
-import { CommonModule } from '@angular/common';
 
 /**
  * @deprecated

libs/components/src/lib/components/internal/primitive-year-picker/primitive-year-picker.component.less

@@ -1,21 +1,14 @@
 @import '../../../../styles/ui-local.less';
 
-@itemSize: 3.9375rem;
+@itemWidth: 93px;
+@itemHeight: 56px;
 
-.picker(@itemSize);
+.picker(@itemWidth, @itemHeight);
 
 :host {
- width: @itemSize * 4;
+ width: 280px;
 }
 
-.z-row {
- margin: 0.875rem 0;
-
- &:first-child {
- margin-top: 0;
- }
-
- &:last-child {
- margin-bottom: 0;
- }
+.z-cell {
+ flex-grow: 1;
 }

libs/components/src/styles/mixins/picker.less

@@ -1,4 +1,4 @@
-.picker(@itemSize) {
+.picker(@itemWidth, @itemHeight) {
  :host {
  display: block;
  font: var(--prizm-font-text-m);
@@ -8,13 +8,17 @@
  .createStackingContext();
  display: flex;
  justify-content: space-between;
- height: 2.25rem;
+ height: @itemHeight;
  }
 
  .z-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
  position: relative;
  flex: 1;
- line-height: 2rem;
+ // height: 100%;
+ height: @itemHeight;
  border-radius: 2px;
  color: var(--prizm-v3-text-icon-secondary);
  font-weight: 600;
@@ -37,13 +41,12 @@
  display: flex;
  align-items: center;
  justify-content: center;
- width: @itemSize;
+ width: @itemWidth;
  text-align: center;
  outline: none;
  cursor: pointer;
  background-clip: content-box;
  box-sizing: border-box;
- border: 2px solid transparent;
 
  &_today {
  border-radius: 2px;
@@ -59,6 +62,8 @@
  .z-item {
  border: 1px solid var(--prizm-v3-button-primary-solid-default);
  color: var(--prizm-v3-button-primary-solid-default);
+ // height: @itemHeight;
+ width: @itemWidth;
 
  &_unavailable {
  color: var(--prizm-v3-text-icon-disable);
@@ -87,7 +92,7 @@
  }
 
  &:not(:last-child):before {
- right: -@itemSize;
+ // right: -@itemWidth;
  }
 
  &:last-child:first-child:before {