Skip to content

fix(react-accordion): adjust accordion header chevron alignment styles #34616

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

dmytrokirpa
Copy link
Contributor

Previous Behavior

The icon is vertically centered in the header, instead of being aligned with the first line of text.

image

New Behavior

The icon is aligned vertically with the first line of text in the header

image

Related Issue(s)

@dmytrokirpa dmytrokirpa self-assigned this Jun 9, 2025
@dmytrokirpa dmytrokirpa changed the title Fix accordion header chevron alignment fix(react-accordion): adjust accordion header chevron alignment styles Jun 9, 2025
Copy link

github-actions bot commented Jun 9, 2025

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)
108.066 kB
33.169 kB
108.102 kB
33.188 kB
36 B
19 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
227.642 kB
65.909 kB
227.678 kB
65.929 kB
36 B
20 B
react-components
react-components: entire library
1.264 MB
317.961 kB
1.264 MB
317.978 kB
36 B
17 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
69.779 kB
20.273 kB
react-components
react-components: FluentProvider & webLightTheme
44.613 kB
14.641 kB
react-portal-compat
PortalCompatProvider
8.386 kB
2.624 kB
react-timepicker-compat
TimePicker
110.646 kB
36.578 kB
🤖 This report was generated against 89cf76e7bf5e8e47ea506443b3b7fcdeb0571125

Copy link

github-actions bot commented Jun 9, 2025

Pull request demo site: URL

@@ -138,3 +138,29 @@ Disabled.storyName = 'disabled';

Copy link

@github-actions github-actions bot Jun 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Accordion Converged 18 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Accordion Converged.expandIconPosition end - RTL.normal.chromium.png 624 Changed
vr-tests-react-components/Accordion Converged.disabled - Dark Mode.normal.chromium.png 645 Changed
vr-tests-react-components/Accordion Converged.expandIcon Icon- - Dark Mode.normal.chromium.png 2632 Changed
vr-tests-react-components/Accordion Converged.expandIconPosition end .normal.chromium.png 625 Changed
vr-tests-react-components/Accordion Converged.icon Icon- - RTL.normal.chromium.png 1437 Changed
vr-tests-react-components/Accordion Converged.disabled - High Contrast.normal.chromium.png 2382 Changed
vr-tests-react-components/Accordion Converged.expandIcon Icon- - High Contrast.normal.chromium.png 3145 Changed
vr-tests-react-components/Accordion Converged.expandIcon Icon- - RTL.normal.chromium.png 2244 Changed
vr-tests-react-components/Accordion Converged.icon Icon- .normal.chromium.png 1436 Changed
vr-tests-react-components/Accordion Converged.disabled.normal.chromium.png 932 Changed
vr-tests-react-components/Accordion Converged.expandIcon Icon- .normal.chromium.png 2243 Changed
vr-tests-react-components/Accordion Converged.size - RTL.normal.chromium.png 1460 Changed
vr-tests-react-components/Accordion Converged.visibility+focus - Dark Mode.focus opened.chromium.png 744 Changed
vr-tests-react-components/Accordion Converged.visibility+focus - High Contrast.focus closed.chromium.png 890 Changed
vr-tests-react-components/Accordion Converged.size.normal.chromium.png 1460 Changed
vr-tests-react-components/Accordion Converged.visibility+focus.focus opened.chromium.png 626 Changed
vr-tests-react-components/Accordion Converged.visibility+focus - RTL.focus opened.chromium.png 626 Changed
vr-tests-react-components/Accordion Converged.Multiline Heading.normal.chromium.png 0 Added
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 275 Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png 953 Changed
vr-tests-react-components/TagPicker 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled.chromium.png 678 Changed
vr-tests-react-components/TagPicker.disabled - High Contrast.chromium.png 1321 Changed

There were 10 duplicate changes discarded. Check the build logs for more information.

@dmytrokirpa dmytrokirpa marked this pull request as ready for review June 9, 2025 18:55
@dmytrokirpa dmytrokirpa requested review from marcosmoura and a team as code owners June 9, 2025 18:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: fluent-accordion icons aligned incorrectly with multiline header
1 participant