search

Tropix126 / fluent-svelte

A faithful implementation of Microsoft's Fluent Design System in Svelte.
https://fluent-svelte.vercel.app
MIT License
606 stars 26 forks source link

cursor: pointer #27

Closed mustafa0x closed 2 years ago

mustafa0x commented 2 years ago

Nice components!

Very minor: most components should probably use cursor: pointer. It's also what MS does, eg https://developer.microsoft.com/en-us/fluentui#/controls/web/button

Tropix126 commented 2 years ago

The resources you linked are for fluentui, which is largely a whole different design system than the guidelines we follow here. One of the larger reasons why I created this is because Microsoft actually doesn't follow their own standards when it comes to their web implementations of Fluent.

Rather, the design language that this library attempts to follow is their native version of the fluent design system, WinUI. The native version generally uses the default cursor for buttons with regular actions, and the pointer cursor for hyperlinks, which is what fluent-svelte does as well. It's worth noting that unstyled HTML buttons also follow this paradigm by default too.

mustafa0x commented 2 years ago

Thanks, I appreciated the detailed reply! Would you consider making cursor: pointer an option for components, or should users add custom CSS rules?

Tropix126 commented 2 years ago

Think it's probably handled better by CSS, since I don't really like to export props for single CSS rules. What I might consider doing in the future is exposing some CSS variable that lets you specify the interaction cursor for clickable items. Dunno.