fix: conditional clicking attributes (#528)

lob · Jul 9, 2024 · 9a97430 · 9a97430
1 parent fb1fe01
commit 9a97430
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 59 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.83
+
+- Fix attribute handling for conditionally clickable components
+
 ## v2.0.82
 
 - Update `Card` component

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.82",
+  "version": "2.0.83",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

diff --git a/src/components/Card/Card.vue b/src/components/Card/Card.vue
@@ -1,31 +1,33 @@
 <template>
   <ConditionalClickWrapper
     v-bind="$attrs"
-    :to
-    :target
     :class="clickWrapperClasses"
     :disabled
+    :target
+    :to
     @[onClick&&`click`]="$emit('click', $event)"
   >
-    <Card :class="cardClasses">
-      <template v-if="icon" #header>
-        <span class="uic-card-icon-container">
-          <Icon :icon size="xxl" />
-        </span>
-      </template>
+    <template #default="{ attrs: slotAttrs }">
+      <Card v-bind="slotAttrs" :class="cardClasses">
+        <template v-if="icon" #header>
+          <span class="uic-card-icon-container">
+            <Icon :icon size="xxl" />
+          </span>
+        </template>
 
-      <template v-if="title || $slots.title" #title>
-        <slot name="title">
-          <p class="type-base-600 text-gray-800;">{{ title }}</p>
-        </slot>
-      </template>
+        <template v-if="title || $slots.title" #title>
+          <slot name="title">
+            <p class="type-base-600 text-gray-800;">{{ title }}</p>
+          </slot>
+        </template>
 
-      <template #content>
-        <slot>
-          <p class="type-small-400 text-gray-800">{{ content }}</p>
-        </slot>
-      </template>
-    </Card>
+        <template #content>
+          <slot>
+            <p class="type-small-400 text-gray-800">{{ content }}</p>
+          </slot>
+        </template>
+      </Card>
+    </template>
   </ConditionalClickWrapper>
 </template>
 

diff --git a/src/components/Tile/Tile.vue b/src/components/Tile/Tile.vue
@@ -7,45 +7,47 @@
     :disabled
     @[onClick&&`click`]="$emit('click', $event)"
   >
-    <Panel
-      :class="!isClickable ? computedClasses : undefined"
-      v-bind="!isClickable ? $attrs : undefined"
-      data-testid="uic-tile"
-    >
-      <template #header>
-        <slot name="header" />
-        <LoadingSpinnerIcon v-if="isSlotEmpty($slots.default) && loading" />
-      </template>
-
-      <template #icons>
-        <div v-if="isClickable" class="uic-panel-click-icon">
-          <Icon :icon="IconName.NEXT" />
-        </div>
-      </template>
-
-      <template #default>
-        <template v-if="!isSlotEmpty($slots.default) && loading">
-          <Skeleton
-            :height="size === TileSize.LG ? '32px' : '28px'"
-            width="50%"
-          />
+    <template #default="{ attrs }">
+      <Panel
+        :class="!isClickable ? computedClasses : undefined"
+        v-bind="attrs"
+        data-testid="uic-tile"
+      >
+        <template #header>
+          <slot name="header" />
+          <LoadingSpinnerIcon v-if="isSlotEmpty($slots.default) && loading" />
         </template>
-        <Alert v-else-if="error" variant="error">
-          {{ error }}
-        </Alert>
-        <template v-else>
-          <div :class="['uic-panel-content', { loading }]">
-            <slot name="default" />
-            <p
-              v-if="$slots['subtext']"
-              :class="['uic-panel-subcontent', { loading }]"
-            >
-              <slot name="subtext" />
-            </p>
+
+        <template #icons>
+          <div v-if="isClickable" class="uic-panel-click-icon">
+            <Icon :icon="IconName.NEXT" />
           </div>
         </template>
-      </template>
-    </Panel>
+
+        <template #default>
+          <template v-if="!isSlotEmpty($slots.default) && loading">
+            <Skeleton
+              :height="size === TileSize.LG ? '32px' : '28px'"
+              width="50%"
+            />
+          </template>
+          <Alert v-else-if="error" variant="error">
+            {{ error }}
+          </Alert>
+          <template v-else>
+            <div :class="['uic-panel-content', { loading }]">
+              <slot name="default" />
+              <p
+                v-if="$slots['subtext']"
+                :class="['uic-panel-subcontent', { loading }]"
+              >
+                <slot name="subtext" />
+              </p>
+            </div>
+          </template>
+        </template>
+      </Panel>
+    </template>
   </ConditionalClickWrapper>
 </template>
 

diff --git a/src/utils/ConditionalClickWrapper.vue b/src/utils/ConditionalClickWrapper.vue
@@ -13,7 +13,7 @@
       :disabled
       @click="$emit('click', $event)"
     >
-      <slot />
+      <slot :attrs="!isLink && !isButton ? $attrs : undefined" />
     </ConditionalWrapper>
   </ConditionalWrapper>
 </template>