Changed slideover to popover and dialog

[jordythevulder]

The new slideovers are here. Fully made with the popover and dialog functionality. No more magic and full control over each element.

Notes

• This is a breaking change!
• All chrome animations are working
• All safari animations are working except ::backdrop fade out animation (not disturbing)
• All firefox animations are working except all fade out animations (not disturbing)
• When browsers add more compatibility in the future, they will automatically work
• Nested slideovers are also supported
• Internal REF: RAP-1974

Options

• Position left or right (defaults to left)

Known issues

• Nested dialog slideovers can't close parent dialogs without extra JS (Popovers can)

Variants

• Slideover mobile (Show the content on desktop, hide content within slideover on mobile)

Questions

• Can the label support be dropped within the resources/views/components/button/tag.blade.php?
• Do i need to redirect my PR to a different 3.0 branch?
• Should the slideover header be text-centered just like the old slideover? > i did change it

Usage

Slideover mobile usage

Nested usage

New

Old

[Roene-JustBetter]

Looking good 🚀

Can the label support be dropped within the resources/views/components/button/tag.blade.php?

I think we should keep this support maybe in some cases we still want a button as a label.

Do i need to redirect my PR to a different 3.0 branch?

Breaking change so I think this should be a 3.0 release.

Should the slideover header be text-centered just like the old slideover?

I don't think it is necessary as we discussed this f2f.

[jordythevulder]

Edit:

I've added dialog aswell. Also i did change the text-center within the slideover header. Makes it easier to update and takes less time when project use default styling.

[royduin]

1. Do we need a polyfill for older browser?
2. We're getting a lot of new Blade components, do we really need that much?

[JimmyHoenderdaal]

Could we make command="close" the default for the close and back components and inherit the parent slideover’s id for commandfor, for example using @aware? That way, userss could simply use <x-rapidez::slideover.close /> without repeating these attributes for every slideover, while still being able to override them when needed

[jordythevulder]

There are some ways but since you can choose between a dialog and a popover those attributes differ from eachother. We can make some magic that that can detect what type you use and add those attributes but that feels wrong in my opinion.

Also when you nest popovers (slideover inside a slideover) you can target the parent popover to close them both if you navigate a layer deeper. By keeping it simple like this it does require some default attributes to specify what you want it to do.

[jordythevulder]

I've tried the following, added aware that checks if parent component has the id attribute, and uses that automatically for the close commandfor and popovertarget. I've added both attributes for dialog and popover by default so that you don't have to explicitly add them each time.

The component looks like the following

Issue is that i would have another back.blade.php file that looks like the close.blade.php component doing the exact same thing.

[jordythevulder]

1. Do we need a polyfill for older browser?
2. We're getting a lot of new Blade components, do we really need that much?

1. I've created a follow up to look if we need it (internal REF: RAP-1990)
2. we have replaced the slideover, the only new ones are footer and content since header was already a partial. I don't mind adding relevant components.

[Jade-GG]

I feel like this is missing an example of the popover, these are all dialog slideovers.

[jordythevulder]

Visually it's exactly the same (same component same styling), within the <x-slideover component i've added simple instructions on how you can use the attributes on your button to trigger it as a popover or dialog.

If others also agree I'll add it :)

[Jade-GG]

With these instructions the x button on the slideover won't work if you use the popover variant. I also feel like these buttons could be turned into a component themselves, as to reduce room for mistakes (+ these attributes aren't obvious and will need to be looked up every time)

[Jade-GG]

As we found out just now, you can also use commandfor="example" command="show-popover". This makes it much easier to differentiate between the two variants.

[jordythevulder]

Ah yes, great find! But is commandfor less suported? And because of that it's better to use the popovertarget and popovertargetaction attributes?