Fix accordion icon alignment

Fixes microsoft#33347
vs4vijay · Dec 6, 2024 · 93235ed · 93235ed
1 parent f42240c
commit 93235ed
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/...react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts b/...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/...ages/react-components/react-accordion/stories/src/Accordion/AccordionWithIcon.stories.tsx b/...ages/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.',
+    },
+  },
+};