fix(cx-footer): make footer 'sticky' to bottom viewport on short pages (

#1513) * fix footer height * fix(cx-footer): apply to footer styleguide page Co-authored-by: wodenx <wodenx@gmail.com> Co-authored-by: Konstantin Mishur <kmishur@its.jnj.com>
johnsonandjohnson · Apr 12, 2022 · dfa818a · dfa818a
1 parent 71f0ee5
commit dfa818a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/packages/__cxstarter__/src/styleguide/Page/StyleGuideTemplate/Footer.tsx b/packages/__cxstarter__/src/styleguide/Page/StyleGuideTemplate/Footer.tsx
@@ -3,7 +3,17 @@ import { asStyleGuideTemplateToken, cxStyleGuideTemplate } from '@bodiless/cx-te
 import { flowHoc, on, replaceWith } from '@bodiless/fclasses';
 import { FooterClean, cxFooter } from '@bodiless/cx-layout';
 
-export const Footer = asStyleGuideTemplateToken(cxStyleGuideTemplate.NoLayout, {
+// Apply similar method as done in the cxLayout token.
+const StickFooterLayout = asStyleGuideTemplateToken({
+  ...cxStyleGuideTemplate.NoLayout,
+  Theme: {
+    ...cxStyleGuideTemplate.NoLayout.Theme,
+    Container: 'flex flex-col h-screen',
+    DescriptionWrapper: 'flex-grow',
+  },
+});
+
+export const Footer = asStyleGuideTemplateToken(StickFooterLayout, {
   Meta: flowHoc.meta.term('Token')('Footer'),
   Content: {
     Title: replaceWith(() => <>Footer</>),

diff --git a/packages/cx-layout/src/components/Layout/tokens/cxLayout.ts b/packages/cx-layout/src/components/Layout/tokens/cxLayout.ts
@@ -40,6 +40,10 @@ const Base = asLayoutToken({
       'sr-only focus:not-sr-only',
     ),
   },
+  Theme: {
+    OuterContainer: 'flex flex-col h-screen',
+    ContainerWrapper: 'flex-grow',
+  },
 });
 
 const Default = asLayoutToken({