Skip to content

Commit ce4e648

Browse files
ndeshevndeshev
committed
feat(ui5-ai-textarea): apply UX feedback adjustments
- show AI button only on focus - replace "Generate text" menu item with "Generate" - fix height issue of the WritingAssistant in compact mode - adjust cypress tests accordingly - update "previous" and "next" version buttons tooltips to include the keyboard shortcuts
1 parent adc9a49 commit ce4e648

File tree

5 files changed

+80
-75
lines changed

5 files changed

+80
-75
lines changed

‎packages/ai/cypress/specs/TextArea.cy.tsx‎

Lines changed: 33 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,11 @@ describe("Basic", () => {
111111
/>
112112
);
113113

114+
cy.get("[ui5-ai-textarea]")
115+
.shadow()
116+
.find("textarea")
117+
.focus();
118+
114119
cy.get("[ui5-ai-textarea]")
115120
.shadow()
116121
.find("[ui5-ai-writing-assistant]")
@@ -135,11 +140,17 @@ describe("Basic", () => {
135140
cy.mount(
136141
<TextArea
137142
loading={false}
143+
currentVersion={1}
138144
totalVersions={3}
139145
onVersionChange={onVersionChange}
140146
/>
141147
);
142148

149+
cy.get("[ui5-ai-textarea]")
150+
.shadow()
151+
.find("textarea")
152+
.focus();
153+
143154
cy.get("[ui5-ai-textarea]")
144155
.shadow()
145156
.find("[ui5-ai-writing-assistant]")
@@ -162,6 +173,7 @@ describe("Basic", () => {
162173
cy.mount(
163174
<TextArea
164175
loading={false}
176+
currentVersion={1}
165177
totalVersions={3}
166178
/>
167179
);
@@ -207,7 +219,7 @@ describe("Basic", () => {
207219
<TextArea
208220
value={initialValue}
209221
loading={false}
210-
currentVersion={0}
222+
currentVersion={1}
211223
totalVersions={2}
212224
/>
213225
);
@@ -216,6 +228,11 @@ describe("Basic", () => {
216228
.as("textarea")
217229
.invoke("prop", "value", newValue);
218230

231+
cy.get("@textarea")
232+
.shadow()
233+
.find("textarea")
234+
.focus();
235+
219236
cy.get("@textarea")
220237
.shadow()
221238
.find("[ui5-ai-writing-assistant]")
@@ -262,6 +279,11 @@ describe("Basic", () => {
262279
</TextArea>
263280
);
264281

282+
cy.get("[ui5-ai-textarea]")
283+
.shadow()
284+
.find("textarea")
285+
.focus();
286+
265287
cy.get("[ui5-ai-textarea]")
266288
.shadow()
267289
.find("[ui5-ai-writing-assistant]")
@@ -284,6 +306,11 @@ describe("Basic", () => {
284306
/>
285307
);
286308

309+
cy.get("[ui5-ai-textarea]")
310+
.shadow()
311+
.find("textarea")
312+
.focus();
313+
287314
cy.get("[ui5-ai-textarea]")
288315
.shadow()
289316
.find("[ui5-ai-writing-assistant]")
@@ -516,7 +543,11 @@ describe("Basic", () => {
516543
/>
517544
);
518545

519-
// Verify that the integrated WritingAssistant has translatable attributes
546+
cy.get("[ui5-ai-textarea]")
547+
.shadow()
548+
.find("textarea")
549+
.focus();
550+
520551
cy.get("[ui5-ai-textarea]")
521552
.shadow()
522553
.find("[ui5-ai-writing-assistant]")
@@ -532,7 +563,6 @@ describe("Basic", () => {
532563
.should("have.attr", "accessible-name", TextArea.i18nBundle.getText(WRITING_ASSISTANT_BUTTON_ACCESSIBLE_NAME))
533564
.should("have.attr", "tooltip", TextArea.i18nBundle.getText(WRITING_ASSISTANT_BUTTON_TOOLTIP));
534565

535-
// Verify versioning tooltips are translatable
536566
cy.get("[ui5-ai-textarea]")
537567
.shadow()
538568
.find("[ui5-ai-writing-assistant]")
@@ -584,13 +614,6 @@ describe("Basic", () => {
584614
.should("exist")
585615
.should("be.visible");
586616

587-
cy.get("[ui5-ai-textarea]")
588-
.shadow()
589-
.find("[ui5-ai-writing-assistant]")
590-
.shadow()
591-
.find("#ai-menu-btn")
592-
.focus();
593-
594617
cy.get("[ui5-ai-textarea]")
595618
.shadow()
596619
.find("[ui5-ai-writing-assistant]")

‎packages/ai/cypress/specs/Versioning.cy.tsx‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -536,7 +536,7 @@ describe("Versioning Component", () => {
536536
cy.get("[ui5-ai-versioning]")
537537
.shadow()
538538
.find('[data-ui5-versioning-button="previous"]')
539-
.should("have.attr", "tooltip", "Previous Version");
539+
.should("have.attr", "tooltip", "Previous Version (Ctrl + Shift + Z)");
540540
});
541541

542542
it("should have translatable next button tooltip", () => {
@@ -545,7 +545,7 @@ describe("Versioning Component", () => {
545545
cy.get("[ui5-ai-versioning]")
546546
.shadow()
547547
.find('[data-ui5-versioning-button="next"]')
548-
.should("have.attr", "tooltip", "Next Version");
548+
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)");
549549
});
550550

551551
it("should maintain tooltips when button states change", () => {
@@ -554,98 +554,89 @@ describe("Versioning Component", () => {
554554
cy.get("[ui5-ai-versioning]")
555555
.as("versioning");
556556

557-
// Previous button disabled at first step, but still has tooltip
558557
cy.get("@versioning")
559558
.shadow()
560559
.find('[data-ui5-versioning-button="previous"]')
561-
.should("have.attr", "tooltip", "Previous Version")
560+
.should("have.attr", "tooltip", "Previous Version (Ctrl + Shift + Z)")
562561
.shadow()
563562
.find("ui5-button")
564563
.should("have.attr", "disabled");
565564

566-
// Next button enabled and has tooltip
567565
cy.get("@versioning")
568566
.shadow()
569567
.find('[data-ui5-versioning-button="next"]')
570-
.should("have.attr", "tooltip", "Next Version")
568+
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)")
571569
.shadow()
572570
.find("ui5-button")
573571
.should("not.have.attr", "disabled");
574572

575-
// Move to middle step
576573
cy.get("@versioning").invoke("prop", "currentStep", 2);
577574

578-
// Both buttons enabled and have tooltips
579575
cy.get("@versioning")
580576
.shadow()
581577
.find('[data-ui5-versioning-button="previous"]')
582-
.should("have.attr", "tooltip", "Previous Version")
578+
.should("have.attr", "tooltip", "Previous Version (Ctrl + Shift + Z)")
583579
.shadow()
584580
.find("ui5-button")
585581
.should("not.have.attr", "disabled");
586582

587583
cy.get("@versioning")
588584
.shadow()
589585
.find('[data-ui5-versioning-button="next"]')
590-
.should("have.attr", "tooltip", "Next Version")
586+
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)")
591587
.shadow()
592588
.find("ui5-button")
593589
.should("not.have.attr", "disabled");
594590

595-
// Move to last step
596591
cy.get("@versioning").invoke("prop", "currentStep", 3);
597592

598-
// Previous button enabled and has tooltip
599593
cy.get("@versioning")
600594
.shadow()
601595
.find('[data-ui5-versioning-button="previous"]')
602-
.should("have.attr", "tooltip", "Previous Version")
596+
.should("have.attr", "tooltip", "Previous Version (Ctrl + Shift + Z)")
603597
.shadow()
604598
.find("ui5-button")
605599
.should("not.have.attr", "disabled");
606600

607-
// Next button disabled at last step, but still has tooltip
608601
cy.get("@versioning")
609602
.shadow()
610603
.find('[data-ui5-versioning-button="next"]')
611-
.should("have.attr", "tooltip", "Next Version")
604+
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)")
612605
.shadow()
613606
.find("ui5-button")
614607
.should("have.attr", "disabled");
615608
});
616609

617610
it("should maintain tooltips with edge cases", () => {
618-
// Single step case
619611
cy.mount(<Versioning currentStep={1} totalSteps={1} />);
620612

621613
cy.get("[ui5-ai-versioning]")
622614
.shadow()
623615
.find('[data-ui5-versioning-button="previous"]')
624-
.should("have.attr", "tooltip", "Previous Version")
616+
.should("have.attr", "tooltip", "Previous Version (Ctrl + Shift + Z)")
625617
.shadow()
626618
.find("ui5-button")
627619
.should("have.attr", "disabled");
628620

629621
cy.get("[ui5-ai-versioning]")
630622
.shadow()
631623
.find('[data-ui5-versioning-button="next"]')
632-
.should("have.attr", "tooltip", "Next Version")
624+
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)")
633625
.shadow()
634626
.find("ui5-button")
635627
.should("have.attr", "disabled");
636628

637-
// Zero steps case
638629
cy.mount(<Versioning currentStep={0} totalSteps={0} />);
639630

640631
cy.get("[ui5-ai-versioning]")
641632
.shadow()
642633
.find('[data-ui5-versioning-button="previous"]')
643-
.should("have.attr", "tooltip", "Previous Version");
634+
.should("have.attr", "tooltip", "Previous Version (Ctrl + Shift + Z)");
644635

645636
cy.get("[ui5-ai-versioning]")
646637
.shadow()
647638
.find('[data-ui5-versioning-button="next"]')
648-
.should("have.attr", "tooltip", "Next Version");
639+
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)");
649640
});
650641
});
651642
});

0 commit comments

Comments
 (0)