fix(calendar): reflect the orientation attr. by desig9stein · Pull Request #1775 · IgniteUI/igniteui-webcomponents

desig9stein · 2025-07-07T06:56:36Z

Closes: #1711

…rOrientation

…nline styles

…tion test

…ce of vertical content part

…lusion

rkaraivanov

LGTM with some suggestions

rkaraivanov · 2025-07-09T06:48:57Z

src/components/calendar/calendar.ts

-      flexGrow: 1,
-      flexDirection: direction ? 'row' : 'column',
-    };
+    const part = direction ? 'content' : 'content content-vertical';


Suggested change

const part = direction ? 'content' : 'content content-vertical';

const parts = {

content: true,

'content-vertical': this._isDayView && this.orientation === 'vertical',

};

You can also delete the direction variable above it.

rkaraivanov · 2025-07-09T06:49:20Z

src/components/calendar/calendar.ts

    return html`
      ${this.renderHeader()}
-      <div ${ref(this.contentRef)} part="content" style=${styleMap(styles)}>
+      <div ${ref(this.contentRef)} part="${part}">


Suggested change

<div ${ref(this.contentRef)} part="${part}">

<div ${ref(this.contentRef)} part=${partMap(parts)}>

rkaraivanov · 2025-07-09T06:52:51Z

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

-    it('should change orientation', async () => {
-      const dom = getCalendarDOM(calendar);
-
-      expect(
-        getComputedStyle(dom.content).getPropertyValue('flex-direction')
-      ).to.equal('row');
-


I mean you can adjust the getCalendarDOM helper function to query the content part with the right selector instead of outright removing the check.

This is the current version of the calendar DOM content getter.

get content() { return root.querySelector<HTMLElement>('[part="content"]')!; }

rkaraivanov · 2025-07-09T06:55:52Z

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

+      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');


If you update the getCalendarDOM function to correctly return the content container you can simplify this to:

Suggested change

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');

expect(dom.content).to.exist;

expect(dom.content.part.contains('content-vertical')).to.be.true;

…ests

simeonoff · 2025-07-10T07:34:43Z

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


+[part='content-vertical'] {
+    flex-direction: column;
+


Suggested change

simeonoff · 2025-07-10T07:35:12Z

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

    border-top-right-radius: 0;
 }

+[part='content-vertical'] {


Suggested change

[part='content-vertical'] {

[part~='content-vertical'] {

simeonoff · 2025-07-10T07:36:53Z

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

@@ -140,11 +140,18 @@
 }

 [part='content'] {


Suggested change

[part='content'] {

[part~='content'] {

fix(calendar): reflect the orientation attr the same way as the heade…

8f1abe7

…rOrientation

desig9stein requested a review from simeonoff July 7, 2025 06:56

desig9stein assigned simeonoff and yradoeva Jul 7, 2025

desig9stein added ❌ status: awaiting-test calendar labels Jul 7, 2025

desig9stein force-pushed the mpopov/calendar-orientation-attr branch from 41532cf to 8f1abe7 Compare July 7, 2025 13:18

desig9stein marked this pull request as draft July 7, 2025 13:28

desig9stein marked this pull request as ready for review July 7, 2025 13:48

fix(calendar): update orientation styling, add new part, and remove i…

6c7ae4e

…nline styles

desig9stein force-pushed the mpopov/calendar-orientation-attr branch from fa359ca to 6c7ae4e Compare July 7, 2025 13:51

desig9stein added 2 commits July 8, 2025 09:19

fix(calendar): revert the reflected attr

7543134

test(calendar): attempt to fix the test

f3988cf

desig9stein added the design: awaiting-validation label Jul 8, 2025

yradoeva added design: in-validation and removed design: awaiting-validation labels Jul 8, 2025

This comment was marked as resolved.

Sign in to view

fix(calendar): make the rest of the themes to use the new selector

f87cdab

yradoeva added design: verified and removed design: in-validation labels Jul 8, 2025

desig9stein and others added 5 commits July 8, 2025 16:14

Merge branch 'master' into mpopov/calendar-orientation-attr

b467b5d

test(calendar): remove unnecessary display style assertion in orienta…

94ed79d

…tion test

test(calendar): simplify orientation test by checking for the existen…

34a5935

…ce of vertical content part

test(calendar): refine vertical orientation test to validate part inc…

7349508

…lusion

fix(calendar): rename export part to content-vertical

e9105ac

rkaraivanov reviewed Jul 9, 2025

View reviewed changes

fix(calendar): update render logic for orientation parts and refine t…

1e09896

…ests

desig9stein requested a review from rkaraivanov July 9, 2025 13:20

Merge branch 'master' into mpopov/calendar-orientation-attr

39c84bd

rkaraivanov previously approved these changes Jul 10, 2025

View reviewed changes

simeonoff reviewed Jul 10, 2025

View reviewed changes

simeonoff and others added 2 commits July 10, 2025 10:37

Merge branch 'master' into mpopov/calendar-orientation-attr

4e210c9

fix(calendar): update part selectors to support multiple values

76d5494

desig9stein dismissed rkaraivanov’s stale review via 76d5494 July 10, 2025 07:48

simeonoff approved these changes Jul 10, 2025

View reviewed changes

simeonoff merged commit 29c311a into master Jul 10, 2025
5 checks passed

simeonoff deleted the mpopov/calendar-orientation-attr branch July 10, 2025 07:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

fix(calendar): reflect the orientation attr.#1775
simeonoff merged 14 commits intomasterfrom
mpopov/calendar-orientation-attr

desig9stein commented Jul 7, 2025

Uh oh!

This comment was marked as resolved.

rkaraivanov left a comment

Uh oh!

rkaraivanov Jul 9, 2025

Uh oh!

rkaraivanov Jul 9, 2025

Uh oh!

rkaraivanov Jul 9, 2025 •

edited

Loading

Uh oh!

rkaraivanov Jul 9, 2025

Uh oh!

simeonoff Jul 10, 2025

Uh oh!

simeonoff Jul 10, 2025

Uh oh!

simeonoff Jul 10, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

-    const part = direction ? 'content' : 'content content-vertical';
+    const parts = {
+      content: true,
+      'content-vertical': this._isDayView && this.orientation === 'vertical',
+    };

	<div ${ref(this.contentRef)} part="${part}">
	<div ${ref(this.contentRef)} part=${partMap(parts)}>

Conversation

desig9stein commented Jul 7, 2025

Uh oh!

This comment was marked as resolved.

rkaraivanov left a comment

Choose a reason for hiding this comment

Uh oh!

rkaraivanov Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

rkaraivanov Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

rkaraivanov Jul 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rkaraivanov Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

simeonoff Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

simeonoff Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

simeonoff Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

rkaraivanov Jul 9, 2025 •

edited

Loading