Switch icons implementation to SVG, with checkbox improvements (#8054)

CHANGELOG.txt

@@ -15,9 +15,13 @@ Changelog
  * Remove redirect auto-creation recipe from documentation as this feature is now supported in Wagtail core (Andy Babic)
  * Remove IE11 warnings (Gianluca De Cola)
  * Remove the legacy Hallo rich text editor as it has moved to an external package (LB (Ben Johnston))
+ * Increase the size of checkboxes throughout the UI, and simplify their alignment (Steven Steinwand)
  * Fix: When using `simple_translations` ensure that the user is redirected to the page edit view when submitting for a single locale (Mitchel Cabuloy)
  * Fix: When previewing unsaved changes to `Form` pages, ensure that all added fields are correctly shown in the preview (Joshua Munn)
  * Fix: When Documents (e.g. PDFs) have been configured to be served inline via `WAGTAILDOCS_CONTENT_TYPES` & `WAGTAILDOCS_INLINE_CONTENT_TYPES` ensure that the filename is correctly set in the `Content-Disposition` header so that saving the files will use the correct filename (John-Scott Atlakson)
+ * Fix: Improve the contrast of the “Remember me” checkbox against the login page’s background (Steven Steinwand)
+ * Fix: Group permission rows with custom permissions no longer have extra padding (Steven Steinwand)
+ * Fix: Make sure the focus outline of checkboxes is fully around the outer border (Steven Steinwand)
 
 
 2.16.2 (xx.xx.xxxx) - IN DEVELOPMENT

client/scss/components/_button.scss

@@ -243,7 +243,13 @@
       font-style: normal;
     }
 
-    &.button-longrunning-active span {
+    &-active {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &-active span {
       // iconfont
       transform: scale(1);
       visibility: visible;
@@ -269,17 +275,14 @@
       display: none;
     }
 
-    &.button-longrunning-active svg.icon-spinner {
+    &-active svg.icon-spinner {
       @include svg-icon();
-
-      transform: scale(1);
       display: inline-block;
       opacity: 0.8;
       padding: 0;
-      margin-right: 0.5em;
     }
 
-    &.button-longrunning-active .button-longrunning__icon {
+    &-active .button-longrunning__icon {
       display: none;
     }
   }

client/scss/components/_forms.scss

@@ -90,7 +90,7 @@
     bottom: 0;
     width: 1.5em;
     font-family: $font-wagtail-icons;
-    content: map.get($icons, 'arrow-down');
+    content: map.get($icons, 'arrow-down'); // UI-Redesign: to be removed
     border: 1px solid $color-input-border;
     border-width: 0 0 0 1px;
     text-align: center;
@@ -130,6 +130,7 @@
     color: $color-text-error-forced-color;
   }
 
+  // UI-Redesign: to be added via js and styled here
   &::before {
     font-family: $font-wagtail-icons;
     vertical-align: -10%;
@@ -243,19 +244,19 @@ label.required:after {
 .date_field,
 .date_time_field {
   .input:before {
-    content: map.get($icons, 'date');
+    content: map.get($icons, 'date'); // UI-Redesign: To be removed
   }
 }
 
 .time_field {
   .input:before {
-    content: map.get($icons, 'time');
+    content: map.get($icons, 'time'); // UI-Redesign: To be removed
   }
 }
 
 .url_field {
   .input:before {
-    content: map.get($icons, 'link');
+    content: map.get($icons, 'link'); // UI-Redesign: To be removed
   }
 }
 
@@ -271,7 +272,8 @@ label.required:after {
 .multiple_choice_field .input li,
 .choice_field .input li {
   label {
-    display: block;
+    display: inline-flex;
+    align-items: center;
     width: auto;
     float: none;
     padding-top: 0; // Negates padding added to label for the group of fields as a whole
@@ -531,8 +533,8 @@ li.inline:first-child {
       }
 
       > svg {
-        width: 30px;
-        height: 30px;
+        width: 35px;
+        height: 35px;
         color: $color-teal;
 
         @media (forced-colors: $media-forced-colours) {

client/scss/components/_header.scss

@@ -47,6 +47,14 @@ header {
     float: right;
   }
 
+  .search-form .icon {
+    @include svg-icon(1.3rem);
+    color: $nav-search-color;
+    position: absolute;
+    top: 0.3em;
+    left: 0.5em;
+  }
+
   // For case where content below header should merge with it
   &.merged {
     margin-bottom: 0;

client/scss/components/_help-block.scss

@@ -27,20 +27,18 @@
   padding-left: 3.5em;
   position: relative;
 
-  &:before {
-    font-family: $font-wagtail-icons;
+  .icon {
+    @include svg-icon(1.25rem);
     position: absolute;
-    left: 1em;
-    top: 0.7em;
-    content: map.get($icons, 'help');
-    font-size: 1.4em;
+    left: 1.125rem;
+    top: 0.8125rem;
   }
 }
 
 .help-info {
   background-color: color.adjust($color-blue, $lightness: 30%);
 
-  &:before {
+  .icon-help {
     color: $color-blue;
   }
 }
@@ -48,18 +46,16 @@
 .help-warning {
   background-color: color.adjust($color-orange, $lightness: 30%);
 
-  &:before {
+  .icon-warning {
     color: $color-orange;
-    content: map.get($icons, 'warning');
   }
 }
 
 .help-critical {
   background-color: color.adjust($color-red, $lightness: 40%);
 
-  &:before {
+  .icon-warning {
     color: $color-red;
-    content: map.get($icons, 'warning');
   }
 }
 

client/scss/components/_loading-mask.scss

@@ -21,17 +21,17 @@
     }
 
     &:after {
-      font-size: 30px;
-      width: 30px;
-      line-height: 30px;
+      content: '';
+      display: block;
+      width: 1.875rem;
+      height: 1.875rem;
       left: 50%;
       top: 50%;
-      margin: -15px 0 0 -15px;
-      font-family: $font-wagtail-icons;
       animation: spin-wag 0.5s infinite linear;
-      content: map.get($icons, 'spinner');
+      mask-image: url('#{$images-root}icons/spinner.svg');
+      mask-repeat: no-repeat;
       z-index: 2;
-      color: $color-teal;
+      background: $color-teal;
     }
   }
 }

client/scss/components/_main-nav.scss

@@ -256,17 +256,6 @@
     &:active {
       background-color: $nav-item-active-bg;
     }
-
-    &:before {
-      font-family: $font-wagtail-icons;
-      font-weight: 200;
-      text-transform: none;
-      content: map.get($icons, 'search');
-      display: block;
-      height: 100%;
-      line-height: 3.3em;
-      padding: 0 1em;
-    }
   }
 }
 

client/scss/components/_tag.scss

@@ -9,11 +9,15 @@
   white-space: nowrap;
 
   &:before {
-    font-family: $font-wagtail-icons;
+    content: '';
     display: inline-block;
-    color: $color-white;
-    content: map.get($icons, 'tag');
-    padding-right: 0.5em;
+    background: $color-white;
+    padding-right: 0.5rem;
+    width: 16px;
+    height: 16px;
+    mask-image: url('#{$images-root}icons/tag.svg');
+    mask-repeat: no-repeat;
+    transform: translateY(3px);
   }
 
   .taglist & {

client/scss/elements/_forms.scss

@@ -153,63 +153,68 @@ input[type='checkbox'] {
 }
 
 input[type='radio'] {
-  height: 12px;
-  width: auto;
+  display: inline-block;
+  height: 1.75rem;
+  width: 1.75rem;
+  margin-right: 0.625rem;
   position: relative;
-  margin-right: 27px;
+  background: $color-white;
+  border-radius: 100%;
+  border: 1px solid $color-grey-4;
 }
 
 input[type='radio']:before {
-  border-radius: 100%;
-  font-family: $font-wagtail-icons;
-  font-style: normal;
+  content: '';
   text-align: center;
   position: absolute;
-  top: -5px;
-  left: -2px;
+  top: 0.1875rem;
+  left: 0.1875rem;
   cursor: pointer;
   display: block;
-  content: map.get($icons, 'radio-full');
-  width: 1em;
-  height: 1em;
-  line-height: 1.1em;
+  width: 0.75rem;
+  height: 0.75rem;
   padding: 4px;
-  background-color: $color-white;
-  color: $color-grey-4;
-  border: 1px solid $color-grey-4;
+  background: $color-grey-4;
+  mask-image: url('#{$images-root}icons/radio-full.svg');
+  mask-repeat: no-repeat;
 }
 
 input[type='radio']:checked:before {
-  content: map.get($icons, 'radio-full');
-  color: $color-teal;
+  mask-repeat: no-repeat;
+  background: $color-teal;
 }
 
 input[type='checkbox'] {
-  height: 12px;
-  width: 22px;
+  height: 1.375rem;
+  width: 1.375rem;
   position: relative;
   margin-right: 5px;
+  background: $color-white;
+  border: 1px solid $color-grey-4;
+  vertical-align: bottom;
 }
 
 input[type='checkbox']:before {
-  font-family: $font-wagtail-icons;
-  font-style: normal;
-  text-align: center;
+  content: '';
   position: absolute;
-  top: -5px;
+  top: 2px;
+  left: 2px;
   cursor: pointer;
   display: block;
-  content: '';
   line-height: 20px;
-  width: 20px;
-  height: 20px;
-  background-color: $color-white;
-  border: 1px solid $color-grey-4;
-  color: $color-teal;
+  width: 1rem;
+  height: 1rem;
+  background: transparent;
 }
 
 input[type='checkbox']:checked:before {
-  content: map.get($icons, 'tick');
+  background: $color-teal;
+  mask-image: url('#{$images-root}icons/tick.svg');
+  mask-repeat: no-repeat;
+  width: 1rem;
+  height: 1rem;
+  top: 2px;
+  left: 2px;
 }
 
 input[type='checkbox'][disabled]:before {

client/scss/overrides/_vendor.datetimepicker.scss

@@ -86,7 +86,7 @@
     float: left;
 
     &:before {
-      content: map.get($icons, 'arrow-left');
+      content: map.get($icons, 'arrow-left'); // UI-Redesign: to be removed
     }
   }
 
@@ -95,7 +95,7 @@
     margin-left: 5px;
 
     &:before {
-      content: map.get($icons, 'home');
+      content: map.get($icons, 'home'); // UI-Redesign: to be removed
     }
   }
 
@@ -103,7 +103,7 @@
     float: right;
 
     &:before {
-      content: map.get($icons, 'arrow-right');
+      content: map.get($icons, 'arrow-right'); // UI-Redesign: to be removed
     }
   }
 
@@ -129,11 +129,11 @@
     }
 
     .xdsoft_prev:before {
-      content: map.get($icons, 'arrow-up');
+      content: map.get($icons, 'arrow-up'); // UI-Redesign: to be removed
     }
 
     .xdsoft_next:before {
-      content: map.get($icons, 'arrow-down');
+      content: map.get($icons, 'arrow-down'); // UI-Redesign: to be removed
     }
 
     .xdsoft_time_box {

client/scss/overrides/_vendor.tagit.scss

@@ -27,16 +27,18 @@
 
 .tagit-close {
   .ui-icon-close {
-    margin-left: 1em;
+    margin-left: 1rem;
     text-indent: 0;
-    background: none;
   }
 
   .ui-icon-close:before {
-    font-family: $font-wagtail-icons;
+    content: '';
     display: block;
-    color: $color-grey-3;
-    content: map.get($icons, 'cross');
+    width: 16px;
+    height: 16px;
+    background: $color-grey-3;
+    mask-image: url('#{$images-root}icons/cross.svg');
+    mask-repeat: no-repeat;
   }
 
   .ui-icon-close:hover:before {

client/src/components/Explorer/Explorer.scss

@@ -171,18 +171,12 @@ $menu-footer-height: 50px;
   }
 
   // Add select arrow back on browsers where native ui has been removed
-  > span:after {
-    z-index: 0;
+  &-icon {
     position: absolute;
-    right: $margin;
-    top: $margin + 3px;
-    bottom: 0;
-    width: 2em;
-    font-family: $font-wagtail-icons;
-    content: map.get($icons, 'arrow-down');
-    text-align: center;
-    font-size: 1.2em;
-    pointer-events: none;
+    right: 1rem;
+    top: 1rem;
+    width: 1.25rem;
+    height: 1.25rem;
     color: $color-grey-3;
 
     .ie & {

client/src/components/Explorer/ExplorerHeader.tsx

@@ -39,7 +39,7 @@ const SelectLocale: React.FunctionComponent<SelectLocaleProps> = ({
       <select value={locale} onChange={onChange} disabled={options.length < 2}>
         {options}
       </select>
-      <span />
+      <Icon name="arrow-down" className="c-explorer__header__select-icon" />
     </div>
   );
 };

client/src/components/PageExplorer/PageExplorer.scss

@@ -103,16 +103,16 @@ $explorer-header-horizontal-padding: 10px;
 
 .c-page-explorer__header__select {
   $margin: 10px;
+  margin-right: $margin;
 
   > select {
-    padding: 0;
-    padding-left: 10px;
-    padding-right: 30px;
+    padding: 5px 30px 5px 10px;
 
     background-color: $c-page-explorer-bg-dark;
     border-radius: 0;
     border-color: #4c4e4d;
     color: $color-white;
+    font-size: 0.875rem;
 
     &:disabled {
       border: 0;
@@ -130,18 +130,12 @@ $explorer-header-horizontal-padding: 10px;
   }
 
   // Add select arrow back on browsers where native ui has been removed
-  > span:after {
-    z-index: 0;
+  &-icon {
     position: absolute;
-    right: $margin;
-    top: $margin + 3px;
-    bottom: 0;
-    width: 2em;
-    font-family: $font-wagtail-icons;
-    content: map.get($icons, 'arrow-down');
-    text-align: center;
-    font-size: 1.2em;
-    pointer-events: none;
+    right: 1rem;
+    top: 1rem;
+    width: 1.25rem;
+    height: 1.25rem;
     color: $color-grey-3;
 
     .ie & {

client/src/components/PageExplorer/PageExplorerHeader.tsx

@@ -39,7 +39,10 @@ const SelectLocale: React.FunctionComponent<SelectLocaleProps> = ({
       <select value={locale} onChange={onChange} disabled={options.length < 2}>
         {options}
       </select>
-      <span />
+      <Icon
+        name="arrow-down"
+        className="c-page-explorer__header__select-icon"
+      />
     </div>
   );
 };

client/src/components/StreamField/blocks/FieldBlock.js

@@ -1,6 +1,8 @@
 /* global $ */
-
 import { escapeHtml as h } from '../../../utils/text';
+import ReactDOM from 'react-dom';
+import React from 'react';
+import Icon from '../../Icon/Icon';
 
 export class FieldBlock {
   constructor(blockDef, placeholder, prefix, initialState, initialError) {
@@ -66,11 +68,14 @@ export class FieldBlock {
       addCommentButtonElement.classList.add('button-secondary');
       addCommentButtonElement.classList.add('button-small');
       addCommentButtonElement.classList.add('u-hidden');
-      addCommentButtonElement.innerHTML =
-        '<svg class="icon icon-comment-add initial icon-default" aria-hidden="true">' +
-        '<use href="#icon-comment-add"></use></svg>' +
-        '<svg class="icon icon-comment-add initial icon-reversed" aria-hidden="true">' +
-        '<use href="#icon-comment-add-reversed"></use></svg>';
+
+      ReactDOM.render(
+        <>
+          <Icon name="comment-add" className="icon-default" />
+          <Icon name="comment-add-reversed" className="icon-reversed" />
+        </>,
+        addCommentButtonElement,
+      );
       fieldCommentControlElement.appendChild(addCommentButtonElement);
       window.comments.initAddCommentButton(addCommentButtonElement);
     }

client/src/components/StreamField/blocks/__snapshots__/FieldBlock.test.js.snap

@@ -41,5 +41,5 @@ exports[`telepath: wagtail.blocks.FieldBlock with comments enabled it renders co
             <span></span>
           </div>
         <p class=\\"help\\">drink <em>more</em> water</p></div>
-      <div class=\\"field-comment-control\\"><button type=\\"button\\" aria-label=\\"Add Comment\\" data-comment-add=\\"\\" class=\\"button button-secondary button-small u-hidden\\"><svg class=\\"icon icon-comment-add initial icon-default\\" aria-hidden=\\"true\\"><use href=\\"#icon-comment-add\\"></use></svg><svg class=\\"icon icon-comment-add initial icon-reversed\\" aria-hidden=\\"true\\"><use href=\\"#icon-comment-add-reversed\\"></use></svg></button></div></div>"
+      <div class=\\"field-comment-control\\"><button type=\\"button\\" aria-label=\\"Add Comment\\" data-comment-add=\\"\\" class=\\"button button-secondary button-small u-hidden\\"><svg class=\\"icon icon-comment-add icon-default\\" aria-hidden=\\"true\\"><use href=\\"#icon-comment-add\\"></use></svg><svg class=\\"icon icon-comment-add-reversed icon-reversed\\" aria-hidden=\\"true\\"><use href=\\"#icon-comment-add-reversed\\"></use></svg></button></div></div>"
 `;

docs/releases/2.17.md

@@ -34,6 +34,7 @@ The panel types `StreamFieldPanel`, `RichTextFieldPanel`, `ImageChooserPanel`, `
  * Remove `replace_text` management command (Sage Abdullah)
  * Replace `data_json` `TextField` with `data` `JSONField` in `BaseLogEntry` (Sage Abdullah)
  * Remove the legacy Hallo rich text editor as it has moved to an external package (LB (Ben Johnston))
+ * Increase the size of checkboxes throughout the UI, and simplify their alignment (Steven Steinwand)
 
 
 ### Bug fixes
@@ -42,6 +43,9 @@ The panel types `StreamFieldPanel`, `RichTextFieldPanel`, `ImageChooserPanel`, `
  * When using `simple_translations` ensure that the user is redirected to the page edit view when submitting for a single locale (Mitchel Cabuloy)
  * When previewing unsaved changes to `Form` pages, ensure that all added fields are correctly shown in the preview (Joshua Munn)
  * When Documents (e.g. PDFs) have been configured to be served inline via `WAGTAILDOCS_CONTENT_TYPES` & `WAGTAILDOCS_INLINE_CONTENT_TYPES` ensure that the filename is correctly set in the `Content-Disposition` header so that saving the files will use the correct filename (John-Scott Atlakson)
+ * Improve the contrast of the “Remember me” checkbox against the login page’s background (Steven Steinwand)
+ * Group permission rows with custom permissions no longer have extra padding (Steven Steinwand)
+ * Make sure the focus outline of checkboxes is fully around the outer border (Steven Steinwand)
 
 
 ## Upgrade considerations

wagtail/admin/static_src/wagtailadmin/images/icons/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path d="M12.469 6.563c0 0.094-0.031 0.156-0.094 0.219l-4.156 4.156c-0.063 0.063-0.156 0.094-0.219 0.094s-0.156-0.031-0.219-0.094l-4.156-4.156c-0.063-0.063-0.094-0.125-0.094-0.219 0-0.063 0.031-0.125 0.094-0.188l0.469-0.469c0.031-0.031 0.125-0.063 0.188-0.063 0.094 0 0.156 0.031 0.219 0.063l3.5 3.531 3.5-3.531c0.063-0.031 0.125-0.063 0.219-0.063 0.063 0 0.156 0.031 0.188 0.063l0.469 0.469c0.063 0.063 0.094 0.125 0.094 0.188z"></path>
+</svg>

wagtail/admin/static_src/wagtailadmin/images/icons/cross.svg

@@ -0,0 +1,3 @@
+<svg id="icon-cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path d="M13.313 11.313c0 0.219-0.094 0.438-0.25 0.594l-1.219 1.219c-0.156 0.156-0.375 0.25-0.625 0.25-0.219 0-0.438-0.094-0.594-0.25l-2.625-2.625-2.625 2.625c-0.156 0.156-0.375 0.25-0.594 0.25-0.25 0-0.469-0.094-0.625-0.25l-1.219-1.219c-0.156-0.156-0.25-0.375-0.25-0.594 0-0.25 0.094-0.438 0.25-0.625l2.625-2.625-2.625-2.625c-0.156-0.156-0.25-0.375-0.25-0.594 0-0.25 0.094-0.438 0.25-0.625l1.219-1.188c0.156-0.188 0.375-0.25 0.625-0.25 0.219 0 0.438 0.063 0.594 0.25l2.625 2.625 2.625-2.625c0.156-0.188 0.375-0.25 0.594-0.25 0.25 0 0.469 0.063 0.625 0.25l1.219 1.188c0.156 0.188 0.25 0.375 0.25 0.625 0 0.219-0.094 0.438-0.25 0.594l-2.625 2.625 2.625 2.625c0.156 0.188 0.25 0.375 0.25 0.625z"></path>
+</svg>

wagtail/admin/static_src/wagtailadmin/images/icons/radio-full.svg

@@ -0,0 +1,3 @@
+<svg id="icon-radio-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path d="M14.844 8c0 1.25-0.281 2.406-0.906 3.438-0.625 1.063-1.438 1.875-2.5 2.5-1.031 0.625-2.188 0.906-3.438 0.906s-2.406-0.281-3.438-0.906c-1.063-0.625-1.875-1.438-2.5-2.5-0.625-1.031-0.906-2.188-0.906-3.438s0.281-2.406 0.906-3.438c0.625-1.063 1.438-1.875 2.5-2.5 1.031-0.625 2.188-0.906 3.438-0.906s2.406 0.281 3.438 0.906c1.063 0.625 1.875 1.438 2.5 2.5 0.625 1.031 0.906 2.188 0.906 3.438z"></path>
+</svg>

wagtail/admin/static_src/wagtailadmin/images/icons/spinner.svg

@@ -0,0 +1,3 @@
+<svg id="icon-spinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path d="M3.339 12.661c-1.236-1.236-1.931-2.91-1.931-4.661 0-3.631 2.961-6.592 6.592-6.592l0.824 0.824-0.824 0.824c-2.729 0-4.944 2.214-4.944 4.944 0 1.313 0.515 2.575 1.442 3.502l-1.004 0.129zM8 14.592l-0.824-0.824 0.824-0.824c2.729 0 4.944-2.214 4.944-4.944 0-1.313-0.515-2.575-1.442-3.502l1.004-0.129 0.155-1.030c1.236 1.236 1.931 2.91 1.931 4.661 0 3.631-2.961 6.592-6.592 6.592z"></path>
+</svg>

wagtail/admin/static_src/wagtailadmin/images/icons/tag.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="icon-tag" viewBox="0 0 16 16">
+    <path d="M5.156 4c0-0.313-0.125-0.594-0.344-0.813s-0.5-0.344-0.813-0.344c-0.313 0-0.594 0.125-0.813 0.344s-0.344 0.5-0.344 0.813c0 0.313 0.125 0.594 0.344 0.813s0.5 0.344 0.813 0.344c0.313 0 0.594-0.125 0.813-0.344s0.344-0.5 0.344-0.813zM14.656 9.156c0 0.313-0.094 0.563-0.313 0.781l-4.375 4.406c-0.25 0.219-0.531 0.313-0.813 0.313-0.344 0-0.594-0.094-0.813-0.313l-6.375-6.406c-0.25-0.219-0.438-0.5-0.594-0.906-0.156-0.375-0.219-0.719-0.219-1.031v-3.719c0-0.313 0.094-0.563 0.313-0.813 0.25-0.219 0.5-0.313 0.813-0.313h3.719c0.313 0 0.656 0.063 1.031 0.219 0.406 0.156 0.688 0.344 0.938 0.594l6.375 6.375c0.219 0.219 0.313 0.5 0.313 0.813z"></path>
+</svg>

wagtail/admin/static_src/wagtailadmin/images/icons/tick.svg

@@ -0,0 +1,3 @@
+<svg id="icon-tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path d="M14.906 4.563c0 0.219-0.063 0.438-0.25 0.594l-7.656 7.688c-0.188 0.156-0.375 0.25-0.625 0.25-0.219 0-0.438-0.094-0.594-0.25l-4.438-4.438c-0.188-0.188-0.25-0.375-0.25-0.625 0-0.219 0.063-0.438 0.25-0.594l1.188-1.219c0.188-0.156 0.375-0.25 0.625-0.25 0.219 0 0.438 0.094 0.594 0.25l2.625 2.625 5.875-5.875c0.156-0.156 0.375-0.25 0.594-0.25 0.25 0 0.438 0.094 0.625 0.25l1.188 1.219c0.188 0.188 0.25 0.375 0.25 0.625z"></path>
+</svg>

wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss

@@ -61,12 +61,6 @@ a.button {
   height: 3.5em;
 }
 
-input[type='checkbox']:before {
-  background-color: #333;
-  color: #555;
-  border: 1px solid #555;
-}
-
 .fields-wrapper {
   position: relative;
 }

wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss

@@ -226,6 +226,7 @@
       text-shadow: none;
       font-family: $font-wagtail-icons;
       text-transform: none;
+      // UI Redesign: To be removed in page editor redesign
       content: map.get($icons, 'arrow-down');
       text-align: center;
       display: block;
@@ -302,6 +303,7 @@
   // special panel for the publishing fields, requires a bit more pizzazz
   &.publishing {
     > .title-wrapper:before {
+      // UI Redesign: To be removed in page editor redesign
       content: map.get($icons, 'date');
       font-size: 1.8rem;
       line-height: 1.4em;
@@ -311,6 +313,7 @@
 
   &.privacy {
     > .title-wrapper:before {
+      // UI Redesign: To be removed in page editor redesign
       content: map.get($icons, 'view');
     }
   }
@@ -392,6 +395,7 @@
 
     .title-wrapper {
       &:before {
+        // UI Redesign: To be removed in page editor redesign
         content: map.get($icons, 'collapse-up');
         cursor: pointer;
       }
@@ -400,6 +404,7 @@
     &.collapsed {
       .title-wrapper {
         &:before {
+          // UI Redesign: To be removed in page editor redesign
           content: map.get($icons, 'collapse-down');
         }
       }

wagtail/admin/templates/wagtailadmin/account/password_reset/confirm.html

@@ -30,6 +30,7 @@
 
                             {% if form.new_password1.errors %}
                                 <div class="help-block help-critical">
+                                    {% icon name='warning' %}
                                     {% for error in form.new_password1.errors %}
                                         <p class="error">{{ error }}</p>
                                     {% endfor %}
@@ -44,6 +45,7 @@
 
                             {% if form.new_password2.errors %}
                                 <div class="help-block help-critical">
+                                    {% icon name='warning' %}
                                     {% for error in form.new_password2.errors %}
                                         <p class="error">{{ error }}</p>
                                     {% endfor %}

wagtail/admin/templates/wagtailadmin/chooser/browse.html

@@ -1,4 +1,4 @@
-{% load i18n %}
+{% load i18n wagtailadmin_tags %}
 {% if page_types_restricted %}
     {% trans "Choose" as choose_str %}
 {% else %}
@@ -12,6 +12,7 @@
 
     {% if page_types_restricted %}
         <p class="help-block help-warning">
+            {% icon name='warning' %}
             {% blocktrans with type=page_type_names|join:", " count counter=page_type_names|length %}
                 Only pages of type "{{ type }}" may be chosen for this field. Search results will exclude pages of other types.
             {% plural %}

wagtail/admin/templates/wagtailadmin/collection_privacy/set_privacy.html

@@ -1,9 +1,12 @@
-{% load i18n %}
+{% load i18n wagtailadmin_tags %}
 {% trans "Collection privacy" as title_str %}
 {% include "wagtailadmin/shared/header.html" with title=title_str icon="no-view" %}
 
 <div class="nice-padding">
-    <p class="help-block help-info">{% trans "Privacy settings determine who is able to view documents in this collection." %}</p>
+    <p class="help-block help-info">
+        {% icon name='help' %}
+        {% trans "Privacy settings determine who is able to view documents in this collection." %}
+    </p>
     <form action="{% url 'wagtailadmin_collections:set_privacy' collection.id %}" method="POST" novalidate>
         {% csrf_token %}
         <ul class="fields">

wagtail/admin/templates/wagtailadmin/home/upgrade_notification.html

@@ -1,5 +1,5 @@
-{% load wagtailcore_tags %}
+{% load wagtailcore_tags wagtailadmin_tags %}
 
 <div data-upgrade data-wagtail-version="{% wagtail_version %}" class="panel nice-padding panel-upgrade-notification" style="display:none">
-    <div class="help-block help-warning">Wagtail upgrade available. Your version: <strong>{% wagtail_version %}</strong>. New version: <strong data-upgrade-version></strong>. <a data-upgrade-link href="">Read the release notes.</a></div>
+    <div class="help-block help-warning">{% icon name='warning' %}Wagtail upgrade available. Your version: <strong>{% wagtail_version %}</strong>. New version: <strong data-upgrade-version></strong>. <a data-upgrade-link href="">Read the release notes.</a></div>
 </div>

wagtail/admin/templates/wagtailadmin/page_privacy/set_privacy.html

@@ -1,9 +1,12 @@
-{% load i18n %}
+{% load i18n wagtailadmin_tags %}
 {% trans "Page privacy" as title_str %}
 {% include "wagtailadmin/shared/header.html" with title=title_str icon="no-view" %}
 
 <div class="nice-padding">
-    <p class="help-block help-warning">{% trans "Privacy changes apply to all children of this page too." %}</p>
+    <p class="help-block help-warning">
+        {% icon name='warning' %}
+        {% trans "Privacy changes apply to all children of this page too." %}
+    </p>
     <form action="{% url 'wagtailadmin_pages:set_privacy' page.id %}" method="POST" novalidate>
         {% csrf_token %}
         <ul class="fields">

wagtail/admin/templates/wagtailadmin/pages/listing/_list_explore.html

@@ -1,6 +1,6 @@
 {% extends "wagtailadmin/pages/listing/_list.html" %}
 
-{% load i18n %}
+{% load i18n wagtailadmin_tags %}
 
 {# Page listing include, customised for 'explore' mode #}
 
@@ -13,6 +13,7 @@
     {% if parent_page %}
         {% if parent_page.is_root %}
             <tr><td colspan="6"><div class="help-block help-info">
+                {% icon name='help' %}
                 {% if perms.wagtailcore.add_site %}
                     {% url 'wagtailsites:index' as wagtailsites_index_url %}
                     <p>
@@ -37,6 +38,7 @@
             {# get_url_parts will return None is the page has no site #}
         {% elif not parent_page.get_url_parts %}
             <tr><td colspan="6"><div class="help-block help-warning">
+                {% icon name='warning' %}
                 {% if perms.wagtailcore.add_site %}
                     {% url 'wagtailsites:index' as wagtailsites_index_url %}
                     {% blocktrans %}

wagtail/admin/templates/wagtailadmin/pages/revisions/compare.html

@@ -41,6 +41,7 @@
                                         {% with child_comp.get_position_change as move %}
                                             {% if move %}
                                                 <div class="help-block help-info">
+                                                    {% icon name='help' %}
                                                     <p>
                                                         {% if move > 0 %}
                                                             {% blocktrans count counter=move %}

wagtail/admin/templates/wagtailadmin/shared/field.html

@@ -2,7 +2,10 @@
 <div class="field {{ field|fieldtype }} {{ field|widgettype }} {{ field_classes }}" {% if include_contentpath|default_if_none:True %}data-contentpath="{{ field.name }}"{% endif %}>
     {% if show_label|default_if_none:True %}{{ field.label_tag }}{% endif %}
     <div class="field-content">
-        <div class="input {{ input_classes }} ">
+        <div class="input">
+            {% if icon %}
+                {% icon name=icon %}
+            {% endif %}
             {% block form_field %}
                 {{ field|render_with_errors }}
             {% endblock %}

wagtail/admin/templates/wagtailadmin/shared/header.html

@@ -27,7 +27,7 @@
                 <form class="col search-form" action="{% url search_url %}{% if query_parameters %}?{{ query_parameters }}{% endif %}" method="get" novalidate role="search">
                     <ul class="fields">
                         {% for field in search_form %}
-                            {% include "wagtailadmin/shared/field_as_li.html" with field=field field_classes="field-small iconfield" input_classes="icon-search" %}
+                            {% include "wagtailadmin/shared/field_as_li.html" with field=field field_classes="field-small iconfield" icon="search" %}
                         {% endfor %}
                         <li class="submit visuallyhidden"><input type="submit" value="Search" class="button" /></li>
                     </ul>

wagtail/admin/templates/wagtailadmin/workflows/edit.html

@@ -43,6 +43,7 @@
                         {% if workflow.active %}
                             <div class="top-padding">
                                 <p class="help-block help-info">
+                                    {% icon name='help' %}
                                     {% url 'wagtailadmin_workflows:usage' workflow.pk as workflow_pages_url %}
                                     {% blocktrans trimmed %}
                                         Workflows apply to child pages too. If you select a parent page here, its child pages will also use this workflow.
@@ -55,6 +56,7 @@
                         {% else %}
                             <div class="top-padding">
                                 <p class="help-block help-info">
+                                    {% icon name='help' %}
                                     {% trans "This workflow is disabled so it cannot be assigned to any pages." %}
                                 </p>
                             </div>

wagtail/admin/templates/wagtailadmin/workflows/edit_task.html

@@ -38,6 +38,7 @@
             {% endfor %}
             <li>
                 <div class="help-block help-info">
+                    {% icon name='help' %}
                     {% for workflow in object.active_workflows %}
                         {% if forloop.first %}<strong>{% trans "Used on the following active workflows" %}:</strong> {% endif %}
                         <a href="{% url 'wagtailadmin_workflows:edit' workflow.pk %}">{{ workflow.name }}</a>{% if not forloop.last %}, {% endif %}

wagtail/contrib/modeladmin/templates/modeladmin/includes/search_form.html

@@ -1,4 +1,4 @@
-{% load i18n %}
+{% load i18n wagtailadmin_tags %}
 {% if show_search %}
     <form id="changelist-search" class="col search-form" action="{{ view.index_url }}" method="get">
         <ul class="fields">
@@ -6,7 +6,8 @@
                 <div class="field char_field text_input field-small iconfield">
                     <label for="id_q" class="visuallyhidden">{% trans 'Search for' %}</label>
                     <div class="field-content">
-                        <div class="input icon-search ">
+                        <div class="input">
+                            {% icon name="search" %}
                             <input id="id_q" name="{{ search_var }}" value="{{ view.query }}" placeholder="{% blocktrans with view.verbose_name_plural|lower as name %}Search {{ name }}{% endblocktrans %}" type="text">
                             <span></span>
                         </div>

wagtail/contrib/redirects/templates/wagtailredirects/choose_import_file.html

@@ -1,5 +1,5 @@
 {% extends "wagtailadmin/base.html" %}
-{% load i18n %}
+{% load i18n wagtailadmin_tags %}
 {% block titletag %}{% trans "Redirects" %}{% endblock %}
 
 {% block extra_js %}
@@ -19,6 +19,7 @@
 
     <div class="nice-padding">
         <div class="help-block help-info">
+            {% icon name='help' %}
             {% blocktrans %}
                 <p>Select a file where redirects are separated into rows and contains the columns representing <code>from</code> and <code>to</code> (they can be named anything).</p>
                 <p>After submitting you will be taken to a confirmation view where you can customize your redirects before import.</p>

wagtail/contrib/redirects/templates/wagtailredirects/import_summary.html

@@ -1,5 +1,5 @@
 {% extends "wagtailadmin/base.html" %}
-{% load i18n %}
+{% load i18n wagtailadmin_tags %}
 {% block titletag %}{% trans "Summary" %}{% endblock %}
 {% block content %}
     {% trans "Import redirects" as header_title %}
@@ -7,6 +7,7 @@
     {% include "wagtailadmin/shared/header.html" with title=header_title subtitle=header_subtitle icon="redirect" %}
     <section id="summary" class="nice-padding">
         <p class="help-block help-warning">
+            {% icon name='warning' %}
             {% blocktrans with total=import_summary.total successes=import_summary.successes errors=import_summary.errors_count %}Found {{ total }} redirects, created {{ successes }} and found {{ errors }} errors.{% endblocktrans %}
         </p>
 

wagtail/contrib/redirects/templates/wagtailredirects/index.html

@@ -37,7 +37,7 @@
                     <form class="col search-form" action="{% url "wagtailredirects:index" %}{% if query_parameters %}?{{ query_parameters }}{% endif %}" method="get" novalidate role="search">
                         <ul class="fields">
                             {% for field in search_form %}
-                                {% include "wagtailadmin/shared/field_as_li.html" with field=field field_classes="field-small iconfield" input_classes="icon-search" %}
+                                {% include "wagtailadmin/shared/field_as_li.html" with field=field field_classes="field-small iconfield" icon="search" %}
                             {% endfor %}
                             <li class="submit visuallyhidden"><input type="submit" value="Search" class="button" /></li>
                         </ul>

wagtail/contrib/search_promotions/templates/wagtailsearchpromotions/add.html

@@ -7,6 +7,7 @@
 
     <div class="nice-padding">
         <div class="help-block help-info">
+            {% icon name='help' %}
             {% blocktrans %}
                 <p>Promoted search results are a means of recommending specific pages that might not organically come high up in search results. E.g recommending your primary donation page to a user searching with the less common term "<em>giving</em>".</p>
             {% endblocktrans %}

wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html

@@ -257,15 +257,18 @@
             </p>
 
             <div class="help-block help-info">
+                {% icon name='help' %}
                 <p>This is help text that might be just for information, explaining what happens next, or drawing the user's attention to something they're about to do</p>
                 <p>It could be multiple lines</p>
             </div>
 
             <p class="help-block help-warning">
+                {% icon name='warning' %}
                 A warning message might be output in cases where a user's action could have serious consequences
             </p>
 
             <div class="help-block help-critical">
+                {% icon name='warning' %}
                 A critical message would probably be rare, in cases where a particularly brittle or dangerously destructive action could be performed and needs to be warned about.
             </div>
 
@@ -389,7 +392,7 @@
 
         <section id="buttons">
             <h2>Buttons</h2>
-            <p class="help-block help-warning">Do not use <code>{% filter force_escape|lower %}<input type="button">{% endfilter %}</code> use <code>{% filter force_escape|lower %}<button type="button"></button>{% endfilter %}</code> instead. This addresses inconsistencies between rendering of buttons x-browser.</p>
+            <p class="help-block help-warning">{% icon name='warning' %}Do not use <code>{% filter force_escape|lower %}<input type="button">{% endfilter %}</code> use <code>{% filter force_escape|lower %}<button type="button"></button>{% endfilter %}</code> instead. This addresses inconsistencies between rendering of buttons x-browser.</p>
 
 
             <p>Buttons must have interaction possible (i.e be an input or button element) to get a suitable hover cursor</p>
@@ -452,7 +455,7 @@
             <a href="#" class="button button-small no">No</a>
 
             <h3>Buttons with internal loading indicators (currently only <code>button</code> supported)</h3>
-            <p class="help-block help-warning">Note that in some browsers, clicking these buttons minutely affects the appearance of Dropdown buttons, below. This is yet to be resolved.</p>
+            <p class="help-block help-warning">{% icon name='warning' %}Note that in some browsers, clicking these buttons minutely affects the appearance of Dropdown buttons, below. This is yet to be resolved.</p>
             <button class="button button-longrunning">{% icon name="spinner" %}Click me</button>
 
             <h4>Secondary</h4>

wagtail/images/templates/wagtailimages/images/url_generator.html

@@ -30,7 +30,7 @@
                 <img class="preview" src="" alt="{% trans 'Preview' %}" />
             </div>
         </div>
-        <p id="note-size" class="help-block help-warning">{% trans "Note that images generated larger than the screen will appear smaller when previewed here, so they fit the screen." %}</p>
+        <p id="note-size" class="help-block help-warning">{% icon name='warning' %}{% trans "Note that images generated larger than the screen will appear smaller when previewed here, so they fit the screen." %}</p>
     </div>
 {% endblock %}
 

wagtail/locales/templates/wagtaillocales/edit.html

@@ -1,9 +1,10 @@
 {% extends "wagtailadmin/generic/edit.html" %}
-{% load i18n %}
+{% load i18n wagtailadmin_tags %}
 
 {% block before_form %}
     {% if not locale.language_code_is_valid %}
         <p class="help-block help-warning">
+            {% icon name='warning' %}
             {% trans "This locale's current language code is not supported. Please choose a new language or delete this locale." %}
         </p>
     {% endif %}

wagtail/snippets/templates/wagtailsnippets/snippets/type_index.html

@@ -29,7 +29,7 @@
                         <form class="col search-form" action="{% url 'wagtailsnippets:list' model_opts.app_label model_opts.model_name %}" method="get" novalidate>
                             <ul class="fields">
                                 {% for field in search_form %}
-                                    {% include "wagtailadmin/shared/field_as_li.html" with field=field field_classes="field-small iconfield" input_classes="icon-search" %}
+                                    {% include "wagtailadmin/shared/field_as_li.html" with field=field field_classes="field-small iconfield" icon="search" %}
                                 {% endfor %}
                                 <li class="submit visuallyhidden"><input type="submit" value="Search" class="button" /></li>
                             </ul>

wagtail/users/static_src/wagtailusers/scss/groups_edit.scss

@@ -23,6 +23,7 @@
   .custom-permissions-item {
     font-weight: inherit;
     width: 100%;
+    padding: 0;
   }
 }