This repository has been archived by the owner on May 15, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 98
/
Copy pathdropdowns.html
149 lines (148 loc) · 9.11 KB
/
dropdowns.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en" class="js--off">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta property="og:title" content="Components: Dropdowns - Wikimedia Design Style Guide (WikimediaUI)">
<meta property="og:type" content="website">
<meta property="og:url" content="https://design.wikimedia.org/style-guide/components/dropdowns.html">
<meta property="og:image" content="https://design.wikimedia.org/style-guide/img/design-style-guide.png">
<link rel="stylesheet" href="../css/build/wmui-style-guide.min.css">
<title>Components: Dropdowns – Wikimedia Design Style Guide</title>
<script>
document.documentElement.className = document.documentElement.className.replace(/\bjs--off\b/,'js--on');
</script>
<link rel="dns-prefetch" href="https://piwik.wikimedia.org/">
<link rel="preload" href="../fonts/Charter_regular.woff2" as="font" type="font/woff2" crossorigin>
<script src="../js/matomo-tracking.min.js"></script>
<script src="../js/wikimedia-design-style-guide.min.js" async></script>
</head>
<body class="page--components page--components-dropdowns" vocab="http://schema.org/" typeof="WebPage">
<header id="header" class="header">
<div class="content-box">
<a href="#content" class="is-aural is-focusable">Jump to content</a>
<a href="#nav--main" class="is-aural is-focusable">Jump to navigation</a>
<h6 class="site__title"><a href="../"><span class="site__org">Wikimedia </span><span class="site__project">Design Style Guide</span></a></h6>
<label class="btn--nav-main" for="trigger--nav-main" aria-hidden="true" title="Show main menu">
<i></i> <span>Menu</span>
</label>
<a href="https://github.com/wikimedia/WikimediaUI-Style-Guide" target="_blank" rel="noopener" class="lnk--contribute" title="Fork and contribute on GitHub"><span>Contribute on </span>GitHub</a>
</div>
</header>
<div class="page">
<div class="content-box">
<div class="col col--start">
<input type="checkbox" id="trigger--nav-main" class="trigger--nav-main">
<nav id="nav--main" class="nav nav--main">
<ol>
<li class="nav__item"><a href="../index.html">Introduction</a></li>
<li class="nav__item"><a href="../design-principles.html">Design principles</a></li>
<li class="nav__item"><a href="../visual-style.html">Visual style</a>
<ul class="nav__sub-items">
<li class="nav__sub-item"><a href="../visual-style.html">Principles</a></li>
<li class="nav__sub-item"><a href="../visual-style_colors.html">Colors</a></li>
<li class="nav__sub-item"><a href="../visual-style_typography.html">Typography</a></li>
<li class="nav__sub-item"><a href="../visual-style_icons.html">Icons</a></li>
<li class="nav__sub-item is-on"><a href="../visual-style_images.html">Images</a></li>
<li class="nav__sub-item"><a href="../visual-style_illustrations.html">Illustrations</a></li>
</ul>
</li>
<li class="nav__item is-on"><a href="links.html">Components</a>
<ul class="nav__sub-items">
<li class="nav__sub-item"><a href="links.html">Links</a></li>
<li class="nav__sub-item"><a href="buttons.html">Buttons</a></li>
<li class="nav__sub-item"><a href="button-groups.html">Button groups</a></li>
<li class="nav__sub-item"><a href="checkboxes.html">Checkboxes</a></li>
<li class="nav__sub-item"><a href="radio-buttons.html">Radio buttons</a></li>
<li class="nav__sub-item"><a href="toggle-switches.html">Toggle switches</a></li>
<li class="nav__sub-item is-on"><a href="dropdowns.html">Dropdowns</a></li>
<li class="nav__sub-item"><a href="comboboxes.html">Comboboxes</a></li>
<li class="nav__sub-item"><a href="text-inputs-and-textarea.html">Text inputs and textarea</a></li>
<li class="nav__sub-item"><a href="number-inputs.html">Number inputs</a></li>
<li class="nav__sub-item"><a href="file-inputs.html">File inputs</a></li>
<li class="nav__sub-item"><a href="messages.html">Messages</a></li>
<li class="nav__sub-item"><a href="language-selectors.html">Language selectors</a></li>
<li class="nav__sub-item"><a href="dialogs.html">Dialogs</a></li>
</ul>
</li>
<li class="nav__item"><a href="../apps/apps.html">Apps</a></li>
<!-- <li><a href="../patterns.html">Patterns</a></li> -->
<li><a href="../resources.html">Resources</a></li>
</ol>
</nav>
</div>
<div class="col col--end">
<main id="content" class="content">
<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
<span class="cdx-message__icon"></span>
<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
</div>
<div class="page__parent-title">Components</div>
<h1 class="page__title">Dropdowns</h1>
<p class="page__lead"></p>
<section id="using">
<h2>Using dropdowns</h2>
<p>Dropdowns must feature a label stating the current selection and a menu of at least two, preferably three option.</p>
<figure class="components__anatomy">
<img src="../img/components/dropdowns_intro.svg" alt="dropdowns visual design and states">
<figcaption class="figure__caption"></figcaption>
</figure>
</section>
<section id="designing">
<h2>Designing</h2>
<figure class="components__designing">
<img src="../img/components/dropdowns_designing.svg" alt="dropdown design properties">
<figcaption class="figure__caption"></figcaption>
</figure>
<p><strong>Label</strong><br>
Dropdown labels communicate what selections the component conveys. Labels are obligatory for dropdowns.</p>
<p><strong>Icon</strong> <small class="is-subtle">(optional)</small><br>
Icons might simplify identification for the available selection in dropdowns by the user.
</p>
<p><strong>Down indicator</strong><br>
Dropdowns appear button like with obligatory 'down' indicator as identifier.
</p>
<p>See <strong><a href="https://www.figma.com/file/2Jb1lVkhEMDFxO20I5xwyA/WikimediaUI-%E2%80%93-Components-library?node-id=174%3A169" target="_blank" rel="noopener">WikimediaUI Figma dropdowns component</a></strong>.</p>
</section>
<section id="states">
<h2>States of dropdowns</h2>
<p>Dropdowns have following visually separate states: </p>
<figure class="components__states">
<img src="../img/components/dropdowns_states.svg" alt="dropdowns states">
<figcaption class="figure__caption"></figcaption>
</figure>
<p>Note that disabled dropdowns are not following our minimal color contrasts elsewhere. <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1 state that “…part[s] of an inactive user interface component […] have no contrast requirement”.<sup><a href="#references">[1]</a></sup><br>
Provide sufficient information in disabled elements context to clarify to user what is disabled and how to enable component if useful instead.</p>
</section>
<section id="coding">
<h2>Coding</h2>
<p>See <a href="https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#demo-section-dropdown" target="_blank" rel="noopener">OOUI's demos section of dropdowns</a>.</p>
</section>
<section id="references">
<h2>References</h2>
<ol>
<li><a href="https://www.w3.org/TR/WCAG21/#contrast-minimum" target="_blank" rel="noopener">Web Content Accessibility Guidelines (WCAG) 2.1 – Success Criterion 1.4.3 Contrast (Minimum)</a></li>
</ol>
</section>
</main>
</div>
</div>
</div>
<footer id="footer" class="footer">
<div class="content-box">
<ul class="footer__list footer__list--connect">
<li><a href="https://github.com/wikimedia/WikimediaUI-Style-Guide" target="_blank" rel="noopener">Contribute on GitHub</a></li>
<li><a href="https://twitter.com/@WikimediaDesign" title="Follow Wikimedia Product Design team on Twitter">Follow @WikimediaDesign</a></li>
<li><a href="https://lists.wikimedia.org/mailman/listinfo/design" title="Join Wikimedia Design mailing list">Join mailing list</a></li>
</ul>
<p>Text is available under the <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener" property="license">Creative Commons Attribution-ShareAlike 4.0 International</a>, additional terms may apply. <br>Code is available under the MIT license.</p>
<ul class="footer__list footer__list--policy">
<li><a href="https://wikimediafoundation.org/privacy-policy/">Privacy policy</a></li>
<li><a href="https://design.wikimedia.org/accessibility-statement.html">Accessibility statement</a></li>
</ul>
<p><a href="https://foundation.wikimedia.org/" class="lnk--wikimedia-project" property="author" typeof="Organization">A Wikimedia Foundation project</a></p>
<noscript><p><img src="https://piwik.wikimedia.org/piwik.php?idsite=16&rec=1" alt=""></p></noscript>
</div>
</footer>
</body>
</html>