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.

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

[Bug]: Limited to only using "span" in MessageBarTitle #33373

Closed
2 tasks done
k-ebanks opened this issue Nov 29, 2024 · 2 comments · May be fixed by #33417
Closed
2 tasks done

[Bug]: Limited to only using "span" in MessageBarTitle #33373

k-ebanks opened this issue Nov 29, 2024 · 2 comments · May be fixed by #33417

Comments

@k-ebanks
Copy link

Component

MessageBar

Package version

^9.55.0

React version

^18.2.0

Environment

OS: Linux 6.5 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
CPU: (16) x64 AMD EPYC 7763 64-Core Processor
Memory: 53.76 GB / 62.78 GB
Container: Yes
Shell: 5.1.16 - /bin/bash

Current Behavior

The MessageBarTitle can only be displayed as a , other components allow me to customise the tag.
Additionally, there is an "as" field on it that only accepts "span", or undefined (which then just defaults to span), this is misleading.

Expected Behavior

MessageBarTitle should allow us to display as different html tags. Other components give us a choice of may different values (h1, h2, h3, p, etc). However, for this component we are limited to span. I would like to use different values to be consistent with the rest of my app.

Reproduction

Repro provided below

Steps to reproduce

  1. Create a component
  2. Try to set the "as" value to anything other than span
  3. Observe a type error
    Image

Are you reporting an Accessibility issue?

None

Suggested severity

High - No 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.
@spmonahan
Copy link
Contributor

This can be handled by entirely replacing slots.

Here's an example with MessageBarTitle: https://stackblitz.com/edit/zyktgd?file=src%2Fexample.tsx

Note that caveats apply when replacing the entire slot 🙂

If you replace the entire slot, verify accessibility, layout, and styling still work properly.

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants