From 8f1abe70a4e5b41fcac22ffcb411a26849d151fe Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 7 Jul 2025 09:54:22 +0300 Subject: [PATCH 01/11] fix(calendar): reflect the orientation attr the same way as the headerOrientation --- src/components/calendar/calendar.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/calendar/calendar.ts b/src/components/calendar/calendar.ts index a480e15db..b664e0cfa 100644 --- a/src/components/calendar/calendar.ts +++ b/src/components/calendar/calendar.ts @@ -199,7 +199,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin< * is being shown. * @attr orientation */ - @property() + @property({ reflect: true, attribute: 'orientation' }) public orientation: ContentOrientation = 'horizontal'; /** From 6c7ae4eaefda147eeecde1cf2c2ba44a9ae0d795 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 7 Jul 2025 16:47:23 +0300 Subject: [PATCH 02/11] fix(calendar): update orientation styling, add new part, and remove inline styles --- src/components/calendar/calendar.ts | 13 ++++--------- src/components/calendar/themes/calendar.base.scss | 7 +++++++ .../themes/shared/material/calendar.material.scss | 2 +- 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/calendar/calendar.ts b/src/components/calendar/calendar.ts index b664e0cfa..8e03b40a9 100644 --- a/src/components/calendar/calendar.ts +++ b/src/components/calendar/calendar.ts @@ -2,8 +2,6 @@ import { html, nothing } from 'lit'; import { property, query, queryAll, state } from 'lit/decorators.js'; import { choose } from 'lit/directives/choose.js'; import { createRef, type Ref, ref } from 'lit/directives/ref.js'; -import { styleMap } from 'lit/directives/style-map.js'; - import { addThemingController } from '../../theming/theming-controller.js'; import { addKeybindings, @@ -74,6 +72,7 @@ export const focusActiveDate = Symbol(); * @csspart header-title - The header title element of the calendar. * @csspart header-date - The header date element of the calendar. * @csspart content - The content element which contains the views and navigation elements of the calendar. + * @csspart content-vertical - The content element which contains the views and navigation elements of the calendar in vertical orientation. * @csspart navigation - The navigation container element of the calendar. * @csspart months-navigation - The months navigation button element of the calendar. * @csspart years-navigation - The years navigation button element of the calendar. @@ -610,7 +609,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin< @igcActiveDateChange=${this.activeDateChanged} @igcRangePreviewDateChange=${this.rangePreviewDateChanged} part="days-view" - exportparts="days-row, label, date-inner, week-number-inner, week-number, date, first, last, selected, inactive, hidden, current, weekend, range, special, disabled, single, preview" + exportparts="days-row, label, date-inner, week-number-inner, week-number, date, first, last, selected, inactive, hidden, current, current-vertical, weekend, range, special, disabled, single, preview" .active=${this.activeDaysViewIndex === idx} .activeDate=${date.native} .disabledDates=${this.disabledDates} @@ -665,15 +664,11 @@ export default class IgcCalendarComponent extends EventEmitterMixin< protected override render() { const direction = this._isDayView && this.orientation === 'horizontal'; - const styles = { - display: 'flex', - flexGrow: 1, - flexDirection: direction ? 'row' : 'column', - }; + const part = direction ? 'content' : 'content content-vertical'; return html` ${this.renderHeader()} -
+
${choose(this.activeView, [ ['days', () => this.renderDaysView()], ['months', () => this.renderMonthView()], diff --git a/src/components/calendar/themes/calendar.base.scss b/src/components/calendar/themes/calendar.base.scss index 6cae7a511..67de8719d 100644 --- a/src/components/calendar/themes/calendar.base.scss +++ b/src/components/calendar/themes/calendar.base.scss @@ -140,11 +140,18 @@ } [part='content'] { + display: flex; + flex-grow: 1; border-radius: inherit; border-top-left-radius: 0; border-top-right-radius: 0; } +[part='content-vertical'] { + flex-direction: column; + +} + [part='header-date'], [part='header-title'] { margin: 0; diff --git a/src/components/calendar/themes/shared/material/calendar.material.scss b/src/components/calendar/themes/shared/material/calendar.material.scss index 5150cf7a2..052604743 100644 --- a/src/components/calendar/themes/shared/material/calendar.material.scss +++ b/src/components/calendar/themes/shared/material/calendar.material.scss @@ -18,7 +18,7 @@ $theme: $material; } } -:host(igc-calendar:not([orientation='vertical'])) { +[part~='content']:not([part~='content-vertical']) { [part='days-view-container'] + [part='days-view-container'] { [part='navigation'], igc-days-view { From 75431348a8aa74e185d7c94a293e0708f6f045f3 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 8 Jul 2025 09:19:24 +0300 Subject: [PATCH 03/11] fix(calendar): revert the reflected attr --- src/components/calendar/calendar.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/calendar/calendar.ts b/src/components/calendar/calendar.ts index 8e03b40a9..2d4b6272b 100644 --- a/src/components/calendar/calendar.ts +++ b/src/components/calendar/calendar.ts @@ -198,7 +198,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin< * is being shown. * @attr orientation */ - @property({ reflect: true, attribute: 'orientation' }) + @property() public orientation: ContentOrientation = 'horizontal'; /** From f3988cfb90fbd89d78035138a3bd7a0202971926 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 8 Jul 2025 10:09:06 +0300 Subject: [PATCH 04/11] test(calendar): attempt to fix the test --- src/components/calendar/calendar-rendering.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/calendar/calendar-rendering.spec.ts b/src/components/calendar/calendar-rendering.spec.ts index e058dc7bd..b48e49570 100644 --- a/src/components/calendar/calendar-rendering.spec.ts +++ b/src/components/calendar/calendar-rendering.spec.ts @@ -144,8 +144,8 @@ describe('Calendar Rendering', () => { const dom = getCalendarDOM(calendar); expect( - getComputedStyle(dom.content).getPropertyValue('flex-direction') - ).to.equal('row'); + getComputedStyle(dom.content).getPropertyValue('display') + ).to.equal('flex'); calendar.orientation = 'vertical'; await elementUpdated(calendar); From f87cdab13eb356869a57c442377ef98d91cd2220 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 8 Jul 2025 15:10:10 +0300 Subject: [PATCH 05/11] fix(calendar): make the rest of the themes to use the new selector --- .../calendar/themes/shared/bootstrap/calendar.bootstrap.scss | 2 +- .../calendar/themes/shared/fluent/calendar.fluent.scss | 2 +- .../calendar/themes/shared/indigo/calendar.indigo.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss index 5566bcd69..4a5432b65 100644 --- a/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss +++ b/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss @@ -13,7 +13,7 @@ $theme: $bootstrap; border-radius: var-get($theme, 'border-radius'); } -:host(igc-calendar:not([orientation='vertical'])) { +[part~='content']:not([part~='content-vertical']) { [part='days-view-container'] + [part='days-view-container'] { [part='navigation'], igc-days-view::part(days-row) { diff --git a/src/components/calendar/themes/shared/fluent/calendar.fluent.scss b/src/components/calendar/themes/shared/fluent/calendar.fluent.scss index f399d0b70..690382837 100644 --- a/src/components/calendar/themes/shared/fluent/calendar.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/calendar.fluent.scss @@ -13,7 +13,7 @@ $theme: $fluent; border-radius: var-get($theme, 'border-radius'); } -:host(igc-calendar:not([orientation='vertical'])) { +[part~='content']:not([part~='content-vertical']) { [part='days-view-container'] + [part='days-view-container'] { [part='navigation'], igc-days-view { diff --git a/src/components/calendar/themes/shared/indigo/calendar.indigo.scss b/src/components/calendar/themes/shared/indigo/calendar.indigo.scss index ad18aab87..99f7d03c6 100644 --- a/src/components/calendar/themes/shared/indigo/calendar.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/calendar.indigo.scss @@ -29,7 +29,7 @@ $theme: $indigo; } } -:host(igc-calendar:not([orientation='vertical'])) { +[part~='content']:not([part~='content-vertical']) { [part='days-view-container'] + [part='days-view-container'] { [part='navigation'], igc-days-view { From 94ed79da71ce53afe0a42b4e4e74ea9b84b32b81 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 8 Jul 2025 16:25:25 +0300 Subject: [PATCH 06/11] test(calendar): remove unnecessary display style assertion in orientation test --- src/components/calendar/calendar-rendering.spec.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/calendar/calendar-rendering.spec.ts b/src/components/calendar/calendar-rendering.spec.ts index b48e49570..afb179166 100644 --- a/src/components/calendar/calendar-rendering.spec.ts +++ b/src/components/calendar/calendar-rendering.spec.ts @@ -143,10 +143,6 @@ describe('Calendar Rendering', () => { it('should change orientation', async () => { const dom = getCalendarDOM(calendar); - expect( - getComputedStyle(dom.content).getPropertyValue('display') - ).to.equal('flex'); - calendar.orientation = 'vertical'; await elementUpdated(calendar); From 34a5935e77a219b5528db439cf75964a1cffd87e Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 8 Jul 2025 16:34:26 +0300 Subject: [PATCH 07/11] test(calendar): simplify orientation test by checking for the existence of vertical content part --- src/components/calendar/calendar-rendering.spec.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/calendar/calendar-rendering.spec.ts b/src/components/calendar/calendar-rendering.spec.ts index afb179166..9e4743421 100644 --- a/src/components/calendar/calendar-rendering.spec.ts +++ b/src/components/calendar/calendar-rendering.spec.ts @@ -141,14 +141,13 @@ describe('Calendar Rendering', () => { }); it('should change orientation', async () => { - const dom = getCalendarDOM(calendar); - calendar.orientation = 'vertical'; await elementUpdated(calendar); - expect( - getComputedStyle(dom.content).getPropertyValue('flex-direction') - ).to.equal('column'); + const verticalContent = calendar.shadowRoot?.querySelector( + '[part=content-vertical]' + ); + expect(verticalContent).to.exist; }); it('successfully enables and disables `hideHeader`', async () => { From 734950893381132bf44353cc2608065663c5587b Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 8 Jul 2025 16:38:19 +0300 Subject: [PATCH 08/11] test(calendar): refine vertical orientation test to validate part inclusion --- src/components/calendar/calendar-rendering.spec.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/calendar/calendar-rendering.spec.ts b/src/components/calendar/calendar-rendering.spec.ts index 9e4743421..c21f8e89c 100644 --- a/src/components/calendar/calendar-rendering.spec.ts +++ b/src/components/calendar/calendar-rendering.spec.ts @@ -140,14 +140,16 @@ describe('Calendar Rendering', () => { expect(last.children.item(6)?.part.contains('hidden')).to.be.true; }); - it('should change orientation', async () => { + it('should set vertical orientation part', async () => { calendar.orientation = 'vertical'; await elementUpdated(calendar); - const verticalContent = calendar.shadowRoot?.querySelector( - '[part=content-vertical]' - ); - expect(verticalContent).to.exist; + const contentEl = calendar.shadowRoot?.querySelector('[part~="content"]'); + expect(contentEl).to.exist; + + const partAttr = contentEl?.getAttribute('part') || ''; + const parts = partAttr.split(/\s+/); + expect(parts).to.include('content-vertical'); }); it('successfully enables and disables `hideHeader`', async () => { From e9105ac3766808a9e16a01795e02ee1a90d61c80 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 8 Jul 2025 16:43:14 +0300 Subject: [PATCH 09/11] fix(calendar): rename export part to `content-vertical` --- src/components/calendar/calendar.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/calendar/calendar.ts b/src/components/calendar/calendar.ts index 2d4b6272b..b574e64f5 100644 --- a/src/components/calendar/calendar.ts +++ b/src/components/calendar/calendar.ts @@ -609,7 +609,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin< @igcActiveDateChange=${this.activeDateChanged} @igcRangePreviewDateChange=${this.rangePreviewDateChanged} part="days-view" - exportparts="days-row, label, date-inner, week-number-inner, week-number, date, first, last, selected, inactive, hidden, current, current-vertical, weekend, range, special, disabled, single, preview" + exportparts="days-row, label, date-inner, week-number-inner, week-number, date, first, last, selected, inactive, hidden, current, content-vertical, weekend, range, special, disabled, single, preview" .active=${this.activeDaysViewIndex === idx} .activeDate=${date.native} .disabledDates=${this.disabledDates} From 1e09896cf0f7b0157a7fcc9ce5563f418d1a4d20 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 9 Jul 2025 16:19:42 +0300 Subject: [PATCH 10/11] fix(calendar): update render logic for orientation parts and refine tests --- src/components/calendar/calendar-rendering.spec.ts | 9 +++------ src/components/calendar/calendar.ts | 9 +++++---- src/components/calendar/helpers.spec.ts | 2 +- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/src/components/calendar/calendar-rendering.spec.ts b/src/components/calendar/calendar-rendering.spec.ts index c21f8e89c..a37ac91ee 100644 --- a/src/components/calendar/calendar-rendering.spec.ts +++ b/src/components/calendar/calendar-rendering.spec.ts @@ -144,12 +144,9 @@ describe('Calendar Rendering', () => { calendar.orientation = 'vertical'; await elementUpdated(calendar); - const contentEl = calendar.shadowRoot?.querySelector('[part~="content"]'); - expect(contentEl).to.exist; - - const partAttr = contentEl?.getAttribute('part') || ''; - const parts = partAttr.split(/\s+/); - expect(parts).to.include('content-vertical'); + const dom = getCalendarDOM(calendar); + expect(dom.content).to.exist; + expect(dom.content.part.contains('content-vertical')).to.be.true; }); it('successfully enables and disables `hideHeader`', async () => { diff --git a/src/components/calendar/calendar.ts b/src/components/calendar/calendar.ts index b574e64f5..f4d7393b9 100644 --- a/src/components/calendar/calendar.ts +++ b/src/components/calendar/calendar.ts @@ -662,13 +662,14 @@ export default class IgcCalendarComponent extends EventEmitterMixin< } protected override render() { - const direction = this._isDayView && this.orientation === 'horizontal'; - - const part = direction ? 'content' : 'content content-vertical'; + const parts = { + content: true, + 'content-vertical': this._isDayView && this.orientation === 'vertical', + }; return html` ${this.renderHeader()} -
+
${choose(this.activeView, [ ['days', () => this.renderDaysView()], ['months', () => this.renderMonthView()], diff --git a/src/components/calendar/helpers.spec.ts b/src/components/calendar/helpers.spec.ts index 8849e5be9..ec2da7d66 100644 --- a/src/components/calendar/helpers.spec.ts +++ b/src/components/calendar/helpers.spec.ts @@ -76,7 +76,7 @@ export function getCalendarDOM(element: IgcCalendarComponent) { }, }, get content() { - return root.querySelector('[part="content"]')!; + return root.querySelector('[part~="content"]')!; }, views: { get days() { From 76d54944296c86776ffde2e92d9e2b17aaf6c8bb Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 10 Jul 2025 10:48:31 +0300 Subject: [PATCH 11/11] fix(calendar): update part selectors to support multiple values --- src/components/calendar/themes/calendar.base.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/calendar/themes/calendar.base.scss b/src/components/calendar/themes/calendar.base.scss index 67de8719d..06482e5dc 100644 --- a/src/components/calendar/themes/calendar.base.scss +++ b/src/components/calendar/themes/calendar.base.scss @@ -139,7 +139,7 @@ padding: rem(16px); } -[part='content'] { +[part~='content'] { display: flex; flex-grow: 1; border-radius: inherit; @@ -147,9 +147,8 @@ border-top-right-radius: 0; } -[part='content-vertical'] { +[part~='content-vertical'] { flex-direction: column; - } [part='header-date'],