## Existing components
**MediaWiki community:**
- Wikit: [[ https://github.com/wmde/wikit/blob/master/vue-components/src/components/Message.vue | Message ]]
- Bridge: [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Wikibase/+/refs/heads/master/client/data-bridge/src/presentation/components/IconMessageBox.vue | IconMessageBox ]]
- ContentTranslation: [[ https://github.com/wikimedia/mediawiki-extensions-ContentTranslation/blob/master/app/src/lib/mediawiki.ui/components/MWMessage/MWMessage.vue | Message ]]
- MediaSearch: [[ https://github.com/wikimedia/mediawiki-extensions-MediaSearch/blob/master/resources/components/base/Message.vue | Message ]] ([[ https://github.com/wikimedia/mediawiki-extensions-MediaSearch/blob/master/resources/components/base/Message.less | styles ]])
- NearbyPage [[ https://github.com/wikimedia/mediawiki-extensions-NearbyPages/blob/master/resources/ext.nearby.scripts/Errorbox.vue | Errorbox ]]
**External libraries:**
- Vuetify: [[ https://github.com/vuetifyjs/vuetify/tree/master/packages/vuetify/src/components/VAlert | Alert ]]
- Buefy: [[ https://buefy.org/documentation/message | Message ]]
**Wikimedia Design Style Guide link:**
- [[ https://design.wikimedia.org/style-guide/components/messages.html | Messages ]]
**Figma:**
- [[ https://www.figma.com/file/2Jb1lVkhEMDFxO20I5xwyA/%E2%9D%96-WikimediaUI-%E2%80%93-Components?node-id=2554%3A24938 | Figma specification ]]
### Potential implementations
#### Custom icon
The Figma specification includes the option to use a custom icon instead of one of the 4 standard icons. The ContentTranslation Message component implements this via a named slot with a default value of the standard icon for the specified message type.
#### Dismissible
Should there be an option for making a message dismissable (via a close button)? This is a use case we've run into on the structured data team several times. See [[ https://vuetifyjs.com/en/components/alerts/#dismissible | Vuetify for an example ]]. The ContentTranslation component also implements this.
#### Fade-out?
Should there be an option to allow a message to disappear automatically after a set amount of time? This option and the dismissible option are not necessarily mutually exclusive.
#### Transitions
1. Should there be a default transition when a message appears and disappears?
1. Should we give users the option of specifying transitions? [[ https://vuetifyjs.com/en/components/alerts/#transition | See Vuetify ]].
=== Acceptance criteria (or Done)
**Design**
[] Add missing variants in the Figma spec sheet
[] Closable variant
[] Dismissible variant
[] Publish Figma library with all message updates
**Code**
[] Add missing variants in Codex
[] Not closable variant
[] Dismissible variant