diff --git a/lang/en/fieldtypes.php b/lang/en/fieldtypes.php index 7a3c9e0d7e8..3b75a19f65e 100644 --- a/lang/en/fieldtypes.php +++ b/lang/en/fieldtypes.php @@ -117,6 +117,10 @@ 'icon.config.mode' => 'Choose a dropdown or compact picker.', 'icon.config.set' => 'Default CP icons, or a set registered with `Icons::register()`.', 'icon.title' => 'Icon', + 'info.config.content' => 'The information to display. Markdown is supported, including links and lists.', + 'info.config.icon' => 'Choose an icon, or leave empty to use the state\'s default icon.', + 'info.config.state' => 'Choose the visual importance of the information.', + 'info.title' => 'Info', 'integer.config.max' => 'The maximum allowed value.', 'integer.config.min' => 'The minimum allowed value.', 'integer.config.step' => 'The interval between valid numbers.', diff --git a/resources/js/bootstrap/fieldtypes.js b/resources/js/bootstrap/fieldtypes.js index 5cb99a0c35e..414809b79b7 100644 --- a/resources/js/bootstrap/fieldtypes.js +++ b/resources/js/bootstrap/fieldtypes.js @@ -34,6 +34,7 @@ import GroupFieldtype from '../components/fieldtypes/GroupFieldtype.vue'; import HiddenFieldtype from '../components/fieldtypes/HiddenFieldtype.vue'; import HtmlFieldtype from '../components/fieldtypes/HtmlFieldtype.vue'; import IconFieldtype from '../components/fieldtypes/IconFieldtype.vue'; +import InfoFieldtype from '../components/fieldtypes/InfoFieldtype.vue'; import IntegerFieldtype from '../components/fieldtypes/IntegerFieldtype.vue'; import LinkFieldtype from '../components/fieldtypes/LinkFieldtype.vue'; import LinkIndexFieldtype from '../components/fieldtypes/LinkIndexFieldtype.vue'; @@ -108,6 +109,7 @@ export default function registerFieldtypes(app) { app.component('hidden-fieldtype', HiddenFieldtype); app.component('html-fieldtype', HtmlFieldtype); app.component('icon-fieldtype', IconFieldtype); + app.component('info-fieldtype', InfoFieldtype); app.component('integer-fieldtype', IntegerFieldtype); app.component('link-fieldtype', LinkFieldtype); app.component('link-fieldtype-index', LinkIndexFieldtype); diff --git a/resources/js/components/fieldtypes/InfoFieldtype.vue b/resources/js/components/fieldtypes/InfoFieldtype.vue new file mode 100644 index 00000000000..6e0f0750e20 --- /dev/null +++ b/resources/js/components/fieldtypes/InfoFieldtype.vue @@ -0,0 +1,29 @@ + + + diff --git a/resources/js/components/ui/Alert.vue b/resources/js/components/ui/Alert.vue index 532fbe1baf4..786ff49ac13 100644 --- a/resources/js/components/ui/Alert.vue +++ b/resources/js/components/ui/Alert.vue @@ -12,6 +12,8 @@ const props = defineProps({ variant: { type: String, default: 'default' }, /** Icon name to display. [Browse available icons](/?path=/story/components-icon--all-icons) */ icon: { type: String, default: null }, + /** Announce the alert to screen readers as a live region. Disable for static content that is present when the page loads. */ + live: { type: Boolean, default: true }, }); const alertRole = computed(() => { @@ -98,8 +100,8 @@ const defaultIcon = computed(() => {