Skip to content

Commit b28594e

Browse files
Christopher-OGarneaumaduboisp
authored
Minor - List steps: Adding support for list-step in the context of a content limited width (#2675)
* Added extended function for grid type components in list * updated documentation to explain full-width class rule * Added documentation to explain full-width exemption May need review as translated using AI * updated style based to remove need for added classes * fixed tabbing/indent * revised documentation Revised documentation to explain about using cnt-wdth-lmtd class and how it affects the list steps component * Revise documentation Revise full width documentation in French to align with no class pattern * Adding documentation and fixing linting error * Update components/list-steps/list-steps-en.html Co-authored-by: Pierre Dubois <duboisp2@gmail.com> * Update components/list-steps/list-steps-en.html Co-authored-by: Pierre Dubois <duboisp2@gmail.com> * Update components/list-steps/list-steps-en.html Co-authored-by: Pierre Dubois <duboisp2@gmail.com> * Update components/list-steps/list-steps-en.html Co-authored-by: Pierre Dubois <duboisp2@gmail.com> * Update components/list-steps/index.json-ld Co-authored-by: Pierre Dubois <duboisp2@gmail.com> * Update components/list-steps/index.json-ld Co-authored-by: Pierre Dubois <duboisp2@gmail.com> * Fix closing tag for step 1 header in HTML * Change headers from h5 to h4 and h6 to h5 * Adding small missing changes --------- Co-authored-by: Marc-André Garneau <marcandre.garneau@servicecanada.gc.ca> Co-authored-by: Pierre Dubois <duboisp2@gmail.com>
1 parent f9710da commit b28594e

File tree

5 files changed

+165
-14
lines changed

5 files changed

+165
-14
lines changed

‎_data/components.json‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3331,7 +3331,7 @@
33313331
"modified": "2025-09-16",
33323332
"componentName": "list-steps",
33333333
"status": "stable",
3334-
"version": "1.0.1",
3334+
"version": "1.1.0",
33353335
"pages": {
33363336
"examples": [
33373337
{
@@ -3516,10 +3516,14 @@
35163516
],
35173517
"iteration": [
35183518
{
3519-
"@id": "_:iteration_list_steps_1",
3520-
"name": "List steps - Iteration 1",
3521-
"date": "2025-07",
3519+
"@id": "_:iteration_list_steps_3",
3520+
"name": "List steps - Iteration 3",
3521+
"date": "2025-11",
35223522
"detectableBy": ".lst-stps",
3523+
"additions": [
3524+
"Step width is no longer limited when inside .cnt-wdth-lmtd class"
3525+
],
3526+
"predecessor": "_:iteration_list_steps_2",
35233527
"assets": [
35243528
{
35253529
"@type": "source-code",
@@ -3534,12 +3538,26 @@
35343538
"name": "List steps - Iteration 2",
35353539
"date": "2025-08",
35363540
"detectableBy": ".lst-stps",
3541+
"predecessor": "_:iteration_list_steps_1",
3542+
"successor": "_:iteration_list_steps_3",
35373543
"fixes": [
3544+
"The numbering in mobile view is smaller than desktop view, not the other way around."
3545+
],
3546+
"assets": [
35383547
{
3539-
"en": "The numbering in mobile view is smaller than desktop view, not the other way around.",
3540-
"fr": "La numérotation en mode mobile est plus petite qu'en mode bureau, et non l'inverse."
3548+
"@type": "source-code",
3549+
"@language": "en",
3550+
"description": "Code sample",
3551+
"code": "<ol class=\"lst-stps\">"
35413552
}
3542-
],
3553+
]
3554+
},
3555+
{
3556+
"@id": "_:iteration_list_steps_1",
3557+
"name": "List steps - Iteration 1",
3558+
"date": "2025-07",
3559+
"detectableBy": ".lst-stps",
3560+
"successor": "_:iteration_list_steps_2",
35433561
"assets": [
35443562
{
35453563
"@type": "source-code",

‎components/list-steps/_base.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,3 +156,8 @@ ol.lst-stps[start="8"] {
156156
ol.lst-stps[start="9"] {
157157
counter-set: item 8;
158158
}
159+
160+
/* Full width exception li (for exempt designs, e.g. grids, tables, etc.) */
161+
.cnt-wdth-lmtd .lst-stps > li:has(div, section, table), .cnt-wdth-lmtd .lst-stps .lst-stps-sub > li:has(div, section, table) {
162+
max-width: none;
163+
}

‎components/list-steps/index.json-ld‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"modified": "2025-09-16",
1818
"componentName": "list-steps",
1919
"status": "stable",
20-
"version": "1.0.1",
20+
"version": "1.1.0",
2121
"pages": {
2222
"examples": [
2323
{
@@ -202,10 +202,14 @@
202202
],
203203
"iteration": [
204204
{
205-
"@id": "_:iteration_list_steps_1",
206-
"name": "List steps - Iteration 1",
207-
"date": "2025-07",
205+
"@id": "_:iteration_list_steps_3",
206+
"name": "List steps - Iteration 3",
207+
"date": "2025-11",
208208
"detectableBy": ".lst-stps",
209+
"additions": [
210+
"Step width is no longer limited when inside .cnt-wdth-lmtd class"
211+
],
212+
"predecessor": "_:iteration_list_steps_2",
209213
"assets": [
210214
{
211215
"@type": "source-code",
@@ -220,12 +224,26 @@
220224
"name": "List steps - Iteration 2",
221225
"date": "2025-08",
222226
"detectableBy": ".lst-stps",
227+
"predecessor": "_:iteration_list_steps_1",
228+
"successor": "_:iteration_list_steps_3",
223229
"fixes": [
230+
"The numbering in mobile view is smaller than desktop view, not the other way around."
231+
],
232+
"assets": [
224233
{
225-
"en": "The numbering in mobile view is smaller than desktop view, not the other way around.",
226-
"fr": "La numérotation en mode mobile est plus petite qu'en mode bureau, et non l'inverse."
234+
"@type": "source-code",
235+
"@language": "en",
236+
"description": "Code sample",
237+
"code": "<ol class=\"lst-stps\">"
227238
}
228-
],
239+
]
240+
},
241+
{
242+
"@id": "_:iteration_list_steps_1",
243+
"name": "List steps - Iteration 1",
244+
"date": "2025-07",
245+
"detectableBy": ".lst-stps",
246+
"successor": "_:iteration_list_steps_2",
229247
"assets": [
230248
{
231249
"@type": "source-code",

‎components/list-steps/list-steps-en.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ <h2>On this page</h2>
1919
<li><a href="#striped">Striped design</a></li>
2020
<li><a href="#stripedsub">Striped design for sub list</a></li>
2121
<li><a href="#startattr">Start attribute</a></li>
22+
<li><a href="#limitwidth">Limited width content</a></li>
2223
</ul>
2324
</section>
2425
<section>
@@ -587,3 +588,57 @@ <h4>Example with heading and section of step following a step started at 9, expe
587588
</li>
588589
</ol>
589590
</section>
591+
<section>
592+
<h2 id="limitwidth">Limited width content</h2>
593+
<p>List items are normally restricted in character width when using the class <code>cnt-wdth-lmtd</code>. A list step that contain a <code>&lt;div&gt;</code>, <code>&lt;section&gt;</code> or <code>&lt;table&gt;</code> tag will not be restricted in character width, nor the components within. </p>
594+
<p>However, elements normally restricted by the <code>cnt-wdth-lmtd</code> class will still be effected within those tags.</p>
595+
<section class="cnt-wdth-lmtd">
596+
<h3>With cnt-wdth-lmtd class</h3>
597+
<ol class="lst-stps ld-zr">
598+
<li>
599+
<h4>Header for step 1</h4>
600+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum urna justo, porta ultrices purus blandit a. Nunc sed quam dolor. Donec vitae dapibus turpis, in ultrices nisl. Phasellus et tristique diam. Sed a sem eget nisi vehicula tristique et sit amet elit. Vivamus porta turpis sed sapien posuere blandit. Phasellus faucibus quis augue hendrerit tincidunt.</p>
601+
</li>
602+
<li>
603+
<h4>Header for step 2</h4>
604+
<p>Duis condimentum volutpat blandit. Praesent non justo venenatis, efficitur ex et, commodo libero.</p>
605+
<div class="row">
606+
<div class="col-md-6">
607+
<h5>Sub header for step 2</h5>
608+
<p>Aliquam gravida, lorem at finibus pulvinar, orci neque dignissim erat, eget ornare velit sem tincidunt lectus. Duis condimentum volutpat blandit.</p>
609+
</div>
610+
<div class="col-md-6">
611+
<h5>Sub header for step 2</h5>
612+
<p>Phasellus non lacinia dolor, eu scelerisque est. Donec sed elementum odio. Sed molestie molestie tempor. Praesent non justo venenatis, efficitur ex et, commodo libero.</p>
613+
</div>
614+
</div>
615+
</li>
616+
<li>
617+
<h4>Header for step 3</h4>
618+
<p>Mauris ut consequat urna, sit amet interdum risus. Sed eu nulla ac nisl commodo laoreet nec eget ante.</p>
619+
<details>
620+
<summary>Example</summary>
621+
<p>Quisque lorem tortor, cursus et pretium at, porta in risus. Donec ut placerat lorem. Curabitur neque ex, rutrum a justo sit amet, placerat viverra magna.</p>
622+
<p>Curabitur nunc dolor, molestie efficitur ullamcorper posuere, eleifend vitae lorem.</p>
623+
</details>
624+
</li>
625+
<li>
626+
<h4>Header for step 4</h4>
627+
<p>Quisque id accumsan tellus. Nunc sed volutpat ligula, eget semper arcu. Cras bibendum leo leo, sit amet varius turpis fermentum vel. Phasellus dapibus, ipsum sed volutpat efficitur, est massa dapibus nunc, vel vestibulum mauris nisl ac elit. Aliquam ultricies dignissim ligula ac interdum. Curabitur finibus cursus elementum. Maecenas ullamcorper interdum viverra. Sed massa eros, sagittis ut ipsum eget, lobortis pharetra leo.</p>
628+
</li>
629+
</ol>
630+
<h4>Code</h4>
631+
<details>
632+
<summary>View code</summary>
633+
<pre><code>&lt;section class="cnt-wdth-lmtd"&gt;
634+
&lt;ol class="lst-stps ld-zr"&gt;
635+
&lt;li&gt;...&lt;/li&gt;
636+
&lt;li&gt;&lt;div&gt;...&lt;/div&gt;&lt;/li&gt;
637+
&lt;li&gt;...&lt;/li&gt;
638+
&lt;li&gt;...&lt;/li&gt;
639+
&lt;/ol&gt;
640+
&lt;/section&gt;
641+
</code></pre>
642+
</details>
643+
</section>
644+
</section>

‎components/list-steps/list-steps-fr.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ <h2>Sur cette page</h2>
1919
<li><a href="#rayee">Conception rayée</a></li>
2020
<li><a href="#rayeesousliste">Conception rayée pour la sous-liste</a></li>
2121
<li><a href="#startattr">Attribut de début (<span lang="en">start</span>)</a></li>
22+
<li><a href="#limitwidth">Largeur de contenu limitée</a></li>
2223
</ul>
2324
</section>
2425

@@ -590,3 +591,57 @@ <h4>Exemple avec titre et section suivant l'étape 9, attendu à être l'étape
590591
</li>
591592
</ol>
592593
</section>
594+
<section>
595+
<h2 id="limitwidth">Largeur de contenu limitée</h2>
596+
<p>Les éléments de liste sont normalement restreints en largeur de caractères lorsqu'on utilise la classe <code>cnt-wdth-lmtd</code>. Une étape de liste contenant une balise <code>&lt;div&gt;</code>, <code>&lt;section&gt;</code> ou <code>&lt;table&gt;</code> ne sera pas restreinte en largeur de caractères, ni les composants à l'intérieur.</p>
597+
<p>Cependant, les éléments normalement restreints par la classe <code>cnt-wdth-lmtd</code> seront toujours affectés à l'intérieur de ces balises.</p>
598+
<section class="cnt-wdth-lmtd">
599+
<h3>Avec la classe cnt-wdth-lmtd</h3>
600+
<ol class="lst-stps ld-zr">
601+
<li>
602+
<h4>En-tête pour l'étape 1</h4>
603+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum urna justo, porta ultrices purus blandit a. Nunc sed quam dolor. Donec vitae dapibus turpis, in ultrices nisl. Phasellus et tristique diam. Sed a sem eget nisi vehicula tristique et sit amet elit. Vivamus porta turpis sed sapien posuere blandit. Phasellus faucibus quis augue hendrerit tincidunt.</p>
604+
</li>
605+
<li>
606+
<h4>En-tête pour l'étape 2</h4>
607+
<p>Duis condimentum volutpat blandit. Praesent non justo venenatis, efficitur ex et, commodo libero.</p>
608+
<div class="row">
609+
<div class="col-md-6">
610+
<h5>Sous-titre pour l'étape 2</h5>
611+
<p>Aliquam gravida, lorem at finibus pulvinar, orci neque dignissim erat, eget ornare velit sem tincidunt lectus. Duis condimentum volutpat blandit.</p>
612+
</div>
613+
<div class="col-md-6">
614+
<h5>Sous-titre pour l'étape 2</h5>
615+
<p>Phasellus non lacinia dolor, eu scelerisque est. Donec sed elementum odio. Sed molestie molestie tempor. Praesent non justo venenatis, efficitur ex et, commodo libero.</p>
616+
</div>
617+
</div>
618+
</li>
619+
<li>
620+
<h4>En-tête pour l'étape 3</h4>
621+
<p>Mauris ut consequat urna, sit amet interdum risus. Sed eu nulla ac nisl commodo laoreet nec eget ante.</p>
622+
<details>
623+
<summary>Example</summary>
624+
<p>Quisque lorem tortor, cursus et pretium at, porta in risus. Donec ut placerat lorem. Curabitur neque ex, rutrum a justo sit amet, placerat viverra magna.</p>
625+
<p>Curabitur nunc dolor, molestie efficitur ullamcorper posuere, eleifend vitae lorem.</p>
626+
</details>
627+
</li>
628+
<li>
629+
<h4>En-tête pour l'étape 4</h4>
630+
<p>Quisque id accumsan tellus. Nunc sed volutpat ligula, eget semper arcu. Cras bibendum leo leo, sit amet varius turpis fermentum vel. Phasellus dapibus, ipsum sed volutpat efficitur, est massa dapibus nunc, vel vestibulum mauris nisl ac elit. Aliquam ultricies dignissim ligula ac interdum. Curabitur finibus cursus elementum. Maecenas ullamcorper interdum viverra. Sed massa eros, sagittis ut ipsum eget, lobortis pharetra leo.</p>
631+
</li>
632+
</ol>
633+
<h4>Code</h4>
634+
<details>
635+
<summary>Visualiser le code</summary>
636+
<pre><code>&lt;section class="cnt-wdth-lmtd"&gt;
637+
&lt;ol class="lst-stps ld-zr"&gt;
638+
&lt;li&gt;...&lt;/li&gt;
639+
&lt;li&gt;&lt;div&gt;...&lt;/div&gt;&lt;/li&gt;
640+
&lt;li&gt;...&lt;/li&gt;
641+
&lt;li&gt;...&lt;/li&gt;
642+
&lt;/ol&gt;
643+
&lt;/section&gt;
644+
</code></pre>
645+
</details>
646+
</section>
647+
</section>

0 commit comments

Comments
 (0)