fix: add cx-read-more component (for product reviews) #20250

uroslates · 2025-04-30T11:31:12Z

Closes https://jira.tools.sap/browse/CXSPA-9967

…uct reviews)

cypress · 2025-05-05T10:08:41Z

spartacus Run #48392

Run Properties: Passed #48392 • 03d9f411a9 ℹ️: Merge 35e9fcedc55cf31f01f55ee2fbc3b574ac2dc124 into da0e035364973bc97dd2ae3d3a9b...

Project	`spartacus`
Branch Review	`feature/CXSPA-9967`
Run status	`Passed #48392`
Run duration	`04m 59s`
Commit	`03d9f411a9 ℹ️: Merge 35e9fcedc55cf31f01f55ee2fbc3b574ac2dc124 into da0e035364973bc97dd2ae3d3a9b...`
Committer	`Uros Lates`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`3`
Pending	`2`
Skipped	`0`
Passing	`237`
View all changes introduced in this branch ↗︎

Zeyber · 2025-05-08T08:39:27Z

projects/storefrontlib/shared/components/read-more/read-more.component.ts

+  @Input() readLessTranslation?: string = 'common.readLess';
+  @Input() maxLength = 360;
+
+  @Input() text: string = '';


To make this component more useful in other cases, should we include a translation key as an option for this?

We alread have that - the labels are inputs (accepting translation keys) - here

@Input() readMoreTranslation?: string = 'common.readMore'; @Input() readLessTranslation?: string = 'common.readLess';

Sorry, to be clear I mean @Input() text: I18nKey | string = '';. I suppose the other inputs should also have the I18nKey typing too right?

Ah that. sorry the text is the actual text coming from the DB (so its should not be translatable - thats done in through the BE system).
As for the other 2 inputs NP I'll update it to have the name suffix I18nKey (to be more intuitive). As for they I18nKey type - i haven't found it and wouldn't like to introduce it now since its just a string. And introducing it now (and enforcing consistency) would require tons of changes on other places I guess. We could to that type of improvement globally as some other issue (if really required).

Zeyber · 2025-05-08T08:41:11Z

projects/storefrontlib/shared/components/read-more/read-more.component.ts

+import { I18nModule } from '@spartacus/core';
+
+/**
+ * Renders cx-read-more.


This is a nice approach to the read more case. Simple enough to understand quickly and works well. Could we expand on jsdocs for the class and properties?

Applied! 👍

Zeyber · 2025-05-08T08:45:51Z

...orefrontlib/cms-components/product/product-tabs/product-reviews/product-reviews.component.ts

@@ -43,12 +46,16 @@ export class ProductReviewsComponent {
  @ViewChild('writeReviewButton', { static: false })
  writeReviewButton: ElementRef;

+  @Input() inputCharactersForReviewTitle = 255;


We should keep this behaviour feature toggled as I would consider it a breaking change. If it falls back to null, then I think the maxLength property wouldn't be applied.

I think the property name could also be changed to something closer to the attribute it affects like maxLengthReviewTitle. Just an example, but I think it could be more clear.

Addressed! 👍

Applied! 👍

Zeyber · 2025-05-08T08:57:52Z

...orefrontlib/cms-components/product/product-tabs/product-reviews/product-reviews.component.ts

@@ -127,12 +134,53 @@ export class ProductReviewsComponent {
    }
  }

+  get reviewTitleCharacterLeft(): number {


I'm not a huge fan of using getters this way as they retrigger on every component interaction (eg. clicking on the field triggers all, typing a character triggers all, etc). Its a big impact on performance at scale. It would be better if they could trigger only when the needed property changes.

Note: It could be an opportunity to look into the new angular signals.

Applied 👍. Removed those and moved to template.

Zeyber · 2025-05-08T09:00:43Z

...efrontlib/cms-components/product/product-tabs/product-reviews/product-reviews.component.html

@@ -147,6 +166,16 @@ <h3>{{ 'productReview.overallRating' | cxTranslate }}</h3>
            *cxFeature="'!formErrorsDescriptiveMessages'"
            [control]="reviewForm.get('comment')"
          ></cx-form-errors>
+
+          <p


Could you please consult with UI designers on the styling details of this component? You can tag them on the onboarding chat with links to the PR (and maybe ticket for context).

If we're talking about the characters limiting feature & form errors - I don't think this is necessary since this kind of feature was already implemented on few other places, so the implementation here is fully matching the other usages & styles.
But if needed I could do that. (or if its related to the read-more cmp)

github-actions · 2025-05-12T08:51:11Z

Merge Checks Failed

Please push a commit to re-trigger the build.
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

github-actions · 2025-05-12T10:34:48Z

Merge Checks Failed

Please push a commit to re-trigger the build.
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

github-actions · 2025-05-13T08:52:22Z

Merge Checks Failed

Please push a commit to re-trigger the build.
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

fix: add cx-read-more component (for product reviews)

ac6662b

uroslates requested a review from a team as a code owner April 30, 2025 11:31

github-actions bot marked this pull request as draft April 30, 2025 11:31

uroslates and others added 4 commits April 30, 2025 14:08

Merge branch 'develop' into feature/CXSPA-9967

e51eafa

Merge branch 'develop' into feature/CXSPA-9967

30cd526

Merge branch 'develop' into feature/CXSPA-9967

1f2ba77

fix: add review title/comments/reviewrName characters limit (for prod…

4afe15e

…uct reviews)

uroslates marked this pull request as ready for review May 5, 2025 09:51

fix: fixing failed test

706a30f

github-actions bot marked this pull request as draft May 5, 2025 14:47

uroslates marked this pull request as ready for review May 5, 2025 14:59

ulates-sap added 2 commits May 5, 2025 17:49

fix: add feature flags

f18eccd

fix: fix feature flags prettier issues

31ae890

github-actions bot marked this pull request as draft May 5, 2025 16:19

Merge branch 'develop' into feature/CXSPA-9967

bfa7c2e

uroslates marked this pull request as ready for review May 6, 2025 08:30

Merge branch 'develop' into feature/CXSPA-9967

f1b7838

github-actions bot marked this pull request as draft May 6, 2025 10:49

Merge branch 'develop' into feature/CXSPA-9967

08c6e45

uroslates marked this pull request as ready for review May 8, 2025 08:43

Zeyber requested changes May 8, 2025

View reviewed changes

Merge branch 'develop' into feature/CXSPA-9967

763a4f0

github-actions bot marked this pull request as draft May 12, 2025 08:01

uroslates marked this pull request as ready for review May 12, 2025 08:33

fix: address PR comments - add docs

1acc3bb

github-actions bot marked this pull request as draft May 12, 2025 09:08

uroslates marked this pull request as ready for review May 12, 2025 09:13

fix: addressing PR comments

5f35d81

github-actions bot marked this pull request as draft May 12, 2025 10:31

Merge branch 'develop' into feature/CXSPA-9967

5397a80

uroslates marked this pull request as ready for review May 12, 2025 10:32

github-actions bot marked this pull request as draft May 12, 2025 10:32

uroslates requested a review from Zeyber May 12, 2025 10:33

Merge branch 'develop' into feature/CXSPA-9967

ac9ef3f

uroslates marked this pull request as ready for review May 12, 2025 10:34

github-actions bot marked this pull request as draft May 12, 2025 10:34

Merge branch 'develop' into feature/CXSPA-9967

fde983c

uroslates marked this pull request as ready for review May 13, 2025 08:34

Merge branch 'develop' into feature/CXSPA-9967

602d712

github-actions bot marked this pull request as draft May 19, 2025 12:07

uroslates and others added 4 commits May 20, 2025 10:26

Merge branch 'develop' into feature/CXSPA-9967

0320717

fix: addressing PR comments

227d352

Merge branch 'develop' into feature/CXSPA-9967

3cdb270

Merge branch 'develop' into feature/CXSPA-9967

35e9fce

uroslates marked this pull request as ready for review May 22, 2025 11:42

Merge branch 'develop' into feature/CXSPA-9967

1657f61

github-actions bot marked this pull request as draft May 27, 2025 10:58

fix: address some UX comments

3e27277

fix: add cx-read-more component (for product reviews) #20250

Are you sure you want to change the base?

fix: add cx-read-more component (for product reviews) #20250

Uh oh!

Conversation

uroslates commented Apr 30, 2025

Uh oh!

cypress bot commented May 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

uroslates May 20, 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented May 12, 2025

Merge Checks Failed

Uh oh!

github-actions bot commented May 12, 2025

Merge Checks Failed

Uh oh!

github-actions bot commented May 13, 2025

Merge Checks Failed

Uh oh!

Uh oh!

cypress bot commented May 5, 2025 •

edited

Loading

uroslates May 20, 2025 •

edited

Loading