diff --git a/.changeset/chilled-deers-shout.md b/.changeset/chilled-deers-shout.md new file mode 100644 index 0000000000..ccff34768e --- /dev/null +++ b/.changeset/chilled-deers-shout.md @@ -0,0 +1,6 @@ +--- +'@commercetools-frontend/application-components': patch +'@commercetools-frontend/application-shell': patch +--- + +Update Page Layout component and Custom Views styles so the former renders correctly in both Custom Applications and Custom Views. diff --git a/packages/application-components/src/components/internals/page.styles.ts b/packages/application-components/src/components/internals/page.styles.ts index 3f71f46744..83bfbc4dbe 100644 --- a/packages/application-components/src/components/internals/page.styles.ts +++ b/packages/application-components/src/components/internals/page.styles.ts @@ -3,7 +3,7 @@ import { designTokens as appKitDesignTokens } from '../../theming'; export const ContentWrapper = styled.div` flex: 1; - flex-basis: 0%; + flex-basis: 0; margin: ${appKitDesignTokens.marginForPageContent}; overflow: auto; `; diff --git a/packages/application-components/src/components/main-pages/internals/main-page.styles.ts b/packages/application-components/src/components/main-pages/internals/main-page.styles.ts index cc88b868c3..51ab0e0928 100644 --- a/packages/application-components/src/components/main-pages/internals/main-page.styles.ts +++ b/packages/application-components/src/components/main-pages/internals/main-page.styles.ts @@ -13,7 +13,7 @@ export const Divider = styled.hr` export const MainPageContent = styled.div` flex: 1; - flex-basis: 0%; + flex-basis: 0; overflow: auto; // NOTE: do not change to "padding" as this breaks sticky DataTable styles margin: ${appKitDesignTokens.marginForPageContent}; diff --git a/packages/application-shell/src/components/custom-view-shell/custom-view-shell.tsx b/packages/application-shell/src/components/custom-view-shell/custom-view-shell.tsx index 32cd48c364..795f5e5d3b 100644 --- a/packages/application-shell/src/components/custom-view-shell/custom-view-shell.tsx +++ b/packages/application-shell/src/components/custom-view-shell/custom-view-shell.tsx @@ -27,6 +27,7 @@ import { } from '@commercetools-frontend/i18n'; import { NotificationsList } from '@commercetools-frontend/react-notifications'; import ApplicationLoader from '../application-loader/application-loader'; +import GlobalStyles from '../application-shell/global-styles'; import ApplicationShellProvider from '../application-shell-provider'; import { getBrowserLocale } from '../application-shell-provider/utils'; import ConfigureIntlProvider from '../configure-intl-provider'; @@ -101,9 +102,9 @@ function StrictModeEnablement(props: TStrictModeEnablementProps) { } } -/* +/* During e2e tests, the Custom View template is built in production mode but still runs on localhost. - Checking for local production mode is necessary for applying the development host URL, + Checking for local production mode is necessary for applying the development host URL, creating an environment for testing interaction with the Custom View template. */ const isLocalProdMode = @@ -184,58 +185,61 @@ function CustomViewShell(props: TCustomViewShellProps) { : hostContext.hostUrl; return ( - - {({ isAuthenticated }) => { - if (isAuthenticated) { - return ( - - + + + {({ isAuthenticated }) => { + if (isAuthenticated) { + return ( + - - - - - {props.children} - - - - ); - } + + - return ( - - {({ locale, messages }) => ( - - - - )} - - ); - }} - + + {props.children} + + + + ); + } + + return ( + + {({ locale, messages }) => ( + + + + )} + + ); + }} + + ); }