Enhancement: Set OcModal Buttons to equal width (#9671)

* Enhancement: Set OcModal Buttons to equal width * Fix console error * Add changelog * Beautify code * Beautify code * Adjust .drone.env * Simplify if statements * Update snapshots
owncloud · Sep 7, 2023 · 6e2eb63 · 6e2eb63
1 parent 59e8cfd
commit 6e2eb63
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 11 deletions.
diff --git a/changelog/unreleased/enhancement-modal-buttons-same-width b/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
diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/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) {

diff --git a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
@@ -15,9 +15,9 @@ exports[`OcModal displays input 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
         <!--v-if-->
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>
   </focus-trap-stub>
@@ -39,9 +39,9 @@ exports[`OcModal hides icon if not specified 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
         <!--v-if-->
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>
   </focus-trap-stub>
@@ -63,9 +63,9 @@ exports[`OcModal matches snapshot 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
         <!--v-if-->
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>
   </focus-trap-stub>
@@ -87,9 +87,9 @@ exports[`OcModal overrides props message with slot 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
         <!--v-if-->
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>
   </focus-trap-stub>

diff --git a/.../web-app-admin-settings/tests/unit/components/Users/__snapshots__/LoginModal.spec.ts.snap b/.../web-app-admin-settings/tests/unit/components/Users/__snapshots__/LoginModal.spec.ts.snap
@@ -17,9 +17,9 @@ exports[`LoginModal renders the input including two options 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
         <!--v-if-->
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="true" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="true" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>
   </focus-trap-stub>