modal icon indicating copy to clipboard operation
modal copied to clipboard

Please move maxWidths to config or consider adding Tailwind preffix support

Open vladrusu opened this issue 2 years ago • 0 comments

Issue: currently, maxWidths is hardcoded in /modal/src/ModalComponent.php as follows:

    protected static array $maxWidths = [
        'sm'  => 'sm:max-w-sm',
        'md'  => 'sm:max-w-md',
        'lg'  => 'sm:max-w-md md:max-w-lg',
        'xl'  => 'sm:max-w-md md:max-w-xl',
        '2xl' => 'sm:max-w-md md:max-w-xl lg:max-w-2xl',
        '3xl' => 'sm:max-w-md md:max-w-xl lg:max-w-3xl',
        '4xl' => 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl',
        '5xl' => 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl',
        '6xl' => 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl',
        '7xl' => 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl',
    ];

The thing is, there is no way to customize it. The thing is, I use Tailwind classes with tw- preffix in my code, so basically I have to adjust classes in modal.blade.php and modal.js with every new Wire Elements Modal version (overflow-y-hidden becomes tw-overflow-y-hidden in my code, for example).

Please consider allowing us - as I said earlier - to override maxWidths in config, or, alternatively, consider adding Tailwind preffix support.

Thanks!

Update: I ended up overriding modalMaxWidthClass in my code, as a work-around (to add tw- preffix to any Tailwind class):

    public static function modalMaxWidthClass(): string
    {
        return str_replace(':', ':tw-', parent::modalMaxWidthClass());
    }

vladrusu avatar Mar 12 '22 23:03 vladrusu