From 6cce3ae03fa672aca227681ea06f2fe53814fc24 Mon Sep 17 00:00:00 2001 From: Francesca Guiducci Date: Mon, 6 Apr 2026 10:02:46 +0200 Subject: [PATCH 1/6] fix: vertically center Banner text content when action or close button is present Co-Authored-By: Claude Opus 4.6 --- .react-compiler.rec.json | 56 ++++++++++++++++++------------------ src/banner/banner.module.css | 7 ++++- src/banner/banner.tsx | 2 +- 3 files changed, 35 insertions(+), 30 deletions(-) diff --git a/.react-compiler.rec.json b/.react-compiler.rec.json index 6c27c5cf..ed8cd246 100644 --- a/.react-compiler.rec.json +++ b/.react-compiler.rec.json @@ -1,30 +1,30 @@ { - "recordVersion": 1, - "react-compiler-version": "1.0.0", - "files": { - "src/checkbox-field/checkbox-field.tsx": { - "CompileError": 1 - }, - "src/checkbox-field/use-fork-ref.ts": { - "CompileError": 1 - }, - "src/components/keyboard-shortcut/keyboard-shortcut.tsx": { - "CompileError": 1 - }, - "src/hooks/use-previous/use-previous.ts": { - "CompileError": 1 - }, - "src/menu/menu.tsx": { - "CompileError": 2 - }, - "src/tabs/tabs.tsx": { - "CompileError": 4 - }, - "src/tooltip/tooltip.tsx": { - "CompileError": 1 - }, - "src/utils/common-helpers.ts": { - "CompileError": 2 - } + "recordVersion": 1, + "react-compiler-version": "1.0.0", + "files": { + "src/checkbox-field/checkbox-field.tsx": { + "CompileError": 1 + }, + "src/checkbox-field/use-fork-ref.ts": { + "CompileError": 1 + }, + "src/components/keyboard-shortcut/keyboard-shortcut.tsx": { + "CompileError": 1 + }, + "src/hooks/use-previous/use-previous.ts": { + "CompileError": 1 + }, + "src/menu/menu.tsx": { + "CompileError": 2 + }, + "src/tabs/tabs.tsx": { + "CompileError": 4 + }, + "src/tooltip/tooltip.tsx": { + "CompileError": 1 + }, + "src/utils/common-helpers.ts": { + "CompileError": 2 } -} + } +} \ No newline at end of file diff --git a/src/banner/banner.module.css b/src/banner/banner.module.css index ae7d7dc9..9b5975ca 100644 --- a/src/banner/banner.module.css +++ b/src/banner/banner.module.css @@ -32,7 +32,7 @@ .content { padding: var(--reactist-spacing-large); - align-items: flex-start; + align-items: center; } .title, @@ -63,6 +63,11 @@ display: block; } +.icon { + align-self: flex-start; + padding-top: calc(var(--reactist-spacing-xsmall) / 2); +} + /* The close button is invisible in this resolution, so we're hiding the container to prevent flex-gap from making extra space */ .icon:empty, .icon:has(.closeButton:only-child) { diff --git a/src/banner/banner.tsx b/src/banner/banner.tsx index 70464310..891b2292 100644 --- a/src/banner/banner.tsx +++ b/src/banner/banner.tsx @@ -166,7 +166,7 @@ const Banner = React.forwardRef(function Banner( className={styles.topContent} display="flex" gap="small" - alignItems="flexStart" + alignItems="center" > Date: Mon, 6 Apr 2026 10:10:12 +0200 Subject: [PATCH 2/6] chore: revert auto-generated react-compiler tracking changes Co-Authored-By: Claude Opus 4.6 --- .react-compiler.rec.json | 56 ++++++++++++++++++++-------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/.react-compiler.rec.json b/.react-compiler.rec.json index ed8cd246..6c27c5cf 100644 --- a/.react-compiler.rec.json +++ b/.react-compiler.rec.json @@ -1,30 +1,30 @@ { - "recordVersion": 1, - "react-compiler-version": "1.0.0", - "files": { - "src/checkbox-field/checkbox-field.tsx": { - "CompileError": 1 - }, - "src/checkbox-field/use-fork-ref.ts": { - "CompileError": 1 - }, - "src/components/keyboard-shortcut/keyboard-shortcut.tsx": { - "CompileError": 1 - }, - "src/hooks/use-previous/use-previous.ts": { - "CompileError": 1 - }, - "src/menu/menu.tsx": { - "CompileError": 2 - }, - "src/tabs/tabs.tsx": { - "CompileError": 4 - }, - "src/tooltip/tooltip.tsx": { - "CompileError": 1 - }, - "src/utils/common-helpers.ts": { - "CompileError": 2 + "recordVersion": 1, + "react-compiler-version": "1.0.0", + "files": { + "src/checkbox-field/checkbox-field.tsx": { + "CompileError": 1 + }, + "src/checkbox-field/use-fork-ref.ts": { + "CompileError": 1 + }, + "src/components/keyboard-shortcut/keyboard-shortcut.tsx": { + "CompileError": 1 + }, + "src/hooks/use-previous/use-previous.ts": { + "CompileError": 1 + }, + "src/menu/menu.tsx": { + "CompileError": 2 + }, + "src/tabs/tabs.tsx": { + "CompileError": 4 + }, + "src/tooltip/tooltip.tsx": { + "CompileError": 1 + }, + "src/utils/common-helpers.ts": { + "CompileError": 2 + } } - } -} \ No newline at end of file +} From d0f7d79c0e0597dfcc7711f399b1762d8c037a30 Mon Sep 17 00:00:00 2001 From: Francesca Guiducci Date: Mon, 6 Apr 2026 10:15:44 +0200 Subject: [PATCH 3/6] fix: revert .content align-items to flex-start to avoid mobile centering bug Co-Authored-By: Claude Opus 4.6 --- src/banner/banner.module.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/banner/banner.module.css b/src/banner/banner.module.css index 9b5975ca..ce62f558 100644 --- a/src/banner/banner.module.css +++ b/src/banner/banner.module.css @@ -32,7 +32,7 @@ .content { padding: var(--reactist-spacing-large); - align-items: center; + align-items: flex-start; } .title, @@ -64,7 +64,6 @@ } .icon { - align-self: flex-start; padding-top: calc(var(--reactist-spacing-xsmall) / 2); } From 006ca88c979d4c9728519527ed4546b790da307e Mon Sep 17 00:00:00 2001 From: Francesca Guiducci Date: Mon, 6 Apr 2026 10:47:43 +0200 Subject: [PATCH 4/6] fix: restructure Banner layout to properly align icon with first line of text Move the type icon from the .icon container into .topContent, wrapped with .copy in a new .iconCopy group. This ensures the icon stays aligned with the first line of text while the icon+text group centers as a unit relative to action buttons. Co-Authored-By: Claude Opus 4.6 --- .react-compiler.rec.json | 56 ++++++++++++++--------------- src/banner/banner.module.css | 31 ++++++---------- src/banner/banner.tsx | 69 ++++++++++++++++++++++-------------- 3 files changed, 81 insertions(+), 75 deletions(-) diff --git a/.react-compiler.rec.json b/.react-compiler.rec.json index 6c27c5cf..ed8cd246 100644 --- a/.react-compiler.rec.json +++ b/.react-compiler.rec.json @@ -1,30 +1,30 @@ { - "recordVersion": 1, - "react-compiler-version": "1.0.0", - "files": { - "src/checkbox-field/checkbox-field.tsx": { - "CompileError": 1 - }, - "src/checkbox-field/use-fork-ref.ts": { - "CompileError": 1 - }, - "src/components/keyboard-shortcut/keyboard-shortcut.tsx": { - "CompileError": 1 - }, - "src/hooks/use-previous/use-previous.ts": { - "CompileError": 1 - }, - "src/menu/menu.tsx": { - "CompileError": 2 - }, - "src/tabs/tabs.tsx": { - "CompileError": 4 - }, - "src/tooltip/tooltip.tsx": { - "CompileError": 1 - }, - "src/utils/common-helpers.ts": { - "CompileError": 2 - } + "recordVersion": 1, + "react-compiler-version": "1.0.0", + "files": { + "src/checkbox-field/checkbox-field.tsx": { + "CompileError": 1 + }, + "src/checkbox-field/use-fork-ref.ts": { + "CompileError": 1 + }, + "src/components/keyboard-shortcut/keyboard-shortcut.tsx": { + "CompileError": 1 + }, + "src/hooks/use-previous/use-previous.ts": { + "CompileError": 1 + }, + "src/menu/menu.tsx": { + "CompileError": 2 + }, + "src/tabs/tabs.tsx": { + "CompileError": 4 + }, + "src/tooltip/tooltip.tsx": { + "CompileError": 1 + }, + "src/utils/common-helpers.ts": { + "CompileError": 2 } -} + } +} \ No newline at end of file diff --git a/src/banner/banner.module.css b/src/banner/banner.module.css index ce62f558..f147a9d5 100644 --- a/src/banner/banner.module.css +++ b/src/banner/banner.module.css @@ -59,21 +59,16 @@ } .image img, -.icon svg { +.icon svg, +.typeIcon svg { display: block; } -.icon { - padding-top: calc(var(--reactist-spacing-xsmall) / 2); -} - -/* The close button is invisible in this resolution, so we're hiding the container to prevent flex-gap from making extra space */ -.icon:empty, -.icon:has(.closeButton:only-child) { +.typeIcon:empty { display: none; } -.icon .closeButton { +.icon { display: none; } @@ -92,24 +87,20 @@ .content { flex-direction: column; } - .icon { + .icon:has(.closeButton) { display: flex; width: 100%; - align-items: center; - justify-content: space-between; + justify-content: flex-end; + } + .icon .closeButton { + display: flex; } .topContent { flex-direction: column; align-items: stretch; } - .icon:has(.closeButton:only-child) { - display: flex; - } - .icon .closeButton { - display: flex; - } - .icon .closeButton:only-child { - margin-left: auto; + .iconCopy { + flex-direction: column; } .actions { align-self: flex-start; diff --git a/src/banner/banner.tsx b/src/banner/banner.tsx index 891b2292..d4f6f810 100644 --- a/src/banner/banner.tsx +++ b/src/banner/banner.tsx @@ -156,10 +156,7 @@ const Banner = React.forwardRef(function Banner( {image ? {image} : null} - - {type === 'neutral' ? icon : } - {closeButton} - + {closeButton} (function Banner( alignItems="center" > - {title ? ( - - {title} - - ) : null} + + {type === 'neutral' ? icon : } + - {description} - {inlineLinks?.map(({ label, ...props }, index) => { - return ( - - - {label} - - {index < inlineLinks.length - 1 ? · : ''} - - ) - })} + {title ? ( + + {title} + + ) : null} + + {description} + {inlineLinks?.map(({ label, ...props }, index) => { + return ( + + + {label} + + {index < inlineLinks.length - 1 ? ( + · + ) : ( + '' + )} + + ) + })} + From 2c6268c2ec290898d21f921ccc0482491fe2b2ea Mon Sep 17 00:00:00 2001 From: Francesca Guiducci Date: Mon, 6 Apr 2026 11:19:16 +0200 Subject: [PATCH 5/6] fix: restore narrow-width layout for type icon and close button Move the close button into .iconCopy so that at <235px the type icon and close button render together in the same header row, matching the original responsive layout. The .icon container is removed entirely. Co-Authored-By: Claude Opus 4.6 --- src/banner/banner.module.css | 21 ++++++++++----------- src/banner/banner.tsx | 3 +-- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/banner/banner.module.css b/src/banner/banner.module.css index f147a9d5..c46a8c8e 100644 --- a/src/banner/banner.module.css +++ b/src/banner/banner.module.css @@ -59,7 +59,6 @@ } .image img, -.icon svg, .typeIcon svg { display: block; } @@ -68,7 +67,7 @@ display: none; } -.icon { +.iconCopy .closeButton { display: none; } @@ -87,20 +86,20 @@ .content { flex-direction: column; } - .icon:has(.closeButton) { - display: flex; - width: 100%; - justify-content: flex-end; - } - .icon .closeButton { - display: flex; - } .topContent { flex-direction: column; align-items: stretch; } .iconCopy { - flex-direction: column; + flex-direction: row; + align-items: center; + justify-content: space-between; + } + .iconCopy:has(.typeIcon:empty) { + justify-content: flex-end; + } + .iconCopy .closeButton { + display: flex; } .actions { align-self: flex-start; diff --git a/src/banner/banner.tsx b/src/banner/banner.tsx index d4f6f810..c8178c24 100644 --- a/src/banner/banner.tsx +++ b/src/banner/banner.tsx @@ -156,8 +156,6 @@ const Banner = React.forwardRef(function Banner( {image ? {image} : null} - {closeButton} - (function Banner( })} + {closeButton} {action || closeButton ? ( From 0c20a081993be4140d168e33ec06d9adf1135e28 Mon Sep 17 00:00:00 2001 From: Francesca Guiducci Date: Mon, 6 Apr 2026 11:21:17 +0200 Subject: [PATCH 6/6] chore: revert auto-generated react-compiler tracking changes Co-Authored-By: Claude Opus 4.6 --- .react-compiler.rec.json | 56 ++++++++++++++++++++-------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/.react-compiler.rec.json b/.react-compiler.rec.json index ed8cd246..6c27c5cf 100644 --- a/.react-compiler.rec.json +++ b/.react-compiler.rec.json @@ -1,30 +1,30 @@ { - "recordVersion": 1, - "react-compiler-version": "1.0.0", - "files": { - "src/checkbox-field/checkbox-field.tsx": { - "CompileError": 1 - }, - "src/checkbox-field/use-fork-ref.ts": { - "CompileError": 1 - }, - "src/components/keyboard-shortcut/keyboard-shortcut.tsx": { - "CompileError": 1 - }, - "src/hooks/use-previous/use-previous.ts": { - "CompileError": 1 - }, - "src/menu/menu.tsx": { - "CompileError": 2 - }, - "src/tabs/tabs.tsx": { - "CompileError": 4 - }, - "src/tooltip/tooltip.tsx": { - "CompileError": 1 - }, - "src/utils/common-helpers.ts": { - "CompileError": 2 + "recordVersion": 1, + "react-compiler-version": "1.0.0", + "files": { + "src/checkbox-field/checkbox-field.tsx": { + "CompileError": 1 + }, + "src/checkbox-field/use-fork-ref.ts": { + "CompileError": 1 + }, + "src/components/keyboard-shortcut/keyboard-shortcut.tsx": { + "CompileError": 1 + }, + "src/hooks/use-previous/use-previous.ts": { + "CompileError": 1 + }, + "src/menu/menu.tsx": { + "CompileError": 2 + }, + "src/tabs/tabs.tsx": { + "CompileError": 4 + }, + "src/tooltip/tooltip.tsx": { + "CompileError": 1 + }, + "src/utils/common-helpers.ts": { + "CompileError": 2 + } } - } -} \ No newline at end of file +}