List components #31

Open

stne3960 wants to merge 57 commits from list_item into main

pull from: list_item

merge into: DMC:main

Conversation 10 Commits 57 Files Changed 30 +1949 -67

stne3960 commented 2025-11-30 17:55:28 +01:00

Owner

Copy Link

This PR contains multiple related components.
Addresses issues #18 #19 #20 #21 #22

Issue: The colors defined in ListCard (https://www.figma.com/design/zFYdCdtEqACZmWwfnNRNY1/Studentportalen?node-id=2591-4546) are not accurate.

This PR contains multiple related components. Addresses issues #18 #19 #20 #21 #22 _Issue: The colors defined in ListCard (https://www.figma.com/design/zFYdCdtEqACZmWwfnNRNY1/Studentportalen?node-id=2591-4546) are not accurate._

stne3960 added the

Design Review

label 2025-11-30 17:55:28 +01:00

stne3960 added 19 commits 2025-11-30 17:55:28 +01:00

Use tailwind 7bf1c01d10

Add color and size variables 354c923773

Create button component 15b50844cb

Add component library page 4b851595fd

Add more colors 2b4236550c

Add font family and text styles 91e7d0f770

Create TextInput component 8690658ac8

Add TextInput examples to component library bcbf17432b

Create list item component 1d5fc77fcd

Add examples of list item to component library 26395cf4b2

Add focused prop d2a2ab167f

Create combobox 507e2b2d55

Add combobox example to component library 1a3e2440f1

Fix issue where input expanded outside of wrapper div 5c759fc5dd

Create combobox component 9ac2ef95b0

Fix issue where footer was behind combobox 09b2e8ef44

Create ListCard component 50801b22bf

Create ParticipantPicket component 1b71fbec60

Add examples to ComponentLibrary 4a981d4724

stne3960 added 2 commits 2025-11-30 22:39:56 +01:00

Refactor Comboxbox, break out dropdown into it's own component SearchResultList be9b621737

Add example of SearchResultList 5715b286dc

stne3960 added 1 commit 2025-12-01 10:48:42 +01:00

Merge branch 'main' into list_item 035ab0408d

stne3960 added 1 commit 2025-12-01 13:31:53 +01:00

Add component library to index, until routing is fixed e51115fdfa

stne3960 commented 2025-12-01 13:36:29 +01:00

Author

Owner

Copy Link

Can be viewed on:
https://studentportalen-listitem.branch.dsv.su.se/

Can be viewed on: https://studentportalen-listitem.branch.dsv.su.se/

jare2473 commented 2025-12-01 15:01:30 +01:00

Owner

Copy Link

Issue: The colors defined in ListCard (https://www.figma.com/design/zFYdCdtEqACZmWwfnNRNY1/Studentportalen?node-id=2591-4546) are not accurate.

Should be fixed now.

> _Issue: The colors defined in ListCard (https://www.figma.com/design/zFYdCdtEqACZmWwfnNRNY1/Studentportalen?node-id=2591-4546) are not accurate._ > Should be fixed now.

jare2473 commented 2025-12-01 15:17:01 +01:00

Owner

Copy Link

Comments on the Combobox (#20):

The tab/focus/keyboard-navigation should behave like this example: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
Main takes:

• Tabbing will only get focus on the text input
• Result list is navigated by arrow keys

Other things:

• Don't display any search results when the input field is empty

Comments on the **Combobox (#20)**: The tab/focus/keyboard-navigation should behave like this example: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/ Main takes: - Tabbing will only get focus on the text input - Result list is navigated by arrow keys Other things: - [x] Don't display any search results when the input field is empty

jare2473 commented 2025-12-01 16:09:25 +01:00

Owner

Copy Link

Issue: The colors defined in ListCard (https://www.figma.com/design/zFYdCdtEqACZmWwfnNRNY1/Studentportalen?node-id=2591-4546) are not accurate.

Should be fixed now.

Missed a few things. Should be fixed for real now. The implemented component needs to be updated

> > _Issue: The colors defined in ListCard (https://www.figma.com/design/zFYdCdtEqACZmWwfnNRNY1/Studentportalen?node-id=2591-4546) are not accurate._ > > > Should be fixed now. Missed a few things. Should be fixed for real now. The implemented component needs to be updated

jare2473 commented 2025-12-01 16:22:15 +01:00

Owner

Copy Link

Participant picker

• Remove the "X selected" status text
• After selecting an item, hide the popup search result list

**Participant picker** - [x] Remove the "X selected" status text - [x] After selecting an item, hide the popup search result list

jare2473 closed this pull request 2025-12-01 16:22:26 +01:00

jare2473 reopened this pull request 2025-12-01 16:22:30 +01:00

stne3960 added 30 commits 2025-12-02 21:55:25 +01:00

Merge branch 'main' into button-component 617492a87f

Merge branch 'main' into text_input 3d93230d9a

Add component library to index, until routing is fixed f2a5cd9d26

Remove import 32376bf9ac

Add component library to index, until routing is fixed 67f45746ca

Fix cursor, text style and focus 6a9f8ed9af

Add correct font 5f9e62569d

Add text styles 69cb86d417

Reconverted fonts f37e55f34d

Fix borders and text style, run prettier ed7fb36745

Add font family and text styles cb74baacee

Create TextInput component 7bfad4d8e8

Add TextInput examples to component library c640e4b54f

Merge branch 'text_input' of gitea.dsv.su.se:DMC/studentportalen into text_input edca5aec6f

Fix merge conflict 91f694b1c3

Fix text colors, focus state, outline 24d0db7045

Add no placeholder example 2f9dbc08aa

Create list item component bc2caeca19

Add examples of list item to component library 2f95516606

Add focused prop 57e895ac99

Create combobox af74c7070a

Add combobox example to component library fed638772e

Create combobox component 29ef47d8fd

Fix issue where footer was behind combobox 614695ab46

Create ListCard component 28d506c004

Create ParticipantPicket component df382965f2

Add examples to ComponentLibrary 07f2e0ead7

Refactor Comboxbox, break out dropdown into it's own component SearchResultList 8333607680

Add example of SearchResultList 377594d7b7

Merge branch 'list_item' of gitea.dsv.su.se:DMC/studentportalen into list_item d1d3330032

stne3960 added 1 commit 2025-12-02 23:24:30 +01:00

Make combobox behavior align better with W3C pattern. Improve focus behavior 9e9f386871

stne3960 requested review from jare2473 2025-12-03 10:32:44 +01:00

jare2473 requested changes 2025-12-03 11:29:18 +01:00

Dismissed

jare2473 left a comment

Owner

Copy Link

I have updated the List Item overview and Search results

• Update the Search result list it so that a selected item in list has a hover/focus state and is "unselectable".
• Also, take a look at the List Card overview, and update the styling.

Other than that, it looks great!

I have updated the [List Item overview](https://www.figma.com/design/zFYdCdtEqACZmWwfnNRNY1/Studentportalen?node-id=2562-1529&t=oWWyhDbFkDrBCIzg-1) and [Search results](https://www.figma.com/design/zFYdCdtEqACZmWwfnNRNY1/Studentportalen?node-id=2570-1917&t=oWWyhDbFkDrBCIzg-1) - [ ] Update the Search result list it so that a selected item in list has a hover/focus state and is "unselectable". - [x] Also, take a look at the [List Card overview](https://www.figma.com/design/zFYdCdtEqACZmWwfnNRNY1/Studentportalen?node-id=2591-4546&t=oWWyhDbFkDrBCIzg-1), and update the styling. Other than that, it looks great!

jare2473 commented 2025-12-03 13:48:04 +01:00

Owner

Copy Link

• Add dividing line/gap in between items in list. I have clarified it in: Search result list.

- [x] Add dividing line/gap in between items in list. I have clarified it in: [Search result list](https://www.figma.com/design/zFYdCdtEqACZmWwfnNRNY1/Studentportalen?node-id=2570-1917&t=oWWyhDbFkDrBCIzg-1).

stne3960 added 2 commits 2025-12-03 22:54:48 +01:00

Use base-ink-max for text input 43141d29cf

Style Participant picker according to documentation 1012b0e889

stne3960 requested review from jare2473 2025-12-04 09:07:38 +01:00

jare2473 requested changes 2025-12-04 11:14:26 +01:00

Dismissed

jare2473 left a comment

Owner

Copy Link

Great! But just one small thing: when navigating the list with keyboard, a selected item should also get the "focus/hover"-state

Also found a bug! If starting with keyboard navigation and then using mouse (or vice versa), the list gets two separate "focus"-states - one for the mouse, one for the keyboard. The list should only have one focused element at a time.

Great! But just one small thing: when navigating the list with keyboard, a selected item should also get the "focus/hover"-state Also found a bug! If starting with keyboard navigation and then using mouse (or vice versa), the list gets two separate "focus"-states - one for the mouse, one for the keyboard. The list should only have one focused element at a time. 

Screenshot 2025-12-04 at 11.11.06.png

63 KiB

Screenshot 2025-12-04 at 11.16.18.png

22 KiB

stne3960 added 1 commit 2025-12-04 11:40:07 +01:00

Focus state on selected f0ba8fe1a4

stne3960 commented 2025-12-04 11:53:41 +01:00

Author

Owner

Copy Link

Great! But just one small thing: when navigating the list with keyboard, a selected item should also get the "focus/hover"-state!

Fixed.

Also found a bug! If starting with keyboard navigation and then using mouse (or vice versa), the list gets two separate "focus"-states - one for the mouse, one for the keyboard. The list should only have one focused element at a time.

This isn't a bug, browsers allow one element to be focused (keyboard) while another is hovered (mouse). Since our hover and focus-visible styles are the same, it creates the appearance of two 'active' items. That is expected behavior.

> Great! But just one small thing: when navigating the list with keyboard, a selected item should also get the "focus/hover"-state! Fixed. > Also found a bug! If starting with keyboard navigation and then using mouse (or vice versa), the list gets two separate "focus"-states - one for the mouse, one for the keyboard. The list should only have one focused element at a time. This isn't a bug, browsers allow one element to be focused (keyboard) while another is hovered (mouse). Since our hover and focus-visible styles are the same, it creates the appearance of two 'active' items. That is expected behavior.

👍 1

jare2473 approved these changes 2025-12-04 13:28:47 +01:00

jare2473 added

Code Review

and removed

Design Review

labels 2025-12-04 13:29:24 +01:00

All checks were successful

Hide all checks

Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 4m18s

Details

This pull request can be merged automatically.

This branch is out-of-date with the base branch

You are not authorized to merge this pull request.

View command line instructions.

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u origin list_item:list_item

git checkout list_item

Sign in to join this conversation.

Reviewers

No Reviewers

jare2473

Labels

Clear labels

Code Review

Design Review

Design system

Front end

bug

Something is not working

duplicate

This issue or pull request already exists

enhancement

New feature

help wanted

Need some help

invalid

Something is wrong

question

More information is needed

wontfix

This won't be fixed

No Label

Code Review

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

No Assignees

2 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DMC/studentportalen#31

No description provided.