Skip to content

Commit aceb094

Browse files
rybmatrybmat
authored
Merge pull request #142 from Wikia/XW-3294
XW-3294 | Buttons with dropdowns
2 parents 160ea4f + 4224ab2 commit aceb094

File tree

16 files changed

+375
-30
lines changed

16 files changed

+375
-30
lines changed

‎app/styles/route-components/_buttons.scss‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,33 @@
55
.fixed-width-180px {
66
width: 180px;
77
}
8+
9+
/* Button group sections */
10+
11+
.button-group-icons-section {
12+
.component-demo__rendered {
13+
background: rgb(0, 51, 128);
14+
padding: 7px;
15+
}
16+
17+
// basic theming for buttons
18+
.white-theme {
19+
.wds-button {
20+
border-color: white;
21+
color: white;
22+
23+
&:focus:not(:disabled),
24+
&:hover:not(:disabled) {
25+
border-color: darken(white, 20%);
26+
color: darken(white, 20%);
27+
opacity: 0.8;
28+
}
29+
}
30+
}
31+
}
32+
33+
.button-group-dropdown-section {
34+
.wds-button-group {
35+
margin-bottom: 125px;
36+
}
37+
}

‎app/styles/route-components/_dropdowns.scss‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
1-
.main-content .wds-dropdown {
2-
margin-bottom: 120px;
1+
.main-content {
2+
.wds-dropdown {
3+
&.wds-is-active {
4+
margin-bottom: 120px;
5+
}
36

4-
&__content {
5-
min-width: 150px;
7+
&__content {
8+
min-width: 150px;
9+
}
10+
}
11+
12+
.wds-button-group .wds-dropdown {
13+
margin-bottom: 0;
614
}
715
}

‎app/templates/route-components/buttons.hbs‎

Lines changed: 189 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,8 @@
3939

4040
<section>
4141
<h2 id="secondary">Secondary buttons</h2>
42-
<p>Adding class <code class="format-code">.wds-is-secondary</code> changes the button's looks. It is used to create a button that draws less user's attention.</p>
42+
<p>Adding class <code class="format-code">.wds-is-secondary</code> changes the button's looks. It is used to create
43+
a button that draws less user's attention.</p>
4344
{{#component-demo}}
4445
{{#wds-button class='wds-is-secondary'}}Secondary button{{/wds-button}}
4546
{{#wds-button class='wds-is-secondary wds-has-icon'}}
@@ -50,9 +51,55 @@
5051
{{/component-demo}}
5152
</section>
5253

54+
<section>
55+
<h2 id="dropdown">Dropdown button</h2>
56+
<p>Adding <code class="format-code">.wds-dropdown</code> class and dropdown component inside button component will result in dropdown hidden behind a button</p>
57+
{{#component-demo}}
58+
{{#wds-button class='wds-dropdown wds-is-active'}}
59+
{{#wds-dropdown-toggle}}
60+
<span>Dropdown</span>
61+
{{/wds-dropdown-toggle}}
62+
{{#wds-dropdown-content}}
63+
<ul class="wds-list">
64+
<li>List item 1</li>
65+
<li>List item 2</li>
66+
<li>List item 3</li>
67+
</ul>
68+
{{/wds-dropdown-content}}
69+
{{/wds-button}}
70+
71+
{{#wds-button class='wds-dropdown'}}
72+
{{#wds-dropdown-toggle}}
73+
<span>Dropdown</span>
74+
{{/wds-dropdown-toggle}}
75+
{{#wds-dropdown-content}}
76+
<ul class="wds-list">
77+
<li>List item 1</li>
78+
<li>List item 2</li>
79+
<li>List item 3</li>
80+
</ul>
81+
{{/wds-dropdown-content}}
82+
{{/wds-button}}
83+
84+
{{#wds-button class='wds-dropdown wds-is-secondary'}}
85+
{{#wds-dropdown-toggle}}
86+
<span>Dropdown</span>
87+
{{/wds-dropdown-toggle}}
88+
{{#wds-dropdown-content}}
89+
<ul class="wds-list">
90+
<li>List item 1</li>
91+
<li>List item 2</li>
92+
<li>List item 3</li>
93+
</ul>
94+
{{/wds-dropdown-content}}
95+
{{/wds-button}}
96+
{{/component-demo}}
97+
</section>
98+
5399
<section>
54100
<h2 id="text">Text buttons</h2>
55-
<p>These buttons are denoted with <code class="format-code">.wds-is-text</code> class. They are the least obtrusive. Nevertheless, their paddings remain untouched, which provides the same clickable area.</p>
101+
<p>These buttons are denoted with <code class="format-code">.wds-is-text</code> class. They are the least obtrusive.
102+
Nevertheless, their paddings remain untouched, which provides the same clickable area.</p>
56103
{{#component-demo}}
57104
{{#wds-button class='wds-is-text'}}Text button{{/wds-button}}
58105
{{#wds-button class='wds-is-text wds-has-icon'}}
@@ -65,33 +112,63 @@
65112

66113
<section>
67114
<h2 id="sizes:regular">Button sizes: regular</h2>
68-
<p>Size of the button of any aforementioned variant can be adjusted. These are the default sizes of the buttons — for comparison.</p>
115+
<p>Size of the button of any aforementioned variant can be adjusted. These are the default sizes of the buttons —
116+
for comparison.</p>
69117
{{#component-demo}}
70118
{{#wds-button}}Primary{{/wds-button}}
71119
{{#wds-button class='wds-has-icon'}}
72120
{{wds-icon name='fandom-heart' size='small'}}
73121
Primary button
74122
{{/wds-button}}
123+
124+
{{#wds-button class='wds-dropdown'}}
125+
{{#wds-dropdown-toggle}}
126+
<span>Dropdown</span>
127+
{{/wds-dropdown-toggle}}
128+
{{#wds-dropdown-content}}
129+
<ul class="wds-list">
130+
<li>List item 1</li>
131+
<li>List item 2</li>
132+
<li>List item 3</li>
133+
</ul>
134+
{{/wds-dropdown-content}}
135+
{{/wds-button}}
75136
{{#wds-button class='wds-is-secondary'}}Secondary{{/wds-button}}
76137
{{#wds-button class='wds-is-text'}}Text{{/wds-button}}
77138
{{/component-demo}}
78139
</section>
79140

80141
<section>
81142
<h2 id="sizes:squished">Button sizes: squished</h2>
82-
<p>To make the button smaller use <code class="format-code">.wds-is-squished</code> class. This can help with fitting a button in tighter layouts.</p>
143+
<p>To make the button smaller use <code class="format-code">.wds-is-squished</code> class. This can help with
144+
fitting a button in tighter layouts.</p>
83145
{{#component-demo}}
84146
{{#wds-button class='wds-is-squished'}}Primary{{/wds-button}}
85147
{{#wds-button class='wds-is-squished wds-has-icon'}}
86148
{{wds-icon name='fandom-heart-small' class='wds-icon-tiny'}}
87149
Primary
88150
{{/wds-button}}
151+
152+
{{#wds-button class='wds-dropdown wds-is-squished'}}
153+
{{#wds-dropdown-toggle}}
154+
<span>Dropdown</span>
155+
{{/wds-dropdown-toggle}}
156+
{{#wds-dropdown-content}}
157+
<ul class="wds-list">
158+
<li>List item 1</li>
159+
<li>List item 2</li>
160+
<li>List item 3</li>
161+
</ul>
162+
{{/wds-dropdown-content}}
163+
{{/wds-button}}
89164
{{#wds-button class='wds-is-secondary wds-is-squished'}}Secondary{{/wds-button}}
90165
{{#wds-button class='wds-is-text wds-is-squished'}}Text{{/wds-button}}
91166
{{/component-demo}}
92167
<p class="warning-note">
93-
<strong>Important note:</strong> for readability purposes we use different styling for squished button in Global Navigation for Chinese - the font is larger and has bold removed.
94-
This is why in <code class="format-code">/scss/wds-components/_global-navigation.scss</code> you will find the following piece of code:
168+
<strong>Important note:</strong> for readability purposes we use different styling for squished button in Global
169+
Navigation for Chinese - the font is larger and has bold removed.
170+
This is why in <code class="format-code">/scss/wds-components/_global-navigation.scss</code> you will find the
171+
following piece of code:
95172
{{#code-sample language='scss'}}
96173
html[lang^='zh'] &__start-a-wiki-button {
97174
font-size: 12px;
@@ -100,28 +177,45 @@ html[lang^='zh'] &__start-a-wiki-button {
100177
}
101178
{{/code-sample}}
102179

103-
Please remember, that this solution is only single-use and temporary. It is not recommended to apply it as a common solution in other places/components.
180+
Please remember, that this solution is only single-use and temporary. It is not recommended to apply it as a
181+
common solution in other places/components.
104182
If it becomes a broader issue, more versatile and maintainable solution must be implemented.
105183
</p>
106184
</section>
107185

108186
<section>
109187
<h2 id="sizes:stretched">Button sizes: stretched</h2>
110-
<p>For a button greater in size use <code class="format-code">.wds-is-stretched</code> class. This may come in handy to draw more user's attention to the button and increase the clickable area around the label.</p>
188+
<p>For a button greater in size use <code class="format-code">.wds-is-stretched</code> class. This may come in handy
189+
to draw more user's attention to the button and increase the clickable area around the label.</p>
111190
{{#component-demo}}
112191
{{#wds-button class='wds-is-stretched'}}Primary{{/wds-button}}
113192
{{#wds-button class='wds-is-stretched wds-has-icon'}}
114193
{{wds-icon name='fandom-heart' size='small'}}
115194
Primary button
116195
{{/wds-button}}
196+
197+
{{#wds-button class='wds-dropdown wds-is-stretched'}}
198+
{{#wds-dropdown-toggle}}
199+
<span>Dropdown</span>
200+
{{/wds-dropdown-toggle}}
201+
{{#wds-dropdown-content}}
202+
<ul class="wds-list">
203+
<li>List item 1</li>
204+
<li>List item 2</li>
205+
<li>List item 3</li>
206+
</ul>
207+
{{/wds-dropdown-content}}
208+
{{/wds-button}}
117209
{{#wds-button class='wds-is-secondary wds-is-stretched'}}Secondary{{/wds-button}}
118210
{{#wds-button class='wds-is-text wds-is-stretched'}}Text{{/wds-button}}
119211
{{/component-demo}}
120212
</section>
121213

122214
<section>
123-
<h2 id="sizes:stretched">Button sizes: square</h2>
124-
<p>For a fixed size square button use <code class="format-code">.wds-is-square</code> class. This button will be 45px x 45px with content centered inside. This type of button is mostly used for icons, example: social icons.</p>
215+
<h2 id="sizes:square">Button sizes: square</h2>
216+
<p>For a fixed size square button use <code class="format-code">.wds-is-square</code> class. This button will be
217+
45px x 45px with content centered inside. This type of button is mostly used for icons, example: social icons.
218+
</p>
125219
{{#component-demo}}
126220
{{#wds-button class='wds-is-square wds-is-facebook-color'}}{{wds-icon name='facebook'}}{{/wds-button}}
127221
{{#wds-button class='wds-is-square wds-is-nk-color'}}{{wds-icon name='nk'}}{{/wds-button}}
@@ -142,7 +236,10 @@ html[lang^='zh'] &__start-a-wiki-button {
142236

143237
<section>
144238
<h2 id="other:link">Other usages: link button</h2>
145-
<p>When no special handlers of the click event are needed — just navigation to a certain URL, consider using an anchor tag <code>&lt;a&gt;</code> styled as a button. It is achieved by adding a <code class="format-code">.wds-button</code> class just like for the <code>&lt;button&gt;</code> element. Optionally add any other desired button classes.</p>
239+
<p>When no special handlers of the click event are needed — just navigation to a certain URL, consider using an
240+
anchor tag <code>&lt;a&gt;</code> styled as a button. It is achieved by adding a <code class="format-code">.wds-button</code>
241+
class just like for the <code>&lt;button&gt;</code> element. Optionally add any other desired button classes.
242+
</p>
146243
{{#component-demo}}
147244
{{#wds-button tagName='a' href='#'}}Link button{{/wds-button}}
148245
{{#wds-button tagName='a' href='#' class='wds-has-icon'}}
@@ -152,3 +249,84 @@ html[lang^='zh'] &__start-a-wiki-button {
152249
{{#wds-button tagName='a' href='#' class='wds-is-secondary'}}Secondary link button{{/wds-button}}
153250
{{/component-demo}}
154251
</section>
252+
253+
<section>
254+
<h2 id="group">Button group</h2>
255+
<p>Group a series of buttons together on a single line with the button group.</p>
256+
<p>Button group comes with no default styling of its own. Colors, sizes and animations are driven by buttons.</p>
257+
<p>Wrap a series of buttons with <code>.wds-button</code> in <code>.wds-button-group</code>.</p>
258+
{{#component-demo}}
259+
<div class="wds-button-group">
260+
{{#wds-button}}1{{/wds-button}}
261+
{{#wds-button}}2{{/wds-button}}
262+
{{#wds-button disabled=true}}3{{/wds-button}}
263+
{{#wds-button}}4{{/wds-button}}
264+
{{#wds-button}}5{{/wds-button}}
265+
</div>
266+
{{/component-demo}}
267+
<p>Mixing primary, secondary and different sizes of buttons is not supported. All buttons have to be of the same type.</p>
268+
{{#component-demo}}
269+
<div class="wds-button-group">
270+
{{#wds-button class='wds-is-secondary'}}6{{/wds-button}}
271+
{{#wds-button class='wds-is-secondary'}}7{{/wds-button}}
272+
{{#wds-button disabled=true class='wds-is-secondary'}}8{{/wds-button}}
273+
{{#wds-button class='wds-is-secondary'}}9{{/wds-button}}
274+
{{#wds-button class='wds-is-secondary'}}10{{/wds-button}}
275+
</div>
276+
{{/component-demo}}
277+
</section>
278+
279+
<section class="button-group-icons-section">
280+
<h2 id="group:icons">Button group with icons</h2>
281+
<p>You can achieve basic theming by overriding color and background color of a button</p>
282+
{{#code-sample language='sass'}}
283+
.white-theme {
284+
border-color: white;
285+
color: white;
286+
287+
&:focus:not(:disabled),
288+
&:hover:not(:disabled) {
289+
border-color: darken(white, 20%);
290+
color: darken(white, 20%);
291+
}
292+
}
293+
{{/code-sample}}
294+
{{#component-demo}}
295+
<div class="wds-button-group white-theme">
296+
{{#wds-button class='wds-has-icon wds-is-secondary wds-is-squished'}}
297+
{{wds-icon name='activity' size='small'}}
298+
Activity
299+
{{/wds-button}}
300+
{{#wds-button class='wds-is-secondary wds-is-squished'}}
301+
{{wds-icon name='house' class='wds-icon-tiny'}}
302+
{{/wds-button}}
303+
{{#wds-button class='wds-is-secondary wds-is-squished'}}
304+
{{wds-icon name='map' class='wds-icon-tiny'}}
305+
{{/wds-button}}
306+
</div>
307+
{{/component-demo}}
308+
</section>
309+
310+
311+
<section class="button-group-dropdown-section">
312+
<h2 id="group:dropdowns">Button group with dropdown button</h2>
313+
<p>It is also possible to include dropdown button within button-group</p>
314+
{{#component-demo}}
315+
<div class="wds-button-group">
316+
{{#wds-button class='wds-has-icon wds-is-squished'}}
317+
{{wds-icon name='pencil' size='small'}}
318+
Edit
319+
{{/wds-button}}
320+
{{#wds-button class='wds-is-squished wds-dropdown wds-is-active'}}
321+
{{wds-dropdown-toggle}}
322+
{{#wds-dropdown-content}}
323+
<ul class="wds-list">
324+
<li>List item 1</li>
325+
<li>List item 2</li>
326+
<li>List item 3</li>
327+
</ul>
328+
{{/wds-dropdown-content}}
329+
{{/wds-button}}
330+
</div>
331+
{{/component-demo}}
332+
</section>

‎dist/css/styles.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/scss/wds-components/_button-groups.scss‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.wds-button-group {
2+
align-items: stretch;
3+
display: inline-flex;
4+
justify-content: flex-start;
5+
6+
.wds-button {
7+
//To achieve oneness of buttons, we overlap their border
8+
height: auto;
9+
margin-left: auto;
10+
margin-right: -1px;
11+
12+
//on hover we want to show whole border of a button
13+
&:hover {
14+
z-index: 1;
15+
}
16+
17+
//For primary buttons add white border between buttons
18+
&:not(.wds-is-secondary) {
19+
&:not(:last-of-type) {
20+
border-right: 1px solid $wds-color-white;
21+
}
22+
23+
&:not(:first-of-type) {
24+
border-left: 1px solid $wds-color-white;
25+
}
26+
}
27+
28+
}
29+
30+
}

0 commit comments

Comments
 (0)