Add breakpoint based modal variations (#1272)

* Add breakpoint based modal variations * Remove mobile modal content * Fix default initial focus element * Add comment explaining complex margin/padding values * Remove unused import * Scroll the full modal rather than just the body * Fix modal widths
WordPress · May 3, 2022 · dbdce24 · dbdce24
1 parent a8dd9ce
commit dbdce24
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 168 deletions.
diff --git a/src/components/VContentSwitcher/VMobileMenuModal.vue b/src/components/VContentSwitcher/VMobileMenuModal.vue
@@ -8,7 +8,7 @@
         aria-controls="content-switcher-modal"
       />
     </div>
-    <VMobileModalContent
+    <VModalContent
       :visible="visibleRef"
       :trigger-element="triggerRef"
       :hide="close"
@@ -29,7 +29,7 @@
         />
         <VPageList layout="columns" class="mt-10" />
       </nav>
-    </VMobileModalContent>
+    </VModalContent>
   </div>
 </template>
 
@@ -47,15 +47,15 @@ import usePages from '~/composables/use-pages'
 import useSearchType from '~/composables/use-search-type'
 import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
 
-import VMobileModalContent from '~/components/VModal/VMobileModalContent.vue'
+import VModalContent from '~/components/VModal/VModalContent.vue'
 import VSearchTypes from '~/components/VContentSwitcher/VSearchTypes.vue'
 import VPageList from '~/components/VHeader/VPageMenu/VPageList.vue'
 import VSearchTypeButton from '~/components/VContentSwitcher/VSearchTypeButton.vue'
 
 export default defineComponent({
   name: 'VMobileMenuModal',
   components: {
-    VMobileModalContent,
+    VModalContent,
     VSearchTypes,
     VPageList,
     VSearchTypeButton,

diff --git a/src/components/VHeader/VHeaderFilter.vue b/src/components/VHeader/VHeaderFilter.vue
@@ -35,15 +35,15 @@ import VTeleport from '~/components/VTeleport/VTeleport.vue'
 import VFilterButton from '~/components/VHeader/VFilterButton.vue'
 import VSearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
 import VSidebarContent from '~/components/VHeader/VSidebarContent.vue'
-import VMobileModalContent from '~/components/VModal/VMobileModalContent.vue'
+import VModalContent from '~/components/VModal/VModalContent.vue'
 
 export default {
   name: 'VHeaderFilter',
   components: {
     VFilterButton,
     VSearchGridFilter,
     VSidebarContent,
-    VMobileModalContent,
+    VModalContent,
     VTeleport,
   },
   emits: [
@@ -72,7 +72,7 @@ export default {
     const isHeaderScrolled = inject('isHeaderScrolled')
 
     /** @type { import('@nuxtjs/composition-api').Ref<import('@nuxtjs/composition-api').Component> } */
-    const filterComponent = ref(VMobileModalContent)
+    const filterComponent = ref(VModalContent)
 
     const triggerA11yProps = reactive({
       'aria-expanded': false,
@@ -136,7 +136,7 @@ export default {
           filterComponent.value = VSidebarContent
           options.value = desktopOptions
         } else {
-          filterComponent.value = VMobileModalContent
+          filterComponent.value = VModalContent
           options.value = mobileOptions
         }
       },

diff --git a/src/components/VHeader/VPageMenu/VMobilePageMenu.vue b/src/components/VHeader/VPageMenu/VMobilePageMenu.vue
@@ -9,7 +9,7 @@
       <!-- eslint-enable vuejs-accessibility/click-events-have-key-events -->
       <VPageMenuButton :a11y-props="triggerA11yProps" />
     </div>
-    <VMobileModalContent
+    <VModalContent
       :visible="visibleRef"
       :trigger-element="triggerRef"
       :hide="close"
@@ -18,7 +18,7 @@
       <nav class="p-4">
         <VPageList layout="columns" @click="closeMenu" />
       </nav>
-    </VMobileModalContent>
+    </VModalContent>
   </div>
 </template>
 
@@ -27,13 +27,13 @@ import { computed, reactive, ref, watch } from '@nuxtjs/composition-api'
 
 import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
 
-import VMobileModalContent from '~/components/VModal/VMobileModalContent.vue'
+import VModalContent from '~/components/VModal/VModalContent.vue'
 import VPageMenuButton from '~/components/VHeader/VPageMenu/VPageMenuButton.vue'
 import VPageList from '~/components/VHeader/VPageMenu/VPageList.vue'
 
 export default {
   name: 'VMobilePageMenu',
-  components: { VMobileModalContent, VPageMenuButton, VPageList },
+  components: { VModalContent, VPageMenuButton, VPageList },
   setup(_, { emit }) {
     const modalRef = ref(null)
 

diff --git a/src/components/VModal/VMobileModalContent.vue b/src/components/VModal/VMobileModalContent.vue
diff --git a/src/components/VModal/VModalContent.vue b/src/components/VModal/VModalContent.vue
@@ -3,31 +3,49 @@
     <!-- Prevent FocusTrap from trying to focus the first element. We already do that in a more flexible, adaptive way in our Dialog composables. -->
     <FocusTrap :initial-focus="() => false">
       <div
-        class="flex justify-center z-10 fixed inset-0 bg-dark-charcoal bg-opacity-75 min-h-screen"
+        class="flex justify-center z-10 fixed inset-0 bg-dark-charcoal bg-opacity-75 min-h-screen overflow-y-auto"
       >
         <div
           ref="dialogRef"
           v-bind="$attrs"
-          class="w-4/5 flex flex-col"
+          class="w-full md:max-w-[768px] lg:w-[768px] xl:max-w-[1024px] xl:w-[1024px] flex flex-col"
           role="dialog"
           aria-modal="true"
           v-on="$listeners"
           @keydown="onKeyDown"
           @blur="onBlur"
         >
-          <div class="w-full flex justify-end">
-            <VButton
-              size="disabled"
-              variant="plain"
-              class="text-white py-2"
-              @click="hide()"
+          <slot name="top-bar" :close="hide">
+            <!--
+              These specific padding and margin values serve to
+              visually align the Openverse logo button in the modal
+              with the header logo button so that there isn't a
+              jarring "shifting" effect when opening the mobile modal.
+            -->
+            <div
+              class="w-full flex justify-between md:justify-end bg-white md:bg-tx ps-4 pe-3 md:px-0 py-4 md:py-3 shrink-0"
             >
-              {{ $t('modal.close') }} <VIcon :icon-path="closeIcon" />
-            </VButton>
-          </div>
+              <VLogoButton
+                class="md:hidden"
+                :is-fetching="false"
+                :is-header-scrolled="false"
+                :is-search-route="true"
+              />
+              <VButton
+                ref="closeButton"
+                size="disabled"
+                variant="plain"
+                class="md:text-white text-sr md:text-base"
+                @click="hide()"
+              >
+                {{ $t('modal.close') }}
+                <VIcon :icon-path="closeIcon" class="ms-2" :size="5" />
+              </VButton>
+            </div>
+          </slot>
 
           <div
-            class="w-full flex-grow align-bottom bg-white rounded-t-sm text-left overflow-y-auto"
+            class="w-full flex-grow align-bottom bg-white md:rounded-t-md text-left"
           >
             <slot />
           </div>
@@ -38,7 +56,7 @@
 </template>
 
 <script>
-import { defineComponent, toRefs, ref } from '@nuxtjs/composition-api'
+import { defineComponent, toRefs, ref, computed } from '@nuxtjs/composition-api'
 import { FocusTrap } from 'focus-trap-vue'
 
 import { useDialogContent } from '~/composables/use-dialog-content'
@@ -47,6 +65,7 @@ import { warn } from '~/utils/console'
 import VTeleport from '~/components/VTeleport/VTeleport.vue'
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
+import VLogoButton from '~/components/VHeader/VLogoButton.vue'
 
 import closeIcon from '~/assets/icons/close.svg'
 
@@ -55,7 +74,7 @@ import closeIcon from '~/assets/icons/close.svg'
  */
 const VModalContent = defineComponent({
   name: 'VModalContent',
-  components: { VTeleport, VButton, VIcon, FocusTrap },
+  components: { VTeleport, VButton, VIcon, FocusTrap, VLogoButton },
   props: {
     visible: {
       type: Boolean,
@@ -101,6 +120,10 @@ const VModalContent = defineComponent({
     }
 
     const propsRefs = toRefs(props)
+    const closeButton = ref()
+    const initialFocusElement = computed(
+      () => props.initialFocusElement || closeButton.value?.$el
+    )
     const dialogRef = ref()
     const { onKeyDown, onBlur } = useDialogContent({
       dialogRef,
@@ -111,11 +134,17 @@ const VModalContent = defineComponent({
       hideOnClickOutsideRef: propsRefs.hideOnClickOutside,
       hideRef: propsRefs.hide,
       hideOnEscRef: propsRefs.hideOnEsc,
-      initialFocusElementRef: propsRefs.initialFocusElement,
+      initialFocusElementRef: initialFocusElement,
       emit,
     })
 
-    return { dialogRef, onKeyDown, onBlur, closeIcon }
+    return {
+      dialogRef,
+      onKeyDown,
+      onBlur,
+      closeIcon,
+      closeButton,
+    }
   },
 })