feat(ui): improve CoreFileInput

[madeindjs]

The main issue of CoreFileInput was that, when it re-render, the files selected label is cleared and there is no way to set it again.

To prevent that, the easiest way is to hide the <input type="file" /> and display instead a custom button and a label.

This unlock a cool possibility to create the link of the file and let the user download the file.

Screencast.from.2024-07-18.23-00-18.webm

[ramedina86]

I like the logic of this one but I think the button needs to be changed.

Can we try using a plainWdsButton? By plain I mean separatorColor as border, then transparent or containerBackgroundColor for the background, primaryTextColor for the text.

From the design system:

[madeindjs]

@ramedina86 , do you think we can try to reuse the WdsButton and pass CSS var to customize it ?

It seems a bit hard for now though, the border and background can't be separated for instance

writer-framework/src/ui/src/wds/WdsButton.vue

Lines 15 to 16 in 37b25b1

	border: 1px solid var(--buttonColor);
	background: var(--buttonColor);

[ramedina86]

@madeindjs please implement a variant prop, we'll need it anyway. If you check WDS we have several variants, so it makes sense to make it user-configurable for other buttons.

[ramedina86]

Unsure if I was 100% clear, it'd work like

<WdsButton variant="primary">Button that looks like today</WdsButton>
<WdsButton variant="tertiary">Button that's neutral<WdsButton>

[madeindjs]

@ramedina86 , It's done

[ramedina86]

Nice, looks really good!