Skip to content

[6.x] Add size prop to FieldsProvider and Textarea #12513

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
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

[6.x] Add size prop to FieldsProvider and Textarea #12513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9f82391
Add size option to fieldtypes
jacksleight Sep 17, 2025
3bc0a16
WIP
jacksleight Sep 19, 2025
a808bd4
WIP
jacksleight Sep 19, 2025
3ea8df8
Fix tests
jacksleight Sep 22, 2025
b8417cc
Make border radii consistent
jackmcdade Sep 23, 2025
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
4 changes: 2 additions & 2 deletions packages/ui/src/Input/Input.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ const inputClasses = computed(() => {
variants: {
size: {
base: 'text-base rounded-lg px-3 py-2 h-10 leading-[1.375rem]',
sm: 'text-sm rounded-md px-2.5 py-1.5 h-8 leading-[1.125rem]',
xs: 'text-xs rounded-xs px-2 py-1.5 h-6 leading-[1.125rem]',
sm: 'text-sm rounded-lg px-2.5 py-1.5 h-8 leading-[1.125rem]',
xs: 'text-xs rounded-md px-2 py-1.5 h-6 leading-[1.125rem]',
},
variant: {
default: '',
Expand Down
8 changes: 7 additions & 1 deletion packages/ui/src/Textarea.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,24 @@ const props = defineProps({
required: { type: Boolean, default: false },
resize: { type: String, default: 'vertical' },
rows: { type: [Number, String], default: 4 },
size: { type: String, default: 'base' },
modelValue: { type: String, default: null },
limit: { type: Number, default: null },
});

const classes = cva({
base: [
'w-full block bg-white dark:bg-gray-900 px-3 pt-2.5 pb-3 rounded-lg',
'w-full block bg-white dark:bg-gray-900',
'border border-gray-300 with-contrast:border-gray-500 dark:border-x-0 dark:border-t-0 dark:border-white/10 dark:inset-shadow-2xs dark:inset-shadow-black',
'text-gray-900 dark:text-gray-300',
'appearance-none antialiased shadow-ui-sm disabled:shadow-none read-only:border-dashed not-prose'
],
variants: {
size: {
base: 'text-base rounded-lg px-3 pt-2.5 pb-3',
sm: 'text-sm rounded-lg px-2.5 pt-1.5 pb-2',
xs: 'text-xs rounded-md px-2 pt-1 pb-1.5',
},
resize: {
both: 'resize',
horizontal: 'resize-x',
Expand Down
5 changes: 5 additions & 0 deletions resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
:key="$index"
:name="name"
:read-only="isReadOnly"
:size="fieldsContext.size.value"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Context Access Error in Fieldtype Components

Accessing fieldsContext.size.value in ButtonGroupFieldtype, ToggleFieldtype, and TextareaFieldtype without null checking causes a runtime error. If these components are used outside a FieldsProvider context, fieldsContext is undefined, leading to an error like "Cannot read properties of undefined (reading 'size')".

Additional Locations (2)

Fix in Cursor Fix in Web

:text="option.label || option.value"
:value="option.value"
:variant="value == option.value ? 'pressed' : 'default'"
Expand All @@ -28,6 +29,10 @@ export default {
ButtonGroup
},

inject: {
fieldsContext: 'PublishFieldsContext',
},

data() {
return {
resizeObserver: null,
Expand Down
4 changes: 4 additions & 0 deletions resources/js/components/fieldtypes/SelectFieldtype.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
:placeholder="__(config.placeholder)"
:read-only="isReadOnly"
:searchable="config.searchable || config.taggable"
:size="size"
:taggable="config.taggable"
:id="id"
@update:modelValue="comboboxUpdated"
Expand All @@ -22,6 +23,9 @@ import Fieldtype from '@/components/fieldtypes/fieldtype.js';
import HasInputOptions from './HasInputOptions.js';
import { Combobox } from '@/components/ui';
import { computed } from 'vue';
import { injectFieldsContext } from './../ui/Publish/FieldsProvider.vue';

const { size } = injectFieldsContext() || {};

const emit = defineEmits(Fieldtype.emits);
const props = defineProps(Fieldtype.props);
Expand Down
4 changes: 4 additions & 0 deletions resources/js/components/fieldtypes/TextFieldtype.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
:append="__(config.append)"
:limit="config.character_limit"
:placeholder="__(config.placeholder)"
:size="size"
:name="name"
:id="id"
:direction="config.direction"
Expand All @@ -25,6 +26,9 @@
import Fieldtype from '@/components/fieldtypes/fieldtype.js';
import { Input } from '@/components/ui';
import { computed } from 'vue';
import { injectFieldsContext } from './../ui/Publish/FieldsProvider.vue';

const { size } = injectFieldsContext() || {};

const emit = defineEmits(Fieldtype.emits);
const props = defineProps(Fieldtype.props);
Expand Down
4 changes: 4 additions & 0 deletions resources/js/components/fieldtypes/TextareaFieldtype.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
:limit="config.character_limit || null"
:placeholder="__(config.placeholder)"
:model-value="value"
:size="fieldsContext.size.value"
@blur="$emit('blur')"
@focus="$emit('focus')"
@update:model-value="updateDebounced"
Expand All @@ -20,5 +21,8 @@ import { Textarea } from '@/components/ui';
export default {
mixins: [Fieldtype],
components: { Textarea },
inject: {
fieldsContext: 'PublishFieldsContext',
},
};
</script>
5 changes: 5 additions & 0 deletions resources/js/components/fieldtypes/ToggleFieldtype.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
:id="fieldId"
:model-value="value"
:read-only="isReadOnly"
:size="fieldsContext.size.value"
/>
<Heading v-if="inlineLabel" v-html="$markdown(__(inlineLabel), { openLinksInNewTabs: true })" />
</div>
Expand All @@ -26,6 +27,10 @@ export default {
Heading,
},

inject: {
fieldsContext: 'PublishFieldsContext',
},
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Context Key Mismatch Causes Undefined Error

The inject key 'PublishFieldsContext' doesn't match the 'PublishFields' key used by the FieldsProvider when creating the context. This causes fieldsContext to be undefined, leading to runtime errors when attempting to access fieldsContext.size.value.

Additional Locations (2)

Fix in Cursor Fix in Web


computed: {
inlineLabel() {
return this.value
Expand Down
4 changes: 4 additions & 0 deletions resources/js/components/ui/Publish/FieldsProvider.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,16 @@ const props = defineProps({
type: String,
default: (props) => props.pathPrefix,
},
size: {
type: String,
},
});

provideFieldsContext({
fields: toRef(() => props.fields),
fieldPathPrefix: toRef(() => props.fieldPathPrefix),
metaPathPrefix: toRef(() => props.metaPathPrefix),
size: toRef(() => props.size),
});
</script>

Expand Down
41 changes: 17 additions & 24 deletions resources/views/playground.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,31 +168,24 @@
</section>

<section class="space-y-4">
<ui-heading size="lg">Input</ui-heading>
<ui-heading size="lg" id="input">Input</ui-heading>
<div class="flex gap-2">
<ui-input
name="email"
type="email"
required
label="Email"
value="Edit me"
/>
<ui-input
name="email"
type="email"
required
label="Email"
read-only
value="Read only. Tab, select, but not edit."
/>
<ui-input
name="email"
type="email"
required
label="Email"
disabled
value="Disabled. Cant touch me."
/>
<ui-button text="Default" />
<ui-input name="email" type="email" required label="Email" value="Edit me" />
<ui-input name="email" type="email" required label="Email" read-only value="Read only. Tab, select, but not edit." />
<ui-input name="email" type="email" required label="Email" disabled value="Disabled. Cant touch me." />
</div>
<div class="flex gap-2">
<ui-button text="Small" size="sm" />
<ui-input name="email" type="email" size="sm" required label="Email" value="Edit me" />
<ui-input name="email" type="email" size="sm" required label="Email" read-only value="Read only. Tab, select, but not edit." />
<ui-input name="email" type="email" size="sm" required label="Email" disabled value="Disabled. Cant touch me." />
</div>
<div class="flex gap-2">
<ui-button text="Extra Small" size="xs" />
<ui-input name="email" type="email" size="xs" required label="Email" value="Edit me" />
<ui-input name="email" type="email" size="xs" required label="Email" read-only value="Read only. Tab, select, but not edit." />
<ui-input name="email" type="email" size="xs" required label="Email" disabled value="Disabled. Cant touch me." />
</div>
</section>

Expand Down