Skip to content

Commit 1582b0b

Browse files
OlgaLarinaOlgaLarina
OlgaLarina
and
OlgaLarina
authored
Fix popup styles (#6711)
* Fix popup styles * Fix popup styles * Fix popup styles update etalons V2 * Fix popup styles legacy theme etalons * Fix popup styles * Fix popup styles * Fix popup styles - rollback etalons * Fix popup styles * Fix popup styles - update etalons * Fix popup styles - update legacy etalons * fix popup styles * Fix popup styles --------- Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
1 parent e18628b commit 1582b0b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+258
-160
lines changed

‎functionalTests/designer/add-new-question.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ test("Add New Question", async t => {
2626
.click(Selector(".svc-element__add-new-question > button.svc-element__question-type-selector"))
2727
.wait(100)
2828
.pressKey("p")
29-
.click(Selector(".sv-popup:not(.sv-popup--overlay) li").withExactText("Panel").filterVisible())
29+
.click(getListItemByText("Panel").filterVisible())
3030
.click(getAddNewQuestionButton())
3131
.expect(Selector("span").withText("question1").visible).ok();
3232
});

‎functionalTests/designer/logic.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -603,7 +603,7 @@ test("Could not change 'and' on 'or' in logic tab or in condition editor", async
603603
.expect(visibleListItems.nth(1).textContent).contains("or");
604604
});
605605
test("Confirm dialog on leaving tab with an incorrect rule", async (t) => {
606-
const popupButtonSelector = Selector(".sv-popup__button");
606+
const popupButtonSelector = Selector(".sv-modal-popup__button");
607607
const cancelButton = popupButtonSelector.withText("I want to complete the rules");
608608
const applyButton = popupButtonSelector.withText("Yes");
609609

‎functionalTests/designer/responsiveness.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -290,15 +290,15 @@ test("Property grid editor popup", async (t) => {
290290
.click(getPropertyGridCategory(generalGroupName))
291291
.click(getPropertyGridCategory("Data"))
292292
.click(Selector("span").withExactText("Set Default Answer"))
293-
.expect(Selector(".sv-popup--modal").visible).ok()
293+
.expect(Selector(".sv-popup--modal-popup").visible).ok()
294294
.click(Selector("button").withExactText("Cancel"))
295295
.resizeWindow(380, 600)
296296
.click(Selector(".svc-survey-element-toolbar__item[title=\"Open settings\"]").filterVisible())
297297
.click(Selector(".svd-grid-hide"))
298298
.click(question1, { offsetX: 5, offsetY: 5 })
299299
.click(Selector(".svc-question__content-actions .svc-survey-element-toolbar__item[title=\"Open settings\"]").filterVisible())
300300
.click(Selector("span").withExactText("Set Default Answer"))
301-
.expect(Selector(".sv-popup--overlay").visible).ok();
301+
.expect(Selector(".sv-popup--modal-overlay").visible).ok();
302302
});
303303

304304
test("Question type popup - wide", async (t) => {
@@ -308,7 +308,7 @@ test("Question type popup - wide", async (t) => {
308308
await t
309309
.resizeWindow(1920, 900)
310310
.click(Selector("button.svc-element__question-type-selector"))
311-
.expect(Selector(".sv-popup:not(.sv-popup--overlay) li").withText("Single-Line Input").visible).ok();
311+
.expect(getListItemByText("Single-Line Input").exists).ok();
312312
});
313313

314314
test("Question type popup - narrow", async (t) => {
@@ -327,7 +327,7 @@ test("Question type popup - narrow", async (t) => {
327327
await t
328328
.resizeWindow(380, 600)
329329
.click(Selector("button.svc-element__question-type-selector"))
330-
.expect(Selector(".sv-popup.sv-popup--overlay li").withText("Single-Line Input").filterVisible().exists).ok();
330+
.expect(getListItemByText("Single-Line Input").exists).ok();
331331
});
332332

333333
test("Responsive creator: property grid - click the shadow", async (t) => {

‎functionalTests/preview/simulator.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -31,31 +31,31 @@ test("Simulator popups", async (t) => {
3131
const dropdownSelect = Selector(".sd-dropdown");
3232
const dropdownPopup = Selector(".svd-simulator-content .sv-popup");
3333
const dropdownPopupContainer = dropdownPopup.find(".sv-popup__container");
34-
const tabletPopup = "sv-popup--tablet";
35-
const overlayPopup = "sv-popup--dropdown-overlay";
34+
const tabletPopup = "sv-popup--menu-tablet";
35+
const phonePopup = "sv-popup--menu-phone";
3636

3737
await t
3838
.click(getTabbedMenuItemByText(creatorTabPreviewName))
3939
.expect(dropdownPopupContainer.visible).notOk()
4040

4141
.click(dropdownSelect)
4242
.expect(dropdownPopupContainer.visible).ok()
43-
.expect(dropdownPopup.classNames).notContains(overlayPopup)
43+
.expect(dropdownPopup.classNames).notContains(phonePopup)
4444
.expect(dropdownPopup.classNames).notContains(tabletPopup)
4545

4646
.click(getBarItemByTitle("Select device type"))
4747
.click(getListItemByText("iPad Air"))
4848

4949
.click(dropdownSelect)
5050
.expect(dropdownPopupContainer.visible).ok()
51-
.expect(dropdownPopup.classNames).contains(overlayPopup)
51+
.expect(dropdownPopup.classNames).notContains(phonePopup)
5252
.expect(dropdownPopup.classNames).contains(tabletPopup)
53-
.click(Selector(".sv-popup--dropdown-overlay"), { offsetY: 10 })
53+
.click(Selector(".sv-popup--menu-tablet"), { offsetY: 10 })
5454

5555
.click(getBarItemByTitle("Select device type"))
5656
.click(getListItemByText("iPhone 15"))
5757
.click(dropdownSelect)
5858
.expect(dropdownPopupContainer.visible).ok()
59-
.expect(dropdownPopup.classNames).contains(overlayPopup)
59+
.expect(dropdownPopup.classNames).contains(phonePopup)
6060
.expect(dropdownPopup.classNames).notContains(tabletPopup);
6161
});

‎functionalTests/property-grid/data.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ test("Default value", async (t) => {
4343
.click(question1)
4444
.click(dataTab)
4545
.click(Selector("span").withExactText("Set Default Answer"))
46-
.click(Selector(".sv-popup--modal span").withExactText("Item 1"))
47-
.click(Selector(".sv-popup--modal button").withExactText("Apply"))
46+
.click(Selector(".sv-popup--modal-popup span").withExactText("Item 1"))
47+
.click(Selector(".sv-popup--modal-popup button").withExactText("Apply"))
4848
.expect(Selector("span").withExactText("Change Default Answer").visible).ok();
4949
const resultJson = await getJSON();
5050
await t
@@ -79,8 +79,8 @@ test("Default value & readonly", async (t) => {
7979
.expect(Selector("span").withExactText("Clear").exists).notOk()
8080
.click(Selector("span").withExactText("Change Default Answer"))
8181
.click(Selector(".sv-popup__body-header").withExactText("Default Answer"))
82-
.expect(Selector(".sv-popup--modal button").withExactText("Apply").filterVisible().exists).notOk()
83-
.click(Selector(".sv-popup--modal button").withExactText("Cancel"))
82+
.expect(Selector(".sv-popup--modal-popup button").withExactText("Apply").filterVisible().exists).notOk()
83+
.click(Selector(".sv-popup--modal-popup button").withExactText("Cancel"))
8484
.expect(Selector("span").withExactText("Change Default Answer").visible).ok();
8585
});
8686

@@ -114,13 +114,13 @@ test("Impossible to specify the default value for a masked Date field", async (t
114114
.wait(1000)
115115
.pressKey("2")
116116
.pressKey("4")
117-
.expect(Selector(".sv-popup--modal input").value).eql("02/04/yyyy")
117+
.expect(Selector(".sv-popup--modal-popup input").value).eql("02/04/yyyy")
118118
.pressKey("1")
119119
.pressKey("9")
120120
.pressKey("9")
121121
.pressKey("8")
122-
.expect(Selector(".sv-popup--modal input").value).eql("02/04/1998")
123-
.click(Selector(".sv-popup--modal button").withExactText("Apply"))
122+
.expect(Selector(".sv-popup--modal-popup input").value).eql("02/04/1998")
123+
.click(Selector(".sv-popup--modal-popup button").withExactText("Apply"))
124124
.expect(Selector("span").withExactText("Change Default Answer").visible).ok();
125125

126126
const resultJson = await getJSON();

‎functionalTests/property-grid/localization.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ test("Matrix column editor in de localization", async (t) => {
7878

7979
const row1Column1Cell = Selector(".sd-table__row").nth(0).find(".svc-matrix-cell").filterVisible().nth(1);
8080
const editColumnButton = Selector(".svc-matrix-cell__question-controls-button").filterVisible();
81-
const popup = Selector(".svc-matrix-cell__popup.sv-popup--modal .sv-popup__body-content");
81+
const popup = Selector(".svc-matrix-cell__popup.sv-popup--modal-popup .sv-popup__body-content");
8282
const applyBtn = Selector("button").withExactText("Anwenden");
8383
const cancelBtn = Selector("button").withExactText("Abbrechen");
8484

‎packages/survey-creator-core/src/components/button.scss

+11-13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
@use "../variables" as *;
1+
@use "../ctr-variables.scss" as mixins;
22

3-
.svc-creator-popup.sv-popup--modal {
4-
.sd-btn.sv-popup__button {
3+
.svc-creator-popup.sv-popup--modal-popup,
4+
.svc-creator-popup.sv-popup--modal-overlay {
5+
.sv-modal-popup__button {
56
border-radius: var(--ctr-button-corner-radius-small, var(--sjs-corner-radius-x075));
67
padding: var(--ctr-button-padding-vertical-small, var(--sjs-spacing-x150))
78
var(--ctr-button-padding-horizontal-small, var(--sjs-spacing-x4))
@@ -20,8 +21,14 @@
2021
var(--ctr-button-shadow-spread, 0px)
2122
var(--ctr-button-shadow-color, var(--sjs-special-shadow, #00000040));
2223

24+
background: var(--ctr-button-background-color, var(--sjs-layer-1-background-500, #ffffffff));
25+
color: var(--ctr-button-text-color, var(--sjs-primary-background-500, #19b394ff));
26+
27+
&:hover {
28+
background: var(--ctr-button-background-color-hovered, var(--sjs-primary-background-10, #19b3941a));
29+
}
2330
span {
24-
@include ctrDefaultBoldFont;
31+
@include mixins.ctrDefaultBoldFont;
2532

2633
text-align: center;
2734
position: relative;
@@ -31,15 +38,6 @@
3138
}
3239
}
3340

34-
.sv-popup__button {
35-
background: var(--ctr-button-background-color, var(--sjs-layer-1-background-500, #ffffffff));
36-
color: var(--ctr-button-text-color, var(--sjs-primary-background-500, #19b394ff));
37-
38-
&:hover {
39-
background: var(--ctr-button-background-color-hovered, var(--sjs-primary-background-10, #19b3941a));
40-
}
41-
}
42-
4341
.sv-popup__button--apply {
4442
background: var(--ctr-button-background-color-cta, var(--sjs-primary-background-500, #19b394ff));
4543
color: var(--ctr-button-text-color-cta, var(--sjs-primary-foreground-100, #ffffffff));

‎packages/survey-creator-core/src/components/list.scss

+35-5
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
text-align: start;
2323
color: var(--ctr-list-item-text-color, var(--sjs-layer-1-foreground-100, #000000e6));
2424
transition: color $creator-transition-duration;
25-
25+
2626
--thm-list-item-padding-delta: var(--ctr-list-item-padding-left, var(--sjs-spacing-x2));
2727
--thm-list-item-padding-left: calc(var(--sjs-list-item-level) * var(--thm-list-item-padding-delta));
2828
display: flex;
@@ -173,6 +173,7 @@
173173
.svc-list__container {
174174
display: flex;
175175
flex-direction: column;
176+
flex-grow: 1;
176177
min-height: 0;
177178
height: 100%;
178179
}
@@ -219,6 +220,8 @@
219220
appearance: none;
220221
outline: none;
221222
border: none;
223+
padding: 0;
224+
width: 100%;
222225

223226
&::placeholder {
224227
color: var(--ctr-list-search-text-color-placeholder, var(--sjs-layer-1-foreground-50, #00000080));
@@ -232,9 +235,28 @@
232235
justify-content: center;
233236
align-items: center;
234237
border-radius: var(--ctr-search-button-corner-radius, var(--sjs-corner-radius-x05));
238+
appearance: none;
239+
border: none;
240+
border-radius: 100%;
241+
background-color: transparent;
242+
243+
svg {
244+
display: flex;
245+
width: var(--ctr-search-button-icon-width, var(--sjs-font-size-x2));
246+
height: var(--ctr-search-button-icon-height, var(--sjs-font-size-x2));
247+
justify-content: center;
248+
align-items: center;
249+
250+
use {
251+
fill: var(--ctr-search-button-icon-color, var(--sjs-layer-1-foreground-50, #00000080));
252+
}
253+
}
235254

236255
&:hover {
237-
background: var(--ctr-search-button-background-color-clear-hovered, var(--sjs-semantic-red-background-10, #e50a3e1a));
256+
background: var(
257+
--ctr-search-button-background-color-clear-hovered,
258+
var(--sjs-semantic-red-background-10, #e50a3e1a)
259+
);
238260

239261
use {
240262
fill: var(--ctr-search-button-icon-color-clear-hovered, var(--sjs-semantic-red-background-500, #e50a3eff));
@@ -243,18 +265,26 @@
243265
}
244266

245267
.svc-list__empty-container {
246-
padding: var(--ctr-list-padding-top-no-data, var(--sjs-spacing-x4)) var(--ctr-list-padding-right-no-data, var(--sjs-spacing-x2))
247-
var(--ctr-list-padding-bottom-no-data, var(--sjs-spacing-x4)) var(--ctr-list-padding-left-no-data, var(--sjs-spacing-x2));
268+
padding: var(--ctr-list-padding-top-no-data, var(--sjs-spacing-x4))
269+
var(--ctr-list-padding-right-no-data, var(--sjs-spacing-x2))
270+
var(--ctr-list-padding-bottom-no-data, var(--sjs-spacing-x4))
271+
var(--ctr-list-padding-left-no-data, var(--sjs-spacing-x2));
272+
display: flex;
273+
flex-direction: column;
274+
justify-content: center;
275+
flex-grow: 1;
248276
}
249277

250278
.svc-list__empty-text {
251279
@include ctrDefaultFont;
252280
@include textEllipsis;
253281
text-align: center;
282+
align-self: stretch;
254283
color: var(--ctr-list-no-data-text-color, var(--sjs-layer-1-foreground-50, #00000080));
255284
}
256285

257-
.sv-popup--overlay {
286+
.sv-popup--menu-phone,
287+
.sv-popup--menu-tablet {
258288
.svc-list-item__marker-icon {
259289
display: none;
260290
}

0 commit comments

Comments
 (0)