Skip to content

Commit 347bab2

Browse files
tristandasilvatristandasilva
authored
Patch - Most requested: Fix list item alignment for the two item layout (#2677)
1 parent db0ad64 commit 347bab2

File tree

5 files changed

+163
-91
lines changed

5 files changed

+163
-91
lines changed

‎_data/components.json‎

Lines changed: 128 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -648,6 +648,40 @@
648648
}
649649
]
650650
}
651+
,{
652+
"@context": {
653+
"@version": 1.1,
654+
"dct": "http://purl.org/dc/terms/",
655+
"title": { "@id": "dct:title", "@container": "@language" },
656+
"description": { "@id": "dct:description", "@container": "@language" },
657+
"modified": "dct:modified"
658+
},
659+
"title": {
660+
"en": "Deprecated markup",
661+
"fr": "Balisage déconseillé"
662+
},
663+
"description": {
664+
"en": "Reference documents and used to test old practice to ensure compatibility with the latest changes applied at this theme.",
665+
"fr": "Ce document est à titre de référence et afin de mettre à l'essaie d'ancienne pratique pour s'assurer qu'ils sont compatible avec les derniers changements apporté au thème."
666+
},
667+
"modified": "2025-09-23",
668+
"componentName": "deprecated",
669+
"status": "stable",
670+
"pages": {
671+
"examples": [
672+
{
673+
"title": "Deprecated markup - Report a problem (v4.0.28), gc-nttvs, gc-prtts",
674+
"language": "en",
675+
"path": "deprecated-en.html"
676+
},
677+
{
678+
"title": "Balisage déconseillé - Signaler un problème (v4.0.28), gc-nttvs, gc-prtts",
679+
"language": "fr",
680+
"path": "deprecated-fr.html"
681+
}
682+
]
683+
}
684+
}
651685
,{
652686
"@context": {
653687
"@version": 1.1,
@@ -2022,10 +2056,10 @@
20222056
"en": "Features top tasks related to the page it is on.",
20232057
"fr": "Comprend des tâches principales liées à la page sur laquelle elles se trouvent."
20242058
},
2025-
"modified": "2025-09-29",
2059+
"modified": "2025-10-31",
20262060
"componentName": "gc-most-requested",
20272061
"status": "stable",
2028-
"version": "1.2.0",
2062+
"version": "1.2.1",
20292063
"pages": {
20302064
"docs": [
20312065
{
@@ -2088,7 +2122,7 @@
20882122
"en": "https://design.canada.ca/common-design-patterns/most-requested.html",
20892123
"fr": "https://conception.canada.ca/configurations-conception-communes/en-demande.html"
20902124
},
2091-
"iteration": "_:iteration_mostrequested_3",
2125+
"iteration": "_:iteration_mostrequested_4",
20922126
"example": [
20932127
{
20942128
"en": { "href": "gc-most-requested-en.html", "text": "Most requested" },
@@ -2107,6 +2141,10 @@
21072141
"_:implement_mostrequested"
21082142
],
21092143
"history": [
2144+
{
2145+
"en": "October 2025 - Fixed the misalignment issue between the list items when there are only two of them.",
2146+
"fr": "Octobre 2025 - Correction du problème d'alignement entre les éléments de la liste lorsqu'il n'y en a que deux."
2147+
},
21102148
{
21112149
"en": "September 2025 - Items are displayed horizontally when there are only two list items on medium screen breakpoint and larger.",
21122150
"fr": "Septembre 2025 - Les éléments sont affichés horizontalement quand il y a seulement deux éléments de liste à partir d'un breakpoint écran moyen et plus."
@@ -2129,7 +2167,7 @@
21292167
"implementation": [
21302168
{
21312169
"@id": "_:implement_mostrequested",
2132-
"iteration": "_:iteration_mostrequested_2",
2170+
"iteration": "_:iteration_mostrequested_4",
21332171
"name": {
21342172
"en": "Standard",
21352173
"fr": "Standard"
@@ -2175,6 +2213,24 @@
21752213
}
21762214
],
21772215
"iteration": [
2216+
{
2217+
"@id": "_:iteration_mostrequested_4",
2218+
"name": "Most requested - Iteration 4",
2219+
"date": "2025-10",
2220+
"fixes": [
2221+
"Fixed the misalignment issue between the list items when there are only two of them."
2222+
],
2223+
"detectableBy": ".gc-most-requested:not(.provisional)",
2224+
"predecessor": "_:iteration_mostrequested_3",
2225+
"assets": [
2226+
{
2227+
"@type": "source-code",
2228+
"@language": "en",
2229+
"description": "Code sample",
2230+
"code": "<section class=\"gc-most-requested\">\n\t<div class=\"container\">\n\t\t<h2>Most requested</h2>\n\t\t<ul>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 1]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 2]</a></li>\n\t\t</ul>\n\t</div>\n</section>"
2231+
}
2232+
]
2233+
},
21782234
{
21792235
"@id": "_:iteration_mostrequested_3",
21802236
"name": "Most requested - Iteration 3",
@@ -3199,83 +3255,6 @@
31993255
]
32003256
}
32013257
}
3202-
,{
3203-
"@context": {
3204-
"@version": 1.1,
3205-
"dct": "http://purl.org/dc/terms/",
3206-
"title": { "@id": "dct:title", "@container": "@language" },
3207-
"description": { "@id": "dct:description", "@container": "@language" },
3208-
"modified": "dct:modified"
3209-
},
3210-
"title": {
3211-
"en": "Other components",
3212-
"fr": "Autre composant"
3213-
},
3214-
"description": {
3215-
"en": "Components included but need to move in its own folder.",
3216-
"fr": "Composant inclus mais qu'il nécessite qu'ils soit déplacé dans son propre dossier."
3217-
},
3218-
"modified": "2021-02-12",
3219-
"status": "stable",
3220-
"pages": {
3221-
"examples": [
3222-
{
3223-
"title": "Provisional functionality",
3224-
"language": "en",
3225-
"path": "provisional-en.html"
3226-
},
3227-
{
3228-
"title": "Fonctionnalités provisoires",
3229-
"language": "fr",
3230-
"path": "provisional-fr.html"
3231-
},
3232-
3233-
{
3234-
"title": "Redacted text",
3235-
"language": "en",
3236-
"path": "redacted-en.html"
3237-
},
3238-
{
3239-
"title": "Texte caviardé",
3240-
"language": "fr",
3241-
"path": "redacted-fr.html"
3242-
},
3243-
3244-
{
3245-
"title": "Deprecated markup - Report a problem (v4.0.28), gc-nttvs, gc-prtts",
3246-
"language": "en",
3247-
"path": "deprecated-en.html"
3248-
},
3249-
{
3250-
"title": "Balisage déconseillé - Signaler un problème (v4.0.28), gc-nttvs, gc-prtts",
3251-
"language": "fr",
3252-
"path": "deprecated-fr.html"
3253-
},
3254-
3255-
{
3256-
"title": "Float column in a data table",
3257-
"language": "en",
3258-
"path": "tbl-floatcolumn-en.html"
3259-
},
3260-
{
3261-
"title": "Float column in a data table",
3262-
"language": "fr",
3263-
"path": "tbl-floatcolumn-fr.html"
3264-
},
3265-
3266-
{
3267-
"title": "Video example",
3268-
"language": "en",
3269-
"path": "video-en.html"
3270-
},
3271-
{
3272-
"title": "Exemple de vidéo",
3273-
"language": "fr",
3274-
"path": "video-fr.html"
3275-
}
3276-
]
3277-
}
3278-
}
32793258
,{
32803259
"@context": {
32813260
"@version": 1.1,
@@ -3653,6 +3632,74 @@
36533632
]
36543633
}
36553634
}
3635+
,{
3636+
"@context": {
3637+
"@version": 1.1,
3638+
"dct": "http://purl.org/dc/terms/",
3639+
"title": { "@id": "dct:title", "@container": "@language" },
3640+
"description": { "@id": "dct:description", "@container": "@language" },
3641+
"modified": "dct:modified"
3642+
},
3643+
"title": {
3644+
"en": "Redacted text",
3645+
"fr": "Texte caviardé"
3646+
},
3647+
"description": {
3648+
"en": "Guidance on how to code redacted text.",
3649+
"fr": "Ligne directrice sur le codage de texte caviardé (ou expurgé)."
3650+
},
3651+
"modified": "2025-09-23",
3652+
"componentName": "redacted",
3653+
"status": "stable",
3654+
"pages": {
3655+
"examples": [
3656+
{
3657+
"title": "Redacted text",
3658+
"language": "en",
3659+
"path": "redacted-en.html"
3660+
},
3661+
{
3662+
"title": "Texte caviardé",
3663+
"language": "fr",
3664+
"path": "redacted-fr.html"
3665+
}
3666+
]
3667+
}
3668+
}
3669+
,{
3670+
"@context": {
3671+
"@version": 1.1,
3672+
"dct": "http://purl.org/dc/terms/",
3673+
"title": { "@id": "dct:title", "@container": "@language" },
3674+
"description": { "@id": "dct:description", "@container": "@language" },
3675+
"modified": "dct:modified"
3676+
},
3677+
"title": {
3678+
"en": "Float column in a data table",
3679+
"fr": "Colonne flottante dans un tableau de données"
3680+
},
3681+
"description": {
3682+
"en": "Use to display a table data in a user friendly manner.",
3683+
"fr": "Utiliser pour afficher les données d'un tableau de manière claire."
3684+
},
3685+
"modified": "2025-09-23",
3686+
"componentName": "tbl-floatcolumn",
3687+
"status": "stable",
3688+
"pages": {
3689+
"examples": [
3690+
{
3691+
"title": "Float column in a data table",
3692+
"language": "en",
3693+
"path": "tbl-floatcolumn-en.html"
3694+
},
3695+
{
3696+
"title": "Colonne flottante dans un tableau de données",
3697+
"language": "fr",
3698+
"path": "tbl-floatcolumn-fr.html"
3699+
}
3700+
]
3701+
}
3702+
}
36563703
,{
36573704
"@context": {
36583705
"@version": 1.1,

‎components/gc-most-requested/_screen-md-min.scss‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,14 @@
3636
display: block;
3737
width: 335px;
3838
}
39+
}
3940

40-
&:nth-child(2):last-child {
41-
break-after: column;
42-
break-inside: avoid-column;
43-
display: block;
41+
// If there are only two items in the list, display them side by side, horizontally aligned
42+
&:has(>li:nth-child(2):last-child) {
43+
display: flex;
44+
45+
> li {
46+
width: 50%;
4447
}
4548
}
4649
}

‎components/gc-most-requested/gc-most-requested-doc-en.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
description: Documentation for Most requested component
44
language: en
55
altLangPage: gc-most-requested-doc-fr.html
6-
dateModified: 2025-09-29
6+
dateModified: 2025-10-31
77
layout: documentation
88
index_json: index.json-ld
99
---

‎components/gc-most-requested/gc-most-requested-doc-fr.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
description: Documentation de la composante En demande
44
language: fr
55
altLangPage: gc-most-requested-doc-en.html
6-
dateModified: 2025-09-29
6+
dateModified: 2025-10-31
77
layout: documentation
88
index_json: index.json-ld
99
---

‎components/gc-most-requested/index.json-ld‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@
1414
"en": "Features top tasks related to the page it is on.",
1515
"fr": "Comprend des tâches principales liées à la page sur laquelle elles se trouvent."
1616
},
17-
"modified": "2025-09-29",
17+
"modified": "2025-10-31",
1818
"componentName": "gc-most-requested",
1919
"status": "stable",
20-
"version": "1.2.0",
20+
"version": "1.2.1",
2121
"pages": {
2222
"docs": [
2323
{
@@ -80,7 +80,7 @@
8080
"en": "https://design.canada.ca/common-design-patterns/most-requested.html",
8181
"fr": "https://conception.canada.ca/configurations-conception-communes/en-demande.html"
8282
},
83-
"iteration": "_:iteration_mostrequested_3",
83+
"iteration": "_:iteration_mostrequested_4",
8484
"example": [
8585
{
8686
"en": { "href": "gc-most-requested-en.html", "text": "Most requested" },
@@ -99,6 +99,10 @@
9999
"_:implement_mostrequested"
100100
],
101101
"history": [
102+
{
103+
"en": "October 2025 - Fixed the misalignment issue between the list items when there are only two of them.",
104+
"fr": "Octobre 2025 - Correction du problème d'alignement entre les éléments de la liste lorsqu'il n'y en a que deux."
105+
},
102106
{
103107
"en": "September 2025 - Items are displayed horizontally when there are only two list items on medium screen breakpoint and larger.",
104108
"fr": "Septembre 2025 - Les éléments sont affichés horizontalement quand il y a seulement deux éléments de liste à partir d'un breakpoint écran moyen et plus."
@@ -121,7 +125,7 @@
121125
"implementation": [
122126
{
123127
"@id": "_:implement_mostrequested",
124-
"iteration": "_:iteration_mostrequested_2",
128+
"iteration": "_:iteration_mostrequested_4",
125129
"name": {
126130
"en": "Standard",
127131
"fr": "Standard"
@@ -167,6 +171,24 @@
167171
}
168172
],
169173
"iteration": [
174+
{
175+
"@id": "_:iteration_mostrequested_4",
176+
"name": "Most requested - Iteration 4",
177+
"date": "2025-10",
178+
"fixes": [
179+
"Fixed the misalignment issue between the list items when there are only two of them."
180+
],
181+
"detectableBy": ".gc-most-requested:not(.provisional)",
182+
"predecessor": "_:iteration_mostrequested_3",
183+
"assets": [
184+
{
185+
"@type": "source-code",
186+
"@language": "en",
187+
"description": "Code sample",
188+
"code": "<section class=\"gc-most-requested\">\n\t<div class=\"container\">\n\t\t<h2>Most requested</h2>\n\t\t<ul>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 1]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 2]</a></li>\n\t\t</ul>\n\t</div>\n</section>"
189+
}
190+
]
191+
},
170192
{
171193
"@id": "_:iteration_mostrequested_3",
172194
"name": "Most requested - Iteration 3",

0 commit comments

Comments
 (0)