Template:Msgbox: Difference between revisions

No edit summary
Tag: 2017 source edit
No edit summary
Tag: 2017 source edit
Line 1: Line 1:
<div style="border: 1px solid {{{border|var(--border-color-base, #a2a9b1)}}}; border-left: 10px solid {{{accent|var(--border-color-progressive, #36c)}}}; background-color: {{{bg|var(--background-color-neutral-subtle, #f8f9fa)}}}; color: var(--color-base, #202122); padding: 8px 12px; margin-bottom: 1em; line-height: 1.5; box-sizing: border-box; display: flex; align-items: center; gap: 10px;">
<div style="border: 1px solid {{{border|var(--border-color-base, #a2a9b1)}}}; border-left: 10px solid {{{accent|var(--border-color-progressive, #36c)}}}; background-color: {{{bg|var(--background-color-neutral-subtle, #f8f9fa)}}}; color: var(--color-base, #202122); padding: 8px 12px; margin-bottom: 1em; line-height: 1.5; box-sizing: border-box; display: flex; align-items: center; gap: 10px;">
<div style="flex-shrink: 0; font-size: 24px;">{{{icon|}}}</div>
<div style="flex-shrink: 0; font-size: 24px;">{{{icon|}}}</div>
<div>{{{issue|{{{1|}}}}}} {{{fix|{{{2|}}}}}}</div>
<div>{{#if:{{{text|}}}|{{{text|}}}|{{{issue|{{{1|}}}}}}{{{fix|{{{2|}}}}}} }}</div>
</div><noinclude>
</div><noinclude>
<div style="border: 1px solid var(--border-color-base, #a2a9b1); background-color: var(--background-color-success-subtle, #ecfcf4); padding: 1em; margin-top: 1em;">
<div style="border: 1px solid var(--border-color-base, #a2a9b1); background-color: var(--background-color-success-subtle, #ecfcf4); padding: 1em; margin-top: 1em;">
Line 9: Line 9:


== Basic usage ==
== Basic usage ==
=== Simple (issue + fix) ===


<pre>
<pre>
Line 24: Line 26:
|issue='''Describe the problem.'''
|issue='''Describe the problem.'''
|fix=Describe what the editor should do.
|fix=Describe what the editor should do.
}}
=== Rich text (text parameter) ===
Use <code>text</code> instead of <code>issue</code>/<code>fix</code> when you need lists, multiple paragraphs, or any complex wikitext:
<pre>
{{Msgbox
|icon=⚠️
|accent=var(--border-color-warning, #edab00)
|bg=var(--background-color-warning-subtle, #fef6e7)
|text='''This article has multiple issues.''' Please help [[Rollerskating Wiki:Contributing|improve it]] or discuss these issues on the [[{{TALKPAGENAME}}|talk page]].
* This article '''may contain original research.'''
* This article '''needs additional citations''' for verification.
}}
</pre>
Renders as:
{{Msgbox
|icon=⚠️
|accent=var(--border-color-warning, #edab00)
|bg=var(--background-color-warning-subtle, #fef6e7)
|text='''This article has multiple issues.''' Please help [[Rollerskating Wiki:Contributing|improve it]] or discuss these issues on the [[{{TALKPAGENAME}}|talk page]].
* This article '''may contain original research.'''
* This article '''needs additional citations''' for verification.
}}
}}


Line 31: Line 59:
! Parameter !! Required !! Description
! Parameter !! Required !! Description
|-
|-
| <code>issue</code> or <code>1</code> || Yes || Problem statement (add <code><nowiki>'''bold'''</nowiki></code> in calling templates)
| <code>text</code> || No || Freeform rich content. Overrides <code>issue</code> and <code>fix</code> when provided. Supports any wikitext: bold, links, lists, multiple paragraphs.
|-
|-
| <code>fix</code> or <code>2</code> || Yes || What should be done to fix it
| <code>issue</code> or <code>1</code> || No || Problem statement (add <code><nowiki>'''bold'''</nowiki></code> in calling templates). Used when <code>text</code> is not provided.
|-
|-
| <code>icon</code> || No || Emoji or image shown to the left of the text. Default: none
| <code>fix</code> or <code>2</code> || No || What should be done to fix it. Appended after <code>issue</code>. Used when <code>text</code> is not provided.
|-
|-
| <code>accent</code> || No || Left border color (CSS value or Codex token). Default: progressive blue
| <code>icon</code> || No || Emoji or image shown to the left of the text. Default: none.
|-
|-
| <code>bg</code> || No || Background color. Default: neutral subtle
| <code>accent</code> || No || Left border color (CSS value or Codex token). Default: progressive blue.
|-
|-
| <code>border</code> || No || Outer border color. Default: base
| <code>bg</code> || No || Background color. Default: neutral subtle.
|-
| <code>border</code> || No || Outer border color. Default: base.
|}
|}


Line 239: Line 269:


</div>
</div>
<templatedata>
{
    "description": "A message box for article notices, warnings, and maintenance tags. Supports both simple (issue/fix) and freeform (text) modes. Uses Codex design tokens for automatic light/dark theme support.",
    "params": {
        "text": {
            "label": "Text",
            "description": "Freeform rich content. Overrides issue and fix when provided. Supports any wikitext: bold, links, lists, paragraphs.",
            "type": "content",
            "required": false
        },
        "issue": {
            "label": "Issue",
            "description": "Short problem statement. Used when text is not provided.",
            "type": "content",
            "required": false,
            "aliases": ["1"]
        },
        "fix": {
            "label": "Fix",
            "description": "What should be done to fix the issue. Appended after issue. Used when text is not provided.",
            "type": "content",
            "required": false,
            "aliases": ["2"]
        },
        "icon": {
            "label": "Icon",
            "description": "Emoji or image shown to the left of the text.",
            "type": "string",
            "required": false,
            "suggestedvalues": ["ℹ️", "⚠️", "❌", "✅", "🔀", "🔒", "📝", "📚", "🧹", "🚧"]
        },
        "accent": {
            "label": "Accent color",
            "description": "Left border color. Use a Codex design token for automatic dark mode support.",
            "type": "string",
            "required": false,
            "default": "var(--border-color-progressive, #36c)",
            "suggestedvalues": [
                "var(--border-color-progressive, #36c)",
                "var(--border-color-warning, #edab00)",
                "var(--border-color-error, #d33)",
                "var(--border-color-success, #14866d)",
                "var(--border-color-base, #a2a9b1)"
            ]
        },
        "bg": {
            "label": "Background color",
            "description": "Background color. Use a Codex design token for automatic dark mode support.",
            "type": "string",
            "required": false,
            "default": "var(--background-color-neutral-subtle, #f8f9fa)",
            "suggestedvalues": [
                "var(--background-color-neutral-subtle, #f8f9fa)",
                "var(--background-color-warning-subtle, #fef6e7)",
                "var(--background-color-error-subtle, #fee7e6)",
                "var(--background-color-success-subtle, #ecfcf4)",
                "var(--background-color-progressive-subtle, #eaf3ff)"
            ]
        },
        "border": {
            "label": "Border color",
            "description": "Outer border color.",
            "type": "string",
            "required": false,
            "default": "var(--border-color-base, #a2a9b1)"
        }
    },
    "format": "block",
    "paramOrder": ["icon", "text", "issue", "fix", "accent", "bg", "border"]
}
</templatedata>
[[Category:Template documentation]]
[[Category:Template documentation]]
</noinclude>
</noinclude>