Skip to content

[6.x] Use resize observer for the floating toolbar #14171

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

Closed
jaygeorge wants to merge 2 commits into from
Closed

[6.x] Use resize observer for the floating toolbar #14171

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
36e5388
Use resize observer to detect changes in the floating toolbar rather …
jaygeorge Mar 9, 2026
d5278a3
Remove button group shadow when wrapped
jaygeorge Mar 9, 2026
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
59 changes: 50 additions & 9 deletions resources/js/components/ui/Button/Group.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,47 @@
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const groupEl = ref(null);
let resizeObserver = null;

function checkWrapping() {
const el = groupEl.value;
if (!el) return;

el.removeAttribute('data-wrapped');

const firstChild = el.firstElementChild;
const lastChild = el.lastElementChild;

if (firstChild && lastChild && firstChild !== lastChild && lastChild.offsetTop > firstChild.offsetTop) {
el.setAttribute('data-wrapped', '');
}
}

onMounted(() => {
resizeObserver = new ResizeObserver(checkWrapping);
if (groupEl.value) {
resizeObserver.observe(groupEl.value);
}
});

onBeforeUnmount(() => {
resizeObserver?.disconnect();
});
</script>

<template>
<div
ref="groupEl"
:class="[
'group/button inline-flex flex-wrap [[data-floating-toolbar]_&]:justify-center [[data-floating-toolbar]_&]:gap-1 [[data-floating-toolbar]_&]:lg:gap-x-0',
'group/button inline-flex flex-wrap [[data-floating-toolbar]_&]:justify-center',
'[&>[data-ui-group-target]:not(:first-child):not(:last-child)]:rounded-none',
'[&>[data-ui-group-target]:first-child:not(:last-child)]:rounded-e-none',
'[&>[data-ui-group-target]:last-child:not(:first-child)]:rounded-s-none',
'[&>*:not(:first-child):not(:last-child):not(:only-child)_[data-ui-group-target]]:rounded-none',
'[&>*:first-child:not(:last-child)_[data-ui-group-target]]:rounded-e-none',
'[&>*:last-child:not(:first-child)_[data-ui-group-target]]:rounded-s-none',
'dark:[&_button]:ring-0',
'max-lg:[[data-floating-toolbar]_&_button]:rounded-md!',
'shadow-ui-sm rounded-lg'
]"
data-ui-button-group
Expand All @@ -19,21 +51,30 @@
</template>

<style>
/* GROUP FLOATING TOOLBAR / BUTTON GROUP BORDERS
/* GROUP BUTTON GROUP BORDERS
=================================================== */
[data-ui-button-group] [data-ui-group-target] {
@apply shadow-none;

&:not(:first-child):not([data-floating-toolbar] &) {
border-inline-start: 0;
}
}
/* GROUP BUTTON GROUP BORDERS / FLOATING TOOLBAR
=================================================== */
[data-floating-toolbar] [data-ui-button-group] {
/* Connected look when not wrapped */
&:not([data-wrapped]) [data-ui-group-target]:not(:first-child) {
border-inline-start: 0;
}

/* Split buttons apart when wrapped */
&[data-wrapped] {
gap: 0.25rem;
box-shadow: none;

/* Account for button groups being split apart on small screens */
[data-floating-toolbar] & {
@media (width >= 1024px) {
&:not(:first-child) {
border-inline-start: 0;
}
button {
border-radius: 0.375rem !important;
}
}
}
Expand Down