Merge pull request #1077 from writer/bugfix/prevent-passing-attributes-to-lucide-icons-component

fix(ui): prevent passing attributes to the LucideIcon component

Author: VladKrasny

src/ui/src/builder/settings/BuilderSettingsHandlersBlueprint.vue

@@ -156,11 +156,15 @@ function jumpToBlueprint(blueprintId: string, triggerId?: string) {
 				<WdsIcon name="play" />
 			</WdsButton>
 			<p>{{ eventTypeFormated }}</p>
-			<WdsIcon
+			<WdsButton
 				v-if="eventDescription"
 				:data-writer-tooltip="eventDescription"
-				name="circle-question-mark"
-			/>
+				variant="neutral"
+				size="smallIcon"
+				custom-size="18px"
+			>
+				<WdsIcon name="circle-question-mark" />
+			</WdsButton>
 		</div>
 
 		<div class="BuilderSettingsHandlersBlueprint__list">

src/ui/src/components/core/base/BaseCollapseButton.vue

@@ -6,7 +6,7 @@
 		size="icon"
 		@click="isCollapsed = !isCollapsed"
 	>
-		<WdsIcon class="BaseCollapseIcon__icon" :name="icon" />
+		<WdsIcon :name="icon" />
 	</WdsButton>
 </template>
 
@@ -50,12 +50,12 @@ const icon = computed(() => {
 	border-color: var(--separatorColor);
 }
 
-:deep(.BaseCollapseIcon__icon) {
+.BaseCollapseIcon :deep(svg) {
 	transition: all 0.3s ease-in-out;
 	transform: rotate(0deg);
 }
 
-.BaseCollapseIcon--collapsed :deep(.BaseCollapseIcon__icon) {
+.BaseCollapseIcon--collapsed :deep(svg) {
 	transform: rotate(180deg);
 }
 </style>

src/ui/src/components/core/content/CoreDataframe.vue

@@ -42,7 +42,9 @@
 						data-writer-grid-col="0"
 						class="CoreDataframe__table__th CoreDataframe__table__th--index"
 					>
-						<WdsIcon class="widthAdjuster" name="grip-vertical" />
+						<div class="widthAdjuster">
+							<WdsIcon name="grip-vertical" />
+						</div>
 					</div>
 					<div
 						v-for="(columnName, columnPosition) in shownColumnNames"
@@ -59,16 +61,21 @@
 						>
 							{{ columnName }}
 						</button>
-						<WdsIcon
+						<div
 							v-if="orderSetting?.columnName == columnName"
 							class="CoreDataframe__table__th__icon"
-							:name="
-								orderSetting?.descending
-									? 'arrow-up'
-									: 'arrow-down'
-							"
-						/>
-						<WdsIcon class="widthAdjuster" name="grip-vertical" />
+						>
+							<WdsIcon
+								:name="
+									orderSetting?.descending
+										? 'arrow-up'
+										: 'arrow-down'
+								"
+							/>
+						</div>
+						<div class="widthAdjuster">
+							<WdsIcon name="grip-vertical" />
+						</div>
 					</div>
 					<div
 						v-if="hasActions"
@@ -793,7 +800,7 @@ onUnmounted(() => {
 	text-overflow: ellipsis;
 }
 
-:deep(.CoreDataframe__table__th__icon) {
+.CoreDataframe__table__th__icon {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -815,7 +822,7 @@ onUnmounted(() => {
 	z-index: 1;
 }
 
-:deep(.widthAdjuster) {
+.widthAdjuster {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -832,7 +839,7 @@ onUnmounted(() => {
 	color: var(--wdsColorGray4);
 }
 
-:deep(.widthAdjuster:hover) {
+.widthAdjuster:hover {
 	color: var(--wdsColorBlack);
 }
 </style>

src/ui/src/renderer/RendererNotifications.vue

@@ -5,7 +5,7 @@
 		@click="toggle"
 	>
 		<div ref="balloon" class="balloon" title="Toggle notifications">
-			<WdsIcon class="icon" name="bell" />
+			<WdsIcon name="bell" />
 			<div class="counter">{{ notifications.length }}</div>
 		</div>
 		<div class="balloonFlash"></div>
@@ -142,11 +142,11 @@ const clearAll = () => {
 	flex-direction: column;
 }
 
-.balloon :deep(.icon) {
+.balloon :deep(svg) {
 	font-size: 1.25rem;
 }
 
-.balloon.alert :deep(.icon) {
+.balloon.alert :deep(svg) {
 	animation-name: ring;
 	animation-duration: 0.3s;
 	animation-iteration-count: 4;

src/ui/src/wds/WdsCheckbox.vue

@@ -29,7 +29,7 @@ function onChange(event: InputEvent) {
 		@mousedown.prevent
 	>
 		<div class="WdsCheckbox__checkbox">
-			<WdsIcon name="check" class="WdsCheckbox__checkbox__check" />
+			<WdsIcon name="check" />
 		</div>
 		<span v-if="label" class="WdsCheckbox__label">{{ label }}</span>
 		<span v-if="detail" class="WdsCheckbox__detail">{{ detail }}</span>
@@ -85,17 +85,18 @@ function onChange(event: InputEvent) {
 	font-weight: bold;
 }
 
-:deep(.WdsCheckbox__checkbox__check) {
+.WdsCheckbox__checkbox :deep(svg) {
 	display: none;
 }
 
 .WdsCheckbox:hover:not(.WdsCheckbox--checked):not(.WdsCheckbox--disabled)
-	:deep(.WdsCheckbox__checkbox__check) {
+	.WdsCheckbox__checkbox
+	:deep(svg) {
 	display: block;
 	color: var(--wdsColorGray4);
 }
 
-.WdsCheckbox--checked :deep(.WdsCheckbox__checkbox__check) {
+.WdsCheckbox--checked .WdsCheckbox__checkbox :deep(svg) {
 	display: block;
 	color: var(--wdsColorWhite);
 }

src/ui/src/wds/WdsIcon.vue

@@ -7,6 +7,10 @@
 import CustomIcon, { isCustomIconName } from "./WdsIcons/CustomIcon.vue";
 import LucideIcon from "./WdsIcons/LucideIcon.vue";
 
+defineOptions({
+	inheritAttrs: false,
+});
+
 defineProps({
 	name: { type: String, required: true },
 });

src/ui/src/wds/WdsIcons/LucideIcon.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref, toRef, useAttrs, watch } from "vue";
+import { nextTick, ref, toRef, watch } from "vue";
 import { createIcons, icons } from "lucide";
 
 defineOptions({
@@ -16,8 +16,6 @@ const props = defineProps({
 	name: { type: String, required: true },
 });
 
-const attrs = useAttrs();
-
 const rawHtml = ref("");
 
 function renderIcon(name: string) {
@@ -29,7 +27,6 @@ function renderIcon(name: string) {
 			attrs: {
 				width: "1em",
 				height: "1em",
-				...attrs,
 			},
 		});
 	});