fix(#6202): misplaced close button (#6500)

* fix(os-149): fixed close button placement * fix: missing close method * cr fixes
vuestorefront · Oct 29, 2021 · 543276b · 543276b
1 parent 20b2b27
commit 543276b
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 2 deletions.
diff --git a/packages/commercetools/theme/components/StoreLocaleSelector.vue b/packages/commercetools/theme/components/StoreLocaleSelector.vue
@@ -9,7 +9,8 @@
     <SfBottomModal
       :is-open="isLangModalOpen"
       :title="availableStores.length > 0 ? 'Choose store': ''"
-      @click:close="isLangModalOpen = !isLangModalOpen">
+      @click:close="isLangModalOpen = !isLangModalOpen"
+    >
       <SfList>
         <SfListItem v-for="store in availableStores" :key="store.id">
           <a
@@ -136,6 +137,11 @@ export default {
       --bottom-modal-height: 100vh;
     }
   }
+  .sf-bottom-modal::v-deep .sf-bottom-modal__close {
+    position: var(--circle-icon-position, absolute);
+    top: var(--spacer-xs);
+    right: var(--spacer-xs);
+  }
   .sf-list {
     .language {
       padding: var(--spacer-sm);

diff --git a/packages/core/docs/commercetools/changelog/6202.js b/packages/core/docs/commercetools/changelog/6202.js
@@ -0,0 +1,8 @@
+module.exports = {
+  description: 'Fixed close button placement (StoreLocaleSelector).',
+  link: 'https://github.com/vuestorefront/vue-storefront/issues/6202',
+  isBreaking: false,
+  breakingChanges: [],
+  author: 'Łukasz Jędrasik',
+  linkToGitHubAccount: 'https://github.com/lukaszjedrasik'
+};
diff --git a/packages/core/docs/core/changelog/6202.js b/packages/core/docs/core/changelog/6202.js
@@ -0,0 +1,8 @@
+module.exports = {
+  description: 'Fixed close button placement (LocaleSelector).',
+  link: 'https://github.com/vuestorefront/vue-storefront/issues/6202',
+  isBreaking: false,
+  breakingChanges: [],
+  author: 'Łukasz Jędrasik',
+  linkToGitHubAccount: 'https://github.com/lukaszjedrasik'
+};
diff --git a/packages/core/nuxt-theme-module/theme/components/LocaleSelector.vue b/packages/core/nuxt-theme-module/theme/components/LocaleSelector.vue
@@ -6,7 +6,11 @@
     >
       <SfImage :src="`/icons/langs/${locale}.webp`" width="20" alt="Flag" />
     </SfButton>
-    <SfBottomModal :is-open="isLangModalOpen" title="Choose language" @click:close="isLangModalOpen = !isLangModalOpen">
+    <SfBottomModal
+      :is-open="isLangModalOpen"
+      title="Choose language"
+      @click:close="isLangModalOpen = !isLangModalOpen"
+    >
       <SfList>
         <SfListItem v-for="lang in availableLocales" :key="lang.code">
           <a :href="switchLocalePath(lang.code)">
@@ -71,6 +75,11 @@ export default {
       --bottom-modal-height: 100vh;
     }
   }
+  .sf-bottom-modal::v-deep .sf-bottom-modal__close {
+    position: var(--circle-icon-position, absolute);
+    top: var(--spacer-xs);
+    right: var(--spacer-xs);
+  }
   .sf-list {
     .language {
       padding: var(--spacer-sm);