From 04da650728d87b6333903affe91ef2b6cd4d61c4 Mon Sep 17 00:00:00 2001 From: Rohan <45748283+r100-stack@users.noreply.github.com> Date: Tue, 1 Oct 2024 17:36:30 -0400 Subject: [PATCH 01/10] =?UTF-8?q?=F0=9F=91=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/beige-lions-swim.md | 5 +++++ .changeset/orange-cats-mix.md | 5 +++++ .../src/core/TransferList/TransferList.tsx | 18 +++++++++++++++--- 3 files changed, 25 insertions(+), 3 deletions(-) create mode 100644 .changeset/beige-lions-swim.md create mode 100644 .changeset/orange-cats-mix.md diff --git a/.changeset/beige-lions-swim.md b/.changeset/beige-lions-swim.md new file mode 100644 index 00000000000..50fd9da4068 --- /dev/null +++ b/.changeset/beige-lions-swim.md @@ -0,0 +1,5 @@ +--- +'@itwin/itwinui-react': patch +--- + +`TransferList.Toolbar` implements the [toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/), including the arrow-key navigation functionality. diff --git a/.changeset/orange-cats-mix.md b/.changeset/orange-cats-mix.md new file mode 100644 index 00000000000..fc91bbdc95a --- /dev/null +++ b/.changeset/orange-cats-mix.md @@ -0,0 +1,5 @@ +--- +'@itwin/itwinui-react': minor +--- + +`IconButton`s inside `TransferList.Toolbar` will now show tooltips on the right side by default to avoid obscuring adjacent buttons in the group. This placement can be changed using the `labelProps.placement` prop on the `IconButton`. diff --git a/packages/itwinui-react/src/core/TransferList/TransferList.tsx b/packages/itwinui-react/src/core/TransferList/TransferList.tsx index 00b7eb080dd..d6827fb1c9d 100644 --- a/packages/itwinui-react/src/core/TransferList/TransferList.tsx +++ b/packages/itwinui-react/src/core/TransferList/TransferList.tsx @@ -16,6 +16,7 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; import { List } from '../List/List.js'; import { ListItem } from '../List/ListItem.js'; import { Label } from '../Label/Label.js'; +import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js'; // ---------------------------------------------------------------------------- // TransferListComponent @@ -226,9 +227,20 @@ if (process.env.NODE_ENV === 'development') { // ---------------------------------------------------------------------------- // TransferList.Toolbar component -const TransferListToolbar = polymorphic.div('iui-transfer-list-toolbar', { - role: 'toolbar', -}); +const TransferListToolbar = React.forwardRef((props, ref) => { + const { className, children, ...rest } = props; + return ( + + {children} + + ); +}) as PolymorphicForwardRefComponent<'div', object>; if (process.env.NODE_ENV === 'development') { TransferListToolbar.displayName = 'TransferList.Toolbar'; } From 4764b5685ff71edd947bf15e85c6090fe48b8358 Mon Sep 17 00:00:00 2001 From: Rohan <45748283+r100-stack@users.noreply.github.com> Date: Tue, 1 Oct 2024 18:10:31 -0400 Subject: [PATCH 02/10] =?UTF-8?q?e2e=20=F0=9F=A7=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- testing/e2e/app/routes/TransferList/route.tsx | 142 ++++++++++++++++++ testing/e2e/app/routes/TransferList/spec.ts | 23 +++ 2 files changed, 165 insertions(+) create mode 100644 testing/e2e/app/routes/TransferList/route.tsx create mode 100644 testing/e2e/app/routes/TransferList/spec.ts diff --git a/testing/e2e/app/routes/TransferList/route.tsx b/testing/e2e/app/routes/TransferList/route.tsx new file mode 100644 index 00000000000..a3233c66591 --- /dev/null +++ b/testing/e2e/app/routes/TransferList/route.tsx @@ -0,0 +1,142 @@ +import { IconButton, TransferList } from '@itwin/itwinui-react'; +import { + SvgChevronLeft, + SvgChevronLeftDouble, + SvgChevronRight, + SvgChevronRightDouble, +} from '@itwin/itwinui-icons-react'; +import * as React from 'react'; + +export default function ButtonGroupTest() { + type TransferItemDataType = { + name: string; + active: boolean; + }; + + const [optionData, setOptionData] = React.useState([ + { name: 'Option 1', active: false }, + { name: 'Option 2', active: false }, + { name: 'Option 3', active: false }, + { name: 'Option 4', active: false }, + { name: 'Option 5', active: false }, + { name: 'Option 6', active: false }, + ]); + + const [appliedData, setAppliedData] = React.useState([ + { name: 'Option 7', active: false }, + ]); + + const transfer = ( + fromData: Array, + setFromData: React.Dispatch>, + setToData: React.Dispatch>, + sendAll?: boolean, + ) => { + setToData((oldToData) => { + const newToData = [...oldToData]; + const newFromData: Array = []; + fromData.forEach((item) => { + if (sendAll || item.active === true) { + const newItem = item; + newItem.active = false; + newToData.push(newItem); + } else { + newFromData.push(item); + } + }); + setFromData(newFromData); + return newToData; + }); + }; + + return ( + + + + {optionData?.map((item, index) => { + return ( + { + setOptionData((oldData) => { + const newData = [...oldData]; + const newObject = { ...newData[index] }; + newObject.active = isActive; + newData[index] = newObject; + return newData; + }); + }} + > + {item.name} + + ); + })} + + + + { + transfer(optionData, setOptionData, setAppliedData, true); + }} + > + + + + transfer(optionData, setOptionData, setAppliedData, false) + } + > + + + + transfer(appliedData, setAppliedData, setOptionData, false) + } + > + + + + transfer(appliedData, setAppliedData, setOptionData, true) + } + > + + + + + + {appliedData.map((item, index) => { + return ( + { + setAppliedData((oldData) => { + const newData = [...oldData]; + const newObject = { ...newData[index] }; + newObject.active = isActive; + newData[index] = newObject; + return newData; + }); + }} + > + {item.name} + + ); + })} + + + + ); +} diff --git a/testing/e2e/app/routes/TransferList/spec.ts b/testing/e2e/app/routes/TransferList/spec.ts new file mode 100644 index 00000000000..1548cd41c73 --- /dev/null +++ b/testing/e2e/app/routes/TransferList/spec.ts @@ -0,0 +1,23 @@ +import { test, expect } from '@playwright/test'; + +test('should support toolbar keyboard navigation in TransferList.Toolbar', async ({ + page, +}) => { + await page.goto('/TransferList'); + const buttons = page.locator('button'); + + await page.keyboard.press('Tab'); + + await page.keyboard.press('Tab'); + await expect(buttons.nth(0)).toBeFocused(); + await page.keyboard.press('ArrowDown'); + await expect(buttons.nth(1)).toBeFocused(); + await page.keyboard.press('ArrowDown'); + await expect(buttons.nth(2)).toBeFocused(); + await page.keyboard.press('ArrowDown'); + await expect(buttons.nth(3)).toBeFocused(); + await page.keyboard.press('ArrowDown'); + await expect(buttons.nth(0)).toBeFocused(); + await page.keyboard.press('ArrowUp'); + await expect(buttons.nth(3)).toBeFocused(); +}); From 11a143fb53c93d4b375a6fc44baa3791761224ab Mon Sep 17 00:00:00 2001 From: Rohan <45748283+r100-stack@users.noreply.github.com> Date: Tue, 1 Oct 2024 18:33:47 -0400 Subject: [PATCH 03/10] =?UTF-8?q?Images=20=F0=9F=A7=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../baseline/TransferList.test.ts-Basic.png | Bin 13552 -> 13740 bytes .../TransferList.test.ts-With Label.png | Bin 15654 -> 15822 bytes 2 files changed, 0 insertions(+), 0 deletions(-) mode change 100644 => 100755 apps/react-workshop/cypress-visual-screenshots/baseline/TransferList.test.ts-Basic.png diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/TransferList.test.ts-Basic.png b/apps/react-workshop/cypress-visual-screenshots/baseline/TransferList.test.ts-Basic.png old mode 100644 new mode 100755 index 85c00a332a1896d016827a02a3fe739ac7c71bd4..5c16c4b70f0db3169601485b152c29449a38df14 GIT binary patch literal 13740 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 N?za3s|L;eB`hSkxf}sEa diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/TransferList.test.ts-With Label.png b/apps/react-workshop/cypress-visual-screenshots/baseline/TransferList.test.ts-With Label.png index 71bf6c53c82a241d3be20921f5f20b395ca4da43..5954f862e2b2f338ef9d7f3ecfb273ddc01df266 100755 GIT binary patch literal 15822 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 literal 15654 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 Date: Tue, 1 Oct 2024 19:19:35 -0400 Subject: [PATCH 04/10] Bump changeset to minor --- .changeset/beige-lions-swim.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/beige-lions-swim.md b/.changeset/beige-lions-swim.md index 50fd9da4068..4e2ae41b098 100644 --- a/.changeset/beige-lions-swim.md +++ b/.changeset/beige-lions-swim.md @@ -1,5 +1,5 @@ --- -'@itwin/itwinui-react': patch +'@itwin/itwinui-react': minor --- `TransferList.Toolbar` implements the [toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/), including the arrow-key navigation functionality. From 08dbfb71faaf91a2c5b30f448a87004beea1d70d Mon Sep 17 00:00:00 2001 From: Rohan <45748283+r100-stack@users.noreply.github.com> Date: Wed, 2 Oct 2024 11:08:54 -0400 Subject: [PATCH 05/10] patch changesets --- .changeset/beige-lions-swim.md | 4 ++-- .changeset/orange-cats-mix.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.changeset/beige-lions-swim.md b/.changeset/beige-lions-swim.md index 4e2ae41b098..bb6aba438c6 100644 --- a/.changeset/beige-lions-swim.md +++ b/.changeset/beige-lions-swim.md @@ -1,5 +1,5 @@ --- -'@itwin/itwinui-react': minor +'@itwin/itwinui-react': patch --- -`TransferList.Toolbar` implements the [toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/), including the arrow-key navigation functionality. +`TransferList.Toolbar` implements the previously missing [toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/), including the arrow-key navigation functionality. diff --git a/.changeset/orange-cats-mix.md b/.changeset/orange-cats-mix.md index fc91bbdc95a..607aa047fdf 100644 --- a/.changeset/orange-cats-mix.md +++ b/.changeset/orange-cats-mix.md @@ -1,5 +1,5 @@ --- -'@itwin/itwinui-react': minor +'@itwin/itwinui-react': patch --- `IconButton`s inside `TransferList.Toolbar` will now show tooltips on the right side by default to avoid obscuring adjacent buttons in the group. This placement can be changed using the `labelProps.placement` prop on the `IconButton`. From 392150924a6ac678f5328e28726229222c06a352 Mon Sep 17 00:00:00 2001 From: Rohan <45748283+r100-stack@users.noreply.github.com> Date: Wed, 2 Oct 2024 11:17:32 -0400 Subject: [PATCH 06/10] e2e test focus checks. new e2e test. --- testing/e2e/app/routes/TransferList/spec.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/testing/e2e/app/routes/TransferList/spec.ts b/testing/e2e/app/routes/TransferList/spec.ts index 1548cd41c73..d0b2a85c5cc 100644 --- a/testing/e2e/app/routes/TransferList/spec.ts +++ b/testing/e2e/app/routes/TransferList/spec.ts @@ -5,8 +5,10 @@ test('should support toolbar keyboard navigation in TransferList.Toolbar', async }) => { await page.goto('/TransferList'); const buttons = page.locator('button'); + const listboxes = page.getByRole('listbox'); await page.keyboard.press('Tab'); + await expect(listboxes.first()).toBeFocused(); await page.keyboard.press('Tab'); await expect(buttons.nth(0)).toBeFocused(); @@ -21,3 +23,20 @@ test('should support toolbar keyboard navigation in TransferList.Toolbar', async await page.keyboard.press('ArrowUp'); await expect(buttons.nth(3)).toBeFocused(); }); + +test('should have only one tab stop in TransferList.Toolbar (toolbar pattern)', async ({ + page, +}) => { + await page.goto('/TransferList'); + const buttons = page.locator('button'); + const listboxes = page.getByRole('listbox'); + + await page.keyboard.press('Tab'); + await expect(listboxes.first()).toBeFocused(); + + await page.keyboard.press('Tab'); + await expect(buttons.first()).toBeFocused(); + + await page.keyboard.press('Tab'); + await expect(listboxes.last()).toBeFocused(); +}); From 3ee1ba6d10c030888e6633e0590c2eb5f09d7479 Mon Sep 17 00:00:00 2001 From: Rohan <45748283+r100-stack@users.noreply.github.com> Date: Wed, 2 Oct 2024 11:52:21 -0400 Subject: [PATCH 07/10] Better tests --- .../core/TransferList/TransferList.test.tsx | 18 +++- testing/e2e/app/routes/TransferList/spec.ts | 90 +++++++++++-------- 2 files changed, 71 insertions(+), 37 deletions(-) diff --git a/packages/itwinui-react/src/core/TransferList/TransferList.test.tsx b/packages/itwinui-react/src/core/TransferList/TransferList.test.tsx index 3eebb502c10..8946a867469 100644 --- a/packages/itwinui-react/src/core/TransferList/TransferList.test.tsx +++ b/packages/itwinui-react/src/core/TransferList/TransferList.test.tsx @@ -40,7 +40,21 @@ it('should render in its most basic state', () => { }); }); -it('should handle keyboard navigation', () => { +it('should render Toolbar in its most basic state', () => { + const { container } = render( + + +