Skip to content

Commit ba40c69

Browse files
committed
PR feedback
1 parent 9c271fd commit ba40c69

5 files changed

Lines changed: 54 additions & 13 deletions

File tree

core/views.py

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1286,6 +1286,28 @@ def get_context_data(self, **kwargs):
12861286
"flag_emoji": "🇺🇸",
12871287
}
12881288

1289+
context["button_badge_data"] = {
1290+
"group_label": "button badges",
1291+
"group_name": "button-badge-select",
1292+
"badge_buttons": 2
1293+
* [
1294+
{
1295+
"value": "gold",
1296+
"icon_src": f"{badge_img}/badge-gold-medal.png",
1297+
"icon_alt": "Gold Medal",
1298+
"checked": False,
1299+
}
1300+
]
1301+
+ [
1302+
{
1303+
"value": "gold",
1304+
"icon_src": f"{badge_img}/badge-gold-medal.png",
1305+
"icon_alt": "Gold Medal",
1306+
"checked": True,
1307+
}
1308+
],
1309+
}
1310+
12891311
cpp_options = [
12901312
("all", "All"),
12911313
("cpp03", "C++03"),

static/css/v3/badge-button.css

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,27 @@
1313
.badge-button {
1414
width: fit-content;
1515
height: fit-content;
16-
padding: 2px;
16+
padding: 1px;
1717
display: inline-block;
1818
cursor: pointer;
19+
border: 1px solid transparent;
1920
}
2021

21-
.badge-button input, img, label {
22+
.badge-button input,
23+
.badge-button img,
24+
.badge-button label {
2225
cursor: pointer;
2326
}
2427

25-
.badge-button:has(.badge-button__radio:checked) {
26-
border-radius: var(--border-radius-m);
27-
border: 1px solid var(--color-stroke-mid);
28-
background: var(--color-surface-weak);
29-
padding: 1px;
28+
.badge-button:has(.badge-button__radio:checked) {
29+
border-radius: var(--border-radius-m);
30+
border: 1px solid var(--color-stroke-mid);
31+
background: var(--color-surface-weak);
32+
padding: 1px;
3033
}
3134

32-
.badge-button:hover {
35+
.badge-button:hover,
36+
.badge-button:focus-visible {
3337
border-radius: var(--border-radius-m);
3438
border: 1px solid var(--color-stroke-strong);
3539
background: var(--color-surface-mid);

templates/v3/examples/_v3_example_section.html

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,10 @@ <h3>{{ section_title }}</h3>
7070
{% with section_title="Badge Buttons" %}
7171
<div class="v3-examples-section__block" id="{{ section_title|slugify }}">
7272
<h3>{{ section_title }}</h3>
73-
{% static "img/v3/badges/badge-gold-medal.png" as icon_src %}
7473
<div class="v3-examples-section__example-box">
75-
{% include "v3/includes/_badge_button.html" with name="badge-select" value="gold" icon_src=icon_src only %}
76-
{% include "v3/includes/_badge_button.html" with name="badge-select" value="gold" icon_src=icon_src radio_checked=True only %}
77-
{% include "v3/includes/_badge_button.html" with name="badge-select" value="gold" icon_src=icon_src only %}
74+
{% with button_badge_data as data %}
75+
{% include "v3/includes/_badge_button_group.html" with group_label=data.group_label group_name=data.group_name badge_buttons=data.badge_buttons only %}
76+
{% endwith %}
7877
</div>
7978
</div>
8079
{% endwith %}

templates/v3/includes/_badge_button.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
name: str, required: group name for the radios. Should be the same for all components
66
value: str, required: radio value for selection
77
icon_src: str, required: full src link for icon for badge
8+
icon_alt: str, required: meaninful description of icon for screen readers
89
id: str, optional: id for linking the label to the radio button. Will be auto generated if not provided
910
radio_checked: bool, optional: Set to true if the value should be preselected
1011

@@ -29,5 +30,5 @@
2930
aria-pressed="{{radio_checked|yesno:"true,false"|default:"false"}}"
3031
{% if radio_checked %} checked {% endif %}
3132
/>
32-
<label id="{{id|default:uuid}}_label" for="{{id|default:uuid}}"><img src="{{ icon_src }}" alt="" width="32" height="32"></label>
33+
<label id="{{id|default:uuid}}_label" for="{{id|default:uuid}}"><img src="{{ icon_src }}" alt="{{ icon_alt }}" width="28" height="28"></label>
3334
</div>
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{% comment %}
2+
Fieldset grouping of _badge_buttons, to allow for easier usage
3+
Inputs:
4+
badge_buttons: list, required - List of badge buttons. Each contains the required values for a badge button, see _badge_button.html
5+
group_label: str, required - Aria label for the fieldset
6+
group_name: str, required - name of the button group
7+
Example usage
8+
{% include "v3/includes/_badge_button_group.html" with group_label=data.group_label group_name=data.group_name badge_buttons=data.badge_buttons only %}
9+
{% endcomment %}
10+
11+
<fieldset aria-label="{{ group_label }}" role="radiogroup">
12+
{% for button in badge_buttons %}
13+
{% include "v3/includes/_badge_button.html" with name=group_name value=button.value icon_src=button.icon_src icon_alt=button.icon_alt radio_checked=button.checked only %}
14+
{% endfor %}
15+
</fieldset>

0 commit comments

Comments
 (0)