microsoft/fluentui

[Bug]: Unable to adjust the size of the InfoLabel's popover

Closed this issue · 1 comments

martellaj commented

Component

InfoLabel

Package version

^9.55.1

React version

^18.2.0

Environment

Unable to get in my environment

Current Behavior

If the content of InfoLabel is wider than 264px, then it appears outside the bounds of the popover.

Image

Expected Behavior

There should be a way to increase the max-width of the popover to accommodate wider content. Maybe there is and I'm just unable to figure it out from the docs.

Reproduction

https://stackblitz.com/edit/apmooonb-da68gadf?file=src%2Fexample.tsx

Steps to reproduce

  1. Click the info button
  2. Observe

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

Outlook.com / New Outlook

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.
layershifter commented

InfoLabel follows the slots model (https://react.fluentui.dev/?path=/docs/concepts-developer-customizing-components-with-slots--docs).

You can do following:

  <InfoLabel
    info={{
      children: (
        <div style={{ backgroundColor: 'blue', width: '300px' }}>
          This is example information for an InfoLabel.
        </div>
      ),
      className: 'foo',
      style: { maxWidth: '300px' },
    }}
  />

https://stackblitz.com/edit/apmooonb-jqq4wm3c?file=src%2Fexample.tsx

  • 👍1