mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-11 04:38:18 +00:00
Merge remote-tracking branch 'origin/main' into docs/separator
This commit is contained in:
+6
-1
@@ -1,6 +1,11 @@
|
||||
# Changelog
|
||||
|
||||
## Unreleased
|
||||
## [Unreleased]
|
||||
|
||||
### Fixed
|
||||
|
||||
- Prevented Escape from dismissing an enclosing dialog while closing an open Combobox popup.
|
||||
- Fixed long Tooltip text clipping instead of showing an ellipsis across all style packs.
|
||||
|
||||
## [1.0.2] - 2026-07-06
|
||||
|
||||
|
||||
@@ -85,6 +85,8 @@ Combobox is input-first. The visible input filters the list; the hidden input st
|
||||
</Step>
|
||||
</Steps>
|
||||
|
||||
Pressing Escape in the input closes an open suggestions popup without dismissing an enclosing dialog. Once the popup is closed, press Escape again to dismiss the dialog.
|
||||
|
||||
### HTML structure
|
||||
|
||||
<dl>
|
||||
|
||||
@@ -53,6 +53,14 @@ Basecoat tooltips are CSS-only and text-only. This intentionally differs from sh
|
||||
<button class="btn" data-variant="outline" data-tooltip="Default tooltip">Default</button>
|
||||
</Preview>
|
||||
|
||||
### Long text
|
||||
|
||||
Tooltips stay on one line and truncate with an ellipsis when the text exceeds the maximum width. This intentionally differs from shadcn/ui's multiline tooltip content.
|
||||
|
||||
<Preview>
|
||||
<button class="btn" data-variant="outline" data-tooltip="A tooltip with enough text to exceed the default maximum width and demonstrate truncation">Hover</button>
|
||||
</Preview>
|
||||
|
||||
### Sides
|
||||
|
||||
<Preview>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
@apply relative;
|
||||
|
||||
&:before {
|
||||
@apply absolute z-[60] w-fit max-w-xs origin-(--transform-origin) scale-95 truncate invisible opacity-0 transition-all pointer-events-none content-[attr(data-tooltip)];
|
||||
@apply absolute block z-[60] w-fit max-w-xs origin-(--transform-origin) scale-95 truncate invisible opacity-0 transition-all pointer-events-none content-[attr(data-tooltip)];
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
|
||||
@@ -1324,7 +1324,7 @@
|
||||
|
||||
/* Tooltip */
|
||||
[data-tooltip]::before {
|
||||
@apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-lg;
|
||||
@apply bg-foreground text-background rounded-xl px-3 py-1.5 text-xs;
|
||||
}
|
||||
|
||||
[data-tooltip][data-arrow]::after {
|
||||
|
||||
@@ -1327,7 +1327,7 @@
|
||||
|
||||
/* Tooltip */
|
||||
[data-tooltip]::before {
|
||||
@apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-none px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-none;
|
||||
@apply bg-foreground text-background rounded-none px-3 py-1.5 text-xs;
|
||||
}
|
||||
|
||||
[data-tooltip][data-arrow]::after {
|
||||
|
||||
@@ -1312,7 +1312,7 @@
|
||||
|
||||
/* Tooltip */
|
||||
[data-tooltip]::before {
|
||||
@apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-2xl px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-4xl;
|
||||
@apply bg-foreground text-background rounded-2xl px-3 py-1.5 text-xs;
|
||||
}
|
||||
|
||||
[data-tooltip][data-arrow]::after {
|
||||
|
||||
@@ -1321,7 +1321,7 @@
|
||||
|
||||
/* Tooltip */
|
||||
[data-tooltip]::before {
|
||||
@apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-sm;
|
||||
@apply bg-foreground text-background rounded-md px-3 py-1.5 text-xs;
|
||||
}
|
||||
|
||||
[data-tooltip][data-arrow]::after {
|
||||
|
||||
@@ -1335,7 +1335,7 @@
|
||||
|
||||
/* Tooltip */
|
||||
[data-tooltip]::before {
|
||||
@apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-sm;
|
||||
@apply bg-foreground text-background rounded-md px-3 py-1.5 text-xs;
|
||||
}
|
||||
|
||||
[data-tooltip][data-arrow]::after {
|
||||
|
||||
@@ -1329,7 +1329,7 @@
|
||||
|
||||
/* Tooltip */
|
||||
[data-tooltip]::before {
|
||||
@apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-lg;
|
||||
@apply bg-foreground text-background rounded-xl px-3 py-1.5 text-xs;
|
||||
}
|
||||
|
||||
[data-tooltip][data-arrow]::after {
|
||||
|
||||
@@ -1345,7 +1345,7 @@
|
||||
|
||||
/* Tooltip */
|
||||
[data-tooltip]::before {
|
||||
@apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-none px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-none;
|
||||
@apply bg-foreground text-background rounded-none px-3 py-1.5 text-xs;
|
||||
}
|
||||
|
||||
[data-tooltip][data-arrow]::after {
|
||||
|
||||
@@ -1334,7 +1334,7 @@
|
||||
|
||||
/* Tooltip */
|
||||
[data-tooltip]::before {
|
||||
@apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-sm;
|
||||
@apply bg-foreground text-background rounded-md px-3 py-1.5 text-xs;
|
||||
}
|
||||
|
||||
[data-tooltip][data-arrow]::after {
|
||||
|
||||
+5
-1
@@ -390,7 +390,11 @@
|
||||
}
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
root.close(true);
|
||||
if (isOpen) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
root.close(true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user