Fix custom popover padding

[MewenLeHo]

Related issues

Closes #1937

Description

Fix padding for custom popover while keeping new design unchanged.

Motivation & Context

Design broken after design update:

Types of change

• Bug fix (non-breaking which fixes an issue)

Live previews

• https://deploy-preview-2031--boosted.netlify.app/docs/5.3/components/popovers/#custom-popovers

Checklist

Contribution

• I have read the contributing guidelines

Accessibility

• My change follows accessibility good practices; I have at least run axe

Design

• My change respects the design guidelines defined in Orange Design System
• My change is compatible with responsive display

Development

• My change follows the developer guide
• (NA) I have added JavaScript unit tests to cover my changes
• (NA) I have added SCSS unit tests to cover my changes

Documentation

• My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

• (NA) My change introduces changes to the migration guide
• (NA) My new component is added in Storybook
• (NA) My new component is compatible with RTL
• Manually run BrowserStack tests
• Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
• Code review
• Design review
• (NA) A11y review

After the merge

• Manually launch Percy tests

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	acd5cfa
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/649a937876c49b0008477292
😎 Deploy Preview	https://deploy-preview-2031--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[MewenLeHo]

After PR review by @isabellechanclou , it appears that paddingvalues for the custom popover are different.
It seems akward but it's coming from the custom properties defined before the example:

Note: Should we add a design callout to warn people that any customisation means that the component is no longer compatible with the DSM?

[julien-deramond]

There's probably an issue with --bs-popover-body-padding-y which only changes the bottom padding instead of both bottom and top padding. Here's the rendering with --bs-popover-body-padding-x: 3rem and --bs-popover-body-padding-y: 5rem:

[MewenLeHo]

There's probably an issue with --bs-popover-body-padding-y which only changes the bottom padding instead of both bottom and top padding. Here's the rendering with --bs-popover-body-padding-x: 3rem and --bs-popover-body-padding-y: 5rem:

I moved a CSS property and it should be better now:

[isabellechanclou]

LGTM !

[julien-deramond]

Is it possible with the custom props to center the text in the header? Doesn't seem very usable right now.

[MewenLeHo]

I removed specific some specific CSS rules for custom popovers so it should be better now.
I am just wondering if it is really a good think to add examples rules for popover header customisation in a Boosted mod? 🤔

[isabellechanclou]

LGTM !

[MewenLeHo]

I just added to this PR the prototype made by @julien-deramond in PR #2077
@isabellechanclou and @julien-deramond, could you please have a look on this new verson?

[louismaximepiton]

Some small changes but looks fine already

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication