Skip to content

Commit ccb623c

Browse files
pavelklibanipavelklibani
committed
Docs(web): Update SplitButton demo to match react demo
1 parent e25ea32 commit ccb623c

File tree

1 file changed

+146
-8
lines changed
  • packages/web/src/scss/components/SplitButton

1 file changed

+146
-8
lines changed

‎packages/web/src/scss/components/SplitButton/index.html‎

Lines changed: 146 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,30 @@ <h3 class="docs-Heading">Size {{ size }}, color {{ color }}</h3>
4040
data-spirit-placement="bottom-end"
4141
id="dropdown-{{ color }}-{{ size }}-label-and-icon"
4242
>
43-
Dropdown content
43+
<a href="#" class="Item">
44+
<span class="Item__icon Item__icon--start">
45+
<svg width="24" height="24" aria-hidden="true">
46+
<use xlink:href="/assets/icons/svg/sprite.svg#info" />
47+
</svg>
48+
</span>
49+
<span class="Item__label">Information</span>
50+
</a>
51+
<a href="#" class="Item">
52+
<span class="Item__icon Item__icon--start">
53+
<svg width="24" height="24" aria-hidden="true">
54+
<use xlink:href="/assets/icons/svg/sprite.svg#profile" />
55+
</svg>
56+
</span>
57+
<span class="Item__label">Profile</span>
58+
</a>
59+
<a href="#" class="Item">
60+
<span class="Item__icon Item__icon--start">
61+
<svg width="24" height="24" aria-hidden="true">
62+
<use xlink:href="/assets/icons/svg/sprite.svg#help" />
63+
</svg>
64+
</span>
65+
<span class="Item__label">Help</span>
66+
</a>
4467
</div>
4568
</div>
4669
</div>
@@ -73,7 +96,30 @@ <h3 class="docs-Heading">Size {{ size }}, color {{ color }}</h3>
7396
data-spirit-placement="bottom-end"
7497
id="dropdown-{{ color }}-{{ size }}-more-buttons-and-icon"
7598
>
76-
Dropdown content
99+
<a href="#" class="Item">
100+
<span class="Item__icon Item__icon--start">
101+
<svg width="24" height="24" aria-hidden="true">
102+
<use xlink:href="/assets/icons/svg/sprite.svg#info" />
103+
</svg>
104+
</span>
105+
<span class="Item__label">Information</span>
106+
</a>
107+
<a href="#" class="Item">
108+
<span class="Item__icon Item__icon--start">
109+
<svg width="24" height="24" aria-hidden="true">
110+
<use xlink:href="/assets/icons/svg/sprite.svg#profile" />
111+
</svg>
112+
</span>
113+
<span class="Item__label">Profile</span>
114+
</a>
115+
<a href="#" class="Item">
116+
<span class="Item__icon Item__icon--start">
117+
<svg width="24" height="24" aria-hidden="true">
118+
<use xlink:href="/assets/icons/svg/sprite.svg#help" />
119+
</svg>
120+
</span>
121+
<span class="Item__label">Help</span>
122+
</a>
77123
</div>
78124
</div>
79125
</div>
@@ -105,7 +151,30 @@ <h3 class="docs-Heading">Size {{ size }}, color {{ color }}</h3>
105151
data-spirit-placement="bottom-end"
106152
id="dropdown-{{ color }}-{{ size }}-button-and-icon"
107153
>
108-
Dropdown content
154+
<a href="#" class="Item">
155+
<span class="Item__icon Item__icon--start">
156+
<svg width="24" height="24" aria-hidden="true">
157+
<use xlink:href="/assets/icons/svg/sprite.svg#info" />
158+
</svg>
159+
</span>
160+
<span class="Item__label">Information</span>
161+
</a>
162+
<a href="#" class="Item">
163+
<span class="Item__icon Item__icon--start">
164+
<svg width="24" height="24" aria-hidden="true">
165+
<use xlink:href="/assets/icons/svg/sprite.svg#profile" />
166+
</svg>
167+
</span>
168+
<span class="Item__label">Profile</span>
169+
</a>
170+
<a href="#" class="Item">
171+
<span class="Item__icon Item__icon--start">
172+
<svg width="24" height="24" aria-hidden="true">
173+
<use xlink:href="/assets/icons/svg/sprite.svg#help" />
174+
</svg>
175+
</span>
176+
<span class="Item__label">Help</span>
177+
</a>
109178
</div>
110179
</div>
111180
</div>
@@ -222,7 +291,30 @@ <h2 class="docs-Heading">Size {{ size }}</h2>
222291
</svg>
223292
</button>
224293
<div class="DropdownPopover" data-spirit-placement="bottom-end" id="dropdown-primary-1">
225-
Dropdown content
294+
<a href="#" class="Item">
295+
<span class="Item__icon Item__icon--start">
296+
<svg width="24" height="24" aria-hidden="true">
297+
<use xlink:href="/assets/icons/svg/sprite.svg#info" />
298+
</svg>
299+
</span>
300+
<span class="Item__label">Information</span>
301+
</a>
302+
<a href="#" class="Item">
303+
<span class="Item__icon Item__icon--start">
304+
<svg width="24" height="24" aria-hidden="true">
305+
<use xlink:href="/assets/icons/svg/sprite.svg#profile" />
306+
</svg>
307+
</span>
308+
<span class="Item__label">Profile</span>
309+
</a>
310+
<a href="#" class="Item">
311+
<span class="Item__icon Item__icon--start">
312+
<svg width="24" height="24" aria-hidden="true">
313+
<use xlink:href="/assets/icons/svg/sprite.svg#help" />
314+
</svg>
315+
</span>
316+
<span class="Item__label">Help</span>
317+
</a>
226318
</div>
227319
</div>
228320
</div>
@@ -252,7 +344,30 @@ <h2 class="docs-Heading">Size {{ size }}</h2>
252344
</svg>
253345
</button>
254346
<div class="DropdownPopover" data-spirit-placement="bottom-end" id="dropdown-primary-2">
255-
Dropdown content
347+
<a href="#" class="Item">
348+
<span class="Item__icon Item__icon--start">
349+
<svg width="24" height="24" aria-hidden="true">
350+
<use xlink:href="/assets/icons/svg/sprite.svg#info" />
351+
</svg>
352+
</span>
353+
<span class="Item__label">Information</span>
354+
</a>
355+
<a href="#" class="Item">
356+
<span class="Item__icon Item__icon--start">
357+
<svg width="24" height="24" aria-hidden="true">
358+
<use xlink:href="/assets/icons/svg/sprite.svg#profile" />
359+
</svg>
360+
</span>
361+
<span class="Item__label">Profile</span>
362+
</a>
363+
<a href="#" class="Item">
364+
<span class="Item__icon Item__icon--start">
365+
<svg width="24" height="24" aria-hidden="true">
366+
<use xlink:href="/assets/icons/svg/sprite.svg#help" />
367+
</svg>
368+
</span>
369+
<span class="Item__label">Help</span>
370+
</a>
256371
</div>
257372
</div>
258373
</div>
@@ -281,7 +396,30 @@ <h2 class="docs-Heading">Size {{ size }}</h2>
281396
</svg>
282397
</button>
283398
<div class="DropdownPopover" data-spirit-placement="bottom-end" id="dropdown-primary-3">
284-
Dropdown content
399+
<a href="#" class="Item">
400+
<span class="Item__icon Item__icon--start">
401+
<svg width="24" height="24" aria-hidden="true">
402+
<use xlink:href="/assets/icons/svg/sprite.svg#info" />
403+
</svg>
404+
</span>
405+
<span class="Item__label">Information</span>
406+
</a>
407+
<a href="#" class="Item">
408+
<span class="Item__icon Item__icon--start">
409+
<svg width="24" height="24" aria-hidden="true">
410+
<use xlink:href="/assets/icons/svg/sprite.svg#profile" />
411+
</svg>
412+
</span>
413+
<span class="Item__label">Profile</span>
414+
</a>
415+
<a href="#" class="Item">
416+
<span class="Item__icon Item__icon--start">
417+
<svg width="24" height="24" aria-hidden="true">
418+
<use xlink:href="/assets/icons/svg/sprite.svg#help" />
419+
</svg>
420+
</span>
421+
<span class="Item__label">Help</span>
422+
</a>
285423
</div>
286424
</div>
287425
</div>
@@ -314,7 +452,7 @@ <h2 class="docs-Heading">Size {{ size }}</h2>
314452
class="Button Button--{{ size }} Button--primary"
315453
data-spirit-toggle="tooltip"
316454
data-spirit-target="#tooltip-button-primary-1"
317-
aria-labelledby="tooltip-button-{{ color }}-{{ size }}-left"
455+
aria-labelledby="tooltip-button-primary-1"
318456
disabled
319457
>
320458
<svg width="24" height="24" aria-hidden="true">
@@ -338,7 +476,7 @@ <h2 class="docs-Heading">Size {{ size }}</h2>
338476
class="Button Button--{{ size }} Button--primary"
339477
data-spirit-toggle="tooltip"
340478
data-spirit-target="#tooltip-button-primary-2"
341-
aria-labelledby="tooltip-button-{{ color }}-{{ size }}-left"
479+
aria-labelledby="tooltip-button-primary-2"
342480
disabled
343481
>
344482
<svg width="24" height="24" aria-hidden="true">

0 commit comments

Comments
 (0)