From 5c581c2670eee9b8718cf55af798dc25fc8e4955 Mon Sep 17 00:00:00 2001 From: Adam Rasheed Date: Mon, 24 Nov 2025 14:59:07 -0600 Subject: [PATCH 1/5] [LG-5760] chore: FormFooter Sticky Styling --- .../form-footer/src/FormFooter.stories.tsx | 28 +++++- packages/form-footer/src/FormFooter.styles.ts | 34 ++++--- packages/form-footer/src/FormFooter.tsx | 96 ++++++++++--------- tools/install/src/ALL_PACKAGES.ts | 2 + 4 files changed, 100 insertions(+), 60 deletions(-) diff --git a/packages/form-footer/src/FormFooter.stories.tsx b/packages/form-footer/src/FormFooter.stories.tsx index 1e76a0c3e5..855dc8d9bd 100644 --- a/packages/form-footer/src/FormFooter.stories.tsx +++ b/packages/form-footer/src/FormFooter.stories.tsx @@ -11,7 +11,7 @@ import { css } from '@leafygreen-ui/emotion'; import { Icon } from '@leafygreen-ui/icon'; import { MenuItem } from '@leafygreen-ui/menu'; -import FormFooter, { FormFooterProps } from '.'; +import { FormFooter, FormFooterProps } from '.'; const wrapperStyle = css` min-width: 40vw; @@ -80,6 +80,27 @@ const Template: StoryType = ({ /> ); +const StickyTemplate: StoryType = ({ + primaryButtonProps, + ...args +}: FormFooterStoryProps) => ( +
+ +
+); export const LiveExample: StoryObj = { render: Template, parameters: { @@ -120,3 +141,8 @@ export const DarkMode: StoryObj = { darkMode: true, }, }; + +export const StickyFooter: StoryObj = { + render: StickyTemplate, + args: {}, +}; diff --git a/packages/form-footer/src/FormFooter.styles.ts b/packages/form-footer/src/FormFooter.styles.ts index 447d86a32e..e022d7e43a 100644 --- a/packages/form-footer/src/FormFooter.styles.ts +++ b/packages/form-footer/src/FormFooter.styles.ts @@ -4,15 +4,7 @@ import { palette } from '@leafygreen-ui/palette'; import { addOverflowShadow, Side } from '@leafygreen-ui/tokens'; const footerBaseStyle = css` - min-height: 92px; width: 100%; - padding: 26px 24px; - display: flex; - align-items: center; - - button { - white-space: nowrap; - } `; const footerThemeStyle: Record = { @@ -25,7 +17,20 @@ const footerThemeStyle: Record = { `, }; -export const contentStyle = css` +const innerContainerBaseStyle = css` + min-height: 92px; + width: 100%; + padding: 26px 24px; + display: flex; + align-items: center; + background: inherit; + + button { + white-space: nowrap; + } +`; + +const contentStyle = css` display: flex; align-items: center; gap: 8px; @@ -51,10 +56,13 @@ export const getFormFooterStyles = ({ }: { theme: Theme; className?: string; -}) => +}) => cx(footerBaseStyle, footerThemeStyle[theme], className); + +export const getInnerContainerStyles = ({ theme }: { theme: Theme }) => cx( - footerBaseStyle, - footerThemeStyle[theme], + innerContainerBaseStyle, addOverflowShadow({ side: Side.Top, theme, isInside: false }), - className, ); + +export const getContentStyles = (contentClassName?: string) => + cx(contentStyle, contentClassName); diff --git a/packages/form-footer/src/FormFooter.tsx b/packages/form-footer/src/FormFooter.tsx index 390583b014..04cb21eb7a 100644 --- a/packages/form-footer/src/FormFooter.tsx +++ b/packages/form-footer/src/FormFooter.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { Banner, Variant as BannerVariant } from '@leafygreen-ui/banner'; import { Button, Variant as ButtonVariant } from '@leafygreen-ui/button'; -import { cx } from '@leafygreen-ui/emotion'; import ArrowLeftIcon from '@leafygreen-ui/icon/dist/ArrowLeft'; import LeafyGreenProvider, { useDarkMode, @@ -11,9 +10,10 @@ import { SplitButton } from '@leafygreen-ui/split-button'; import { bannerStyle, - contentStyle, flexEndContent, + getContentStyles, getFormFooterStyles, + getInnerContainerStyles, } from './FormFooter.styles'; import { FormFooterProps } from './FormFooter.types'; import { getLgIds } from './utils'; @@ -50,59 +50,63 @@ export default function FormFooter({ className={getFormFooterStyles({ theme, className })} {...rest} > -
- {showBackButton && - (isStandardBackButton ? ( - - ) : ( - - ))} -
- {errorMessage && ( - - {errorMessage} - - )} - {showCancelButton && - (isStandardCancelButton ? ( +
+
+ {showBackButton && + (isStandardBackButton ? ( ) : ( ))} - {isStandardPrimaryButton ? ( - + ) : ( + + ))} + {isStandardPrimaryButton ? ( +
diff --git a/tools/install/src/ALL_PACKAGES.ts b/tools/install/src/ALL_PACKAGES.ts index 1306b5f615..d99bc1bba1 100644 --- a/tools/install/src/ALL_PACKAGES.ts +++ b/tools/install/src/ALL_PACKAGES.ts @@ -85,8 +85,10 @@ export const ALL_PACKAGES = [ '@lg-charts/drag-provider', '@lg-charts/legend', '@lg-charts/series-provider', + '@lg-chat/avatar', '@lg-chat/chat-layout', '@lg-chat/chat-window', + '@lg-chat/fixed-chat-window', '@lg-chat/input-bar', '@lg-chat/leafygreen-chat-provider', '@lg-chat/lg-markdown', From d30aa88bd5c998c2332a0ed1142db24ebb9fe269 Mon Sep 17 00:00:00 2001 From: Adam Rasheed Date: Mon, 24 Nov 2025 16:45:35 -0600 Subject: [PATCH 2/5] updated story --- .../form-footer/src/FormFooter.stories.tsx | 28 +++++++++++++------ 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/packages/form-footer/src/FormFooter.stories.tsx b/packages/form-footer/src/FormFooter.stories.tsx index 855dc8d9bd..d764331979 100644 --- a/packages/form-footer/src/FormFooter.stories.tsx +++ b/packages/form-footer/src/FormFooter.stories.tsx @@ -84,12 +84,17 @@ const StickyTemplate: StoryType = ({ primaryButtonProps, ...args }: FormFooterStoryProps) => ( -
+ <> +
+

Scroll down to see the sticky footer in action

+

This content creates scrollable space...

+

Keep scrolling...

+
= ({ z-index: 1; `} /> -
+ ); export const LiveExample: StoryObj = { render: Template, @@ -144,5 +149,12 @@ export const DarkMode: StoryObj = { export const StickyFooter: StoryObj = { render: StickyTemplate, - args: {}, + decorators: [], + parameters: { + layout: 'fullscreen', + }, + args: { + backButtonProps: { children: 'Back' }, + cancelButtonProps: { children: 'Cancel' }, + }, }; From 38b815b17a0af2f4c33355874244f04bf0c8d779 Mon Sep 17 00:00:00 2001 From: Adam Rasheed Date: Tue, 25 Nov 2025 12:49:18 -0600 Subject: [PATCH 3/5] updates pt1 --- packages/form-footer/src/FormFooter.styles.ts | 6 +++--- tools/install/src/ALL_PACKAGES.ts | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/form-footer/src/FormFooter.styles.ts b/packages/form-footer/src/FormFooter.styles.ts index e022d7e43a..bf20330049 100644 --- a/packages/form-footer/src/FormFooter.styles.ts +++ b/packages/form-footer/src/FormFooter.styles.ts @@ -1,7 +1,7 @@ import { css, cx } from '@leafygreen-ui/emotion'; import { Theme } from '@leafygreen-ui/lib'; import { palette } from '@leafygreen-ui/palette'; -import { addOverflowShadow, Side } from '@leafygreen-ui/tokens'; +import { addOverflowShadow, Side, spacing } from '@leafygreen-ui/tokens'; const footerBaseStyle = css` width: 100%; @@ -20,7 +20,7 @@ const footerThemeStyle: Record = { const innerContainerBaseStyle = css` min-height: 92px; width: 100%; - padding: 26px 24px; + padding: 26px ${spacing[600]}px; display: flex; align-items: center; background: inherit; @@ -33,7 +33,7 @@ const innerContainerBaseStyle = css` const contentStyle = css` display: flex; align-items: center; - gap: 8px; + gap: ${spacing[200]}px; width: 100%; `; diff --git a/tools/install/src/ALL_PACKAGES.ts b/tools/install/src/ALL_PACKAGES.ts index d99bc1bba1..4e2abb05cd 100644 --- a/tools/install/src/ALL_PACKAGES.ts +++ b/tools/install/src/ALL_PACKAGES.ts @@ -85,7 +85,6 @@ export const ALL_PACKAGES = [ '@lg-charts/drag-provider', '@lg-charts/legend', '@lg-charts/series-provider', - '@lg-chat/avatar', '@lg-chat/chat-layout', '@lg-chat/chat-window', '@lg-chat/fixed-chat-window', From fc8d7f9c5b56da6d497d1e407dd3bef1072c4da1 Mon Sep 17 00:00:00 2001 From: Adam Rasheed Date: Wed, 26 Nov 2025 13:42:49 -0600 Subject: [PATCH 4/5] updated story, style cleanup --- packages/form-footer/src/FormFooter.stories.tsx | 9 ++++----- packages/form-footer/src/FormFooter.styles.ts | 7 +++++-- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/form-footer/src/FormFooter.stories.tsx b/packages/form-footer/src/FormFooter.stories.tsx index d764331979..babfbb9165 100644 --- a/packages/form-footer/src/FormFooter.stories.tsx +++ b/packages/form-footer/src/FormFooter.stories.tsx @@ -84,16 +84,16 @@ const StickyTemplate: StoryType = ({ primaryButtonProps, ...args }: FormFooterStoryProps) => ( - <> +

Scroll down to see the sticky footer in action

This content creates scrollable space...

-

Keep scrolling...

= ({ className={css` position: sticky; bottom: 0; - z-index: 1; `} /> - +
); export const LiveExample: StoryObj = { render: Template, diff --git a/packages/form-footer/src/FormFooter.styles.ts b/packages/form-footer/src/FormFooter.styles.ts index bf20330049..e2e54189e8 100644 --- a/packages/form-footer/src/FormFooter.styles.ts +++ b/packages/form-footer/src/FormFooter.styles.ts @@ -3,6 +3,9 @@ import { Theme } from '@leafygreen-ui/lib'; import { palette } from '@leafygreen-ui/palette'; import { addOverflowShadow, Side, spacing } from '@leafygreen-ui/tokens'; +// Specified by Design team +const MIN_HEIGHT = 92; + const footerBaseStyle = css` width: 100%; `; @@ -18,9 +21,9 @@ const footerThemeStyle: Record = { }; const innerContainerBaseStyle = css` - min-height: 92px; + min-height: ${MIN_HEIGHT}px; width: 100%; - padding: 26px ${spacing[600]}px; + padding: ${spacing[600]}px; display: flex; align-items: center; background: inherit; From 42ddd29fdac60fde45477558ba7612aabe4de4e5 Mon Sep 17 00:00:00 2001 From: Adam Rasheed Date: Wed, 26 Nov 2025 17:00:12 -0600 Subject: [PATCH 5/5] cleanup, added changeset --- .changeset/red-years-bet.md | 5 +++++ packages/form-footer/src/FormFooter.styles.ts | 1 - tools/install/src/ALL_PACKAGES.ts | 1 - 3 files changed, 5 insertions(+), 2 deletions(-) create mode 100644 .changeset/red-years-bet.md diff --git a/.changeset/red-years-bet.md b/.changeset/red-years-bet.md new file mode 100644 index 0000000000..1cf3bbe1c1 --- /dev/null +++ b/.changeset/red-years-bet.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/form-footer': patch +--- + +Added internal container to preserve component styles when sticky positioning is applied externally diff --git a/packages/form-footer/src/FormFooter.styles.ts b/packages/form-footer/src/FormFooter.styles.ts index e2e54189e8..7ed1591402 100644 --- a/packages/form-footer/src/FormFooter.styles.ts +++ b/packages/form-footer/src/FormFooter.styles.ts @@ -3,7 +3,6 @@ import { Theme } from '@leafygreen-ui/lib'; import { palette } from '@leafygreen-ui/palette'; import { addOverflowShadow, Side, spacing } from '@leafygreen-ui/tokens'; -// Specified by Design team const MIN_HEIGHT = 92; const footerBaseStyle = css` diff --git a/tools/install/src/ALL_PACKAGES.ts b/tools/install/src/ALL_PACKAGES.ts index 4e2abb05cd..1306b5f615 100644 --- a/tools/install/src/ALL_PACKAGES.ts +++ b/tools/install/src/ALL_PACKAGES.ts @@ -87,7 +87,6 @@ export const ALL_PACKAGES = [ '@lg-charts/series-provider', '@lg-chat/chat-layout', '@lg-chat/chat-window', - '@lg-chat/fixed-chat-window', '@lg-chat/input-bar', '@lg-chat/leafygreen-chat-provider', '@lg-chat/lg-markdown',