diff --git a/resources/js/components/ui/Field.vue b/resources/js/components/ui/Field.vue index ab531ae0061..48eb9a58b91 100644 --- a/resources/js/components/ui/Field.vue +++ b/resources/js/components/ui/Field.vue @@ -5,13 +5,14 @@ import Description from './Description.vue'; import Label from './Label.vue'; import ErrorMessage from './ErrorMessage.vue'; import markdown from '@/util/markdown.js'; +import { twMerge } from 'tailwind-merge'; defineOptions({ inheritAttrs: false, }); const props = defineProps({ - asConfig: { type: Boolean, default: false }, + inline: { type: Boolean, default: false }, badge: { type: String, default: '' }, disabled: { type: Boolean, default: false }, error: { type: String }, @@ -23,7 +24,6 @@ const props = defineProps({ label: { type: String }, readOnly: { type: Boolean, default: false }, required: { type: Boolean, default: false }, - variant: { type: String, default: 'block' }, }); const labelProps = computed(() => ({ @@ -33,58 +33,41 @@ const labelProps = computed(() => ({ text: props.label, })); -const inline = computed(() => props.asConfig ? true : props.variant === 'inline'); - const rootClasses = computed(() => - cva({ + twMerge(cva({ base: [ 'min-w-0', ], variants: { - variant: { - block: 'w-full', - inline: [ - 'flex justify-between gap-x-7 gap-y-1.5', - 'has-[[data-ui-label]~[data-ui-control]]:grid-cols-[1fr_auto]', - 'has-[[data-ui-control]~[data-ui-label]]:grid-cols-[auto_1fr]', - '[&>[data-ui-control]~[data-ui-description]]:row-start-2 [&>[data-ui-control]~[data-ui-description]]:col-start-2', - '[&>[data-ui-label]~[data-ui-control]]:row-start-1 [&>[data-ui-label]~[data-ui-control]]:col-start-2', - ], - }, disabled: { true: 'opacity-50', }, - asConfig: { + inline: { true: 'grid grid-cols-2 items-start px-4.5 py-4 gap-x-5!', }, fullWidthSetting: { - true: '!grid-cols-1', + true: 'grid-cols-1', }, }, })({ ...props, - inline: inline.value, - asConfig: props.asConfig, - fullWidthSetting: props.fullWidthSetting, - }), + })), ); const descriptionClasses = computed(() => - cva({ + twMerge(cva({ base: ['mb-2 -mt-0.5'], variants: { inline: { - true: 'mb-0!', + true: 'mb-0', }, - fullWidth: { - true: 'mb-3!', + fullWidthSetting: { + true: 'mb-3', }, }, })({ ...props, - inline: inline.value, - fullWidth: props.fullWidthSetting, - }), + })), ); const instructions = computed(() => props.instructions ? markdown(__(props.instructions), { openLinksInNewTabs: true }) : null); diff --git a/resources/js/components/ui/Publish/Field.vue b/resources/js/components/ui/Publish/Field.vue index 6205ed4543f..1f2b258ee37 100644 --- a/resources/js/components/ui/Publish/Field.vue +++ b/resources/js/components/ui/Publish/Field.vue @@ -228,7 +228,7 @@ const fieldtypeComponentEvents = computed(() => ({ :required="isRequired" :errors="errors" :read-only="isReadOnly" - :variant="config.variant" + :inline="asConfig" :full-width-setting="config.full_width_setting" v-bind="$attrs" > diff --git a/resources/js/components/ui/Publish/Fields.vue b/resources/js/components/ui/Publish/Fields.vue index 4e812fe0a66..993531c814c 100644 --- a/resources/js/components/ui/Publish/Fields.vue +++ b/resources/js/components/ui/Publish/Fields.vue @@ -26,7 +26,6 @@ const fields = computed(() => { v-for="field in fields" :key="field.handle" :config="field" - :as-config="asConfig" :class="[ 'form-group', asConfig ? '' : `field-w-${field.width}` diff --git a/src/Fields/Field.php b/src/Fields/Field.php index 44169f28192..634f03adff9 100644 --- a/src/Fields/Field.php +++ b/src/Fields/Field.php @@ -532,17 +532,6 @@ public static function commonFieldOptions(): Fields 'instructions' => 'not null', ], ], - 'variant' => [ - 'display' => __('Field Layout'), - 'instructions' => __('statamic::messages.fields_layout_instructions'), - 'type' => 'select', - 'options' => [ - 'block' => __('Stacked'), - 'inline' => __('Side by Side'), - ], - 'default' => 'block', - 'width' => 50, - ], 'listable' => [ 'display' => __('Listable'), 'instructions' => __('statamic::messages.fields_listable_instructions'), diff --git a/src/Preferences/CorePreferences.php b/src/Preferences/CorePreferences.php index 8708c3385ce..77fc0b02802 100644 --- a/src/Preferences/CorePreferences.php +++ b/src/Preferences/CorePreferences.php @@ -29,7 +29,6 @@ public function boot() 'type' => 'toggle', 'display' => __('Stricter WCAG 2.2 Mode'), 'instructions' => __('statamic::messages.preference_strict_accessibility_instructions'), - 'variant' => 'inline', ]); Preference::register('confirm_dirty_navigation', [ @@ -37,7 +36,6 @@ public function boot() 'default' => true, 'display' => __('Confirm Dirty Navigation'), 'instructions' => __('statamic::messages.preference_confirm_dirty_navigation_instructions'), - 'variant' => 'inline', ]); Preference::register('theme', [ diff --git a/tests/Fields/BlueprintTest.php b/tests/Fields/BlueprintTest.php index e5b6737e7e7..bcaa1b75e0e 100644 --- a/tests/Fields/BlueprintTest.php +++ b/tests/Fields/BlueprintTest.php @@ -434,7 +434,6 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo 'handle' => 'one', 'instructions' => 'One instructions', 'instructions_position' => 'above', - 'variant' => 'block', 'listable' => 'hidden', 'visibility' => 'visible', 'sortable' => true, @@ -473,7 +472,6 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo 'handle' => 'two', 'instructions' => 'Two instructions', 'instructions_position' => 'above', - 'variant' => 'block', 'listable' => 'hidden', 'visibility' => 'visible', 'sortable' => true, @@ -563,7 +561,6 @@ public function converts_to_array_suitable_for_rendering_prefixed_conditional_fi 'handle' => 'nested_one', 'instructions' => null, 'instructions_position' => 'above', - 'variant' => 'block', 'listable' => 'hidden', 'visibility' => 'visible', 'sortable' => true, @@ -591,7 +588,6 @@ public function converts_to_array_suitable_for_rendering_prefixed_conditional_fi 'handle' => 'nested_deeper_two', 'instructions' => null, 'instructions_position' => 'above', - 'variant' => 'block', 'listable' => 'hidden', 'visibility' => 'visible', 'sortable' => true, diff --git a/tests/Fields/FieldTest.php b/tests/Fields/FieldTest.php index ff82ef02fc7..fe85243b090 100644 --- a/tests/Fields/FieldTest.php +++ b/tests/Fields/FieldTest.php @@ -337,7 +337,6 @@ public function preProcess($data) 'handle' => 'test', 'instructions' => 'Test instructions', 'instructions_position' => 'below', - 'variant' => 'block', 'listable' => 'hidden', 'visibility' => 'visible', 'sortable' => true, diff --git a/tests/Fields/FieldsTest.php b/tests/Fields/FieldsTest.php index 68bc635084b..5375cd34dd7 100644 --- a/tests/Fields/FieldsTest.php +++ b/tests/Fields/FieldsTest.php @@ -429,7 +429,6 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo 'autocomplete' => null, 'hide_display' => false, 'instructions_position' => 'above', - 'variant' => 'block', 'listable' => 'hidden', 'sortable' => true, 'replicator_preview' => true, @@ -453,7 +452,6 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo 'always_save' => false, 'hide_display' => false, 'instructions_position' => 'above', - 'variant' => 'block', 'listable' => 'hidden', 'sortable' => true, 'replicator_preview' => true, @@ -520,7 +518,6 @@ public function converts_to_array_suitable_for_rendering_prefixed_conditional_fi 'autocomplete' => null, 'hide_display' => false, 'instructions_position' => 'above', - 'variant' => 'block', 'listable' => 'hidden', 'sortable' => true, 'replicator_preview' => true, @@ -548,7 +545,6 @@ public function converts_to_array_suitable_for_rendering_prefixed_conditional_fi 'autocomplete' => null, 'hide_display' => false, 'instructions_position' => 'above', - 'variant' => 'block', 'listable' => 'hidden', 'sortable' => true, 'replicator_preview' => true, diff --git a/tests/Fields/SectionTest.php b/tests/Fields/SectionTest.php index 8a602b8671c..cc9437a7bc6 100644 --- a/tests/Fields/SectionTest.php +++ b/tests/Fields/SectionTest.php @@ -120,7 +120,6 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo 'handle' => 'one', 'instructions' => 'One instructions', 'instructions_position' => 'above', - 'variant' => 'block', 'listable' => 'hidden', 'visibility' => 'visible', 'sortable' => true, @@ -148,7 +147,6 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo 'handle' => 'two', 'instructions' => 'Two instructions', 'instructions_position' => 'above', - 'variant' => 'block', 'listable' => 'hidden', 'visibility' => 'visible', 'sortable' => true, diff --git a/tests/Fields/TabTest.php b/tests/Fields/TabTest.php index 727ba4d65e7..69094f5abb1 100644 --- a/tests/Fields/TabTest.php +++ b/tests/Fields/TabTest.php @@ -145,7 +145,6 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo 'handle' => 'one', 'instructions' => 'One instructions', 'instructions_position' => 'above', - 'variant' => 'block', 'listable' => 'hidden', 'visibility' => 'visible', 'sortable' => true, @@ -173,7 +172,6 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo 'handle' => 'two', 'instructions' => 'Two instructions', 'instructions_position' => 'above', - 'variant' => 'block', 'listable' => 'hidden', 'visibility' => 'visible', 'sortable' => true, diff --git a/tests/Fieldtypes/NestedFieldsTest.php b/tests/Fieldtypes/NestedFieldsTest.php index 31268a3c487..6715d23861d 100644 --- a/tests/Fieldtypes/NestedFieldsTest.php +++ b/tests/Fieldtypes/NestedFieldsTest.php @@ -79,7 +79,6 @@ public function preProcess($data) 'handle' => 'image', 'instructions' => 'Some instructions', 'instructions_position' => 'above', - 'variant' => 'block', 'listable' => 'hidden', 'visibility' => 'visible', 'sortable' => true, diff --git a/tests/Fieldtypes/SetsTest.php b/tests/Fieldtypes/SetsTest.php index 8768e0af751..9854e54bb89 100644 --- a/tests/Fieldtypes/SetsTest.php +++ b/tests/Fieldtypes/SetsTest.php @@ -227,7 +227,6 @@ public function it_preprocesses_for_config_with_groups() 'handle' => 'field_one', 'instructions' => null, 'instructions_position' => 'above', - 'variant' => 'block', 'listable' => 'hidden', 'visibility' => 'visible', 'sortable' => true, @@ -267,7 +266,6 @@ public function it_preprocesses_for_config_with_groups() 'handle' => 'field_two', 'instructions' => null, 'instructions_position' => 'above', - 'variant' => 'block', 'listable' => 'hidden', 'visibility' => 'visible', 'sortable' => true, @@ -330,7 +328,6 @@ public function it_preprocesses_for_config_without_groups() 'handle' => 'field_one', 'instructions' => null, 'instructions_position' => 'above', - 'variant' => 'block', 'listable' => 'hidden', 'visibility' => 'visible', 'sortable' => true,