design system: app modal

ICIJ / datashare

A self-hosted search engine for documents.

https://datashare.icij.org

GNU Affero General Public License v3.0

584 stars 52 forks source link

design system: app modal #1465

Closed pirhoo closed 1 month ago

pirhoo commented 1 month ago

[x] AppModal
[x] AppModalHeader
[x] AppModalFooter

Preview

pirhoo commented 1 month ago

Component is here: https://icij.github.io/datashare-client/?path=/docs/components-appmodal-appmodal--docs

Soliine commented 1 month ago

Excellent!

I see a few things:

The color of the text of "Default slot content" should be tertiary-body-color
Same for "Cancel" button color: I made a component out of this "Cancel or OK" buttons as we also use them at the end of all forms in the app
The spacing between Cancel button and OK button should be greater, with 32px
You can add a hover effect on the Cross icon, it's a component that I called Close button in the design system's button category

pirhoo commented 1 month ago

OK thanks!

I was wondering if the color of the text content was $tertiary on purpose: modals can have a lot of text so I don't see any reason to mute it down. Maybe you want to use this color only for confirmation when the text is indicative?

pirhoo commented 1 month ago

I've the color/space changes and used FormActions to build the footer