Implement design of multi select dropdown

minvws / nl-kat-coordination

OpenKAT scans networks, finds vulnerabilities and creates accessible reports. It integrates the most widely used network tools and scanning software into a modular framework, accesses external databases such as shodan, and combines the information from all these sources into clear reports. It also includes lots of cat hair.

https://openkat.nl

European Union Public License 1.2

128 stars 58 forks source link

Implement design of multi select dropdown #3410

Open RomijnHumanoids opened 3 months ago

RomijnHumanoids commented 3 months ago

After discussions august 26 and 27 it appeared that some design system elements need more attention in terms of their functionality and accessibility. Discussions following implementation ticket # . Discussions lead to ticket: Design: multi select dropdown design/functionalities. e.g.

[x] accessibility of search in dropdown or in field,
[x] submit button (add to component button)
[x] scroll in dropdown (maximale hoogte van de dropdown)
[x] progressive enhancement (what happens when JavaScript isn't available)

RomijnHumanoids commented 2 months ago

For review

https://www.figma.com/design/vblfDVl9C5sg16xtHkwXDR/%E2%9C%8D%F0%9F%8F%BC-KAT-%7C-For-Review-%7C-Components?node-id=2493-17649&t=Xvtg8Re8otOfiJyn-1

RomijnHumanoids commented 2 months ago

This design is done, and the ticket will be an implementation ticket. Changes are already described in the change log in the design file. Mind that the scroll shadow depends on the native look in different browsers, not to be implemented as extra shadow. Approved file: https://www.figma.com/design/ENe9lxMBTOA3Nd745U7OKP/%E2%9C%85-KAT-%7C-Approved-%7C-Components?node-id=2352-228&t=bkO2iFARDIRW2AiB-1

A Figma design system branch is already up for review and wil be merged soon.