migrate button component over to composition api and plain css

packages/component-library/src/components/feedback-indicator/mt-toast/mt-toast-notification.vue

@@ -32,7 +32,7 @@
       </div>
 
       <div class="mt-toast-notification__content-right">
-        <mt-button v-if="toast.action" @click="onActionClick" size="small">
+        <mt-button v-if="toast.action" @click="onActionClick" variant="secondary" size="small">
           {{ toast.action.label }}
         </mt-button>
       </div>

packages/component-library/src/components/form/mt-button/mt-button.vue

@@ -73,9 +73,7 @@ const buttonClasses = computed(() => [
   transition: all 0.15s ease-out;
   display: inline-block;
   border-radius: var(--border-radius-button);
-  padding: 2px 24px;
   font-size: var(--font-size-xs);
-  line-height: 34px;
   outline: none;
   font-weight: var(--font-weight-semibold);
   font-family: var(--font-family-body);
@@ -87,6 +85,7 @@ const buttonClasses = computed(() => [
   user-select: none;
   margin: 0;
   position: relative;
+  border: 1px solid transparent;
 }
 
 .mt-button__content {
@@ -103,7 +102,6 @@ const buttonClasses = computed(() => [
 .mt-button--primary {
   background: var(--color-interaction-primary-default);
   color: var(--color-text-static-default);
-  line-height: 36px;
   border-color: var(--color-interaction-primary-default);
 
   & .mt-icon {
@@ -159,7 +157,6 @@ const buttonClasses = computed(() => [
 .mt-button--secondary {
   background: var(--color-interaction-secondary-default);
   color: var(--color-text-primary-default);
-  line-height: 36px;
   border-color: var(--color-border-primary-default);
 
   &:is(:hover, :focus-visible, :active) {
@@ -189,7 +186,6 @@ const buttonClasses = computed(() => [
 .mt-button--critical {
   background: var(--color-interaction-critical-default);
   color: var(--color-text-static-default);
-  line-height: 36px;
   border-color: var(--color-interaction-critical-default);
 
   &:is(:hover, :focus-visible, :active) {
@@ -251,47 +247,53 @@ const buttonClasses = computed(() => [
   width: 100%;
 }
 
-.mt-button--square {
-  width: 40px;
-  padding-left: 0;
-  padding-right: 0;
-  text-align: center;
+.mt-button--large {
+  padding-inline: 28px;
+  font-size: var(--font-size-2xs);
+  height: 3rem;
 
-  & .mt-button__content {
-    display: inline;
+  &.mt-button--square {
+    width: 48px;
   }
 }
 
-.mt-button--large {
-  padding-left: 28px;
-  padding-right: 28px;
-  line-height: 42px;
-  font-size: var(--font-size-2xs);
+.mt-button--default {
+  padding-inline: 15px;
+  height: 2.5rem;
 
   &.mt-button--square {
-    width: 48px;
+    width: 2.5rem;
   }
 }
 
 .mt-button--small {
-  padding-left: 15px;
-  padding-right: 15px;
+  padding-inline: 13px;
+  height: 2rem;
   font-size: var(--font-size-2xs);
-  line-height: 26px;
 
   &.mt-button--square {
-    width: 32px;
+    width: 2rem;
   }
 }
 
 .mt-button--x-small {
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-inline: 10px;
   font-size: var(--font-size-2xs);
-  line-height: 18px;
 
   &.mt-button--square {
-    width: 24px;
+    width: 1.5rem;
+  }
+}
+
+.mt-button--square {
+  width: 40px;
+  padding: 0;
+  text-align: center;
+  aspect-ratio: 1 / 1;
+
+  & .mt-button__content {
+    display: grid;
+    place-items: center;
   }
 }
 

packages/component-library/src/components/layout/mt-empty-state/mt-empty-state.vue

@@ -20,6 +20,7 @@
       v-if="buttonText"
       class="mt-empty-state__button"
       variant="primary"
+      size="small"
       @click="$emit('button-click')"
     >
       <mt-icon name="solid-plus-circle-s" />

packages/component-library/src/components/overlay/mt-modal/mt-modal.stories.ts

@@ -28,7 +28,7 @@ export default {
 
     <template #footer>
       <div style='width: 100%; display: flex; justify-content: flex-end;'>
-        <mt-button variant='primary'>Continue</mt-button>
+        <mt-button variant='primary' size='small'>Continue</mt-button>
       </div>
     </template>
   </mt-modal>

packages/component-library/src/components/overlay/mt-popover/mt-popover.vue

@@ -16,6 +16,7 @@
           v-if="currentView.name !== 'base'"
           class="mt-popover__back-button"
           variant="secondary"
+          size="small"
           @click="goViewBack"
         >
           <mt-icon name="solid-long-arrow-left" />

packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.stories.ts

@@ -690,6 +690,7 @@ export default {
           <mt-button
               v-if="!args._remove_primary_toolbar_button_"
               variant="primary"
+              size="small"
               @click="reloadHandler"
           >
             Primary

packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue

@@ -13,7 +13,7 @@
 
         <mt-popover v-if="filters.length > 0" title="Filters" :child-views="filterChildViews">
           <template #trigger="{ toggleFloatingUi }">
-            <mt-button variant="secondary" @click="toggleFloatingUi">
+            <mt-button variant="secondary" size="small" @click="toggleFloatingUi">
               <mt-icon name="solid-filter-s" aria-hidden="true" />
 
               <span>{{ $t("mt-data-table.filter.addFilter") }}</span>

packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.vue

@@ -13,6 +13,7 @@
         }"
         variant="secondary"
         square
+        size="small"
         :aria-label="t('mt-data-table-settings.aria-toggle-table-settings')"
         @click="toggleFloatingUi"
       >