refactor: height to tailwind

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 {

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

@@ -3,7 +3,7 @@
 exports[`OcModal > displays input 1`] = `
 "<div class="oc-modal-background 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" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+    <div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh]" 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">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Create new folder</h2>
       </div>
@@ -26,7 +26,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">
   <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" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+    <div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh]" 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">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
       </div>
@@ -49,7 +49,7 @@ exports[`OcModal > displays loading state 1`] = `
 exports[`OcModal > matches snapshot 1`] = `
 "<div class="oc-modal-background 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" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+    <div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh]" 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">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
       </div>
@@ -72,7 +72,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">
   <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" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+    <div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh]" 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">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
       </div>

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

@@ -1,17 +1,24 @@
 import { shallowMount } from '@opencloud-eu/web-test-helpers'
-import Progress from './OcProgress.vue'
+import Progress, { Props } from './OcProgress.vue'
 
 describe('OcProgress', () => {
-  it('sets correct classes', () => {
-    const wrapper = shallowMount(Progress, {
-      props: {
-        value: 3,
-        max: 10,
-        size: 'small'
-      }
-    })
+  it.each([
+    { size: 'default', expectedSize: 'h-4' },
+    { size: 'small', expectedSize: 'h-1' },
+    { size: 'xsmall', expectedSize: 'h-0.5' }
+  ])(
+    'sets correct classes for size %s',
+    ({ size, expectedSize }: { size: Props['size']; expectedSize: string }) => {
+      const wrapper = shallowMount(Progress, {
+        props: {
+          value: 3,
+          max: 10,
+          size
+        }
+      })
 
-    expect(wrapper.attributes('class')).toContain('oc-progress-small')
-    expect(wrapper.html()).toMatchSnapshot()
-  })
+      expect(wrapper.attributes('class')).toContain(expectedSize)
+      expect(wrapper.html()).toMatchSnapshot()
+    }
+  )
 })

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

@@ -1,6 +1,7 @@
 <template>
   <div
-    :class="classes"
+    class="oc-progress block"
+    :class="{ 'h-4': size === 'default', 'h-1': size === 'small', 'h-0.5': size === 'xsmall' }"
     :aria-valuemax="max"
     :aria-valuenow="value"
     aria-busy="true"
@@ -10,12 +11,12 @@
   >
     <div
       v-if="!indeterminate"
-      class="oc-progress-current w-full"
+      class="oc-progress-current size-full"
       :style="{ width: progressValue, backgroundColor: color }"
     ></div>
     <div v-else class="oc-progress-indeterminate">
-      <div class="oc-progress-indeterminate-first" :style="{ backgroundColor: color }" />
-      <div class="oc-progress-indeterminate-second" :style="{ backgroundColor: color }" />
+      <div class="oc-progress-indeterminate-first h-full" :style="{ backgroundColor: color }" />
+      <div class="oc-progress-indeterminate-second h-full" :style="{ backgroundColor: color }" />
     </div>
   </div>
 </template>
@@ -46,7 +47,7 @@ export interface Props {
    * @docs The size of the progress bar.
    * @default default
    */
-  size?: 'default' | 'small'
+  size?: 'default' | 'small' | 'xsmall'
   /**
    * @docs The current value of the progress bar.
    * @default 0
@@ -63,10 +64,6 @@ const {
   value = 0
 } = defineProps<Props>()
 
-const classes = computed(() => {
-  return `oc-progress oc-progress-${size} block`
-})
-
 const progressValue = computed(() => {
   if (!max) {
     return '-'
@@ -77,27 +74,17 @@ const progressValue = computed(() => {
 </script>
 
 <style lang="scss">
-$progress-height: 15px !default;
-$progress-height-small: 5px !default;
-
 .oc-progress {
-  height: $progress-height;
   // Add the correct vertical alignment in Chrome, Firefox, and Opera.
   position: relative;
   overflow-x: hidden;
 
-  &-small {
-    height: $progress-height-small;
-  }
-
   &-current {
-    height: 100%;
     position: absolute;
     transition: width 0.5s;
   }
 
   &-indeterminate div {
-    height: 100%;
     position: absolute;
   }
 

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

@@ -1,7 +1,19 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`OcProgress > sets correct classes 1`] = `
-"<div class="oc-progress oc-progress-small block" aria-valuemax="10" aria-valuenow="3" aria-busy="true" aria-valuemin="0" role="progressbar" style="background-color: var(--oc-role-surface-container);">
-  <div class="oc-progress-current w-full" style="width: 30%; background-color: var(--oc-role-secondary);"></div>
+exports[`OcProgress > sets correct classes for size { size: 'default', expectedSize: 'h-4' } 1`] = `
+"<div class="oc-progress block h-4" aria-valuemax="10" aria-valuenow="3" aria-busy="true" aria-valuemin="0" role="progressbar" style="background-color: var(--oc-role-surface-container);">
+  <div class="oc-progress-current size-full" style="width: 30%; background-color: var(--oc-role-secondary);"></div>
+</div>"
+`;
+
+exports[`OcProgress > sets correct classes for size { size: 'small', expectedSize: 'h-1' } 1`] = `
+"<div class="oc-progress block h-1" aria-valuemax="10" aria-valuenow="3" aria-busy="true" aria-valuemin="0" role="progressbar" style="background-color: var(--oc-role-surface-container);">
+  <div class="oc-progress-current size-full" style="width: 30%; background-color: var(--oc-role-secondary);"></div>
+</div>"
+`;
+
+exports[`OcProgress > sets correct classes for size { size: 'xsmall', expectedSize: 'h-0.5' } 1`] = `
+"<div class="oc-progress block h-0.5" aria-valuemax="10" aria-valuenow="3" aria-busy="true" aria-valuemin="0" role="progressbar" style="background-color: var(--oc-role-surface-container);">
+  <div class="oc-progress-current size-full" style="width: 30%; background-color: var(--oc-role-secondary);"></div>
 </div>"
 `;