From 93235ed02a9ab5ee288a054e3580a5f0f6022480 Mon Sep 17 00:00:00 2001
From: Vijay Soni <vs4vijay@gmail.com>
Date: Fri, 6 Dec 2024 20:20:16 +0530
Subject: [PATCH] Fix accordion icon alignment

Fixes #33347
---
 .../useAccordionHeaderStyles.styles.ts        |  2 +-
 .../Accordion/AccordionWithIcon.stories.tsx   | 21 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts b/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts
index 6a799680fd194..a516cd6459c7a 100644
--- a/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts
+++ b/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts
@@ -96,7 +96,7 @@ const useStyles = makeStyles({
   icon: {
     height: '100%',
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'flex-start',
     paddingRight: tokens.spacingHorizontalS,
     lineHeight: tokens.lineHeightBase500,
     fontSize: tokens.fontSizeBase500,
diff --git a/packages/react-components/react-accordion/stories/src/Accordion/AccordionWithIcon.stories.tsx b/packages/react-components/react-accordion/stories/src/Accordion/AccordionWithIcon.stories.tsx
index 8c1753b24c682..4da216a71fa74 100644
--- a/packages/react-components/react-accordion/stories/src/Accordion/AccordionWithIcon.stories.tsx
+++ b/packages/react-components/react-accordion/stories/src/Accordion/AccordionWithIcon.stories.tsx
@@ -33,3 +33,24 @@ WithIcon.parameters = {
     },
   },
 };
+
+export const WithLongHeaderText = () => (
+  <Accordion>
+    <AccordionItem value="1">
+      <AccordionHeader icon={<RocketRegular />}>
+        Accordion Header with a very long text that overflows to the next line
+      </AccordionHeader>
+      <AccordionPanel>
+        <div>Accordion Panel 1</div>
+      </AccordionPanel>
+    </AccordionItem>
+  </Accordion>
+);
+
+WithLongHeaderText.parameters = {
+  docs: {
+    description: {
+      story: 'An accordion header with a long text that overflows to the next line, demonstrating icon alignment.',
+    },
+  },
+};