diff --git a/src/components/split-button/split-button-test.stories.mdx b/src/components/split-button/split-button-test.stories.js similarity index 77% rename from src/components/split-button/split-button-test.stories.mdx rename to src/components/split-button/split-button-test.stories.js index dd1bce8cfc..6fb26bdf0c 100644 --- a/src/components/split-button/split-button-test.stories.mdx +++ b/src/components/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"; - + }, +}; +/* eslint-disable react/prop-types */ export const SplitButtonStory = ({ buttonType, dataElement, @@ -68,6 +69,7 @@ export const SplitButtonStory = ({ iconType, iconPosition, ...args + /* eslint-enable */ }) => { return ( @@ -96,28 +98,20 @@ export const SplitButtonStory = ({ ); }; -# Split Button - -### Default - - - - {SplitButtonStory.bind({})} - - +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 index cc2bfa72aa..ada44ad754 100644 --- 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 index 082f9376ee..c40954cf41 100644 --- 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 index 905e42ac49..822e1f0498 100644 --- 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", () => {