## 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/ZZ2EQjczUFw8afnOroiIxq/Message-component---T284843?node-id=1001%3A4752 | 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
[-] Dismissible
[-] Fade-out
[] Publish Figma library with all message updates
**Code**
[] Add missing variants in Codex
[-] Not dismissible (without close icon)
[] Fade-out
**Design Review**
[-] Message height should grow with the length of the text (now the text expands outside the message box)
[-] Add Bold and link in the message demo
[] Add Fade out variant with default or customizable seconds to disappear
[] Update paddings in mobile on left and on right from 24px to 16px.
[] Review icon size (should be 20x20 px)
[] Review padding between icon and text (should be 8px)
[] We need to apply the following transitions:
[] Transition-duration should be 250ms (instead of 0.1s)
[] Property: transition-property-all
[] Timing function: ease-out (instead of ease)