Skip to content

Add tooltip prop to radio variants #2835

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kachelle wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add tooltip prop to radio variants #2835

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions stubs/resources/views/flux/radio/group/variants/cards.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@

$classes = Flux::classes()
->add('flex gap-3')
// A tooltip wrapper (via "tooltip" prop) becomes the flex item, so it has to stretch like the radio it wraps...
->add('[&>ui-tooltip]:flex-1')
;
@endphp

Expand Down
2 changes: 2 additions & 0 deletions stubs/resources/views/flux/radio/group/variants/segmented.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@
}

$classes = Flux::classes()
// A tooltip wrapper (via "tooltip" prop) becomes the flex item, so it has to stretch like the radio it wraps...
->add('[&>ui-tooltip]:flex-1')
->add('block flex p-1')
->add('rounded-lg bg-zinc-800/5 dark:bg-white/10')
->add($size === 'sm' ? 'h-8 py-[3px] px-[3px]' : 'h-10 p-1')
Expand Down
24 changes: 13 additions & 11 deletions stubs/resources/views/flux/radio/variants/buttons.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@blaze(fold: true)
@blaze(fold: true, unsafe: ['tooltip:position', 'tooltip:kbd', 'tooltip'])

@props([
'accent' => true,
Expand Down Expand Up @@ -54,14 +54,16 @@
{{-- We have to put tabindex="-1" here because otherwise, Livewire requests will wipe out tabindex state, --}}
{{-- even with durable attributes for some reason... --}}
{{-- We have to put "data-flux-field" so that a single box can be disabled without "disabling" the group field label... --}}
<ui-radio {{ $attributes->class($classes) }} data-flux-control data-flux-radio-buttons tabindex="-1" data-flux-field>
<?php if (is_string($icon) && $icon !== ''): ?>
<flux:icon :icon="$icon" :attributes="$iconAttributes" />
<?php elseif ($icon): ?>
{{ $icon }}
<?php endif; ?>
<flux:with-tooltip :$attributes>
<ui-radio {{ $attributes->class($classes) }} data-flux-control data-flux-radio-buttons tabindex="-1" data-flux-field>
<?php if (is_string($icon) && $icon !== ''): ?>
<flux:icon :icon="$icon" :attributes="$iconAttributes" />
<?php elseif ($icon): ?>
{{ $icon }}
<?php endif; ?>

<?php if ($slot->isNotEmpty() || isset($label)): ?>
<span>{{ $slot->isNotEmpty() ? $slot : $label }}</span>
<?php endif; ?>
</ui-radio>
<?php if ($slot->isNotEmpty() || isset($label)): ?>
<span>{{ $slot->isNotEmpty() ? $slot : $label }}</span>
<?php endif; ?>
</ui-radio>
</flux:with-tooltip>
50 changes: 26 additions & 24 deletions stubs/resources/views/flux/radio/variants/cards.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@blaze(fold: true, unsafe: ['icon:variant'])
@blaze(fold: true, unsafe: ['icon:variant', 'tooltip:position', 'tooltip:kbd', 'tooltip'])

@php $iconVariant ??= $attributes->pluck('icon:variant'); @endphp

Expand Down Expand Up @@ -60,32 +60,34 @@
{{-- We have to put tabindex="-1" here because otherwise, Livewire requests will wipe out tabindex state, --}}
{{-- even with durable attributes for some reason... --}}
{{-- We have to put "data-flux-field" so that a single box can be disabled without "disabling" the group field label... --}}
<ui-radio {{ $attributes->class($classes) }} data-flux-control data-flux-radio-cards tabindex="-1" data-flux-field>
<?php if ($label): ?>
<?php if ($indicatorPosition === 'start'): ?>
<flux:radio.indicator class="mt-px" />
<?php endif; ?>

<div class="flex-1 flex gap-2">
<?php if (is_string($icon) && $icon !== ''): ?>
<flux:icon :icon="$icon" :variant="$iconVariant" :class="$iconClasses" />
<?php elseif ($icon): ?>
{{ $icon }}
<flux:with-tooltip :$attributes>
<ui-radio {{ $attributes->class($classes) }} data-flux-control data-flux-radio-cards tabindex="-1" data-flux-field>
<?php if ($label): ?>
<?php if ($indicatorPosition === 'start'): ?>
<flux:radio.indicator class="mt-px" />
<?php endif; ?>

<div class="flex-1">
<flux:heading>{{ $slot->isNotEmpty() ? $slot : $label }}</flux:heading>

<?php if ($description): ?>
<flux:subheading size="sm">{{ $description }}</flux:subheading>
<div class="flex-1 flex gap-2">
<?php if (is_string($icon) && $icon !== ''): ?>
<flux:icon :icon="$icon" :variant="$iconVariant" :class="$iconClasses" />
<?php elseif ($icon): ?>
{{ $icon }}
<?php endif; ?>

<div class="flex-1">
<flux:heading>{{ $slot->isNotEmpty() ? $slot : $label }}</flux:heading>

<?php if ($description): ?>
<flux:subheading size="sm">{{ $description }}</flux:subheading>
<?php endif; ?>
</div>
</div>
</div>

<?php if ($indicatorPosition === 'end'): ?>
<flux:radio.indicator class="mt-px" />
<?php if ($indicatorPosition === 'end'): ?>
<flux:radio.indicator class="mt-px" />
<?php endif; ?>
<?php else: ?>
{{ $slot }}
<?php endif; ?>
<?php else: ?>
{{ $slot }}
<?php endif; ?>
</ui-radio>
</ui-radio>
</flux:with-tooltip>
10 changes: 6 additions & 4 deletions stubs/resources/views/flux/radio/variants/pills.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@blaze(fold: true)
@blaze(fold: true, unsafe: ['tooltip:position', 'tooltip:kbd', 'tooltip'])

@props([
'accent' => true,
Expand All @@ -24,6 +24,8 @@
{{-- We have to put tabindex="-1" here because otherwise, Livewire requests will wipe out tabindex state, --}}
{{-- even with durable attributes for some reason... --}}
{{-- We have to put "data-flux-field" so that a single box can be disabled without "disabling" the group field label... --}}
<ui-radio {{ $attributes->class($classes) }} data-flux-control data-flux-radio-pills tabindex="-1" data-flux-field>
{{ $slot->isNotEmpty() ? $slot : $label }}
</ui-radio>
<flux:with-tooltip :$attributes>
<ui-radio {{ $attributes->class($classes) }} data-flux-control data-flux-radio-pills tabindex="-1" data-flux-field>
{{ $slot->isNotEmpty() ? $slot : $label }}
</ui-radio>
</flux:with-tooltip>
34 changes: 18 additions & 16 deletions stubs/resources/views/flux/radio/variants/segmented.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@blaze(fold: true, unsafe: ['icon:trailing', 'icon:variant'])
@blaze(fold: true, unsafe: ['icon:trailing', 'icon:variant', 'tooltip:position', 'tooltip:kbd', 'tooltip'])

@php $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
@php $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
Expand Down Expand Up @@ -37,18 +37,20 @@

{{-- We have to put tabindex="-1" here because otherwise, Livewire requests will wipe out tabindex state, --}}
{{-- even with durable attributes for some reason... --}}
<ui-radio {{ $attributes->class($classes) }} data-flux-control data-flux-radio-segmented tabindex="-1">
<?php if (is_string($icon) && $icon !== ''): ?>
<flux:icon :$icon :variant="$iconVariant" class="{!! $iconClasses !!}" />
<?php elseif ($icon): ?>
{{ $icon }}
<?php endif; ?>

{{ $slot->isNotEmpty() ? $slot : $label }}

<?php if (is_string($iconTrailing) && $iconTrailing !== ''): ?>
<flux:icon :icon="$iconTrailing" variant="micro" />
<?php elseif ($iconTrailing): ?>
{{ $iconTrailing }}
<?php endif; ?>
</ui-radio>
<flux:with-tooltip :$attributes>
<ui-radio {{ $attributes->class($classes) }} data-flux-control data-flux-radio-segmented tabindex="-1">
<?php if (is_string($icon) && $icon !== ''): ?>
<flux:icon :$icon :variant="$iconVariant" class="{!! $iconClasses !!}" />
<?php elseif ($icon): ?>
{{ $icon }}
<?php endif; ?>

{{ $slot->isNotEmpty() ? $slot : $label }}

<?php if (is_string($iconTrailing) && $iconTrailing !== ''): ?>
<flux:icon :icon="$iconTrailing" variant="micro" />
<?php elseif ($iconTrailing): ?>
{{ $iconTrailing }}
<?php endif; ?>
</ui-radio>
</flux:with-tooltip>