Popover size to content

Feature request

Is your feature request related to a problem? Please describe.

Popovers constrain their content by default using a maxWidth setting. I’d like to be able to remove this setting, so the popover is sized to its content.

Describe the solution you’d like

Three ideas:

1. Add a boolean property like fitToContent={true} which disables the maxWidth setting

2. Support the sx property on <Popover> to override the style of the outermost popper div

3. There is a size prop but it doesn’t appear to do anything. Depending on how it works, it might be a viable solution.

Describe alternatives you’ve considered

Here’s what I’ve tried so far:

• <Popover>'s size prop doesn’t seem to do anything?

• <PopoverContent> supports LayoutProps, but it’s constrained by the maxWidth property on the parent popper div.

• <Popover> doesn’t support LayoutProps, sx, or css directly.

• It does support styleConfig, but this overwrites the entire default theme, meaning I’d need to copy the entire default theme’s style config into my component as well:

      <Popover
        styleConfig={{
          maxWidth: 'unset',
          width: 'unset'
        }}

This works but loses all the default stylings.

• Using extendTheme() to override the specific properties I want does work, but applies it globally to all Popovers which is not desireable:

const theme = extendTheme({
  components: {
    Popover: {
      baseStyle: {
        popper: {
          maxWidth: 'unset',
          width: 'unset'
        }
      }
    }
  }
});

Additional context

Using @chakra-ui/react: 1.0.0

[baumandm]

Good idea @AntonioDeCasper, I totally forgot about using variant. Here’s my updated theme, which works as expected and allows me to selectively apply it:

const theme = extendTheme({
  components: {
    Popover: {
      variants: {
        responsive: {
          popper: {
            maxWidth: 'unset',
            width: 'unset'
          }
        }
      }
    }
  }
});

And in use:

<Popover variant="responsive">
  ...
</Popover>

This solves my problem, so feel free to close this issue. However, it’s possible that some of the above alternatives should also work, so I’m leaving it open for someone else to decide what to do with.

[nvmnghia]

My version of @baumandm’s answer:

Popover: {
  variants: {
    responsive: {
      content: { width: "unset" },
    },
  },
},