feat(TransferList): Add transfer list component #1073

FlyersPh9 · 2023-02-10T20:24:11Z

Changes

Introduce new TransferList component which is used to move one or more items between lists.

    <TransferList>
      <TransferList.ListboxWrapper>
        <TransferList.ListboxLabel>Listbox 1</TransferList.ListboxLabel>
        <TransferList.Listbox>
          <TransferList.Item>Item 1</TransferList.Item>          
          <TransferList.Item>Item 2</TransferList.Item>          
          <TransferList.Item>Item 3</TransferList.Item>
        </TransferList.Listbox>
      </TransferList.ListboxWrapper>
      <TransferList.Toolbar>
        <IconButton />
        <IconButton />
        <IconButton />
        <IconButton />
      </TransferList.Toolbar>
      <TransferList.ListboxWrapper>
        <TransferList.ListboxLabel>Listbox 2</TransferList.ListboxLabel>
        <TransferList.Listbox>
          <TransferList.Item>Item 4</TransferList.Item>          
          <TransferList.Item>Item 5</TransferList.Item>          
          <TransferList.Item>Item 6</TransferList.Item>
        </TransferList.Listbox>
      </TransferList.ListboxWrapper>
    </TransferList>
  );

Allows for use to place anything they want above / below each transfer list box (example has search & checkbox).
Using .iui-list from List component #1106.

Closes #634.

Testing

New unit tests and HTML demo page
Referenced w3 listbox article for accessibility best practices.

Docs

New changesets, website documentation, and stories added

FlyersPh9 · 2023-02-24T16:56:33Z

In the W3 example when hitting the tab key the focus goes to the listbox, not the individual listbox items. The user can then use the keyboard up / down keys to select an item. I think this would be preferred over how it is functioning now. For example: if the left listbox had 100+ items, it would be painful to have to tab through all 100 items before focus moves over to the right listbox.

I imagine to make that work I'll need to make these changes in this PR:

Add @include iui-focus to @mixin iui-menu-listbox.
Add tabindex="0" to <ul class="iui-menu" role="listbox">.
Remove tabindex="0" from all <li class="iui-menu-item" role="option">

And the rest of the functionality would be added in JS / React. Is that a correct assumption?

FlyersPh9 · 2023-02-24T17:10:14Z

packages/itwinui-css/src/utils/input-container/input-container.scss

@@ -35,7 +35,8 @@

  .iui-input,
  .iui-input-with-icon,
-  .iui-input-group {
+  .iui-input-group,
+  .iui-menu {


Maybe this should be .iui-menu[role='listbox'] instead?

FlyersPh9 · 2023-02-24T17:15:40Z

I've re-run tests on GitHub a couple of times and I keep getting 1 failure. I'm not getting the failure when running tests locally. Unsure how to get this passing.

mayank99 · 2023-02-27T15:06:34Z

I re-ran the tests, and CSS is passing entirely. I think the failures in React are legitimate. They are happening in the Select component, which is likely affected by your changes.

elephantcatdog · 2023-02-28T20:14:41Z

The open combobox and select tests are failing because of the missing shadow/border at the bottom.

FlyersPh9 · 2023-03-01T17:19:21Z

packages/itwinui-css/src/menu/classes.scss

@@ -4,6 +4,10 @@

 .iui-menu {
  @include iui-list-menu;
+
+  .iui-listbox-wrapper & {


Thank you @elephantcatdog for the tip as to what was failing. This change fixed the failed test images:

- &:where([role='listbox']) + .iui-listbox-wrapper & {

But depending on how #843 pans out, this may not be needed. @mayank99

mayank99 · 2023-03-01T22:03:03Z

@FlyersPh9 I've created #1106, which has very minimal changes, but will allow you to use iui-list/iui-list-item classes. Take a look and then we can think on how much styling belongs in which component.

I also see some screenshots in #634 which I feel would need a bit more work.

packages/itwinui-css/backstop/tests/listbox.html

packages/itwinui-css/src/listbox/listbox.scss

gretanausedaite

It seems that I can't reach second ListBox with keyboard (Tab).

Screen.Recording.2023-05-24.at.12.16.02.mov

.changeset/ninety-keys-double.md

gretanausedaite · 2023-05-24T08:28:46Z

apps/website/src/pages/docs/transferlist.mdx

+<LiveExample src='TransferList.main.tsx'>
+  <AllExamples.TransferListMainExample client:load />
+</LiveExample>
+


Can be done in future PRs: We need to give more info for our users about this component.

packages/itwinui-react/src/core/TransferList/TransferList.tsx

mayank99 · 2023-05-24T12:03:44Z

Reposting #1073 (comment) for visibility:

Both of ListboxLabels gets the same labelId and ListBoxes are not described correctly. Example I'm using:

"Avalable" listbox

"Selected" listbox

adamhock · 2023-05-25T18:19:47Z

Reposting #1073 (comment) for visibility:

Both of ListboxLabels gets the same labelId and ListBoxes are not described correctly. Example I'm using:

"Avalable" listbox

"Selected" listbox

This has been fixed

adamhock · 2023-05-25T20:00:50Z

It seems that I can't reach second ListBox with keyboard (Tab).

I have fixed this by adding tabIndex={0} to TransferList.Listbox

apps/storybook/src/TransferList.stories.tsx

packages/itwinui-react/src/core/TransferList/TransferList.tsx

.changeset/ninety-keys-double.md

gretanausedaite

Looks good to me 🌵

mayank99

LGTM

Initial push.

5fe5e4b

FlyersPh9 self-assigned this Feb 10, 2023

FlyersPh9 added 4 commits February 23, 2023 10:05

Merge branch 'main' into jon/listbox

5a6bede

Better test images.

c521160

Changeset.

0567cd7

Merge branch 'main' into jon/listbox

9a8e03d

FlyersPh9 marked this pull request as ready for review February 24, 2023 17:07

FlyersPh9 requested a review from a team as a code owner February 24, 2023 17:07

FlyersPh9 requested review from a team, mayank99 and elephantcatdog and removed request for a team February 24, 2023 17:07

FlyersPh9 commented Feb 24, 2023

View reviewed changes

FlyersPh9 added 2 commits March 1, 2023 11:46

Merge branch 'main' into jon/listbox

783a33b

Trying to fix failing test images.

92a8352

FlyersPh9 commented Mar 1, 2023

View reviewed changes

mayank99 added 6 commits March 1, 2023 15:53

iui-list and iui-list-item

d9688dd

update images

471a210

add list-style-type to individual items too

14a8bd5

react

c25b9ed

changeset

5d516a1

lint

c8944d6

update test

96c59a0

mayank99 reviewed Mar 1, 2023

View reviewed changes

packages/itwinui-css/backstop/tests/listbox.html Outdated Show resolved Hide resolved

packages/itwinui-css/src/listbox/listbox.scss Outdated Show resolved Hide resolved

packages/itwinui-css/src/listbox/listbox.scss Outdated Show resolved Hide resolved

adamhock added 2 commits May 19, 2023 14:11

Updated alert images? Also use polymorphic and useGlobal

d6e0a63

Trying CSS image tests again

6aa78ae

gretanausedaite reviewed May 24, 2023

View reviewed changes

Each transfer list now has a unique id

ea47c46

adamhock added 4 commits May 25, 2023 14:32

Updated changeset description

c6fe2e9

Merge branch 'dev' of https://github.com/iTwin/iTwinUI into jon/listbox

fd1b874

Using box for elements now

133367c

Added tabIndex for listbox subcomponent

1686f69

gretanausedaite reviewed May 26, 2023

View reviewed changes

apps/storybook/src/TransferList.stories.tsx Show resolved Hide resolved

packages/itwinui-react/src/core/TransferList/TransferList.tsx Show resolved Hide resolved

.changeset/ninety-keys-double.md Outdated Show resolved Hide resolved

adamhock added 3 commits May 28, 2023 20:54

Fixed changeset message

c55468e

Added labels to buttons. Fixed typing issue in Transfer List stories

d37c763

Merge branch 'dev' of https://github.com/iTwin/iTwinUI into jon/listbox

e05258a

gretanausedaite approved these changes May 31, 2023

View reviewed changes

Merge branch 'dev' of https://github.com/iTwin/iTwinUI into jon/listbox

9e2e19c

adamhock requested review from a team as code owners June 1, 2023 16:37

adamhock requested review from adamhock and removed request for a team June 1, 2023 16:37

added multiselectable

2ab3236

mayank99 approved these changes Jun 2, 2023

View reviewed changes

adamhock added this to the React 3.0 milestone Jun 5, 2023

adamhock added this pull request to the merge queue Jun 6, 2023

Merged via the queue into dev with commit 406872a Jun 6, 2023

adamhock deleted the jon/listbox branch June 6, 2023 01:10

imodeljs-admin mentioned this pull request Jun 6, 2023

Release packages (dev) #1324

Merged

imodeljs-admin mentioned this pull request Oct 23, 2023

Release packages #1651

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(TransferList): Add transfer list component #1073

feat(TransferList): Add transfer list component #1073

FlyersPh9 commented Feb 10, 2023 •

edited by adamhock

Loading

FlyersPh9 commented Feb 24, 2023

FlyersPh9 Feb 24, 2023

FlyersPh9 commented Feb 24, 2023

mayank99 commented Feb 27, 2023

elephantcatdog commented Feb 28, 2023

FlyersPh9 Mar 1, 2023

mayank99 commented Mar 1, 2023

gretanausedaite left a comment

gretanausedaite May 24, 2023

mayank99 commented May 24, 2023

adamhock commented May 25, 2023

adamhock commented May 25, 2023

gretanausedaite left a comment

mayank99 left a comment

feat(TransferList): Add transfer list component #1073

feat(TransferList): Add transfer list component #1073

Conversation

FlyersPh9 commented Feb 10, 2023 • edited by adamhock Loading

Changes

Testing

Docs

FlyersPh9 commented Feb 24, 2023

FlyersPh9 Feb 24, 2023

Choose a reason for hiding this comment

FlyersPh9 commented Feb 24, 2023

mayank99 commented Feb 27, 2023

elephantcatdog commented Feb 28, 2023

FlyersPh9 Mar 1, 2023

Choose a reason for hiding this comment

mayank99 commented Mar 1, 2023

gretanausedaite left a comment

Choose a reason for hiding this comment

gretanausedaite May 24, 2023

Choose a reason for hiding this comment

mayank99 commented May 24, 2023

adamhock commented May 25, 2023

adamhock commented May 25, 2023

gretanausedaite left a comment

Choose a reason for hiding this comment

mayank99 left a comment

Choose a reason for hiding this comment

FlyersPh9 commented Feb 10, 2023 •

edited by adamhock

Loading