chore: adjust position css props to tailwind

packages/design-system/src/components/OcAvatars/OcAvatars.vue

@@ -5,7 +5,7 @@
       v-oc-tooltip="tooltip"
       class="oc-avatars inline-flex w-fit"
       aria-hidden="true"
-      :class="avatarsClasses"
+      :class="[...avatarsClasses, { '[&>*]:hover:transform-[scale(1.1)]': hasHoverEffect }]"
     >
       <slot name="userAvatars" :avatars="avatars" :width="width">
         <template v-if="avatars.length > 0">
@@ -212,7 +212,6 @@ onMounted(() => {
 
     > *:hover {
       z-index: 1000 !important;
-      transform: scale(1.1);
     }
   }
 

packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue

@@ -7,14 +7,14 @@
     <div
       v-if="isOpen"
       ref="bottomDrawerRef"
-      class="oc-bottom-drawer-background bg-black/40 size-full"
+      class="oc-bottom-drawer-background fixed top-0 left-0 bg-black/40 size-full"
       role="button"
       @click="onBackgroundClicked"
     >
       <focus-trap>
         <div
           :id="drawerId"
-          class="oc-bottom-drawer bg-role-surface-container-high rounded-t-sm w-full max-h-[66vh] overflow-y-auto"
+          class="oc-bottom-drawer fixed inset-x-0 bg-role-surface-container-high rounded-t-sm w-full max-h-[66vh] overflow-y-auto bottom-[-100%]"
         >
           <div class="oc-card bg-transparent">
             <div class="oc-card-header border-b-0 px-4 pt-4">
@@ -254,25 +254,20 @@ defineExpose({ show, hide, getElement })
     /* overwrite default list styling */
     @apply p-2 bg-role-surface rounded-lg;
   }
+  .oc-bottom-drawer.active {
+    @apply bottom-0;
+  }
 }
 </style>
 <style lang="scss">
 .oc-bottom-drawer-background {
-  left: 0;
-  top: 0;
-  position: fixed;
   z-index: calc(var(--oc-z-index-modal) + 2);
 }
 
 .oc-bottom-drawer {
-  position: fixed;
-  bottom: -100%;
-  left: 0;
-  right: 0;
   transition: all 0.2s;
 
   &.active {
-    bottom: 0;
     transition: all 0.2s;
   }
 }

packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap

@@ -3,8 +3,8 @@
 exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
 "<div drawerid="button-drawer" toggle="#button-drawer-toggle" title="Bottom Drawer" closeonclick="false"><button id="button-drawer-toggle">Toggle Drawer</button>
   <div>
-    <div class="oc-bottom-drawer-background bg-black/40 size-full" role="button">
-      <div id="button-drawer" class="oc-bottom-drawer bg-role-surface-container-high rounded-t-sm w-full max-h-[66vh] overflow-y-auto active">
+    <div class="oc-bottom-drawer-background fixed top-0 left-0 bg-black/40 size-full" role="button">
+      <div id="button-drawer" class="oc-bottom-drawer fixed inset-x-0 bg-role-surface-container-high rounded-t-sm w-full max-h-[66vh] overflow-y-auto bottom-[-100%] active">
         <div class="oc-card bg-transparent">
           <div class="oc-card-header border-b-0 px-4 pt-4">
             <div class="flex justify-between items-center">

packages/design-system/src/components/OcColorInput/OcColorInput.vue

@@ -6,7 +6,7 @@
         <span v-if="requiredMark" class="text-role-on-error" aria-hidden="true">*</span>
       </label>
     </slot>
-    <div class="oc-color-input-wrapper oc-position-relative max-m-5">
+    <div class="oc-color-input-wrapper relative max-m-5">
       <input
         :id="id"
         v-bind="additionalAttributes"
@@ -25,7 +25,7 @@
       />
       <oc-button
         v-if="showClearButton"
-        class="mr-1 oc-position-center-right oc-color-input-btn-clear"
+        class="mr-1 absolute top-[50%] transform-[translateY(-50%)] right-0 oc-color-input-btn-clear"
         appearance="raw"
         no-hover
         @click="onClear"
@@ -37,7 +37,7 @@
       v-if="showMessageLine"
       class="oc-color-input-message flex items-center text-sm mt-1 min-h-4.5"
       :class="{
-        'oc-color-input-description text-role-on-surface-variant': !!descriptionMessage,
+        'oc-color-input-description text-role-on-surface-variant relative': !!descriptionMessage,
         'oc-color-input-danger text-role-on-error focus:text-role-on-error border-role-error':
           !!errorMessage
       }"
@@ -196,15 +196,3 @@ const onInput = (value: string) => {
   emit('update:modelValue', value)
 }
 </script>
-
-<style lang="scss">
-.oc-color-input-message.oc-color-input-description {
-  position: relative;
-
-  .oc-icon {
-    position: absolute;
-    left: var(--oc-space-xsmall);
-    top: var(--oc-space-xsmall);
-  }
-}
-</style>

packages/design-system/src/components/OcDatepicker/__snapshots__/OcDatepicker.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`OcDatePicker > renders 1`] = `
 "<div class="oc-date-picker"><label class="oc-label" for="oc-textinput-1">Datepicker label
     <!--v-if-->
   </label>
-  <div class="oc-position-relative">
+  <div class="relative">
     <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="date" value="">
     <!--v-if-->
   </div>

packages/design-system/src/components/OcFilterChip/OcFilterChip.vue

@@ -13,7 +13,11 @@
       @click="isToggle ? emit('toggleFilter') : false"
     >
       <oc-icon
-        :class="filterActive ? 'oc-filter-check-icon-active' : 'oc-filter-check-icon-inactive w-0'"
+        :class="{
+          'transform-[scale(1)] ease-in': filterActive,
+          'transform-[scale(0)] ease-out w-0': !filterActive
+        }"
+        class="transition-all duration-250"
         name="check"
         size="small"
       />
@@ -188,14 +192,6 @@ defineExpose({ hideDrop })
     margin-left: 1px;
   }
 }
-.oc-filter-check-icon-active {
-  transition: all 0.25s ease-in;
-  transform: scale(1) !important;
-}
-.oc-filter-check-icon-inactive {
-  transition: all 0.25 ease-in;
-  transform: scale(0) !important;
-}
 
 // the focussed button needs to stay above the other to correctly display the focus outline
 .oc-filter-chip-button,

packages/design-system/src/components/OcList/OcList.vue

@@ -32,11 +32,19 @@ defineSlots<Slots>()
   ul.oc-list.oc-timeline {
     @apply m-0 p-0;
   }
+  ul.oc-list.oc-timeline {
+    @apply relative before:absolute before:inset-0;
+  }
   ul.oc-list-divider > :nth-child(n + 2) {
     @apply mt-2 pt-2 border-t;
   }
   ul.oc-list.oc-timeline li {
-    @apply py-2 pl-5 pr-7 flex flex-col before:rounded-[50%] w-full;
+    @apply py-2 pl-5 pr-7 flex flex-col before:rounded-[50%] w-full relative;
+  }
+  ul.oc-list.oc-timeline li:before {
+    @apply absolute;
+    left: -4px;
+    top: 50%;
   }
   ul.oc-list.oc-timeline::before,
   ul.oc-list.oc-timeline li::before {
@@ -47,6 +55,7 @@ defineSlots<Slots>()
   }
   ul.oc-list.oc-timeline li::before {
     @apply size-2.5;
+    transform: translateY(-50%);
   }
   ul.oc-list-raw a:hover {
     @apply text-inherit;
@@ -55,27 +64,17 @@ defineSlots<Slots>()
 </style>
 <style lang="scss">
 ul.oc-list.oc-timeline {
-  position: relative;
   list-style: none;
 
   &::before {
     content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
   }
 
   li {
-    position: relative;
     box-sizing: border-box;
 
     &::before {
       content: '';
-      position: absolute;
-      left: -4px;
-      top: 50%;
-      transform: translateY(-50%);
       z-index: 1;
     }
   }

packages/design-system/src/components/OcLoader/OcLoader.vue

@@ -37,19 +37,17 @@ const { ariaLabel = 'Loading', flat = false } = defineProps<Props>()
 
 @layer components {
   .oc-loader {
-    @apply my-5 align-baseline;
+    @apply my-5 align-baseline relative after:absolute;
   }
 }
 </style>
 <style lang="scss">
 .oc-loader {
   -webkit-appearance: none;
   -moz-appearance: none;
-  position: relative;
 
   &::after {
     content: '';
-    position: absolute;
 
     animation: {
       duration: 1.4s;

packages/design-system/src/components/OcModal/OcModal.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="oc-modal-background bg-black/40 flex items-center justify-center flex-row flex-wrap size-full"
+    class="oc-modal-background fixed left-0 top-0 bg-black/40 flex items-center justify-center flex-row flex-wrap size-full"
   >
     <focus-trap :active="true" :initial-focus="initialFocusRef" :tabbable-options="tabbableOptions">
       <div
@@ -329,9 +329,6 @@ export default {
   box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);
 
   &-background {
-    left: 0;
-    position: fixed;
-    top: 0;
     z-index: var(--oc-z-index-modal);
   }
 }

packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcModal > displays input 1`] = `
-"<div class="oc-modal-background bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
+"<div class="oc-modal-background fixed left-0 top-0 bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
     <div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
@@ -24,7 +24,7 @@ exports[`OcModal > displays input 1`] = `
 `;
 
 exports[`OcModal > displays loading state 1`] = `
-"<div class="oc-modal-background bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
+"<div class="oc-modal-background fixed left-0 top-0 bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
     <div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
@@ -39,15 +39,15 @@ exports[`OcModal > displays loading state 1`] = `
         <div class="oc-modal-body-actions-grid grid grid-flow-col auto-cols-1fr"><button type="button" disabled="" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-modal-body-actions-cancel">
             <!--v-if-->
             <!-- @slot Content of the button --> Cancel
-          </button> <button type="button" disabled="" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-modal-body-actions-confirm ml-2"><span class="oc-spinner oc-spinner-s inline-block after:block after:bg-transparent text-role-on-surface after:border after:border-current after:rounded-full after:size-full spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
+          </button> <button type="button" disabled="" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-modal-body-actions-confirm ml-2"><span class="oc-spinner oc-spinner-s inline-block after:block after:bg-transparent text-role-on-surface relative after:relative after:border after:border-current after:rounded-full after:size-full spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
       </div>
     </div>
   </focus-trap-stub>
 </div>"
 `;
 
 exports[`OcModal > matches snapshot 1`] = `
-"<div class="oc-modal-background bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
+"<div class="oc-modal-background fixed left-0 top-0 bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
     <div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
@@ -70,7 +70,7 @@ exports[`OcModal > matches snapshot 1`] = `
 `;
 
 exports[`OcModal > overrides props message with slot 1`] = `
-"<div class="oc-modal-background bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
+"<div class="oc-modal-background fixed left-0 top-0 bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
     <div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">

packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue

@@ -103,12 +103,7 @@ onMounted(() => {
 
 @layer components {
   .oc-notification-message {
-    @apply p-4 mt-2;
+    @apply relative p-4 mt-2;
   }
 }
 </style>
-<style lang="scss">
-.oc-notification-message {
-  position: relative;
-}
-</style>

packages/design-system/src/components/OcNotifications/OcNotifications.spec.ts

@@ -6,15 +6,18 @@ describe('OcNotifications', () => {
     return shallowMount(OcNotifications, options)
   }
   describe('position prop', () => {
-    it.each(['top-left', 'top-center', 'top-right'])(
-      'should set provided position as class for wrapper',
-      (position) => {
-        const wrapper = getWrapper({
-          props: { position: position }
-        })
-        expect(wrapper.attributes('class')).toContain(`oc-notification-${position}`)
-      }
-    )
+    it.each([
+      { position: 'top-left', expectedClasses: ['top-2', 'left-2'] },
+      { position: 'top-center', expectedClasses: ['top-2', 'inset-x-0'] },
+      { position: 'top-right', expectedClasses: ['top-2', 'right-2'] }
+    ])('should set provided position as class for wrapper', ({ position, expectedClasses }) => {
+      const wrapper = getWrapper({
+        props: { position }
+      })
+      expectedClasses.forEach((expectedClass) => {
+        expect(wrapper.attributes('class')).toContain(expectedClass)
+      })
+    })
   })
 
   it('should render provided slot html', () => {

packages/design-system/src/components/OcNotifications/OcNotifications.vue

@@ -1,12 +1,18 @@
 <template>
-  <div class="oc-notification mb-2 w-md max-w-full" :class="classes">
+  <div
+    class="oc-notification mb-2 w-md max-w-full"
+    :class="{
+      fixed: position !== 'default',
+      'top-2 left-2': position === 'top-left',
+      'top-2 inset-x-0 mx-auto': position === 'top-center',
+      'top-2 right-2': position === 'top-right'
+    }"
+  >
     <slot />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-
 export interface Props {
   /**
    * @docs The position of the notification.
@@ -24,38 +30,11 @@ export interface Slots {
 
 const { position = 'default' } = defineProps<Props>()
 defineSlots<Slots>()
-
-const classes = computed(() => `oc-notification-${position}`)
 </script>
-<style>
-@reference '@opencloud-eu/design-system/tailwind';
 
-@layer components {
-  .oc-notification-top-center {
-    @apply mx-auto;
-  }
-}
-</style>
 <style lang="scss">
 .oc-notification {
   box-sizing: border-box;
   z-index: 1040;
-
-  &-top-left {
-    position: fixed;
-    top: var(--oc-space-small);
-    left: var(--oc-space-small);
-  }
-  &-top-center {
-    position: fixed;
-    top: var(--oc-space-small);
-    left: 0;
-    right: 0;
-  }
-  &-top-right {
-    position: fixed;
-    top: var(--oc-space-small);
-    right: var(--oc-space-small);
-  }
 }
 </style>