DMC/studentportalen
1
1
Fork 0
Code Issues 32 Pull Requests Actions Projects 1 Wiki Activity

List components #31

Merged
stne3960 merged 68 commits from list_item into main 2025-12-18 12:41:13 +01:00
Conversation 12 Commits 68 Files Changed 8 +912 -8
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
Add more colors
Some checks failed
Deploy to branch.dsv.su.se / deploy (pull_request) Failing after 38s
Details
2b4236550c
Add TextInput examples to component library
Some checks failed
Deploy to branch.dsv.su.se / deploy (pull_request) Failing after 6s
Details
bcbf17432b
Add examples to ComponentLibrary
Some checks failed
Deploy to branch.dsv.su.se / deploy (pull_request) Failing after 5s
Details
4a981d4724
stne3960 added 2 commits 2025-11-30 22:39:56 +01:00
Add example of SearchResultList
Some checks failed
Deploy to branch.dsv.su.se / deploy (pull_request) Failing after 6s
Details
5715b286dc
stne3960 added 1 commit 2025-12-01 10:48:42 +01:00
Merge branch 'main' into list_item
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 5m52s
Details
035ab0408d
stne3960 added 1 commit 2025-12-01 13:31:53 +01:00
Add component library to index, until routing is fixed
All checks were successful
Remove branch deployment from branch.dsv.su.se / cleanup (pull_request) Successful in 5s
Details
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 3m34s
Details
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
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 5m26s
Details
617492a87f
Merge branch 'main' into text_input
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 3m25s
Details
3d93230d9a
Add component library to index, until routing is fixed
Some checks failed
Deploy to branch.dsv.su.se / deploy (pull_request) Failing after 33s
Details
f2a5cd9d26
Remove import
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 4m4s
Details
32376bf9ac
Add component library to index, until routing is fixed
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 3m32s
Details
67f45746ca
Add correct font
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 4m9s
Details
5f9e62569d
Add text styles
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 5m42s
Details
69cb86d417
Reconverted fonts
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 3m30s
Details
f37e55f34d
Fix borders and text style, run prettier
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 3m27s
Details
ed7fb36745
Fix merge conflict
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 3m32s
Details
91f694b1c3
Add no placeholder example
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 3m35s
Details
2f9dbc08aa
Merge branch 'list_item' of gitea.dsv.su.se:DMC/studentportalen into list_item
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 3m30s
Details
d1d3330032
stne3960 added 1 commit 2025-12-02 23:24:30 +01:00
Make combobox behavior align better with W3C pattern. Improve focus behavior
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 3m31s
Details
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
Style Participant picker according to documentation
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 3m25s
Details
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"-stateScreenshot 2025-12-04 at 11.11.06.png

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.16.18.png

Great! But just one small thing: when navigating the list with keyboard, a selected item should also get the "focus/hover"-state![Screenshot 2025-12-04 at 11.11.06.png](/attachments/634be351-14a6-466d-8c08-d3c58b1e8bc9) 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.16.18.png](/attachments/18351101-9979-4276-af43-d7177e17be20)
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
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 3m29s
Details
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
stne3960 removed the
Code Review
 label 2025-12-09 18:01:29 +01:00
stne3960 added 1 commit 2025-12-10 00:36:29 +01:00
Convert unnecessary inline styles to classes
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 20s
Details
706b9d2c3c
stne3960 force-pushed list_item from 706b9d2c3c to f0ba8fe1a4 2025-12-10 00:44:07 +01:00 Compare
stne3960 added 1 commit 2025-12-10 00:50:49 +01:00
Convert unnecessary inline styles to classes
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 3m34s
Details
9c8c3bda86
stne3960 added 8 commits 2025-12-17 11:00:40 +01:00
Update ComponentLibrary
Some checks failed
Deploy to branch.dsv.su.se / deploy (pull_request) Failing after 6m18s
Details
91a002cc9a
stne3960 added 1 commit 2025-12-17 11:02:03 +01:00
Update package
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 5m2s
Details
97984a21b9
stne3960 added the
Code Review
 label 2025-12-17 11:09:47 +01:00
stne3960 requested review from ansv7779 2025-12-17 11:09:53 +01:00
ansv7779 approved these changes 2025-12-17 11:33:18 +01:00
Dismissed
frontend/src/components/Combobox/Combobox.tsx
@ -0,0 +23,4 @@
noResultsText?: string;
multiple?: boolean;
value?: string | string[];
onChange?: (value: string | string[]) => void;
ansv7779 commented 2025-12-17 11:21:34 +01:00
Owner
Copy Link

I think this component would have been better split into two, a single select and a multiple select version. If I use it with multiple={false} I would not want my onChange callback to be called with an array of choices.

I think this component would have been better split into two, a single select and a multiple select version. If I use it with `multiple={false}` I would not want my `onChange` callback to be called with an array of choices.
frontend/src/components/SearchResultList/SearchResultList.tsx
@ -0,0 +3,4 @@
import ListItem from "../ListItem/ListItem";
export interface SearchResultOption {
value: string;
ansv7779 commented 2025-12-17 11:32:31 +01:00
Owner
Copy Link

This is limiting. Often times you want to select some more complex object as you do in your examples in ComponentLibrary. Forcing all users of the component to do their own lookup when it should be handled by the Combobox/this component.

This is limiting. Often times you want to select some more complex object as you do in your examples in `ComponentLibrary`. Forcing all users of the component to do their own lookup when it should be handled by the `Combobox`/this component.
ansv7779 marked this conversation as resolved
stne3960 added 1 commit 2025-12-17 14:41:15 +01:00
Use generics for selection
All checks were successful
Deploy to branch.dsv.su.se / deploy (pull_request) Successful in 3m47s
Details
Remove branch deployment from branch.dsv.su.se / cleanup (pull_request) Successful in 5s
Details
bbe1012b80
ansv7779 approved these changes 2025-12-17 21:15:43 +01:00
stne3960 merged commit e64d9bc511 into main 2025-12-18 12:41:13 +01:00
stne3960 deleted branch list_item 2025-12-18 12:41:14 +01:00
stne3960 referenced this issue from a commit 2025-12-18 12:41:14 +01:00
List components (#31)
Sign in to join this conversation.
Reviewers
No Reviewers
jare2473
ansv7779
Labels
Clear labels
Code Review
Design
Component
Design
Page
Design Review
Design in progress
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
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: DMC/studentportalen#31
No description provided.
Delete Branch "list_item"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?