Skip to content

[6.x] Remove mb-1.5 when no visible content in a Label#14710

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
martyf wants to merge 2 commits into from
Closed

[6.x] Remove mb-1.5 when no visible content in a Label #14710

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
646c6ee
Remove `mb-1.5` when no visible content
martyf May 22, 2026
0e8943f
Fix extra spacing on fields with hidden display
jaygeorge May 29, 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
17 changes: 15 additions & 2 deletions resources/js/components/ui/Field.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
<script setup>
import { cva } from 'cva';
import { computed } from 'vue';
import { computed, useSlots } from 'vue';
import Description from './Description.vue';
import Label from './Label.vue';
import ErrorMessage from './ErrorMessage.vue';
Expand All@@ -11,6 +11,8 @@ defineOptions({
inheritAttrs: false,
});

const slots = useSlots();

const props = defineProps({
/** When `true`, the field is styled as a configuration field with a two-column grid layout. */
inline: { type: Boolean, default: false },
Expand All@@ -30,13 +32,16 @@ const props = defineProps({
instructionsBelow: { type: Boolean, default: false },
/** Label text for the field. */
label: { type: String },
/** When `true`, the display label is hidden (e.g. visually hidden for accessibility only). */
hideDisplay: { type: Boolean, default: false },
readOnly: { type: Boolean, default: false },
required: { type: Boolean, default: false },
});

const labelProps = computed(() => ({
badge: props.badge,
for: props.id,
hideDisplay: props.hideDisplay,
required: props.required,
text: props.label,
}));
Expand DownExpand Up@@ -92,6 +97,14 @@ const hasErrors = computed(() => {
if (!errors.value) return false;
return Array.isArray(errors.value) ? errors.value.length > 0 : Object.keys(errors.value).length > 0;
});

const hasVisibleLabel = computed(() => {
if (props.hideDisplay) {
return false;
}

return !!slots.label || !!props.label?.trim() || props.required;
});
</script>

<template>
Expand All@@ -113,7 +126,7 @@ const hasErrors = computed(() => {
<div
v-if="(!$slots.actions && (label || (instructions && !instructionsBelow) || $slots.label)) || ($slots.actions && instructions && !instructionsBelow)"
data-ui-field-text
:class="inline ? 'mb-0' : 'mb-2'"
:class="inline ? 'mb-0' : hasVisibleLabel ? 'mb-2' : undefined"
>
<slot v-if="!$slots.actions" name="label">
<Label v-if="label" v-bind="labelProps" class="flex-1" />
Expand Down
15 changes: 13 additions & 2 deletions resources/js/components/ui/Label.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
<script setup>
import { useSlots } from 'vue';
import { computed, useSlots } from 'vue';
import Badge from './Badge.vue';

const slots = useSlots();
Expand All@@ -10,15 +10,26 @@ const props = defineProps({
for: { type: String, default: null },
/** Optional badge text to display on the right side of the label */
badge: { type: String, default: '' },
/** When `true`, the display label is hidden (e.g. visually hidden for accessibility only). */
hideDisplay: { type: Boolean, default: false },
required: { type: Boolean, default: false },
/** The label text to display */
text: { type: [String, Number, Boolean, null], default: null },
});

const hasVisibleLabel = computed(() => {
if (props.hideDisplay) {
return false;
}

return hasDefaultSlot || !!props.text?.trim() || props.required;
});
</script>

<template>
<label
class="flex justify-between mb-1.5 text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
class="flex justify-between text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
:class="{ 'mb-1.5': hasVisibleLabel }"
data-ui-label
:for="for"
>
Expand Down
3 changes: 2 additions & 1 deletion resources/js/components/ui/Publish/Field.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -239,10 +239,11 @@ const fieldtypeComponentEvents = computed(() => ({
:read-only="isReadOnly"
:inline="asConfig"
:full-width-setting="config.full_width_setting"
:hide-display="config.hide_display"
v-bind="$attrs"
>
<template #label v-if="shouldShowLabel">
<Label :for="fieldId" :required="isRequired" class="relative">
<Label :for="fieldId" :required="isRequired" :hide-display="config.hide_display" class="relative">
<Transition name="lock-avatar-pop" mode="out-in">
<Avatar
v-if="isLocked"
Expand Down
22 changes: 22 additions & 0 deletions resources/js/stories/Label.stories.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -104,3 +104,25 @@ export const _WithSlot: Story = {
template: withSlotCode,
}),
};

const hideDisplayCode = `
<Field hide-display>
<Label for="section" hide-display>
<span class="sr-only">Section</span>
</Label>
<Input id="section" placeholder="Content…" />
</Field>
`;

export const _HideDisplay: Story = {
tags: ['!dev'],
parameters: {
docs: {
source: { code: hideDisplayCode }
}
},
render: () => ({
components: { Label, Input, Field },
template: hideDisplayCode,
}),
};
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
[6.x] Remove `mb-1.5` when no visible content in a Label by martyf · Pull Request #14710 · statamic/cms · GitHub
Skip to content
[6.x] Remove mb-1.5 when no visible content in a Label#14710

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

martyf
wants to merge
2
commits into

from

 Closed


[6.x] Remove mb-1.5 when no visible content in a Label
#14710
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
646c6ee

Remove `mb-1.5` when no visible content


martyf May 22, 2026
0e8943f

Fix extra spacing on fields with hidden display


jaygeorge May 29, 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


17 changes: 15 additions & 2 deletions
resources/js/components/ui/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
<script setup>
import { cva } from 'cva';
import { computed } from 'vue';
import { computed, useSlots } from 'vue';
import Description from './Description.vue';
import Label from './Label.vue';
import ErrorMessage from './ErrorMessage.vue';
Expand All@@ -11,6 +11,8 @@ defineOptions({
 inheritAttrs: false,
});

const slots = useSlots();

const props = defineProps({
 /** When `true`, the field is styled as a configuration field with a two-column grid layout. */
 inline: { type: Boolean, default: false },
Expand All@@ -30,13 +32,16 @@ const props = defineProps({
 instructionsBelow: { type: Boolean, default: false },
 /** Label text for the field. */
 label: { type: String },
 /** When `true`, the display label is hidden (e.g. visually hidden for accessibility only). */
 hideDisplay: { type: Boolean, default: false },
 readOnly: { type: Boolean, default: false },
 required: { type: Boolean, default: false },
});

const labelProps = computed(() => ({
 badge: props.badge,
 for: props.id,
 hideDisplay: props.hideDisplay,
 required: props.required,
 text: props.label,
}));
Expand DownExpand Up@@ -92,6 +97,14 @@ const hasErrors = computed(() => {
 if (!errors.value) return false;
 return Array.isArray(errors.value) ? errors.value.length > 0 : Object.keys(errors.value).length > 0;
});

const hasVisibleLabel = computed(() => {
 if (props.hideDisplay) {
 return false;
 }

 return !!slots.label || !!props.label?.trim() || props.required;
});
</script>

<template>
Expand All@@ -113,7 +126,7 @@ const hasErrors = computed(() => {
 <div
 v-if="(!$slots.actions && (label || (instructions && !instructionsBelow) || $slots.label)) || ($slots.actions && instructions && !instructionsBelow)"
 data-ui-field-text
 :class="inline ? 'mb-0' : 'mb-2'"
 :class="inline ? 'mb-0' : hasVisibleLabel ? 'mb-2' : undefined"
 >
 <slot v-if="!$slots.actions" name="label">
 <Label v-if="label" v-bind="labelProps" class="flex-1" />
Expand Down

15 changes: 13 additions & 2 deletions
resources/js/components/ui/Label.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
<script setup>
import { useSlots } from 'vue';
import { computed, useSlots } from 'vue';
import Badge from './Badge.vue';

const slots = useSlots();
Expand All@@ -10,15 +10,26 @@ const props = defineProps({
 for: { type: String, default: null },
 /** Optional badge text to display on the right side of the label */
 badge: { type: String, default: '' },
 /** When `true`, the display label is hidden (e.g. visually hidden for accessibility only). */
 hideDisplay: { type: Boolean, default: false },
 required: { type: Boolean, default: false },
 /** The label text to display */
 text: { type: [String, Number, Boolean, null], default: null },
});

const hasVisibleLabel = computed(() => {
 if (props.hideDisplay) {
 return false;
 }

 return hasDefaultSlot || !!props.text?.trim() || props.required;
});
</script>

<template>
 <label
 class="flex justify-between mb-1.5 text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
 class="flex justify-between text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
 :class="{ 'mb-1.5': hasVisibleLabel }"
 data-ui-label
 :for="for"
 >
Expand Down

3 changes: 2 additions & 1 deletion
resources/js/components/ui/Publish/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -239,10 +239,11 @@ const fieldtypeComponentEvents = computed(() => ({
 :read-only="isReadOnly"
 :inline="asConfig"
 :full-width-setting="config.full_width_setting"
 :hide-display="config.hide_display"
 v-bind="$attrs"
 >
 <template #label v-if="shouldShowLabel">
 <Label :for="fieldId" :required="isRequired" class="relative">
 <Label :for="fieldId" :required="isRequired" :hide-display="config.hide_display" class="relative">
 <Transition name="lock-avatar-pop" mode="out-in">
 <Avatar
 v-if="isLocked"
Expand Down

22 changes: 22 additions & 0 deletions
resources/js/stories/Label.stories.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -104,3 +104,25 @@ export const _WithSlot: Story = {
 template: withSlotCode,
 }),
};

const hideDisplayCode = `
<Field hide-display>
 <Label for="section" hide-display>
 <span class="sr-only">Section</span>
 </Label>
 <Input id="section" placeholder="Content…" />
</Field>
`;

export const _HideDisplay: Story = {
 tags: ['!dev'],
 parameters: {
 docs: {
 source: { code: hideDisplayCode }
 }
 },
 render: () => ({
 components: { Label, Input, Field },
 template: hideDisplayCode,
 }),
};
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[6.x] Remove `mb-1.5` when no visible content in a Label by martyf · Pull Request #14710 · statamic/cms · GitHub
Skip to content
[6.x] Remove mb-1.5 when no visible content in a Label#14710

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

martyf
wants to merge
2
commits into

from

 Closed


[6.x] Remove mb-1.5 when no visible content in a Label
#14710
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
646c6ee

Remove `mb-1.5` when no visible content


martyf May 22, 2026
0e8943f

Fix extra spacing on fields with hidden display


jaygeorge May 29, 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


17 changes: 15 additions & 2 deletions
resources/js/components/ui/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
<script setup>
import { cva } from 'cva';
import { computed } from 'vue';
import { computed, useSlots } from 'vue';
import Description from './Description.vue';
import Label from './Label.vue';
import ErrorMessage from './ErrorMessage.vue';
Expand All@@ -11,6 +11,8 @@ defineOptions({
 inheritAttrs: false,
});

const slots = useSlots();

const props = defineProps({
 /** When `true`, the field is styled as a configuration field with a two-column grid layout. */
 inline: { type: Boolean, default: false },
Expand All@@ -30,13 +32,16 @@ const props = defineProps({
 instructionsBelow: { type: Boolean, default: false },
 /** Label text for the field. */
 label: { type: String },
 /** When `true`, the display label is hidden (e.g. visually hidden for accessibility only). */
 hideDisplay: { type: Boolean, default: false },
 readOnly: { type: Boolean, default: false },
 required: { type: Boolean, default: false },
});

const labelProps = computed(() => ({
 badge: props.badge,
 for: props.id,
 hideDisplay: props.hideDisplay,
 required: props.required,
 text: props.label,
}));
Expand DownExpand Up@@ -92,6 +97,14 @@ const hasErrors = computed(() => {
 if (!errors.value) return false;
 return Array.isArray(errors.value) ? errors.value.length > 0 : Object.keys(errors.value).length > 0;
});

const hasVisibleLabel = computed(() => {
 if (props.hideDisplay) {
 return false;
 }

 return !!slots.label || !!props.label?.trim() || props.required;
});
</script>

<template>
Expand All@@ -113,7 +126,7 @@ const hasErrors = computed(() => {
 <div
 v-if="(!$slots.actions && (label || (instructions && !instructionsBelow) || $slots.label)) || ($slots.actions && instructions && !instructionsBelow)"
 data-ui-field-text
 :class="inline ? 'mb-0' : 'mb-2'"
 :class="inline ? 'mb-0' : hasVisibleLabel ? 'mb-2' : undefined"
 >
 <slot v-if="!$slots.actions" name="label">
 <Label v-if="label" v-bind="labelProps" class="flex-1" />
Expand Down

15 changes: 13 additions & 2 deletions
resources/js/components/ui/Label.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
<script setup>
import { useSlots } from 'vue';
import { computed, useSlots } from 'vue';
import Badge from './Badge.vue';

const slots = useSlots();
Expand All@@ -10,15 +10,26 @@ const props = defineProps({
 for: { type: String, default: null },
 /** Optional badge text to display on the right side of the label */
 badge: { type: String, default: '' },
 /** When `true`, the display label is hidden (e.g. visually hidden for accessibility only). */
 hideDisplay: { type: Boolean, default: false },
 required: { type: Boolean, default: false },
 /** The label text to display */
 text: { type: [String, Number, Boolean, null], default: null },
});

const hasVisibleLabel = computed(() => {
 if (props.hideDisplay) {
 return false;
 }

 return hasDefaultSlot || !!props.text?.trim() || props.required;
});
</script>

<template>
 <label
 class="flex justify-between mb-1.5 text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
 class="flex justify-between text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
 :class="{ 'mb-1.5': hasVisibleLabel }"
 data-ui-label
 :for="for"
 >
Expand Down

3 changes: 2 additions & 1 deletion
resources/js/components/ui/Publish/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -239,10 +239,11 @@ const fieldtypeComponentEvents = computed(() => ({
 :read-only="isReadOnly"
 :inline="asConfig"
 :full-width-setting="config.full_width_setting"
 :hide-display="config.hide_display"
 v-bind="$attrs"
 >
 <template #label v-if="shouldShowLabel">
 <Label :for="fieldId" :required="isRequired" class="relative">
 <Label :for="fieldId" :required="isRequired" :hide-display="config.hide_display" class="relative">
 <Transition name="lock-avatar-pop" mode="out-in">
 <Avatar
 v-if="isLocked"
Expand Down

22 changes: 22 additions & 0 deletions
resources/js/stories/Label.stories.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -104,3 +104,25 @@ export const _WithSlot: Story = {
 template: withSlotCode,
 }),
};

const hideDisplayCode = `
<Field hide-display>
 <Label for="section" hide-display>
 <span class="sr-only">Section</span>
 </Label>
 <Input id="section" placeholder="Content…" />
</Field>
`;

export const _HideDisplay: Story = {
 tags: ['!dev'],
 parameters: {
 docs: {
 source: { code: hideDisplayCode }
 }
 },
 render: () => ({
 components: { Label, Input, Field },
 template: hideDisplayCode,
 }),
};
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[6.x] Remove `mb-1.5` when no visible content in a Label by martyf · Pull Request #14710 · statamic/cms · GitHub
Skip to content
[6.x] Remove mb-1.5 when no visible content in a Label#14710

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

martyf
wants to merge
2
commits into

from

 Closed


[6.x] Remove mb-1.5 when no visible content in a Label
#14710
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
646c6ee

Remove `mb-1.5` when no visible content


martyf May 22, 2026
0e8943f

Fix extra spacing on fields with hidden display


jaygeorge May 29, 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


17 changes: 15 additions & 2 deletions
resources/js/components/ui/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
<script setup>
import { cva } from 'cva';
import { computed } from 'vue';
import { computed, useSlots } from 'vue';
import Description from './Description.vue';
import Label from './Label.vue';
import ErrorMessage from './ErrorMessage.vue';
Expand All@@ -11,6 +11,8 @@ defineOptions({
 inheritAttrs: false,
});

const slots = useSlots();

const props = defineProps({
 /** When `true`, the field is styled as a configuration field with a two-column grid layout. */
 inline: { type: Boolean, default: false },
Expand All@@ -30,13 +32,16 @@ const props = defineProps({
 instructionsBelow: { type: Boolean, default: false },
 /** Label text for the field. */
 label: { type: String },
 /** When `true`, the display label is hidden (e.g. visually hidden for accessibility only). */
 hideDisplay: { type: Boolean, default: false },
 readOnly: { type: Boolean, default: false },
 required: { type: Boolean, default: false },
});

const labelProps = computed(() => ({
 badge: props.badge,
 for: props.id,
 hideDisplay: props.hideDisplay,
 required: props.required,
 text: props.label,
}));
Expand DownExpand Up@@ -92,6 +97,14 @@ const hasErrors = computed(() => {
 if (!errors.value) return false;
 return Array.isArray(errors.value) ? errors.value.length > 0 : Object.keys(errors.value).length > 0;
});

const hasVisibleLabel = computed(() => {
 if (props.hideDisplay) {
 return false;
 }

 return !!slots.label || !!props.label?.trim() || props.required;
});
</script>

<template>
Expand All@@ -113,7 +126,7 @@ const hasErrors = computed(() => {
 <div
 v-if="(!$slots.actions && (label || (instructions && !instructionsBelow) || $slots.label)) || ($slots.actions && instructions && !instructionsBelow)"
 data-ui-field-text
 :class="inline ? 'mb-0' : 'mb-2'"
 :class="inline ? 'mb-0' : hasVisibleLabel ? 'mb-2' : undefined"
 >
 <slot v-if="!$slots.actions" name="label">
 <Label v-if="label" v-bind="labelProps" class="flex-1" />
Expand Down

15 changes: 13 additions & 2 deletions
resources/js/components/ui/Label.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
<script setup>
import { useSlots } from 'vue';
import { computed, useSlots } from 'vue';
import Badge from './Badge.vue';

const slots = useSlots();
Expand All@@ -10,15 +10,26 @@ const props = defineProps({
 for: { type: String, default: null },
 /** Optional badge text to display on the right side of the label */
 badge: { type: String, default: '' },
 /** When `true`, the display label is hidden (e.g. visually hidden for accessibility only). */
 hideDisplay: { type: Boolean, default: false },
 required: { type: Boolean, default: false },
 /** The label text to display */
 text: { type: [String, Number, Boolean, null], default: null },
});

const hasVisibleLabel = computed(() => {
 if (props.hideDisplay) {
 return false;
 }

 return hasDefaultSlot || !!props.text?.trim() || props.required;
});
</script>

<template>
 <label
 class="flex justify-between mb-1.5 text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
 class="flex justify-between text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
 :class="{ 'mb-1.5': hasVisibleLabel }"
 data-ui-label
 :for="for"
 >
Expand Down

3 changes: 2 additions & 1 deletion
resources/js/components/ui/Publish/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -239,10 +239,11 @@ const fieldtypeComponentEvents = computed(() => ({
 :read-only="isReadOnly"
 :inline="asConfig"
 :full-width-setting="config.full_width_setting"
 :hide-display="config.hide_display"
 v-bind="$attrs"
 >
 <template #label v-if="shouldShowLabel">
 <Label :for="fieldId" :required="isRequired" class="relative">
 <Label :for="fieldId" :required="isRequired" :hide-display="config.hide_display" class="relative">
 <Transition name="lock-avatar-pop" mode="out-in">
 <Avatar
 v-if="isLocked"
Expand Down

22 changes: 22 additions & 0 deletions
resources/js/stories/Label.stories.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -104,3 +104,25 @@ export const _WithSlot: Story = {
 template: withSlotCode,
 }),
};

const hideDisplayCode = `
<Field hide-display>
 <Label for="section" hide-display>
 <span class="sr-only">Section</span>
 </Label>
 <Input id="section" placeholder="Content…" />
</Field>
`;

export const _HideDisplay: Story = {
 tags: ['!dev'],
 parameters: {
 docs: {
 source: { code: hideDisplayCode }
 }
 },
 render: () => ({
 components: { Label, Input, Field },
 template: hideDisplayCode,
 }),
};
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
[6.x] Remove `mb-1.5` when no visible content in a Label by martyf · Pull Request #14710 · statamic/cms · GitHub
Skip to content
[6.x] Remove mb-1.5 when no visible content in a Label#14710

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

martyf
wants to merge
2
commits into

from

 Closed


[6.x] Remove mb-1.5 when no visible content in a Label
#14710
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
646c6ee

Remove `mb-1.5` when no visible content


martyf May 22, 2026
0e8943f

Fix extra spacing on fields with hidden display


jaygeorge May 29, 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


17 changes: 15 additions & 2 deletions
resources/js/components/ui/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
<script setup>
import { cva } from 'cva';
import { computed } from 'vue';
import { computed, useSlots } from 'vue';
import Description from './Description.vue';
import Label from './Label.vue';
import ErrorMessage from './ErrorMessage.vue';
Expand All@@ -11,6 +11,8 @@ defineOptions({
 inheritAttrs: false,
});

const slots = useSlots();

const props = defineProps({
 /** When `true`, the field is styled as a configuration field with a two-column grid layout. */
 inline: { type: Boolean, default: false },
Expand All@@ -30,13 +32,16 @@ const props = defineProps({
 instructionsBelow: { type: Boolean, default: false },
 /** Label text for the field. */
 label: { type: String },
 /** When `true`, the display label is hidden (e.g. visually hidden for accessibility only). */
 hideDisplay: { type: Boolean, default: false },
 readOnly: { type: Boolean, default: false },
 required: { type: Boolean, default: false },
});

const labelProps = computed(() => ({
 badge: props.badge,
 for: props.id,
 hideDisplay: props.hideDisplay,
 required: props.required,
 text: props.label,
}));
Expand DownExpand Up@@ -92,6 +97,14 @@ const hasErrors = computed(() => {
 if (!errors.value) return false;
 return Array.isArray(errors.value) ? errors.value.length > 0 : Object.keys(errors.value).length > 0;
});

const hasVisibleLabel = computed(() => {
 if (props.hideDisplay) {
 return false;
 }

 return !!slots.label || !!props.label?.trim() || props.required;
});
</script>

<template>
Expand All@@ -113,7 +126,7 @@ const hasErrors = computed(() => {
 <div
 v-if="(!$slots.actions && (label || (instructions && !instructionsBelow) || $slots.label)) || ($slots.actions && instructions && !instructionsBelow)"
 data-ui-field-text
 :class="inline ? 'mb-0' : 'mb-2'"
 :class="inline ? 'mb-0' : hasVisibleLabel ? 'mb-2' : undefined"
 >
 <slot v-if="!$slots.actions" name="label">
 <Label v-if="label" v-bind="labelProps" class="flex-1" />
Expand Down

15 changes: 13 additions & 2 deletions
resources/js/components/ui/Label.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
<script setup>
import { useSlots } from 'vue';
import { computed, useSlots } from 'vue';
import Badge from './Badge.vue';

const slots = useSlots();
Expand All@@ -10,15 +10,26 @@ const props = defineProps({
 for: { type: String, default: null },
 /** Optional badge text to display on the right side of the label */
 badge: { type: String, default: '' },
 /** When `true`, the display label is hidden (e.g. visually hidden for accessibility only). */
 hideDisplay: { type: Boolean, default: false },
 required: { type: Boolean, default: false },
 /** The label text to display */
 text: { type: [String, Number, Boolean, null], default: null },
});

const hasVisibleLabel = computed(() => {
 if (props.hideDisplay) {
 return false;
 }

 return hasDefaultSlot || !!props.text?.trim() || props.required;
});
</script>

<template>
 <label
 class="flex justify-between mb-1.5 text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
 class="flex justify-between text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
 :class="{ 'mb-1.5': hasVisibleLabel }"
 data-ui-label
 :for="for"
 >
Expand Down

3 changes: 2 additions & 1 deletion
resources/js/components/ui/Publish/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -239,10 +239,11 @@ const fieldtypeComponentEvents = computed(() => ({
 :read-only="isReadOnly"
 :inline="asConfig"
 :full-width-setting="config.full_width_setting"
 :hide-display="config.hide_display"
 v-bind="$attrs"
 >
 <template #label v-if="shouldShowLabel">
 <Label :for="fieldId" :required="isRequired" class="relative">
 <Label :for="fieldId" :required="isRequired" :hide-display="config.hide_display" class="relative">
 <Transition name="lock-avatar-pop" mode="out-in">
 <Avatar
 v-if="isLocked"
Expand Down

22 changes: 22 additions & 0 deletions
resources/js/stories/Label.stories.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -104,3 +104,25 @@ export const _WithSlot: Story = {
 template: withSlotCode,
 }),
};

const hideDisplayCode = `
<Field hide-display>
 <Label for="section" hide-display>
 <span class="sr-only">Section</span>
 </Label>
 <Input id="section" placeholder="Content…" />
</Field>
`;

export const _HideDisplay: Story = {
 tags: ['!dev'],
 parameters: {
 docs: {
 source: { code: hideDisplayCode }
 }
 },
 render: () => ({
 components: { Label, Input, Field },
 template: hideDisplayCode,
 }),
};
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[6.x] Remove `mb-1.5` when no visible content in a Label by martyf · Pull Request #14710 · statamic/cms · GitHub
Skip to content
[6.x] Remove mb-1.5 when no visible content in a Label#14710

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

martyf
wants to merge
2
commits into

from

 Closed


[6.x] Remove mb-1.5 when no visible content in a Label
#14710
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
646c6ee

Remove `mb-1.5` when no visible content


martyf May 22, 2026
0e8943f

Fix extra spacing on fields with hidden display


jaygeorge May 29, 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


17 changes: 15 additions & 2 deletions
resources/js/components/ui/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
<script setup>
import { cva } from 'cva';
import { computed } from 'vue';
import { computed, useSlots } from 'vue';
import Description from './Description.vue';
import Label from './Label.vue';
import ErrorMessage from './ErrorMessage.vue';
Expand All@@ -11,6 +11,8 @@ defineOptions({
 inheritAttrs: false,
});

const slots = useSlots();

const props = defineProps({
 /** When `true`, the field is styled as a configuration field with a two-column grid layout. */
 inline: { type: Boolean, default: false },
Expand All@@ -30,13 +32,16 @@ const props = defineProps({
 instructionsBelow: { type: Boolean, default: false },
 /** Label text for the field. */
 label: { type: String },
 /** When `true`, the display label is hidden (e.g. visually hidden for accessibility only). */
 hideDisplay: { type: Boolean, default: false },
 readOnly: { type: Boolean, default: false },
 required: { type: Boolean, default: false },
});

const labelProps = computed(() => ({
 badge: props.badge,
 for: props.id,
 hideDisplay: props.hideDisplay,
 required: props.required,
 text: props.label,
}));
Expand DownExpand Up@@ -92,6 +97,14 @@ const hasErrors = computed(() => {
 if (!errors.value) return false;
 return Array.isArray(errors.value) ? errors.value.length > 0 : Object.keys(errors.value).length > 0;
});

const hasVisibleLabel = computed(() => {
 if (props.hideDisplay) {
 return false;
 }

 return !!slots.label || !!props.label?.trim() || props.required;
});
</script>

<template>
Expand All@@ -113,7 +126,7 @@ const hasErrors = computed(() => {
 <div
 v-if="(!$slots.actions && (label || (instructions && !instructionsBelow) || $slots.label)) || ($slots.actions && instructions && !instructionsBelow)"
 data-ui-field-text
 :class="inline ? 'mb-0' : 'mb-2'"
 :class="inline ? 'mb-0' : hasVisibleLabel ? 'mb-2' : undefined"
 >
 <slot v-if="!$slots.actions" name="label">
 <Label v-if="label" v-bind="labelProps" class="flex-1" />
Expand Down

15 changes: 13 additions & 2 deletions
resources/js/components/ui/Label.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
<script setup>
import { useSlots } from 'vue';
import { computed, useSlots } from 'vue';
import Badge from './Badge.vue';

const slots = useSlots();
Expand All@@ -10,15 +10,26 @@ const props = defineProps({
 for: { type: String, default: null },
 /** Optional badge text to display on the right side of the label */
 badge: { type: String, default: '' },
 /** When `true`, the display label is hidden (e.g. visually hidden for accessibility only). */
 hideDisplay: { type: Boolean, default: false },
 required: { type: Boolean, default: false },
 /** The label text to display */
 text: { type: [String, Number, Boolean, null], default: null },
});

const hasVisibleLabel = computed(() => {
 if (props.hideDisplay) {
 return false;
 }

 return hasDefaultSlot || !!props.text?.trim() || props.required;
});
</script>

<template>
 <label
 class="flex justify-between mb-1.5 text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
 class="flex justify-between text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
 :class="{ 'mb-1.5': hasVisibleLabel }"
 data-ui-label
 :for="for"
 >
Expand Down

3 changes: 2 additions & 1 deletion
resources/js/components/ui/Publish/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -239,10 +239,11 @@ const fieldtypeComponentEvents = computed(() => ({
 :read-only="isReadOnly"
 :inline="asConfig"
 :full-width-setting="config.full_width_setting"
 :hide-display="config.hide_display"
 v-bind="$attrs"
 >
 <template #label v-if="shouldShowLabel">
 <Label :for="fieldId" :required="isRequired" class="relative">
 <Label :for="fieldId" :required="isRequired" :hide-display="config.hide_display" class="relative">
 <Transition name="lock-avatar-pop" mode="out-in">
 <Avatar
 v-if="isLocked"
Expand Down

22 changes: 22 additions & 0 deletions
resources/js/stories/Label.stories.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -104,3 +104,25 @@ export const _WithSlot: Story = {
 template: withSlotCode,
 }),
};

const hideDisplayCode = `
<Field hide-display>
 <Label for="section" hide-display>
 <span class="sr-only">Section</span>
 </Label>
 <Input id="section" placeholder="Content…" />
</Field>
`;

export const _HideDisplay: Story = {
 tags: ['!dev'],
 parameters: {
 docs: {
 source: { code: hideDisplayCode }
 }
 },
 render: () => ({
 components: { Label, Input, Field },
 template: hideDisplayCode,
 }),
};
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[6.x] Remove `mb-1.5` when no visible content in a Label by martyf · Pull Request #14710 · statamic/cms · GitHub
Skip to content
[6.x] Remove mb-1.5 when no visible content in a Label#14710

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

martyf
wants to merge
2
commits into

from

 Closed


[6.x] Remove mb-1.5 when no visible content in a Label
#14710
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
646c6ee

Remove `mb-1.5` when no visible content


martyf May 22, 2026
0e8943f

Fix extra spacing on fields with hidden display


jaygeorge May 29, 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


17 changes: 15 additions & 2 deletions
resources/js/components/ui/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
<script setup>
import { cva } from 'cva';
import { computed } from 'vue';
import { computed, useSlots } from 'vue';
import Description from './Description.vue';
import Label from './Label.vue';
import ErrorMessage from './ErrorMessage.vue';
Expand All@@ -11,6 +11,8 @@ defineOptions({
 inheritAttrs: false,
});

const slots = useSlots();

const props = defineProps({
 /** When `true`, the field is styled as a configuration field with a two-column grid layout. */
 inline: { type: Boolean, default: false },
Expand All@@ -30,13 +32,16 @@ const props = defineProps({
 instructionsBelow: { type: Boolean, default: false },
 /** Label text for the field. */
 label: { type: String },
 /** When `true`, the display label is hidden (e.g. visually hidden for accessibility only). */
 hideDisplay: { type: Boolean, default: false },
 readOnly: { type: Boolean, default: false },
 required: { type: Boolean, default: false },
});

const labelProps = computed(() => ({
 badge: props.badge,
 for: props.id,
 hideDisplay: props.hideDisplay,
 required: props.required,
 text: props.label,
}));
Expand DownExpand Up@@ -92,6 +97,14 @@ const hasErrors = computed(() => {
 if (!errors.value) return false;
 return Array.isArray(errors.value) ? errors.value.length > 0 : Object.keys(errors.value).length > 0;
});

const hasVisibleLabel = computed(() => {
 if (props.hideDisplay) {
 return false;
 }

 return !!slots.label || !!props.label?.trim() || props.required;
});
</script>

<template>
Expand All@@ -113,7 +126,7 @@ const hasErrors = computed(() => {
 <div
 v-if="(!$slots.actions && (label || (instructions && !instructionsBelow) || $slots.label)) || ($slots.actions && instructions && !instructionsBelow)"
 data-ui-field-text
 :class="inline ? 'mb-0' : 'mb-2'"
 :class="inline ? 'mb-0' : hasVisibleLabel ? 'mb-2' : undefined"
 >
 <slot v-if="!$slots.actions" name="label">
 <Label v-if="label" v-bind="labelProps" class="flex-1" />
Expand Down

15 changes: 13 additions & 2 deletions
resources/js/components/ui/Label.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
<script setup>
import { useSlots } from 'vue';
import { computed, useSlots } from 'vue';
import Badge from './Badge.vue';

const slots = useSlots();
Expand All@@ -10,15 +10,26 @@ const props = defineProps({
 for: { type: String, default: null },
 /** Optional badge text to display on the right side of the label */
 badge: { type: String, default: '' },
 /** When `true`, the display label is hidden (e.g. visually hidden for accessibility only). */
 hideDisplay: { type: Boolean, default: false },
 required: { type: Boolean, default: false },
 /** The label text to display */
 text: { type: [String, Number, Boolean, null], default: null },
});

const hasVisibleLabel = computed(() => {
 if (props.hideDisplay) {
 return false;
 }

 return hasDefaultSlot || !!props.text?.trim() || props.required;
});
</script>

<template>
 <label
 class="flex justify-between mb-1.5 text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
 class="flex justify-between text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
 :class="{ 'mb-1.5': hasVisibleLabel }"
 data-ui-label
 :for="for"
 >
Expand Down

3 changes: 2 additions & 1 deletion
resources/js/components/ui/Publish/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -239,10 +239,11 @@ const fieldtypeComponentEvents = computed(() => ({
 :read-only="isReadOnly"
 :inline="asConfig"
 :full-width-setting="config.full_width_setting"
 :hide-display="config.hide_display"
 v-bind="$attrs"
 >
 <template #label v-if="shouldShowLabel">
 <Label :for="fieldId" :required="isRequired" class="relative">
 <Label :for="fieldId" :required="isRequired" :hide-display="config.hide_display" class="relative">
 <Transition name="lock-avatar-pop" mode="out-in">
 <Avatar
 v-if="isLocked"
Expand Down

22 changes: 22 additions & 0 deletions
resources/js/stories/Label.stories.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -104,3 +104,25 @@ export const _WithSlot: Story = {
 template: withSlotCode,
 }),
};

const hideDisplayCode = `
<Field hide-display>
 <Label for="section" hide-display>
 <span class="sr-only">Section</span>
 </Label>
 <Input id="section" placeholder="Content…" />
</Field>
`;

export const _HideDisplay: Story = {
 tags: ['!dev'],
 parameters: {
 docs: {
 source: { code: hideDisplayCode }
 }
 },
 render: () => ({
 components: { Label, Input, Field },
 template: hideDisplayCode,
 }),
};
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
[6.x] Remove `mb-1.5` when no visible content in a Label by martyf · Pull Request #14710 · statamic/cms · GitHub
Skip to content
[6.x] Remove mb-1.5 when no visible content in a Label#14710

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

martyf
wants to merge
2
commits into

from

 Closed


[6.x] Remove mb-1.5 when no visible content in a Label
#14710
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
646c6ee

Remove `mb-1.5` when no visible content


martyf May 22, 2026
0e8943f

Fix extra spacing on fields with hidden display


jaygeorge May 29, 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


17 changes: 15 additions & 2 deletions
resources/js/components/ui/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
<script setup>
import { cva } from 'cva';
import { computed } from 'vue';
import { computed, useSlots } from 'vue';
import Description from './Description.vue';
import Label from './Label.vue';
import ErrorMessage from './ErrorMessage.vue';
Expand All@@ -11,6 +11,8 @@ defineOptions({
 inheritAttrs: false,
});

const slots = useSlots();

const props = defineProps({
 /** When `true`, the field is styled as a configuration field with a two-column grid layout. */
 inline: { type: Boolean, default: false },
Expand All@@ -30,13 +32,16 @@ const props = defineProps({
 instructionsBelow: { type: Boolean, default: false },
 /** Label text for the field. */
 label: { type: String },
 /** When `true`, the display label is hidden (e.g. visually hidden for accessibility only). */
 hideDisplay: { type: Boolean, default: false },
 readOnly: { type: Boolean, default: false },
 required: { type: Boolean, default: false },
});

const labelProps = computed(() => ({
 badge: props.badge,
 for: props.id,
 hideDisplay: props.hideDisplay,
 required: props.required,
 text: props.label,
}));
Expand DownExpand Up@@ -92,6 +97,14 @@ const hasErrors = computed(() => {
 if (!errors.value) return false;
 return Array.isArray(errors.value) ? errors.value.length > 0 : Object.keys(errors.value).length > 0;
});

const hasVisibleLabel = computed(() => {
 if (props.hideDisplay) {
 return false;
 }

 return !!slots.label || !!props.label?.trim() || props.required;
});
</script>

<template>
Expand All@@ -113,7 +126,7 @@ const hasErrors = computed(() => {
 <div
 v-if="(!$slots.actions && (label || (instructions && !instructionsBelow) || $slots.label)) || ($slots.actions && instructions && !instructionsBelow)"
 data-ui-field-text
 :class="inline ? 'mb-0' : 'mb-2'"
 :class="inline ? 'mb-0' : hasVisibleLabel ? 'mb-2' : undefined"
 >
 <slot v-if="!$slots.actions" name="label">
 <Label v-if="label" v-bind="labelProps" class="flex-1" />
Expand Down

15 changes: 13 additions & 2 deletions
resources/js/components/ui/Label.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
<script setup>
import { useSlots } from 'vue';
import { computed, useSlots } from 'vue';
import Badge from './Badge.vue';

const slots = useSlots();
Expand All@@ -10,15 +10,26 @@ const props = defineProps({
 for: { type: String, default: null },
 /** Optional badge text to display on the right side of the label */
 badge: { type: String, default: '' },
 /** When `true`, the display label is hidden (e.g. visually hidden for accessibility only). */
 hideDisplay: { type: Boolean, default: false },
 required: { type: Boolean, default: false },
 /** The label text to display */
 text: { type: [String, Number, Boolean, null], default: null },
});

const hasVisibleLabel = computed(() => {
 if (props.hideDisplay) {
 return false;
 }

 return hasDefaultSlot || !!props.text?.trim() || props.required;
});
</script>

<template>
 <label
 class="flex justify-between mb-1.5 text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
 class="flex justify-between text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
 :class="{ 'mb-1.5': hasVisibleLabel }"
 data-ui-label
 :for="for"
 >
Expand Down

3 changes: 2 additions & 1 deletion
resources/js/components/ui/Publish/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -239,10 +239,11 @@ const fieldtypeComponentEvents = computed(() => ({
 :read-only="isReadOnly"
 :inline="asConfig"
 :full-width-setting="config.full_width_setting"
 :hide-display="config.hide_display"
 v-bind="$attrs"
 >
 <template #label v-if="shouldShowLabel">
 <Label :for="fieldId" :required="isRequired" class="relative">
 <Label :for="fieldId" :required="isRequired" :hide-display="config.hide_display" class="relative">
 <Transition name="lock-avatar-pop" mode="out-in">
 <Avatar
 v-if="isLocked"
Expand Down

22 changes: 22 additions & 0 deletions
resources/js/stories/Label.stories.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -104,3 +104,25 @@ export const _WithSlot: Story = {
 template: withSlotCode,
 }),
};

const hideDisplayCode = `
<Field hide-display>
 <Label for="section" hide-display>
 <span class="sr-only">Section</span>
 </Label>
 <Input id="section" placeholder="Content…" />
</Field>
`;

export const _HideDisplay: Story = {
 tags: ['!dev'],
 parameters: {
 docs: {
 source: { code: hideDisplayCode }
 }
 },
 render: () => ({
 components: { Label, Input, Field },
 template: hideDisplayCode,
 }),
};
Loading