diff --git "a/m\303\251li-m\303\251lo/2021-05-conjunction/and-or.css" "b/m\303\251li-m\303\251lo/2021-05-conjunction/and-or.css"
index f184bae1e..7f942909e 100644
--- "a/m\303\251li-m\303\251lo/2021-05-conjunction/and-or.css"
+++ "b/m\303\251li-m\303\251lo/2021-05-conjunction/and-or.css"
@@ -120,6 +120,11 @@ html:lang(fr) .cnjnctn-type-or > [class*=cnjnctn-col]:not(:first-child):before {
[class*=cnjnctn-type-].cnjnctn-xs > [class*=cnjnctn-col]:not(:first-child):after {
border-image: linear-gradient(to bottom, #ffffff 0.3em, #ffffff 0.3em, transparent 0.3em, transparent 2.35em, #ffffff 2.35em, #ffffff 2.35em) 1 100%;
}
+ @-moz-document url-prefix() {
+ [class*=cnjnctn-type-].cnjnctn-xs > [class*=cnjnctn-col]:not(:first-child):after {
+ border-left: none;
+ }
+ }
}
[class*=cnjnctn-type-].cnjnctn-xs > [class*=cnjnctn-col]:not(:first-child) {
margin-left: 1.4em;
@@ -183,6 +188,11 @@ html:lang(fr) .cnjnctn-type-or > [class*=cnjnctn-col]:not(:first-child):before {
@media (prefers-contrast: more) {
[class*=cnjnctn-type-].cnjnctn-sm > [class*=cnjnctn-col]:not(:first-child):after {
border-image: linear-gradient(to bottom, #ffffff 0.3em, #ffffff 0.3em, transparent 0.3em, transparent 2.35em, #ffffff 2.35em, #ffffff 2.35em) 1 100%;
+ }
+ @-moz-document url-prefix() {
+ [class*=cnjnctn-type-].cnjnctn-sm > [class*=cnjnctn-col]:not(:first-child):after {
+ border-left: none;
+ }
}
}
.cnjnctn-type-and.cnjnctn-sm > [class*=cnjnctn-col]:not(:first-child):before {
@@ -228,6 +238,11 @@ html:lang(fr) .cnjnctn-type-or > [class*=cnjnctn-col]:not(:first-child):before {
@media (prefers-contrast: more) {
[class*=cnjnctn-type-].cnjnctn-md > [class*=cnjnctn-col]:not(:first-child):after {
border-image: linear-gradient(to bottom, #ffffff 0.3em, #ffffff 0.3em, transparent 0.3em, transparent 2.35em, #ffffff 2.35em, #ffffff 2.35em) 1 100%;
+ }
+ @-moz-document url-prefix() {
+ [class*=cnjnctn-type-].cnjnctn-md > [class*=cnjnctn-col]:not(:first-child):after {
+ border-left: none;
+ }
}
}
.cnjnctn-type-and.cnjnctn-md > [class*=cnjnctn-col]:not(:first-child):before {
@@ -273,6 +288,11 @@ html:lang(fr) .cnjnctn-type-or > [class*=cnjnctn-col]:not(:first-child):before {
@media (prefers-contrast: more) {
[class*=cnjnctn-type-].cnjnctn-lg > [class*=cnjnctn-col]:not(:first-child):after {
border-image: linear-gradient(to bottom, #ffffff 0.3em, #ffffff 0.3em, transparent 0.3em, transparent 2.35em, #ffffff 2.35em, #ffffff 2.35em) 1 100%;
+ }
+ @-moz-document url-prefix() {
+ [class*=cnjnctn-type-].cnjnctn-lg > [class*=cnjnctn-col]:not(:first-child):after {
+ border-left: none;
+ }
}
}
.cnjnctn-type-and.cnjnctn-lg > [class*=cnjnctn-col]:not(:first-child):before {
diff --git "a/m\303\251li-m\303\251lo/2021-05-conjunction/index.html" "b/m\303\251li-m\303\251lo/2021-05-conjunction/index.html"
index 573852f36..f6e6181f1 100644
--- "a/m\303\251li-m\303\251lo/2021-05-conjunction/index.html"
+++ "b/m\303\251li-m\303\251lo/2021-05-conjunction/index.html"
@@ -18,27 +18,23 @@
Table of content
GCWeb implementation plan
+
+{% assign implPlan = site.pages | where: "output", "false" | where: "componentName", "2021-05-conjunction" | first %}
+
- - 2021-06 - Engage with TBS to show them this design pattern
- - 2021-06 - Provide UX research and analysis to describe how pattern helps usability
- - 2021-10 - Review and identify requirement to make this functionality enterprise ready
- - 2021-11 - Produce accessibility and usability report on its usage on Canada.ca
- - 2022-02 - Have this feature as provisional feature in GCWeb and get TBS to publish guidance on how to use it.
- - 2022-05 - updated to focus more on using as list items (with or without headers)
- - 2022-09 - updated CSS to allow nested decision points
- - 2022-11 - updated CSS to allow no border on always stacked items
- - 2023-07 - updated CRA to allow no border on all resolutions when stacked
- - 2023-08 - allow for zoom text resolution of 200%
-
- 2023-10 - have this feature as provisional/stable feature in GCWeb and get TBS to publish guidance on how to use it.
- - 2024-04 - updated to fix design when text is smaller, make border visible in high contrast mode
+{% for deliverable in implPlan.implementationPlan %}
+ - {{ deliverable.due }} - {{ deliverable.what }}
+{% endfor %}
Todo and for future consideration
- - >Finalize documentation and examples to be merged into GCWeb library.
+{% for todo in implPlan.todos %}
+ - {{ todo }}
+{% endfor %}
-Lead: CRA - Christopher Oakes (@christopher-o)
+Sponsor: {{ implPlan.sponsor }}
- Documentation
- Questions or comments?
diff --git "a/m\303\251li-m\303\251lo/2021-05-conjunction/meta.md" "b/m\303\251li-m\303\251lo/2021-05-conjunction/meta.md"
index 9821225d8..9eb974f35 100644
--- "a/m\303\251li-m\303\251lo/2021-05-conjunction/meta.md"
+++ "b/m\303\251li-m\303\251lo/2021-05-conjunction/meta.md"
@@ -6,14 +6,18 @@ feature: méli-mélo
title:
"@id": dct:title
"@container": "@language"
- description: dct:description
+ description:
+ "@id": dct:description
+ "@container": "@language"
modified: dct:modified
title:
en: Conjunctions (and/or)
fr: Conjonction (et/ou)
-description: Conjunctions for stacked or side by side decision points, and/or
-modified: 2024-05-30
+description:
+ en: Conjunctions for stacked or side by side decision points, and/or
+ fr: Conjonctions pour des points de décision empilés ou côte à côte, et/ou
+modified: 2024-08-07
componentName: 2021-05-conjunction
sponsor: CRA - Christopher Oakes (@christopher-o)
@@ -30,22 +34,39 @@ implementationPlan:
- due: 2021-06
what: Engage with TBS to show them this design pattern
- due: 2021-06
- what: Provide UX research and analysis to describe how pattern helps usability
+ what: Provide UX research and analysis to describe how pattern helps usability
- due: 2021-10
what: Review and identify requirement to make this functionality enterprise ready
- due: 2021-11
what: Produce accessibility and usability report on its usage on Canada.ca
- due: 2022-02
what: Have this feature as provisional feature in GCWeb and get TBS to publish guidance on how to use it.
+ - due: 2022-05
+ what: updated to focus more on using as list items (with or without headers)
+ - due: 2022-09
+ what: updated CSS to allow nested decision points
+ - due: 2022-11
+ what: updated CSS to allow no border on always stacked items
+ - due: 2023-07
+ what: updated CRA to allow no border on all resolutions when stacked
+ - due: 2023-08
+ what: allow for zoom text resolution of 200%
+ - due: 2023-10
+ what: have this feature as provisional/stable feature in GCWeb and get TBS to publish guidance on how to use it.
+ - due: 2024-04
+ what: updated to fix design when text is smaller, make border visible in high contrast mode
todos:
- - Review code and governance to balance optimal accessibility and ease of implimentation by users.
+ - Finalize design
changes:
- date: 2024-06-20
description: Changed border to appear in high contrast. Changed font size of CSS generated text to em value for better scalability between parent font sizes. Increased miminum height of side by side pattern to create consistant border above and below CSS text design. Updated governance towards stabilization.
departmentImpact: No change from a departmental perspective.
publicImpact: Allows border to be shown in high contrast (could require additional adjustment for FF and MacOS browsers). Fixed issue of using design in font sizes other than 20px (GCWeb standard)
-
+ - date: 2024-08-07
+ description: Change was to remove the side-by-side line separator in Firefox (but keep the shape and text) when in High contrast mode. The previous pattern had the line separator "cut" through the words (and/or) which could make it slightly illegible.
+ departmentImpact: There is minimal impact, as we do not normally use Firefox as a browser, nor does the majority of users use high contrast mode on their devices.
+ publicImpact: Only those who use high contrast mode with the Firefox browser, and will be a slight improvement on readability of the text.
output: false
---
diff --git "a/m\303\251li-m\303\251lo/2021-05-steps/meta.md" "b/m\303\251li-m\303\251lo/2021-05-steps/meta.md"
index b809061c2..2f65c8c53 100644
--- "a/m\303\251li-m\303\251lo/2021-05-steps/meta.md"
+++ "b/m\303\251li-m\303\251lo/2021-05-steps/meta.md"
@@ -52,6 +52,9 @@ changes:
description: Reduced excessive spacing for small amount of content. Removed background color for default list steps number (except in striped mode) as was not showing up properly in high contrast mode. Updated governance towards stabilization.
departmentImpact: No change from a departmental perspective.
publicImpact: Created a cleaner look for items using list steps with a smaller amount of content. Made the numbers more visible for edge case scenarios of print and high contrast.
-
+ - date: 2024-08-07
+ description: Fixed issue with printing pages as some text would be cut off
+ departmentImpact: No change from a departmental perspective.
+ publicImpact: Improved look of print document
output: false
---
diff --git "a/m\303\251li-m\303\251lo/2021-05-steps/steps.css" "b/m\303\251li-m\303\251lo/2021-05-steps/steps.css"
index a8572acf2..062ab3dff 100644
--- "a/m\303\251li-m\303\251lo/2021-05-steps/steps.css"
+++ "b/m\303\251li-m\303\251lo/2021-05-steps/steps.css"
@@ -111,3 +111,11 @@ ol.lst-stps.stps-strpd:not(.ld-zr) > li:before, ol.lst-stps.stps-strpd:not(.ld-z
padding-left: 3em;
}
}
+@media print {
+ ol.lst-stps>li {
+ -webkit-break-inside: avoid;
+ -moz-break-inside: avoid;
+ break-inside: avoid;
+ padding-top:1em;
+ }
+}