Some component doesn't have a UI prop

[GMartigny]

Description

Hi,

The Icon component doesn't have a UI prop like most components. This prevent users from applying a CSS class to all instances of Icon. IMO, this is a really small harmless change, that would align Icons with the rest of the library.

As of v2.18.4, this is true for:

• Form
• Icon
• Link

As a workaround, it's always possible to create a wrapper component.

<script setup>
defineProps(['name', 'ui']);
</script>

<template>
  <u-icon :name="name" :class="ui.base" />
</template>

By the way, the doc state that "Each component has a ui prop". Which is not true then.

Additional context

No response

[GMartigny]

I understand that components without the prop are just wrappers. I also know that I can use class directly. My need was to apply said class to all instances of a component. For example, if I want to have all Link underlined. Also, this would make these component work like the rest of the lib. No reasons for them to be exceptions. Finally, these change wouldn't impact existing users and just expand the possibilities of customization. Hope the clear up my request. Le lun. 2 sept. 2024, 09:44, caligari ***@***.***> a écrit :

…

Why would you use UI props with them? Just use class attribute. If you look at the form you will understand that it is just a wrapper. image.png (view on web) <https://github.com/user-attachments/assets/d4b24f6d-c3f3-4cab-bbc5-3ef7d22931fe> about ULink component from docs: *The Link component is a wrapper around through the custom prop that provides a few extra props: inactive-class prop to set a class when the link is inactive, active-class is used when active. exact prop to style with active-class when the link is active and the route is exactly the same as the current route. exact-query and exact-hash props to style with active-class when the link is active and the query or hash is exactly the same as the current query or hash.* and about icon. Its component that has a class attribute with the icon name image.png (view on web) <https://github.com/user-attachments/assets/d93e84ff-a302-4b25-a8e2-0b3848f511fa> Try add class attributes in this components and u wil get result. Example: <UIcon name="i-heroicons-archive-box-x-mark" class="size-6 text-red-500"/> image.png (view on web) <https://github.com/user-attachments/assets/fe75d85c-b9b6-4240-92ac-6fa2a882ac6f> <UForm class="size-28 bg-red-500"/> image.png (view on web) <https://github.com/user-attachments/assets/bba587ca-e827-4f3f-b205-5af8aa120d9a> <ULink to="/" active-class="active text-primary" inactive-class="hover:text-primary" class="flex items-center h-12 gap-2 px-3 pl-5 text-xl relative w-full transition-colors duration-300">Home</ULink> image.png (view on web) <https://github.com/user-attachments/assets/45cb6a24-d24e-4fa8-a3d9-0b8e59999f35> — Reply to this email directly, view it on GitHub <#2094 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AATM7FZCG4IDNXEBANIDWC3ZUQJMBAVCNFSM6AAAAABNMRJO7WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMRUGAZTQMBUHA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[benjamincanac]

We won't be implementing this in v2 or v3, the ui prop is meant to target multiple slots within a component. It's unnecessary for components having a single root div for example. You can use the app.config.ts to target all components at the same time.