Merge pull request #1129 from opencloud-eu/refactor/tailwind-height

refactor: height to tailwind

Author: JammingBen

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

@@ -132,9 +132,5 @@ const randomBackgroundColor = (seed: number, colors: string[]) => {
 <style lang="scss">
 .oc-avatar {
   user-select: none;
-
-  .avatarImg {
-    height: auto;
-  }
 }
 </style>

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 w-full"
+      class="oc-bottom-drawer-background 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"
+          class="oc-bottom-drawer bg-role-surface-container-high rounded-t-sm w-full max-h-[66vh]"
         >
           <div class="oc-card bg-transparent">
             <div class="oc-card-header border-b-0 px-4 pt-4">
@@ -258,7 +258,6 @@ defineExpose({ show, hide, getElement })
 </style>
 <style lang="scss">
 .oc-bottom-drawer-background {
-  height: 100%;
   left: 0;
   top: 0;
   position: fixed;
@@ -270,7 +269,6 @@ defineExpose({ show, hide, getElement })
   bottom: -100%;
   left: 0;
   right: 0;
-  max-height: 66vh;
   overflow-y: auto;
   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 w-full" role="button">
-      <div id="button-drawer" class="oc-bottom-drawer bg-role-surface-container-high rounded-t-sm w-full active">
+    <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] 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/OcButton/OcButton.vue

@@ -179,13 +179,13 @@ const onClick = (event: MouseEvent) => {
     @apply py-1.5 px-2.5;
   }
   .oc-button-s {
-    @apply text-sm;
+    @apply text-sm min-h-3;
   }
   .oc-button-m {
-    @apply text-base;
+    @apply text-base min-h-4;
   }
   .oc-button-l {
-    @apply text-lg;
+    @apply text-lg min-h-7;
   }
   .oc-button {
     @apply rounded-sm;
@@ -206,8 +206,6 @@ const onClick = (event: MouseEvent) => {
 @mixin oc-button-color-role($color, $on-color) {
   &-raw,
   &-raw-inverse {
-    min-height: 0;
-
     background-color: transparent;
     color: $color;
     .oc-icon > svg {
@@ -311,18 +309,6 @@ const onClick = (event: MouseEvent) => {
       cursor: pointer;
     }
 
-    &-s {
-      min-height: 1.2rem;
-    }
-
-    &-m {
-      min-height: $global-control-height;
-    }
-
-    &-l {
-      min-height: 2rem;
-    }
-
     &-primary {
       @include oc-button-color-role(var(--oc-role-primary), var(--oc-role-on-primary));
     }

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

@@ -35,7 +35,7 @@
     </div>
     <div
       v-if="showMessageLine"
-      class="oc-color-input-message flex items-center text-sm mt-1"
+      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-danger text-role-on-error focus:text-role-on-error border-role-error':
@@ -207,10 +207,4 @@ const onInput = (value: string) => {
     top: var(--oc-space-xsmall);
   }
 }
-
-.oc-color-input {
-  &-message {
-    min-height: $oc-font-size-default * 1.5;
-  }
-}
 </style>

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

@@ -8,7 +8,7 @@ exports[`OcDatePicker > renders 1`] = `
     <!--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>
-  <div class="oc-text-input-message flex align-center text-sm mt-1">
+  <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
     <!--v-if-->
   </div>
   <!--v-if-->

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

@@ -49,7 +49,7 @@
     </div>
     <div
       v-if="showMessageLine"
-      class="oc-file-input-message flex items-center text-sm mt-1"
+      class="oc-file-input-message flex items-center text-sm mt-1 min-h-4.5"
       :class="{
         'oc-file-input-description text-role-on-surface-variant': !!descriptionMessage,
         'oc-file-input-danger text-role-on-error focus:text-role-on-error': !!errorMessage
@@ -235,11 +235,3 @@ const onFocus = async () => {
   emit('focus', unref(inputBtnRef))
 }
 </script>
-
-<style scoped lang="scss">
-.oc-file-input {
-  &-message {
-    min-height: $oc-font-size-default * 1.5;
-  }
-}
-</style>

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

@@ -46,7 +46,7 @@ defineSlots<Slots>()
     width: 1.5px;
   }
   ul.oc-list.oc-timeline li::before {
-    width: 10px;
+    @apply size-2.5;
   }
   ul.oc-list-raw a:hover {
     @apply text-inherit;
@@ -72,7 +72,6 @@ ul.oc-list.oc-timeline {
 
     &::before {
       content: '';
-      height: 10px;
       position: absolute;
       left: -4px;
       top: 50%;

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

@@ -8,8 +8,9 @@
       'after:bg-role-secondary',
       'w-full',
       'after:w-0',
-      { 'oc-loader-flat rounded-none': flat },
-      { 'rounded-[500px]': !flat }
+      'after:h-full',
+      { 'oc-loader-flat rounded-none h-1': flat },
+      { 'rounded-[500px] h-4': !flat }
     ]"
     :aria-label="ariaLabel"
   />
@@ -43,17 +44,11 @@ const { ariaLabel = 'Loading', flat = false } = defineProps<Props>()
 .oc-loader {
   -webkit-appearance: none;
   -moz-appearance: none;
-  height: 15px;
   overflow: hidden;
   position: relative;
 
-  &-flat {
-    height: 5px !important;
-  }
-
   &::after {
     content: '';
-    height: 100%;
     position: absolute;
 
     animation: {

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

@@ -7,7 +7,7 @@
         :id="elementId"
         ref="ocModal"
         :class="classes"
-        class="border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl"
+        class="border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh]"
         tabindex="0"
         role="dialog"
         aria-modal="true"
@@ -327,7 +327,6 @@ export default {
 <style lang="scss">
 .oc-modal {
   box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);
-  max-height: 90vh;
   overflow: auto;
 
   &-background {