fix(calendar): reflect the orientation attr. (#1775)

Author: desig9stein

src/components/calendar/calendar-rendering.spec.ts

@@ -140,19 +140,13 @@ describe('Calendar Rendering', () => {
       expect(last.children.item(6)?.part.contains('hidden')).to.be.true;
     });
 
-    it('should change orientation', async () => {
-      const dom = getCalendarDOM(calendar);
-
-      expect(
-        getComputedStyle(dom.content).getPropertyValue('flex-direction')
-      ).to.equal('row');
-
+    it('should set vertical orientation part', async () => {
       calendar.orientation = 'vertical';
       await elementUpdated(calendar);
 
-      expect(
-        getComputedStyle(dom.content).getPropertyValue('flex-direction')
-      ).to.equal('column');
+      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 () => {

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, content-vertical, weekend, range, special, disabled, single, preview"
             .active=${this.activeDaysViewIndex === idx}
             .activeDate=${date.native}
             .disabledDates=${this.disabledDates}
@@ -663,17 +662,14 @@ 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 parts = {
+      content: true,
+      'content-vertical': this._isDayView && this.orientation === 'vertical',
     };
 
     return html`
       ${this.renderHeader()}
-      <div ${ref(this.contentRef)} part="content" style=${styleMap(styles)}>
+      <div ${ref(this.contentRef)} part=${partMap(parts)}>
         ${choose(this.activeView, [
           ['days', () => this.renderDaysView()],
           ['months', () => this.renderMonthView()],

src/components/calendar/helpers.spec.ts

@@ -76,7 +76,7 @@ export function getCalendarDOM(element: IgcCalendarComponent) {
       },
     },
     get content() {
-      return root.querySelector<HTMLElement>('[part="content"]')!;
+      return root.querySelector<HTMLElement>('[part~="content"]')!;
     },
     views: {
       get days() {

src/components/calendar/themes/calendar.base.scss

@@ -139,12 +139,18 @@
     padding: rem(16px);
 }
 
-[part='content'] {
+[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;

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) {

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 {

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 {

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 {