opensource/filament
3
0
Fork 0
mirror of https://github.com/filamentphp/filament.git synced 2026-09-24 15:42:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: Tooltip alignment on text columns/entries (#17916)

Browse Source 
* fix: Tooltip alignment for text columns

* fix text entries
This commit is contained in:
Dan Harrin
2025-09-24 11:06:02 +01:00
committed by GitHub
parent ae67082935
commit ab5cc612cb
5 changed files with 98 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/infolists/resources/css/components/text.css
+4 -7
View File
@@ -127,7 +127,7 @@
@apply line-clamp-(--line-clamp,none);
}
&.fi-copyable {
& > .fi-copyable {
@apply cursor-pointer;
}
@@ -217,15 +217,12 @@
}
}
& > .fi-icon {
@apply shrink-0 text-gray-400 dark:text-gray-500;
& > .fi-icon,
& > span:not(.fi-badge) > .fi-icon {
@apply inline-block shrink-0 text-gray-400 dark:text-gray-500;
&.fi-color {
@apply text-color-500;
}
}
& > .fi-icon {
@apply -mt-1 inline-block;
}
}
packages/infolists/src/Components/TextEntry.php
+42 -34
View File
@@ -287,30 +287,14 @@ class TextEntry extends Entry implements HasAffixActions, HasEmbeddedView
$copyMessageDurationJs = Js::from($this->getCopyMessageDuration($stateItem));
}
$tooltip = $this->getTooltip($stateItem);
return [
'attributes' => (new ComponentAttributeBag)
->merge([
'x-on:click' => $isCopyable
? <<<JS
window.navigator.clipboard.writeText({$copyableStateJs})
\$tooltip({$copyMessageJs}, {
theme: \$store.theme,
timeout: {$copyMessageDurationJs},
})
JS
: null,
'x-tooltip' => filled($tooltip = $this->getTooltip($stateItem))
? '{
content: ' . Js::from($tooltip) . ',
theme: $store.theme,
}'
: null,
], escape: false)
->class([
'fi-in-text-item',
'fi-prose' => $isProse || $isMarkdown,
(($fontFamily = $this->getFontFamily($stateItem)) instanceof FontFamily) ? "fi-font-{$fontFamily->value}" : (is_string($fontFamily) ? $fontFamily : ''),
'fi-copyable' => $isCopyable,
])
->when(
! $isBadge,
@@ -324,13 +308,37 @@ class TextEntry extends Entry implements HasAffixActions, HasEmbeddedView
]))
->color(ItemComponent::class, $color)
),
'badgeAttributes' => $isBadge
'contentAttributes' => ($isBadge || $isCopyable || filled($tooltip))
? (new ComponentAttributeBag)
->merge([
'x-on:click' => $isCopyable
? <<<JS
window.navigator.clipboard.writeText({$copyableStateJs})
\$tooltip({$copyMessageJs}, {
theme: \$store.theme,
timeout: {$copyMessageDurationJs},
})
JS
: null,
'x-tooltip' => filled($tooltip)
? '{
content: ' . Js::from($tooltip) . ',
theme: $store.theme,
}'
: null,
], escape: false)
->class([
'fi-badge',
($size instanceof TextSize) ? "fi-size-{$size->value}" : $size,
'fi-copyable' => $isCopyable,
])
->color(BadgeComponent::class, $color ?? 'primary')
->when(
$isBadge,
fn (ComponentAttributeBag $attributes) => $attributes
->class([
'fi-badge',
($size instanceof TextSize) ? "fi-size-{$size->value}" : $size,
])
->color(BadgeComponent::class, $color ?? 'primary')
)
: null,
'iconAfterHtml' => ($iconPosition === IconPosition::After) ? $iconHtml : '',
'iconBeforeHtml' => ($iconPosition === IconPosition::Before) ? $iconHtml : '',
@@ -356,7 +364,7 @@ class TextEntry extends Entry implements HasAffixActions, HasEmbeddedView
$stateItem = Arr::first($state);
[
'attributes' => $stateItemAttributes,
'badgeAttributes' => $stateItemBadgeAttributes,
'contentAttributes' => $stateItemContentAttributes,
'iconAfterHtml' => $stateItemIconAfterHtml,
'iconBeforeHtml' => $stateItemIconBeforeHtml,
] = $getStateItem($stateItem);
@@ -366,15 +374,15 @@ class TextEntry extends Entry implements HasAffixActions, HasEmbeddedView
<div <?= $attributes
->merge($stateItemAttributes->getAttributes(), escape: false)
->toHtml() ?>>
<?php if ($isBadge) { ?>
<span <?= $stateItemBadgeAttributes->toHtml() ?>>
<?php if ($stateItemContentAttributes) { ?>
<span <?= $stateItemContentAttributes->toHtml() ?>>
<?php } ?>
<?= $stateItemIconBeforeHtml ?>
<?= $formatState($stateItem) ?>
<?= $stateItemIconAfterHtml ?>
<?php if ($isBadge) { ?>
<?php if ($stateItemContentAttributes) { ?>
</span>
<?php } ?>
</div>
@@ -421,7 +429,7 @@ class TextEntry extends Entry implements HasAffixActions, HasEmbeddedView
<?php foreach ($state as $stateItem) { ?>
<?php [
'attributes' => $stateItemAttributes,
'badgeAttributes' => $stateItemBadgeAttributes,
'contentAttributes' => $stateItemContentAttributes,
'iconAfterHtml' => $stateItemIconAfterHtml,
'iconBeforeHtml' => $stateItemIconBeforeHtml,
] = $getStateItem($stateItem); ?>
@@ -434,15 +442,15 @@ class TextEntry extends Entry implements HasAffixActions, HasEmbeddedView
<?php } ?>
<?= $stateItemAttributes->toHtml() ?>
>
<?php if ($isBadge) { ?>
<span <?= $stateItemBadgeAttributes->toHtml() ?>>
<?php if ($stateItemContentAttributes) { ?>
<span <?= $stateItemContentAttributes->toHtml() ?>>
<?php } ?>
<?= $stateItemIconBeforeHtml ?>
<?= $formatState($stateItem) ?>
<?= $stateItemIconAfterHtml ?>
<?php if ($isBadge) { ?>
<?php if ($stateItemContentAttributes) { ?>
</span>
<?php } ?>
</li>
@@ -500,21 +508,21 @@ class TextEntry extends Entry implements HasAffixActions, HasEmbeddedView
<?php foreach ($state as $stateItem) { ?>
<?php [
'attributes' => $stateItemAttributes,
'badgeAttributes' => $stateItemBadgeAttributes,
'contentAttributes' => $stateItemContentAttributes,
'iconAfterHtml' => $stateItemIconAfterHtml,
'iconBeforeHtml' => $stateItemIconBeforeHtml,
] = $getStateItem($stateItem); ?>
<li <?= $stateItemAttributes->toHtml() ?>>
<?php if ($isBadge) { ?>
<span <?= $stateItemBadgeAttributes->toHtml() ?>>
<?php if ($stateItemContentAttributes) { ?>
<span <?= $stateItemContentAttributes->toHtml() ?>>
<?php } ?>
<?= $stateItemIconBeforeHtml ?>
<?= $formatState($stateItem) ?>
<?= $stateItemIconAfterHtml ?>
<?php if ($isBadge) { ?>
<?php if ($stateItemContentAttributes) { ?>
</span>
<?php } ?>
</li>
packages/panels/dist/theme.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/tables/resources/css/columns/text.css
+5 -8
View File
@@ -121,7 +121,7 @@
@apply line-clamp-(--line-clamp,none);
}
&.fi-copyable {
& > .fi-copyable {
@apply cursor-pointer;
}
@@ -217,23 +217,20 @@
}
}
& > .fi-icon {
@apply shrink-0 text-gray-400 dark:text-gray-500;
& > .fi-icon,
& > span:not(.fi-badge) > .fi-icon {
@apply inline-block shrink-0 text-gray-400 dark:text-gray-500;
&.fi-color {
@apply text-color-500;
}
}
& > .fi-icon {
@apply -mt-1 inline-block;
}
}
.fi-ta-col-has-column-url .fi-ta-text-item {
@apply hover:underline focus-visible:underline;
& > .fi-icon {
& .fi-icon {
@apply hover:no-underline focus-visible:no-underline;
}
packages/tables/src/Columns/TextColumn.php
+46 -38
View File
@@ -291,29 +291,13 @@ class TextColumn extends Column implements HasEmbeddedView
$copyMessageDurationJs = Js::from($this->getCopyMessageDuration($stateItem));
}
$tooltip = $this->getTooltip($stateItem);
return [
'attributes' => (new ComponentAttributeBag)
->merge([
'x-on:click' => $isCopyable
? <<<JS
window.navigator.clipboard.writeText({$copyableStateJs})
\$tooltip({$copyMessageJs}, {
theme: \$store.theme,
timeout: {$copyMessageDurationJs},
})
JS
: null,
'x-tooltip' => filled($tooltip = $this->getTooltip($stateItem))
? '{
content: ' . Js::from($tooltip) . ',
theme: $store.theme,
}'
: null,
], escape: false)
->class([
'fi-ta-text-item',
(($fontFamily = $this->getFontFamily($stateItem)) instanceof FontFamily) ? "fi-font-{$fontFamily->value}" : (is_string($fontFamily) ? $fontFamily : ''),
'fi-copyable' => $isCopyable,
])
->when(
! $isBadge,
@@ -327,13 +311,37 @@ class TextColumn extends Column implements HasEmbeddedView
]))
->color(ItemComponent::class, $color)
),
'badgeAttributes' => $isBadge
'contentAttributes' => ($isBadge || $isCopyable || filled($tooltip))
? (new ComponentAttributeBag)
->merge([
'x-on:click' => $isCopyable
? <<<JS
window.navigator.clipboard.writeText({$copyableStateJs})
\$tooltip({$copyMessageJs}, {
theme: \$store.theme,
timeout: {$copyMessageDurationJs},
})
JS
: null,
'x-tooltip' => filled($tooltip)
? '{
content: ' . Js::from($tooltip) . ',
theme: $store.theme,
}'
: null,
], escape: false)
->class([
'fi-badge',
($size instanceof TextSize) ? "fi-size-{$size->value}" : $size,
'fi-copyable' => $isCopyable,
])
->color(BadgeComponent::class, $color ?? 'primary')
->when(
$isBadge,
fn (ComponentAttributeBag $attributes) => $attributes
->class([
'fi-badge' => $isBadge,
($size instanceof TextSize) ? "fi-size-{$size->value}" : $size,
])
->color(BadgeComponent::class, $color ?? 'primary'),
)
: null,
'iconAfterHtml' => ($iconPosition === IconPosition::After) ? $iconHtml : '',
'iconBeforeHtml' => ($iconPosition === IconPosition::Before) ? $iconHtml : '',
@@ -353,7 +361,7 @@ class TextColumn extends Column implements HasEmbeddedView
$stateItem = Arr::first($state);
[
'attributes' => $stateItemAttributes,
'badgeAttributes' => $stateItemBadgeAttributes,
'contentAttributes' => $stateItemContentAttributes,
'iconAfterHtml' => $stateItemIconAfterHtml,
'iconBeforeHtml' => $stateItemIconBeforeHtml,
] = $getStateItem($stateItem);
@@ -363,15 +371,15 @@ class TextColumn extends Column implements HasEmbeddedView
<div <?= $attributes
->merge($stateItemAttributes->getAttributes(), escape: false)
->toHtml() ?>>
<?php if ($isBadge) { ?>
<span <?= $stateItemBadgeAttributes->toHtml() ?>>
<?php if ($stateItemContentAttributes) { ?>
<span <?= $stateItemContentAttributes->toHtml() ?>>
<?php } ?>
<?= $stateItemIconBeforeHtml ?>
<?= $formatState($stateItem) ?>
<?= $stateItemIconAfterHtml ?>
<?php if ($isBadge) { ?>
<?php if ($stateItemContentAttributes) { ?>
</span>
<?php } ?>
</div>
@@ -411,22 +419,22 @@ class TextColumn extends Column implements HasEmbeddedView
$stateItem = Arr::first($state);
[
'attributes' => $stateItemAttributes,
'badgeAttributes' => $stateItemBadgeAttributes,
'contentAttributes' => $stateItemContentAttributes,
'iconAfterHtml' => $stateItemIconAfterHtml,
'iconBeforeHtml' => $stateItemIconBeforeHtml,
] = $getStateItem($stateItem);
?>
<p <?= $stateItemAttributes->toHtml() ?>>
<?php if ($isBadge) { ?>
<span <?= $stateItemBadgeAttributes->toHtml() ?>>
<?php if ($stateItemContentAttributes) { ?>
<span <?= $stateItemContentAttributes->toHtml() ?>>
<?php } ?>
<?= $stateItemIconBeforeHtml ?>
<?= $formatState($stateItem) ?>
<?= $stateItemIconAfterHtml ?>
<?php if ($isBadge) { ?>
<?php if ($stateItemContentAttributes) { ?>
</span>
<?php } ?>
</p>
@@ -437,7 +445,7 @@ class TextColumn extends Column implements HasEmbeddedView
<?php foreach ($state as $stateItem) { ?>
<?php [
'attributes' => $stateItemAttributes,
'badgeAttributes' => $stateItemBadgeAttributes,
'contentAttributes' => $stateItemContentAttributes,
'iconAfterHtml' => $stateItemIconAfterHtml,
'iconBeforeHtml' => $stateItemIconBeforeHtml,
] = $getStateItem($stateItem); ?>
@@ -450,15 +458,15 @@ class TextColumn extends Column implements HasEmbeddedView
<?php } ?>
<?= $stateItemAttributes->toHtml() ?>
>
<?php if ($isBadge) { ?>
<span <?= $stateItemBadgeAttributes->toHtml() ?>>
<?php if ($stateItemContentAttributes) { ?>
<span <?= $stateItemContentAttributes->toHtml() ?>>
<?php } ?>
<?= $stateItemIconBeforeHtml ?>
<?= $formatState($stateItem) ?>
<?= $stateItemIconAfterHtml ?>
<?php if ($isBadge) { ?>
<?php if ($stateItemContentAttributes) { ?>
</span>
<?php } ?>
</li>
@@ -511,21 +519,21 @@ class TextColumn extends Column implements HasEmbeddedView
<?php foreach ($state as $stateItem) { ?>
<?php [
'attributes' => $stateItemAttributes,
'badgeAttributes' => $stateItemBadgeAttributes,
'contentAttributes' => $stateItemContentAttributes,
'iconAfterHtml' => $stateItemIconAfterHtml,
'iconBeforeHtml' => $stateItemIconBeforeHtml,
] = $getStateItem($stateItem); ?>
<li <?= $stateItemAttributes->toHtml() ?>>
<?php if ($isBadge) { ?>
<span <?= $stateItemBadgeAttributes->toHtml() ?>>
<?php if ($stateItemContentAttributes) { ?>
<span <?= $stateItemContentAttributes->toHtml() ?>>
<?php } ?>
<?= $stateItemIconBeforeHtml ?>
<?= $formatState($stateItem) ?>
<?= $stateItemIconAfterHtml ?>
<?php if ($isBadge) { ?>
<?php if ($stateItemContentAttributes) { ?>
</span>
<?php } ?>
</li>