feat: overlay improvements

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## v2.0.84
+
+- Improve `Overlay` flexibility
+- Add `Filter` icon
+
 ## v2.0.83
 
 - Fix attribute handling for conditionally clickable components

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.83",
+  "version": "2.0.84",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

src/components/Icon/types.ts

@@ -62,6 +62,7 @@ export const IconName = {
   FILE_ALT: 'FileAlt',
   FILE_INFO: 'FileInfo',
   FILE_SHARE: 'FileShare',
+  FILTER: 'Filter',
   FIRE: 'Fire',
   FOLDER_INFO: 'FolderInfo',
   FUTURE: 'Future',

src/components/Overlay/Overlay.mdx

@@ -27,7 +27,7 @@ import { Primary } from './Overlay.stories';
 </script>
 
 <template>
-  <button @click="(e) => overlayRef.toggle(e)">Toggle Overlay</button>
+  <button @click="overlayRef.toggle($event)">Toggle Overlay</button>
   <Overlay ref="overlayRef" />
 </template>
 ```

src/components/Overlay/Overlay.vue

@@ -11,24 +11,35 @@
       }
     }"
   >
-    <slot />
+    <div v-bind="contentProps">
+      <slot />
+    </div>
   </OverlayPanel>
 </template>
 
 <script setup lang="ts">
 import OverlayPanel from 'primevue/overlaypanel';
-import { ref } from 'vue';
+import { HTMLAttributes, ref } from 'vue';
 
 const overlay = ref();
 
+withDefaults(
+  defineProps<{
+    contentProps?: HTMLAttributes;
+  }>(),
+  {
+    contentProps: () => ({})
+  }
+);
+
 defineExpose({
   toggle: (e: Event) => overlay.value.toggle(e)
 });
 </script>
 
 <style lang="scss">
 .uic-overlay {
-  @apply my-1 p-2;
+  @apply my-1;
   @apply border border-gray-100 rounded-lg;
   @apply bg-white;
   @apply shadow-large;