Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[Bug]: fluent-accordion icons aligned incorrectly with multiline header #33347

Open
2 tasks done
skansakar opened this issue Nov 26, 2024 · 1 comment · May be fixed by #33418
Open
2 tasks done

[Bug]: fluent-accordion icons aligned incorrectly with multiline header #33347

skansakar opened this issue Nov 26, 2024 · 1 comment · May be fixed by #33418
Labels
Component: Accordion Fluent UI react-components (v9) Help Wanted ✨ Status: In PR Type: Bug 🐛

Comments

@skansakar
Copy link

Component

Accordion

Package version

9.55.0

React version

18.2.0

Environment

-

Current Behavior

When the accordion header is longer than one line, the icon is centred vertically. See screenshot from stackblitz.
Image

Expected Behavior

Expect the icon to be aligned vertically with the first line of text in the header

Reproduction

https://stackblitz.com/edit/fgeddy?file=src%2Fexample.tsx

Steps to reproduce

  1. Create an accordion with a long header text that overflows to more than 1 line
  2. Observe the icon's alignment issue.

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
@sopranopillow
Copy link
Contributor

I agree, the chevron should be aligned at the top. As mentioned in the severity, this has a workaround by using a classname with makestyles. Thanks for reporting it @skansakar!

vs4vijay added a commit to vs4vijay/fluentui that referenced this issue Dec 6, 2024
@vs4vijay
Fix accordion icon alignment
93235ed 
Fixes microsoft#33347
@vs4vijay vs4vijay linked a pull request Dec 6, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Component: Accordion Fluent UI react-components (v9) Help Wanted ✨ Status: In PR Type: Bug 🐛
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix accordion icon alignment vs4vijay/fluentui
3 participants
@sopranopillow @layershifter @skansakar