Enhancement: Set OcModal Buttons to equal width

.drone.env

@@ -1,3 +1,3 @@
 # The version of OCIS to use in pipelines that test against OCIS
-OCIS_COMMITID=ab384aba4472bdba5c54021afff6341cdac620e5
-OCIS_BRANCH=enable-kql
+OCIS_COMMITID=844783b6f927c498493b5e3d73350ab94374cdec
+OCIS_BRANCH=master

changelog/unreleased/enhancement-modal-buttons-same-width

@@ -0,0 +1,6 @@
+Enhancement: OcModal set buttons to same width
+
+We've adjusted the button widths for every modal so the options look more equal.
+
+https://github.com/owncloud/web/pull/9671
+https://github.com/owncloud/web/issues/9641

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

@@ -67,13 +67,15 @@
         <div class="oc-modal-body-actions oc-flex oc-flex-right">
           <oc-button
             class="oc-modal-body-actions-cancel"
+            ref="cancelButton"
             :variation="buttonCancelVariation"
             :appearance="buttonCancelAppearance"
             @click="cancelModalAction"
             v-text="buttonCancelText"
           />
           <oc-button
             v-if="buttonSecondaryText"
+            ref="secondaryButton"
             class="oc-modal-body-actions-secondary oc-ml-s"
             :variation="buttonSecondaryVariation"
             :appearance="buttonSecondaryAppearance"
@@ -82,6 +84,7 @@
           />
           <oc-button
             v-if="!withoutButtonConfirm"
+            ref="primaryButton"
             class="oc-modal-body-actions-confirm oc-ml-s"
             variation="primary"
             :appearance="buttonConfirmAppearance"
@@ -96,7 +99,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ComponentPublicInstance } from 'vue'
+import { defineComponent, PropType, ComponentPublicInstance, ref, onMounted, unref } from 'vue'
 import OcButton from '../OcButton/OcButton.vue'
 import OcCheckbox from '../OcCheckbox/OcCheckbox.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
@@ -393,6 +396,41 @@ export default defineComponent({
       checkboxValue: false
     }
   },
+  setup() {
+    const primaryButton = ref(null)
+    const secondaryButton = ref(null)
+    const cancelButton = ref(null)
+
+    const setButtonsEqualWidth = () => {
+      const _primaryButton = unref(primaryButton)
+      const _secondaryButton = unref(secondaryButton)
+      const _cancelButton = unref(cancelButton)
+
+      const primaryWidth = _primaryButton?.$el?.offsetWidth || 0
+      const secondaryWidth = _secondaryButton?.$el?.offsetWidth || 0
+      const cancelWidth = _cancelButton?.$el?.offsetWidth || 0
+      const maxWidth = Math.max(primaryWidth, secondaryWidth, cancelWidth)
+
+      if (_primaryButton?.$el) {
+        _primaryButton.$el.style.minWidth = `${maxWidth}px`
+      }
+      if (_secondaryButton?.$el) {
+        _secondaryButton.$el.style.minWidth = `${maxWidth}px`
+      }
+      if (_cancelButton?.$el) {
+        _cancelButton.$el.style.minWidth = `${maxWidth}px`
+      }
+    }
+    onMounted(() => {
+      setButtonsEqualWidth()
+    })
+
+    return {
+      primaryButton,
+      secondaryButton,
+      cancelButton
+    }
+  },
   computed: {
     initialFocusRef(): FocusTargetOrFalse {
       if (this.focusTrapInitial) {