From a44e87b60f78df2b2663de4a6424a732b412ae2a Mon Sep 17 00:00:00 2001
From: Bea Esguerra <beaesguerra@users.noreply.github.com>
Date: Thu, 27 Jun 2024 09:22:22 -0600
Subject: [PATCH] Fix Banner styling for custom action buttons (#2260)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
Fixing styling issue where non-tertiary buttons get cropped when used as a custom action in the banner component.

Issue: WB-1716

## Test plan:
- Confirm buttons look as expected in the banner (`?path=/story/packages-banner--with-custom-action-primary`)
- Confirm a mix of actions and custom actions look as expected in the banner (`?path=/story/packages-banner--with-mixed-actions`)

## Screenshots:
Mixed actions (before & after changes)
<img width="1726" alt="before-mixed" src="https://github.com/Khan/wonder-blocks/assets/14334617/360e8945-de62-48aa-b259-e5049ad3a33e">
<img width="1728" alt="after-mixed" src="https://github.com/Khan/wonder-blocks/assets/14334617/7f506d9b-c379-4cd9-adf6-4e61a6ee1d58">

Primary button for custom action (before & after changes)
<img width="1728" alt="before-primary" src="https://github.com/Khan/wonder-blocks/assets/14334617/0d3a859c-a110-4433-b1eb-e9dfe28af6e7">
<img width="1726" alt="after-primary" src="https://github.com/Khan/wonder-blocks/assets/14334617/508f6b86-6c4d-4af6-9025-1b00fba9bbb4">

Author: beaesguerra

Reviewers: jandrade, beaesguerra, jeresig

Required Reviewers:

Approved By: jeresig

Checks: ✅ codecov/project, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), 🚫 Chromatic - Get results on regular PRs, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), 🚫 Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot, ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x)

Pull Request URL: https://github.com/Khan/wonder-blocks/pull/2260
---
 .changeset/new-rice-punch.md                  |  5 +++
 .../wonder-blocks-banner/banner.stories.tsx   | 33 +++++++++++++++++++
 .../src/components/banner.tsx                 |  5 +--
 3 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/new-rice-punch.md

diff --git a/.changeset/new-rice-punch.md b/.changeset/new-rice-punch.md
new file mode 100644
index 000000000..c748c3f19
--- /dev/null
+++ b/.changeset/new-rice-punch.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-banner": patch
+---
+
+Banner: Fix styling issue where buttons are cropped when used as a custom action
diff --git a/__docs__/wonder-blocks-banner/banner.stories.tsx b/__docs__/wonder-blocks-banner/banner.stories.tsx
index acf47c9c5..ad782f895 100644
--- a/__docs__/wonder-blocks-banner/banner.stories.tsx
+++ b/__docs__/wonder-blocks-banner/banner.stories.tsx
@@ -430,6 +430,31 @@ export const WithCustomAction: StoryComponentType = {
     ),
 };
 
+/**
+ * **NOTE: Custom actions are discouraged and should only be used as a last resort!**.
+ *
+ * Another example with a custom action using a primary button.
+ * See **With Custom Action** story for more details.
+ */
+export const WithCustomActionPrimary: StoryComponentType = {
+    render: () => (
+        <Banner
+            text="some text"
+            layout="floating"
+            actions={[
+                {
+                    type: "custom",
+                    node: (
+                        <Button size="small" onClick={() => {}}>
+                            Custom Action
+                        </Button>
+                    ),
+                },
+            ]}
+        />
+    ),
+};
+
 /**
  * Here is an example that includes both a normal action and a custom action.
  */
@@ -452,6 +477,14 @@ export const WithMixedActions: StoryComponentType = {
                         </Button>
                     ),
                 },
+                {
+                    type: "custom",
+                    node: (
+                        <Button size="small" onClick={() => {}}>
+                            Custom button 2
+                        </Button>
+                    ),
+                },
                 {
                     type: "custom",
                     node: (
diff --git a/packages/wonder-blocks-banner/src/components/banner.tsx b/packages/wonder-blocks-banner/src/components/banner.tsx
index 77ffc241e..7d9a4dfb6 100644
--- a/packages/wonder-blocks-banner/src/components/banner.tsx
+++ b/packages/wonder-blocks-banner/src/components/banner.tsx
@@ -349,13 +349,14 @@ const styles = StyleSheet.create({
         justifyContent: "flex-start",
         marginTop: spacing.xSmall_8,
         marginBottom: spacing.xSmall_8,
+        // Set the height to remove the padding from buttons
+        height: 18,
+        alignItems: "center",
     },
     action: {
         marginLeft: spacing.xSmall_8,
         marginRight: spacing.xSmall_8,
         justifyContent: "center",
-        // Set the height to remove the padding from buttons
-        height: 18,
     },
     link: {
         fontSize: 14,