MDL-78955 lib: fix choice list styling

lib/classes/output/choicelist.php

@@ -169,7 +169,7 @@ class choicelist implements renderable, named_templatable {
         $options = [];
         foreach ($this->options as $option) {
             if (!empty($option['icon'])) {
-                $option['icon'] = $option['icon']->export_for_template($output);
+                $option['icon'] = $option['icon']->export_for_pix($output);
             }
             $option['hasicon'] = !empty($option['icon']);
 

lib/templates/local/choicelist.mustache

@@ -78,7 +78,7 @@
         ]
     }
 }}
-<div class="d-flex flex-column choicelist" role="listbox">
+<div class="d-flex flex-column choicelist p-1" role="listbox">
     {{#options}}
         {{> core/local/choicelist/option}}
     {{/options}}

lib/templates/local/choicelist/option.mustache

@@ -52,15 +52,10 @@
     class="d-flex flex-row align-items-start p-2 mb-1 {{!
         }} position-relative rounded dropdown-item-outline {{!
         }} {{#disabled}} dimmed_text {{/disabled}} {{!
-        }} {{#selected}} bg-light selected {{/selected}}"
+        }} {{#selected}} border bg-primary-light selected {{/selected}}"
     data-optionnumber="{{optionnumber}}"
     data-selected="{{selected}}"
 >
-    {{#icon}}
-    <div class="option-icon">
-        {{>core/pix_icon}}
-    </div>
-    {{/icon}}
     <div class="option-select-indicator">
         <span class="{{^selected}} d-none {{/selected}}" data-for="checkedIcon">
             {{#pix}} i/checkedcircle, core, {{#str}} selected, form {{/str}} {{/pix}}
@@ -69,11 +64,17 @@
             {{#pix}} i/uncheckedcircle{{/pix}}
         </span>
     </div>
+    {{#icon}}
+    <div class="option-icon">
+        {{#pix}}{{key}}, {{component}}, {{title}}{{/pix}}
+    </div>
+    {{/icon}}
     <div class="option-name">
         <a
-            class="stretched-link text-wrap {{!
+            class="stretched-link text-wrap font-weight-bold {{!
+                }} {{^disabled}} text-dark {{/disabled}} {{!
                 }} {{#disabled}} disabled {{/disabled}} {{!
-                }} {{#selected}} selected disabled {{/selected}}"
+                }} {{#selected}} selected {{/selected}}"
             role="option"
             {{#selected}} aria-selected="true" {{/selected}}
             {{#description}} aria-describedby="{{optionuniqid}}" {{/description}}
@@ -89,7 +90,9 @@
             {{name}}
         </a>
         {{#description}}
-        <div id="{{optionuniqid}}" class="option-description small text-muted text-wrap">
+        <div
+            id="{{optionuniqid}}"
+            class="option-description small text-muted text-wrap">
             {{{description}}}
         </div>
         {{/description}}

theme/boost/scss/moodle/action-menu.scss

@@ -30,10 +30,6 @@
     .dropdown-subpanel-content {
         max-width: $modal-sm;
         box-shadow: 0 0 1rem rgba($black, .15);
-
-        a:focus {
-            outline: solid $primary;
-        }
     }
 
     .dropdown-subpanel-content.show {

theme/boost/scss/moodle/core.scss

@@ -257,6 +257,10 @@ button.close,
     color: map-get($theme-colors, 'info');
 }
 
+.bg-primary-light {
+    background-color: $primary-light-background;
+}
+
 .fitem.advanced .text-info {
     font-weight: bold;
 }
@@ -3178,18 +3182,11 @@ blockquote {
 
 /* Choice list component. */
 .choicelist {
-    min-width: $modal-sm;
-}
+    // Choicelist is designed to fit inside a small modal.
+    min-width: calc(#{$modal-sm} - 25px);
 
-[data-region="fixed-drawer"] {
-    .choicelist {
-        min-width: calc(#{$modal-sm} - 25px);
-    }
-}
-
-@include media-breakpoint-down(xs) {
-    // Modal small are larger than xs breakpoint.
-    .choicelist {
-        min-width: calc(#{$modal-sm} - 25px);
+    // Align the font based icons.
+    i.icon {
+        vertical-align: middle;
     }
 }

theme/boost/style/moodle.css

@@ -23138,6 +23138,10 @@ button.close:focus:hover,
   color: #008196;
 }
 
+.bg-primary-light {
+  background-color: #f5f9fc;
+}
+
 .fitem.advanced .text-info {
   font-weight: bold;
 }
@@ -25985,18 +25989,12 @@ blockquote {
 
 /* Choice list component. */
 .choicelist {
-  min-width: 300px;
-}
-
-[data-region=fixed-drawer] .choicelist {
   min-width: calc(300px - 25px);
 }
-
-@media (max-width: 575.98px) {
-  .choicelist {
-    min-width: calc(300px - 25px);
-  }
+.choicelist i.icon {
+  vertical-align: middle;
 }
+
 .action-menu .dropdown-toggle {
   text-decoration: none;
   display: inline-block;
@@ -26023,9 +26021,6 @@ blockquote {
   max-width: 300px;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
 }
-.action-menu .dropdown-subpanel-content a:focus {
-  outline: solid #0f6cbf;
-}
 .action-menu .dropdown-subpanel-content.show {
   animation: 0.15s animate-pop;
 }

theme/classic/style/moodle.css

@@ -23138,6 +23138,10 @@ button.close:focus:hover,
   color: #008196;
 }
 
+.bg-primary-light {
+  background-color: #f5f9fc;
+}
+
 .fitem.advanced .text-info {
   font-weight: bold;
 }
@@ -25985,18 +25989,12 @@ blockquote {
 
 /* Choice list component. */
 .choicelist {
-  min-width: 300px;
-}
-
-[data-region=fixed-drawer] .choicelist {
   min-width: calc(300px - 25px);
 }
-
-@media (max-width: 575.98px) {
-  .choicelist {
-    min-width: calc(300px - 25px);
-  }
+.choicelist i.icon {
+  vertical-align: middle;
 }
+
 .action-menu .dropdown-toggle {
   text-decoration: none;
   display: inline-block;
@@ -26023,9 +26021,6 @@ blockquote {
   max-width: 300px;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
 }
-.action-menu .dropdown-subpanel-content a:focus {
-  outline: solid #0f6cbf;
-}
 .action-menu .dropdown-subpanel-content.show {
   animation: 0.15s animate-pop;
 }