Merge pull request #6613 from Sage/FE-6374-switch-visual-issue

fix(switch): visual overflow with longer translation strings (FE-6374)
Sage · Aug 7, 2024 · 4972e67 · 4972e67
2 parents f40f674 + f9d6380
commit 4972e67
Show file tree

Hide file tree

Showing 12 changed files with 2,200 additions and 184 deletions.
diff --git a/playwright/components/switch/index.ts b/playwright/components/switch/index.ts
@@ -7,17 +7,17 @@ export const switchDataComponent = (page: Page) =>
 export const switchInput = (page: Page) =>
   switchDataComponent(page).locator("input");
 export const switchStyling = (page: Page) =>
-  switchDataComponent(page).locator("div > div > div > div > span");
+  switchDataComponent(page).locator("[data-component='slider']");
 export const switchLoading = (page: Page) =>
-  switchDataComponent(page)
-    .locator("div > div > div > div > span > div")
-    .nth(0);
+  switchDataComponent(page).locator("[data-component='loader']");
 export const switchLabel = (page: Page) =>
   switchDataComponent(page).locator("label");
 export const switchLabelParent = (page: Page) =>
   switchLabel(page).locator("..");
 export const switchHelpIcon = (page: Page) =>
   switchDataComponent(page).locator("[data-component='help']");
+export const switchFieldHelp = (page: Page) =>
+  switchDataComponent(page).locator("[data-element='help']");
 export const switchIcon = (page: Page) =>
   switchDataComponent(page).locator("span[data-component='icon']");
 export const switchSvg = (page: Page) =>

diff --git a/src/components/switch/__internal__/__snapshots__/switch-slider-panel.spec.tsx.snap b/src/components/switch/__internal__/__snapshots__/switch-slider-panel.spec.tsx.snap
@@ -5,16 +5,19 @@ exports[`SwitchSliderPanel base theme renders as expected 1`] = `
   border: 0;
   color: var(--colorsActionMinorYang100);
   margin: auto;
-  margin-top: 5px;
+  position: absolute;
+  left: 0;
 }
 
 .c0[type="on"] {
   margin-left: 9px;
+  padding-right: 27px;
 }
 
 .c0[type="off"] {
   color: var(--colorsActionMinor500);
-  margin-right: 6px;
+  margin-right: 9px;
+  padding-left: 27px;
 }
 
 <div