chore: fix qa issues

Sage · Jul 18, 2022 · 6b1dfc8 · 6b1dfc8
1 parent 04fc2ac
commit 6b1dfc8
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 37 deletions.
diff --git a/...plit-button/split-button-test.stories.mdx → ...split-button/split-button-test.stories.js b/...plit-button/split-button-test.stories.mdx → ...split-button/split-button-test.stories.js
@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import React from "react";
 import { action } from "@storybook/addon-actions";
 
 import specialCharacters from "../../__internal__/utils/argTypes/specialCharacters";
@@ -13,15 +13,15 @@ import {
 } from "./split-button.config";
 import SplitButton from "./split-button.component";
 
-<Meta
-  title="Split Button/Test"
-  parameters={{
+export default {
+  title: "Split Button/Test",
+  parameters: {
     info: { disable: true },
     chromatic: {
       disable: true,
     },
-  }}
-  argTypes={{
+  },
+  argTypes: {
     iconType: {
       options: ["", ...ICONS],
       control: {
@@ -54,9 +54,10 @@ import SplitButton from "./split-button.component";
     },
     textSpecialCharacters: specialCharacters,
     subtextSpecialCharacters: specialCharacters,
-  }}
-/>
+  },
+};
 
+/* eslint-disable react/prop-types */
 export const SplitButtonStory = ({
   buttonType,
   dataElement,
@@ -68,6 +69,7 @@ export const SplitButtonStory = ({
   iconType,
   iconPosition,
   ...args
+  /* eslint-enable */
 }) => {
   return (
     <Box height={400} mt={100} ml={100}>
@@ -96,28 +98,20 @@ export const SplitButtonStory = ({
   );
 };
 
-# Split Button
-
-### Default
-
-<Canvas>
-  <Story
-    name="default"
-    args={{
-      iconType: "",
-      iconPosition: "before",
-      buttonType: "secondary",
-      dataElement: "data-element",
-      dataRole: "",
-      disabled: false,
-      size: "medium",
-      align: "left",
-      text: "Example Split Button",
-      textSpecialCharacters: undefined,
-      subtext: "",
-      subtextSpecialCharacters: undefined,
-    }}
-  >
-    {SplitButtonStory.bind({})}
-  </Story>
-</Canvas>
+SplitButtonStory.story = {
+  name: "default",
+  args: {
+    iconType: "",
+    iconPosition: "before",
+    buttonType: "secondary",
+    dataElement: "data-element",
+    dataRole: "",
+    disabled: false,
+    size: "medium",
+    align: "left",
+    text: "Example Split Button",
+    textSpecialCharacters: undefined,
+    subtext: "",
+    subtextSpecialCharacters: undefined,
+  },
+};
diff --git a/src/components/split-button/split-button.component.js b/src/components/split-button/split-button.component.js
@@ -1,6 +1,5 @@
 import React, {
   useContext,
-  useEffect,
   useCallback,
   useMemo,
   useRef,
@@ -61,7 +60,6 @@ const SplitButton = ({
   const buttonContainer = useRef();
   const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
   const [minWidth, setMinWidth] = useState(0);
-  const listening = useRef(false);
 
   const hideButtons = useCallback(() => {
     if (toggleButton.current === document.activeElement) return;
@@ -167,7 +165,8 @@ const SplitButton = ({
     if (
       Events.isEnterKey(ev) ||
       Events.isSpaceKey(ev) ||
-      Events.isDownKey(ev)
+      Events.isDownKey(ev) ||
+      Events.isUpKey(ev)
     ) {
       ev.preventDefault();
 

diff --git a/src/components/split-button/split-button.spec.js b/src/components/split-button/split-button.spec.js
@@ -551,6 +551,7 @@ describe("SplitButton", () => {
         ["Enter", "Enter"],
         ["Space", " "],
         ["ArrowDown", "ArrowDown"],
+        ["ArrowUp", "ArrowUp"],
       ])(
         "then the first additional button should be focused when %s key is pressed",
         (name, key) => {

diff --git a/src/components/split-button/split-button.test.js b/src/components/split-button/split-button.test.js
@@ -414,7 +414,7 @@ context("Tests for Split Button component", () => {
     });
   });
 
-  describe.each(["Enter", "Space", "downarrow"])(
+  describe.each(["Enter", "Space", "downarrow", "uparrow"])(
     "pressing %s key on the main button",
     (key) => {
       it("opens SplitButton list and focuses first button", () => {