From 1c847bdf75e28d62015c5b8e9d77c26e5b0995dc Mon Sep 17 00:00:00 2001 From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com> Date: Wed, 24 Apr 2024 07:55:28 -0700 Subject: [PATCH 01/10] [TreeView] Check if the active element is a treeitem (#4484) * Check if the active element is a treeitem * changeset * Update check * Add focus story and return focus test * Update rare-rings-argue.md * patch, not minor --------- Co-authored-by: Siddharth Kshetrapal --- .changeset/rare-rings-argue.md | 5 ++ .../TreeView/TreeView.features.stories.tsx | 62 ++++++++++++++++++- packages/react/src/TreeView/TreeView.test.tsx | 34 ++++++++++ .../react/src/TreeView/useRovingTabIndex.ts | 6 +- 4 files changed, 104 insertions(+), 3 deletions(-) create mode 100644 .changeset/rare-rings-argue.md diff --git a/.changeset/rare-rings-argue.md b/.changeset/rare-rings-argue.md new file mode 100644 index 00000000000..7f305e1c784 --- /dev/null +++ b/.changeset/rare-rings-argue.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +TreeView: Fix returning focus when active element is not a treeitem diff --git a/packages/react/src/TreeView/TreeView.features.stories.tsx b/packages/react/src/TreeView/TreeView.features.stories.tsx index 4f73e1dcb7d..9470ad91730 100644 --- a/packages/react/src/TreeView/TreeView.features.stories.tsx +++ b/packages/react/src/TreeView/TreeView.features.stories.tsx @@ -1,8 +1,15 @@ -import {DiffAddedIcon, DiffModifiedIcon, DiffRemovedIcon, DiffRenamedIcon, FileIcon} from '@primer/octicons-react' +import { + DiffAddedIcon, + DiffModifiedIcon, + DiffRemovedIcon, + DiffRenamedIcon, + FileIcon, + KebabHorizontalIcon, +} from '@primer/octicons-react' import type {Meta, Story} from '@storybook/react' import React from 'react' import Box from '../Box' -import {Button} from '../Button' +import {Button, IconButton} from '../Button' import Octicon from '../Octicon' import type {SubTreeState} from './TreeView' import {TreeView} from './TreeView' @@ -891,6 +898,57 @@ export const InitialFocus: Story = () => ( ) +export const FocusManagement: Story = () => ( +
+ + + + + + + src + + + + + + Avatar.tsx + + + + + + + Button + + + + + + Button.tsx + + + + + + + + +
+) + export const WithoutIndentation: Story = () => (