fix(text-editor): update typo to ensure focused toolbar button has re…

…lative position
Sage · Aug 22, 2023 · 25bcaf6 · 25bcaf6
1 parent 0183a35
commit 25bcaf6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/cypress/components/text-editor/text-editor.cy.tsx b/cypress/components/text-editor/text-editor.cy.tsx
@@ -374,31 +374,35 @@ context("Test for TextEditor component", () => {
             "box-shadow",
             "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
           )
-          .and("have.css", "outline", "rgba(0, 0, 0, 0) solid 3px");
+          .and("have.css", "outline", "rgba(0, 0, 0, 0) solid 3px")
+          .and("have.css", "position", "relative");
         textEditorToolbar("italic")
           .focus()
           .should(
             "have.css",
             "box-shadow",
             "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
           )
-          .and("have.css", "outline", "rgba(0, 0, 0, 0) solid 3px");
+          .and("have.css", "outline", "rgba(0, 0, 0, 0) solid 3px")
+          .and("have.css", "position", "relative");
         textEditorToolbar("bullet-list")
           .focus()
           .should(
             "have.css",
             "box-shadow",
             "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
           )
-          .and("have.css", "outline", "rgba(0, 0, 0, 0) solid 3px");
+          .and("have.css", "outline", "rgba(0, 0, 0, 0) solid 3px")
+          .and("have.css", "position", "relative");
         textEditorToolbar("number-list")
           .focus()
           .should(
             "have.css",
             "box-shadow",
             "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
           )
-          .and("have.css", "outline", "rgba(0, 0, 0, 0) solid 3px");
+          .and("have.css", "outline", "rgba(0, 0, 0, 0) solid 3px")
+          .and("have.css", "position", "relative");
       });
     });
   });

diff --git a/src/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.ts b/src/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.ts
@@ -22,7 +22,7 @@ const StyledToolbarButton = styled.button.attrs({ type: "button" })<{
     :focus,
     :active {
       z-index: 1;
-      postion: relative;
+      position: relative;
       ${theme.focusRedesignOptOut &&
       /* istanbul ignore next */
       css`