From 8b2e6e64952ba1c6d6ff770359bb2213fb1d8bdf Mon Sep 17 00:00:00 2001 From: Stephen Date: Wed, 27 Jan 2021 14:51:07 -0600 Subject: [PATCH 1/4] [feature]: Store Switcher Groups (#2956) * Remove icon from store switcher Signed-off-by: sirugh * Adds multi-group functionality to store switcher Signed-off-by: sirugh * Adds max height and overflow to switchers. Split currency and store switcher css because they differ now with store grouping. No grouping for currency. Signed-off-by: sirugh * Set max width and text wrap properties for long group or view names Signed-off-by: sirugh * Truncate store switcher button beyond 15rem on mobile Signed-off-by: sirugh * Add tests for new functionality Signed-off-by: sirugh * f Signed-off-by: sirugh * alphabetical order Signed-off-by: sirugh * alpha * more alpha Signed-off-by: sirugh --- .../useStoreSwitcher.spec.js.snap | 109 ++++++++ .../Header/__tests__/useStoreSwitcher.spec.js | 28 ++ .../lib/talons/Header/storeSwitcher.gql.js | 4 + .../lib/talons/Header/useStoreSwitcher.js | 52 +++- .../__snapshots__/storeSwitcher.spec.js.snap | 250 ++++++++++++------ .../Header/__tests__/storeSwitcher.spec.js | 39 ++- .../components/Header/currencySwitcher.css | 94 +++++-- .../lib/components/Header/storeSwitcher.css | 35 ++- .../lib/components/Header/storeSwitcher.js | 71 +++-- .../lib/components/Header/switcherItem.css | 4 +- 10 files changed, 549 insertions(+), 137 deletions(-) diff --git a/packages/peregrine/lib/talons/Header/__tests__/__snapshots__/useStoreSwitcher.spec.js.snap b/packages/peregrine/lib/talons/Header/__tests__/__snapshots__/useStoreSwitcher.spec.js.snap index 345d89a96a..307fb9cd0c 100644 --- a/packages/peregrine/lib/talons/Header/__tests__/__snapshots__/useStoreSwitcher.spec.js.snap +++ b/packages/peregrine/lib/talons/Header/__tests__/__snapshots__/useStoreSwitcher.spec.js.snap @@ -5,62 +5,171 @@ Object { "availableStores": Map { "store1" => Object { "category_url_suffix": null, + "code": "store1", "currency": "USD", "isCurrent": false, "locale": "locale1", "product_url_suffix": null, "secure_base_media_url": "https://example.com/media/", + "sortOrder": 0, + "storeGroupCode": "group1", + "storeGroupName": "Group 1", "storeName": "Store 1", }, "store2" => Object { "category_url_suffix": ".html", + "code": "store2", "currency": "EUR", "isCurrent": true, "locale": "locale2", "product_url_suffix": ".html", "secure_base_media_url": "https://cdn.origin:9000/media/custom/", + "sortOrder": 1, + "storeGroupCode": "group1", + "storeGroupName": "Group 1", "storeName": "Store 2", }, "store3" => Object { "category_url_suffix": null, + "code": "store3", "currency": "EUR", "isCurrent": false, "locale": "locale3", "product_url_suffix": ".htm", "secure_base_media_url": "https://example.com/media/", + "sortOrder": 2, + "storeGroupCode": "group1", + "storeGroupName": "Group 1", "storeName": "Store 3", }, "store4" => Object { "category_url_suffix": ".htm", + "code": "store4", "currency": "EUR", "isCurrent": false, "locale": "locale4", "product_url_suffix": null, "secure_base_media_url": "https://example.com/media/", + "sortOrder": 0, + "storeGroupCode": "group2", + "storeGroupName": "Group 2", "storeName": "Store 4", }, "store5" => Object { "category_url_suffix": "-abc1", + "code": "store5", "currency": "EUR", "isCurrent": false, "locale": "locale5", "product_url_suffix": ".htm.htm", "secure_base_media_url": "https://example.com/media/", + "sortOrder": 1, + "storeGroupCode": "group2", + "storeGroupName": "Group 2", "storeName": "Store 5", }, "store6" => Object { "category_url_suffix": ".some.some", + "code": "store6", "currency": "EUR", "isCurrent": false, "locale": "locale6", "product_url_suffix": "-123abc", "secure_base_media_url": "https://example.com/media/", + "sortOrder": 2, + "storeGroupCode": "group2", + "storeGroupName": "Group 2", "storeName": "Store 6", }, }, + "currentGroupName": "Group 1", "currentStoreName": "Store 2", "handleSwitchStore": [Function], "handleTriggerClick": [Function], + "storeGroups": Map { + "group1" => Array [ + Object { + "category_url_suffix": null, + "code": "store1", + "currency": "USD", + "isCurrent": false, + "locale": "locale1", + "product_url_suffix": null, + "secure_base_media_url": "https://example.com/media/", + "sortOrder": 0, + "storeGroupCode": "group1", + "storeGroupName": "Group 1", + "storeName": "Store 1", + }, + Object { + "category_url_suffix": ".html", + "code": "store2", + "currency": "EUR", + "isCurrent": true, + "locale": "locale2", + "product_url_suffix": ".html", + "secure_base_media_url": "https://cdn.origin:9000/media/custom/", + "sortOrder": 1, + "storeGroupCode": "group1", + "storeGroupName": "Group 1", + "storeName": "Store 2", + }, + Object { + "category_url_suffix": null, + "code": "store3", + "currency": "EUR", + "isCurrent": false, + "locale": "locale3", + "product_url_suffix": ".htm", + "secure_base_media_url": "https://example.com/media/", + "sortOrder": 2, + "storeGroupCode": "group1", + "storeGroupName": "Group 1", + "storeName": "Store 3", + }, + ], + "group2" => Array [ + Object { + "category_url_suffix": ".htm", + "code": "store4", + "currency": "EUR", + "isCurrent": false, + "locale": "locale4", + "product_url_suffix": null, + "secure_base_media_url": "https://example.com/media/", + "sortOrder": 0, + "storeGroupCode": "group2", + "storeGroupName": "Group 2", + "storeName": "Store 4", + }, + Object { + "category_url_suffix": "-abc1", + "code": "store5", + "currency": "EUR", + "isCurrent": false, + "locale": "locale5", + "product_url_suffix": ".htm.htm", + "secure_base_media_url": "https://example.com/media/", + "sortOrder": 1, + "storeGroupCode": "group2", + "storeGroupName": "Group 2", + "storeName": "Store 5", + }, + Object { + "category_url_suffix": ".some.some", + "code": "store6", + "currency": "EUR", + "isCurrent": false, + "locale": "locale6", + "product_url_suffix": "-123abc", + "secure_base_media_url": "https://example.com/media/", + "sortOrder": 2, + "storeGroupCode": "group2", + "storeGroupName": "Group 2", + "storeName": "Store 6", + }, + ], + }, "storeMenuIsOpen": false, "storeMenuRef": "elementRef", "storeMenuTriggerRef": [MockFunction], diff --git a/packages/peregrine/lib/talons/Header/__tests__/useStoreSwitcher.spec.js b/packages/peregrine/lib/talons/Header/__tests__/useStoreSwitcher.spec.js index 0099fbcb39..a706c70bab 100644 --- a/packages/peregrine/lib/talons/Header/__tests__/useStoreSwitcher.spec.js +++ b/packages/peregrine/lib/talons/Header/__tests__/useStoreSwitcher.spec.js @@ -70,6 +70,7 @@ const getTalonProps = props => { const storeConfigResponse = { code: 'store2', + store_group_name: 'Group 1', store_name: 'Store 2' }; @@ -87,6 +88,9 @@ const availableStoresResponse = [ { code: 'store1', locale: 'locale1', + store_group_code: 'group1', + store_group_name: 'Group 1', + store_sort_order: 0, store_name: 'Store 1', default_display_currency_code: 'USD', category_url_suffix: null, @@ -96,6 +100,9 @@ const availableStoresResponse = [ { code: 'store2', locale: 'locale2', + store_group_code: 'group1', + store_group_name: 'Group 1', + store_sort_order: 1, store_name: 'Store 2', default_display_currency_code: 'EUR', category_url_suffix: '.html', @@ -105,6 +112,9 @@ const availableStoresResponse = [ { code: 'store3', locale: 'locale3', + store_group_code: 'group1', + store_group_name: 'Group 1', + store_sort_order: 2, store_name: 'Store 3', default_display_currency_code: 'EUR', category_url_suffix: null, @@ -114,6 +124,9 @@ const availableStoresResponse = [ { code: 'store4', locale: 'locale4', + store_group_code: 'group2', + store_group_name: 'Group 2', + store_sort_order: 0, store_name: 'Store 4', default_display_currency_code: 'EUR', category_url_suffix: '.htm', @@ -123,6 +136,9 @@ const availableStoresResponse = [ { code: 'store5', locale: 'locale5', + store_group_code: 'group2', + store_group_name: 'Group 2', + store_sort_order: 1, store_name: 'Store 5', default_display_currency_code: 'EUR', category_url_suffix: '-abc1', @@ -132,6 +148,9 @@ const availableStoresResponse = [ { code: 'store6', locale: 'locale6', + store_group_code: 'group2', + store_group_name: 'Group 2', + store_sort_order: 2, store_name: 'Store 6', default_display_currency_code: 'EUR', category_url_suffix: '.some.some', @@ -159,6 +178,15 @@ test('should return correct shape', () => { const { talonProps } = getTalonProps(defaultProps); expect(talonProps).toMatchSnapshot(); + + expect(talonProps.currentGroupName).toEqual( + storeConfigResponse.store_group_name + ); + + // storeGroups should be a map of the "groups", sorted in sort order. + expect(talonProps.storeGroups.size).toEqual(2); + expect(talonProps.storeGroups.get('group1').length).toEqual(3); + expect(talonProps.storeGroups.get('group2').length).toEqual(3); }); describe('event handlers', () => { diff --git a/packages/peregrine/lib/talons/Header/storeSwitcher.gql.js b/packages/peregrine/lib/talons/Header/storeSwitcher.gql.js index b5f51e38ae..faf0b080b0 100644 --- a/packages/peregrine/lib/talons/Header/storeSwitcher.gql.js +++ b/packages/peregrine/lib/talons/Header/storeSwitcher.gql.js @@ -6,6 +6,7 @@ export const GET_STORE_CONFIG_DATA = gql` id code store_name + store_group_name } } `; @@ -29,7 +30,10 @@ export const GET_AVAILABLE_STORES_DATA = gql` locale product_url_suffix secure_base_media_url + store_group_code + store_group_name store_name + store_sort_order } } `; diff --git a/packages/peregrine/lib/talons/Header/useStoreSwitcher.js b/packages/peregrine/lib/talons/Header/useStoreSwitcher.js index 317df60604..c49e6a3f46 100644 --- a/packages/peregrine/lib/talons/Header/useStoreSwitcher.js +++ b/packages/peregrine/lib/talons/Header/useStoreSwitcher.js @@ -19,17 +19,24 @@ const mapAvailableOptions = (config, stores) => { locale, product_url_suffix, secure_base_media_url, - store_name: storeName + store_group_code: storeGroupCode, + store_group_name: storeGroupName, + store_name: storeName, + store_sort_order: sortOrder } = store; const isCurrent = code === configCode; const option = { category_url_suffix, + code, currency, isCurrent, locale, product_url_suffix, secure_base_media_url, + sortOrder, + storeGroupCode, + storeGroupName, storeName }; @@ -87,6 +94,12 @@ export const useStoreSwitcher = (props = {}) => { } }, [storeConfigData]); + const currentGroupName = useMemo(() => { + if (storeConfigData) { + return storeConfigData.storeConfig.store_group_name; + } + }, [storeConfigData]); + const currentStoreCode = useMemo(() => { if (storeConfigData) { return storeConfigData.storeConfig.code; @@ -99,17 +112,38 @@ export const useStoreSwitcher = (props = {}) => { } }, [urlResolverData]); + // availableStores => mapped options or empty map if undefined. const availableStores = useMemo(() => { return ( - storeConfigData && - availableStoresData && - mapAvailableOptions( - storeConfigData.storeConfig, - availableStoresData.availableStores - ) + (storeConfigData && + availableStoresData && + mapAvailableOptions( + storeConfigData.storeConfig, + availableStoresData.availableStores + )) || + new Map() ); }, [storeConfigData, availableStoresData]); + // Create a map of sorted store views for each group. + const storeGroups = useMemo(() => { + const groups = new Map(); + + availableStores.forEach(store => { + const groupCode = store.storeGroupCode; + if (!groups.has(groupCode)) { + const groupViews = [store]; + groups.set(groupCode, groupViews); + } else { + const groupViews = groups.get(groupCode); + // Insert store at configured position + groupViews.splice(store.sortOrder, 0, store); + } + }); + + return groups; + }, [availableStores]); + // Get pathname with suffix based on page type const getPathname = useCallback( storeCode => { @@ -209,8 +243,10 @@ export const useStoreSwitcher = (props = {}) => { }, [setStoreMenuIsOpen]); return { - currentStoreName, availableStores, + currentGroupName, + currentStoreName, + storeGroups, storeMenuRef, storeMenuTriggerRef, storeMenuIsOpen, diff --git a/packages/venia-ui/lib/components/Header/__tests__/__snapshots__/storeSwitcher.spec.js.snap b/packages/venia-ui/lib/components/Header/__tests__/__snapshots__/storeSwitcher.spec.js.snap index 351949471c..eded515090 100644 --- a/packages/venia-ui/lib/components/Header/__tests__/__snapshots__/storeSwitcher.spec.js.snap +++ b/packages/venia-ui/lib/components/Header/__tests__/__snapshots__/storeSwitcher.spec.js.snap @@ -2,110 +2,212 @@ exports[`does not render StoreSwitcher when there is only one available store 1`] = `null`; -exports[`renders the correct tree 1`] = ` +exports[`does not render group name when there is only one group 1`] = `
+ +
  • - - - - - - Store 2 - - + +
    • + +
    + + +`; + +exports[`renders the correct tree 1`] = ` +
    +
    -
      -
    • +
        - + +
      • - - Store 1 + + undefined - Store 2 + + + + + + - - -
        • -
      • +
        • +
      +
        - + +
      • + -
        • -
      + +
      • +
    +
    `; diff --git a/packages/venia-ui/lib/components/Header/__tests__/storeSwitcher.spec.js b/packages/venia-ui/lib/components/Header/__tests__/storeSwitcher.spec.js index 874cec4398..ca289ab2c2 100644 --- a/packages/venia-ui/lib/components/Header/__tests__/storeSwitcher.spec.js +++ b/packages/venia-ui/lib/components/Header/__tests__/storeSwitcher.spec.js @@ -14,9 +14,28 @@ const talonProps = { handleSwitchStore: jest.fn(), availableStores: new Map([ ['Store 1', { storeName: 'Store 1', isCurrent: false }], - ['Store 2', { storeName: 'Store 2', isCurrent: true }] + ['Store 2', { storeName: 'Store 2', isCurrent: true }], + ['Store 3', { storeName: 'Store 3', isCurrent: false }], + [('Store 4', { storeName: 'Store 4', isCurrent: false })] ]), + currentGroupName: 'Group 1', currentStoreName: 'Store 2', + storeGroups: new Map([ + [ + 'Group 1', + [ + { storeName: 'Store 1', isCurrent: false }, + { storeName: 'Store 2', isCurrent: true } + ] + ], + [ + 'Group 2', + [ + { storeName: 'Store 3', isCurrent: false }, + { storeName: 'Store 4', isCurrent: false } + ] + ] + ]), storeMenuRef: {}, storeMenuTriggerRef: {}, storeMenuIsOpen: false, @@ -46,3 +65,21 @@ test('does not render StoreSwitcher when there is only one available store', () expect(tree.toJSON()).toMatchSnapshot(); }); + +test('does not render group name when there is only one group', () => { + useStoreSwitcher.mockReturnValueOnce({ + ...talonProps, + storeGroups: new Map([ + [ + 'Group 1', + [ + { storeName: 'Store 1', isCurrent: false }, + { storeName: 'Store 2', isCurrent: true } + ] + ] + ]) + }); + const tree = createTestInstance(); + + expect(tree.toJSON()).toMatchSnapshot(); +}); diff --git a/packages/venia-ui/lib/components/Header/currencySwitcher.css b/packages/venia-ui/lib/components/Header/currencySwitcher.css index adb2595e0e..a20aa825e8 100644 --- a/packages/venia-ui/lib/components/Header/currencySwitcher.css +++ b/packages/venia-ui/lib/components/Header/currencySwitcher.css @@ -1,41 +1,101 @@ .root { - composes: root from './storeSwitcher.css'; + align-items: center; + display: grid; + justify-items: end; + margin: 0 auto; + max-width: var(--venia-global-maxWidth); + padding: 0.5rem 1rem; + position: relative; } .trigger { - composes: trigger from './storeSwitcher.css'; + align-items: center; + column-gap: 0.5rem; + display: grid; + grid-auto-flow: column; + grid-template-columns: auto 1fr; } .menu { - composes: menu from './storeSwitcher.css'; + background-color: rgb(var(--venia-global-color-gray-50)); + border: 1px solid rgb(var(--venia-global-color-gray-dark)); + border-radius: 0.25rem; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + max-height: 24rem; + opacity: 0; + overflow: auto; + position: absolute; + right: 1rem; + top: 2.5rem; + transform: translate3d(0, -8px, 0); + transition-duration: 192ms; + transition-timing-function: var(--venia-global-anim-out); + transition-property: opacity, transform, visibility; + visibility: hidden; + z-index: 2; } .menu_open { - composes: menu_open from './storeSwitcher.css'; + composes: menu; + opacity: 1; + padding: 0; + transform: translate3d(0, 4px, 0); + transition-duration: 224ms; + transition-timing-function: var(--venia-global-anim-in); + visibility: visible; } -.menuItem { - composes: menuItem from './storeSwitcher.css'; +.menuItem:hover { + background-color: rgb(var(--venia-global-color-gray)); +} + +.menuItem:not(:last-child) { + border-bottom: 1px solid rgb(var(--venia-global-color-gray-dark)); } .symbol { margin-right: 0.5rem; } +.root:last-child:not(:only-child) { + padding-left: 0; + grid-auto-flow: column; +} + +.root:last-child:not(:only-child):before { + border-left: 1px solid rgb(var(--venia-global-color-gray-darker)); + border-left: 1px solid rgb(var(--venia-global-color-border)); + content: ''; + height: 1em; + width: 1rem; +} + /* - * Desktop-specific styles. + * Mobile-specific styles. */ -@media (min-width: 641px) { - .root:last-child:not(:only-child) { - padding-left: 0; - grid-auto-flow: column; +@media (max-width: 640px) { + .root { + justify-items: start; + } + + .menu { + bottom: 2.5rem; + left: 1rem; + right: auto; + top: auto; + transform: translate3d(0, 8px, 0); + } + + .root:only-child { + grid-column: 2; + } + + .root:last-child .menu { + left: auto; + right: 1rem; } - .root:last-child:not(:only-child):before { - content: ''; - border-left: 1px solid rgb(var(--venia-global-color-gray-darker)); - border-left: 1px solid rgb(var(--venia-global-color-border)); - width: 1rem; - height: 1em; + .menu_open { + transform: translate3d(0, -4px, 0); } } diff --git a/packages/venia-ui/lib/components/Header/storeSwitcher.css b/packages/venia-ui/lib/components/Header/storeSwitcher.css index d53dfd2fdd..2aa7eaf725 100644 --- a/packages/venia-ui/lib/components/Header/storeSwitcher.css +++ b/packages/venia-ui/lib/components/Header/storeSwitcher.css @@ -9,11 +9,9 @@ } .trigger { - align-items: center; - display: grid; - column-gap: 0.5rem; - grid-auto-flow: column; - grid-template-columns: auto 1fr; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .menu { @@ -21,7 +19,10 @@ border: 1px solid rgb(var(--venia-global-color-gray-dark)); border-radius: 0.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + max-width: 90vw; opacity: 0; + padding-top: 0.5rem; + padding-bottom: 0.5rem; position: absolute; right: 1rem; top: 2.5rem; @@ -30,6 +31,7 @@ transition-timing-function: var(--venia-global-anim-out); transition-property: opacity, transform, visibility; visibility: hidden; + width: max-content; z-index: 2; } @@ -44,17 +46,26 @@ } .menuItem { - border-bottom: 1px solid rgb(var(--venia-global-color-gray-dark)); -} - -.menuItem:last-child { - border-bottom: none; } .menuItem:hover { background-color: rgb(var(--venia-global-color-gray)); } +.groups { + max-height: 24rem; + overflow: auto; +} + +.groupList { + padding-bottom: 0.5rem; + padding-top: 0.5rem; +} + +.groupList:not(:last-child) { + border-bottom: 1px solid rgb(var(--venia-global-color-gray-dark)); +} + /* * Mobile-specific styles. */ @@ -64,6 +75,10 @@ justify-items: start; } + .trigger { + max-width: 15rem; + } + .menu { bottom: 2.5rem; left: 1rem; diff --git a/packages/venia-ui/lib/components/Header/storeSwitcher.js b/packages/venia-ui/lib/components/Header/storeSwitcher.js index 1b87473510..a42ed2a004 100644 --- a/packages/venia-ui/lib/components/Header/storeSwitcher.js +++ b/packages/venia-ui/lib/components/Header/storeSwitcher.js @@ -1,19 +1,19 @@ import React from 'react'; import { shape, string } from 'prop-types'; -import { MapPin } from 'react-feather'; import { useStoreSwitcher } from '@magento/peregrine/lib/talons/Header/useStoreSwitcher'; import { mergeClasses } from '../../classify'; import defaultClasses from './storeSwitcher.css'; import SwitcherItem from './switcherItem'; -import Icon from '../Icon'; const StoreSwitcher = props => { const { - handleSwitchStore, - currentStoreName, availableStores, + currentGroupName, + currentStoreName, + handleSwitchStore, + storeGroups, storeMenuRef, storeMenuTriggerRef, storeMenuIsOpen, @@ -25,36 +25,57 @@ const StoreSwitcher = props => { if (!availableStores || availableStores.size <= 1) return null; - const stores = []; + const groups = []; + const hasOnlyOneGroup = storeGroups.size === 1; - availableStores.forEach((store, code) => { - stores.push( -
  • - - {store.storeName} - -
    • + storeGroups.forEach((group, key) => { + const stores = []; + group.forEach(({ storeGroupName, storeName, isCurrent, code }) => { + let label; + if (hasOnlyOneGroup) { + label = `${storeName}`; + } else { + label = `${storeGroupName} - ${storeName}`; + } + stores.push( +
  • + + {label} + +
    • + ); + }); + + groups.push( +
      + {stores} +
    ); }); + let triggerLabel; + if (hasOnlyOneGroup) { + triggerLabel = `${currentStoreName}`; + } else { + triggerLabel = `${currentGroupName} - ${currentStoreName}`; + } + return (
    -
      {stores}
    +
    {groups}
    ); @@ -64,10 +85,12 @@ export default StoreSwitcher; StoreSwitcher.propTypes = { classes: shape({ - root: string, - trigger: string, + groupList: string, + groups: string, menu: string, menu_open: string, - menuItem: string + menuItem: string, + root: string, + trigger: string }) }; diff --git a/packages/venia-ui/lib/components/Header/switcherItem.css b/packages/venia-ui/lib/components/Header/switcherItem.css index a0dbaab1f8..67318540c9 100644 --- a/packages/venia-ui/lib/components/Header/switcherItem.css +++ b/packages/venia-ui/lib/components/Header/switcherItem.css @@ -10,12 +10,10 @@ gap: 0.75rem; grid-auto-flow: column; grid-template-columns: 1fr; - height: 2.5rem; - padding: 0 0.75rem; + padding: 0.5rem 1rem; width: 100%; } .text { text-align: left; - white-space: nowrap; } From 330d6ff131b7acc70dde482973684895793fdebc Mon Sep 17 00:00:00 2001 From: Andy Terranova <13182778+supernova-at@users.noreply.github.com> Date: Wed, 27 Jan 2021 17:28:49 -0600 Subject: [PATCH 2/4] Correct dialog form values after submission (#2960) * Update form values when initialValues changes * Targeted change to Account Info EditModal * Revert changes to Dialog component itself * Change default value for shouldUnmountOnHIde to true * Updates unit test snapshots * Sets shouldUnmountOnHide to false where appropriate. Updates snapshots. * Actually fix the bug on the account info page Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com> --- .../lib/components/AccountInformationPage/editModal.js | 1 + .../__tests__/__snapshots__/addEditDialog.spec.js.snap | 4 ---- .../lib/components/AddressBookPage/addEditDialog.js | 1 - .../__tests__/__snapshots__/productForm.spec.js.snap | 6 +++--- .../ProductListing/EditModal/__tests__/productForm.spec.js | 4 +++- .../CartPage/ProductListing/EditModal/productForm.js | 1 + .../__tests__/__snapshots__/editModal.spec.js.snap | 1 - .../components/CheckoutPage/PaymentInformation/editModal.js | 1 - .../components/CheckoutPage/ShippingMethod/updateModal.js | 1 + .../venia-ui/lib/components/Dialog/__stories__/dialog.js | 2 +- packages/venia-ui/lib/components/Dialog/dialog.js | 2 +- .../__tests__/__snapshots__/createWishlist.ee.spec.js.snap | 1 + .../wishlistConfirmRemoveProductDialog.spec.js.snap | 4 ---- .../__snapshots__/wishlistMoreActionsDialog.spec.js.snap | 2 ++ .../lib/components/WishlistPage/createWishlist.ee.js | 1 + .../WishlistPage/wishlistConfirmRemoveProductDialog.js | 1 - .../components/WishlistPage/wishlistMoreActionsDialog.js | 1 + 17 files changed, 16 insertions(+), 18 deletions(-) diff --git a/packages/venia-ui/lib/components/AccountInformationPage/editModal.js b/packages/venia-ui/lib/components/AccountInformationPage/editModal.js index 4c884bc313..b2a18cc78a 100644 --- a/packages/venia-ui/lib/components/AccountInformationPage/editModal.js +++ b/packages/venia-ui/lib/components/AccountInformationPage/editModal.js @@ -36,6 +36,7 @@ const EditModal = props => { onConfirm={onSubmit} shouldDisableAllButtons={isDisabled} shouldDisableConfirmButton={isDisabled} + shouldUnmountOnHide={true} title={formatMessage({ id: 'accountInformationPage.editAccount', defaultMessage: 'Edit Account Information' diff --git a/packages/venia-ui/lib/components/AddressBookPage/__tests__/__snapshots__/addEditDialog.spec.js.snap b/packages/venia-ui/lib/components/AddressBookPage/__tests__/__snapshots__/addEditDialog.spec.js.snap index 6eb303a06e..723c92733e 100644 --- a/packages/venia-ui/lib/components/AddressBookPage/__tests__/__snapshots__/addEditDialog.spec.js.snap +++ b/packages/venia-ui/lib/components/AddressBookPage/__tests__/__snapshots__/addEditDialog.spec.js.snap @@ -8,7 +8,6 @@ exports[`Edit Mode renders correctly 1`] = ` onCancel={[MockFunction onCancel]} onConfirm={[MockFunction onConfirm]} shouldDisableAllButtons={false} - shouldUnmountOnHide={true} title="Edit Address" > { onCancel={onCancel} onConfirm={onConfirm} shouldDisableAllButtons={isBusy} - shouldUnmountOnHide={true} title={title} >