Styling tweaks for new icons

client/scss/components/_button.scss

@@ -41,7 +41,7 @@
 
   &.button--icon {
     .icon {
-      @include svg-icon(1.5em);
+      @include svg-icon();
     }
   }
 
@@ -140,7 +140,7 @@
       }
 
       .icon {
-        @include svg-icon(1.5em);
+        @include svg-icon();
       }
     }
 
@@ -267,6 +267,7 @@
       display: inline-block;
       opacity: 0.8;
       padding: 0;
+      margin-inline-end: 0.5em;
     }
 
     .button-longrunning__icon {

client/scss/components/_help-block.scss

@@ -35,7 +35,7 @@
   position: relative;
 
   .icon {
-    @include svg-icon(1.25rem);
+    @include svg-icon(1rem);
     position: absolute;
     inset-inline-start: 1.125rem;
     top: 0.8125rem;

client/scss/components/_listing.scss

@@ -323,23 +323,16 @@ ul.listing {
     text-align: center;
 
     .icon {
-      width: 15px;
-      height: 18px;
+      width: 1rem;
+      height: 1rem;
       vertical-align: middle;
-
-      &::before {
-        margin-inline-end: 2px;
-      }
+      margin-inline-end: 2px;
     }
 
     &--active a,
     a:hover {
       color: $color-teal;
     }
-
-    &--active .icon {
-      opacity: 1;
-    }
   }
 
   .handle {

client/scss/components/_panel.scss

@@ -129,7 +129,7 @@ $header-gap: theme('spacing.1');
   height: $header-icon-size;
 
   // Only rotate the default caret icon, not custom ones.
-  [aria-expanded='false'] &.icon-arrow-down-big {
+  [aria-expanded='false'] &.icon-placeholder {
     transform: rotate(-90deg);
   }
 

client/scss/components/_userbar.scss

@@ -203,7 +203,7 @@ $positions: (
     }
 
     &-icon {
-      @include svg-icon(1.1em, middle);
+      @include svg-icon(1em, middle);
       margin-inline-end: 0.5em;
       fill: currentColor;
       opacity: 0.4;

client/scss/components/forms/_select.scss

@@ -3,7 +3,7 @@
 
 $select-size: $text-input-height;
 $chevron-width: 1rem;
-$chevron-height: 0.5rem;
+$chevron-height: 1rem;
 $chevron-top-offset: math.div($select-size - $chevron-height, 2);
 $chevron-inline-end-offset: math.div($select-size - $chevron-width, 2);
 

client/scss/overrides/_vendor.datetimepicker.scss

@@ -72,8 +72,8 @@
     &:before {
       content: '';
       display: inline-block;
-      width: 1em;
-      height: 1em;
+      width: 1rem;
+      height: 1rem;
       text-align: center;
       margin: 0;
       background-color: currentColor;

client/scss/tools/_mixins.general.scss

@@ -77,7 +77,7 @@
   position: initial;
 }
 
-@mixin svg-icon($size: 1.5em, $position: text-top) {
+@mixin svg-icon($size: 1em, $position: text-top) {
   width: $size;
   height: $size;
   vertical-align: $position;

client/src/components/ComboBox/ComboBox.scss

@@ -113,7 +113,8 @@ $spacing-sm: theme('spacing.5');
   .icon-h4,
   .icon-h5,
   .icon-h6 {
-    width: theme('spacing.6');
+    width: theme('spacing.5');
+    height: theme('spacing.5');
   }
 
   // Explicitly override the selected color for SVG support.

client/src/components/Draftail/Draftail.scss

@@ -94,24 +94,6 @@ $draftail-editor-font-family: $font-sans;
   width: 100%;
 }
 
-.Draftail-ToolbarButton,
-.Draftail-ComboBox__option {
-  .icon {
-    width: $draftail-toolbar-icon-size;
-    height: $draftail-toolbar-icon-size;
-    vertical-align: middle;
-  }
-
-  .icon-h1,
-  .icon-h2,
-  .icon-h3,
-  .icon-h4,
-  .icon-h5,
-  .icon-h6 {
-    width: 1.5 * $draftail-toolbar-icon-size;
-  }
-}
-
 .Draftail-Toolbar {
   border-width: 0;
   // Remove once we drop support for Safari 14.
@@ -218,52 +200,6 @@ $draftail-editor-font-family: $font-sans;
   }
 }
 
-.Draftail-ComboBox [role='combobox'] {
-  padding: theme('spacing.4');
-}
-
-.Draftail-ComboBox [aria-autocomplete='list'] {
-  border-radius: theme('borderRadius.DEFAULT');
-  border: 1px solid $color-input-border;
-}
-
-.Draftail-ComboBox__menu {
-  padding: theme('spacing.4');
-}
-
-.Draftail-ComboBox__optgroup-label {
-  @apply w-label-3;
-  background-color: theme('colors.grey.50');
-}
-
-.Draftail-ComboBox__option,
-.Draftail-ComboBox__status {
-  color: theme('colors.primary.DEFAULT');
-  padding: theme('spacing.3') 0;
-  border-width: 1px;
-}
-
-.Draftail-ComboBox__status {
-  padding-inline-start: theme('spacing.3');
-}
-
-.Draftail-ComboBox__option[aria-selected='true'] {
-  color: theme('colors.secondary.DEFAULT');
-  border-radius: theme('borderRadius.sm');
-  background: transparent;
-  cursor: pointer;
-}
-
-.Draftail-ComboBox__option-icon {
-  color: inherit;
-  margin: 0 theme('spacing.3');
-}
-
-.Draftail-ComboBox__option-text {
-  @apply w-label-3;
-  color: inherit;
-}
-
 .Draftail-ToolbarGroup::before {
   display: none;
 }
@@ -286,6 +222,22 @@ $draftail-editor-font-family: $font-sans;
   &:active {
     border: 1px solid $color-grey-3;
   }
+
+  .icon {
+    width: $draftail-toolbar-icon-size;
+    height: $draftail-toolbar-icon-size;
+    vertical-align: middle;
+  }
+
+  .icon-h1,
+  .icon-h2,
+  .icon-h3,
+  .icon-h4,
+  .icon-h5,
+  .icon-h6 {
+    width: 1.25 * $draftail-toolbar-icon-size;
+    height: 1.25 * $draftail-toolbar-icon-size;
+  }
 }
 
 .Draftail-ToolbarButton--pin {
@@ -307,10 +259,6 @@ $draftail-editor-font-family: $font-sans;
       border-color: $color-input-hover-border;
     }
   }
-
-  .icon {
-    transform: rotate(30deg);
-  }
 }
 
 .Draftail-block--blockquote {

client/src/components/Minimap/CollapseAll.scss

@@ -25,7 +25,6 @@
     width: theme('spacing[2.5]');
     height: theme('spacing[2.5]');
     margin-inline-end: theme('spacing[2.5]');
-    border-top: 1px solid currentColor;
   }
 
   &--floating {

client/src/components/Minimap/CollapseAll.test.tsx

@@ -13,7 +13,7 @@ describe('CollapseAll', () => {
     );
     expect(wrapper.text()).toBe('<Icon />Collapse all');
     expect(wrapper.find('button').prop('aria-expanded')).toBe(true);
-    expect(wrapper.find('Icon').prop('name')).toBe('arrow-up-big');
+    expect(wrapper.find('Icon').prop('name')).toBe('collapse-up');
   });
 
   it('renders with expanded set to false', () => {
@@ -22,6 +22,6 @@ describe('CollapseAll', () => {
     );
     expect(wrapper.text()).toBe('<Icon />Expand all');
     expect(wrapper.find('button').prop('aria-expanded')).toBe(false);
-    expect(wrapper.find('Icon').prop('name')).toBe('arrow-down-big');
+    expect(wrapper.find('Icon').prop('name')).toBe('collapse-down');
   });
 });

client/src/components/Minimap/CollapseAll.tsx

@@ -27,7 +27,7 @@ const CollapseAll: React.FunctionComponent<CollapseAllProps> = ({
       floating ? 'w-minimap__collapse-all--floating' : ''
     } ${insideMinimap ? 'w-minimap__collapse-all--inside' : ''}`}
   >
-    <Icon name={expanded ? 'arrow-up-big' : 'arrow-down-big'} />
+    <Icon name={expanded ? 'collapse-up' : 'collapse-down'} />
     {expanded ? gettext('Collapse all') : gettext('Expand all')}
   </button>
 );

client/src/components/Minimap/MinimapItem.scss

@@ -22,10 +22,6 @@
     padding: theme('spacing.1');
   }
 
-  .icon-arrow-down-big {
-    transform: rotate(-90deg);
-  }
-
   // Minimap items have a lot of different states denoted with their text color, border color, and background.
   // The order of the following declaration blocks is essential so the correct states take priority.
   :where(.w-minimap--expanded) & {

client/storybook/preview.scss

@@ -16,5 +16,5 @@ textarea {
 }
 
 .icon {
-  @include svg-icon(1.5em);
+  @include svg-icon();
 }

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

@@ -3,7 +3,7 @@
 <div {{ self.attrs }} class="{{ classes|join:' ' }}" data-button-with-dropdown>
     <button class="{{ button_classes|join:' ' }}" data-button-with-dropdown-toggle data-hover-tooltip-content="{{ title }}" data-tippy-offset="[0, -2]">
         <span class="{% if hide_title %}w-sr-only{% endif %}">{{ title }}</span>
-        {% if icon_name %}{% icon name=icon_name classname='w-w-5 w-h-5' %}{% endif %}
+        {% if icon_name %}{% icon name=icon_name classname='w-w-4 w-h-4' %}{% endif %}
     </button>
 
     <div data-button-with-dropdown-content class="w-hidden w-p-0">

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

@@ -18,7 +18,7 @@
                 aria-label="{% trans 'Toggle breadcrumbs' %}"
                 aria-expanded="false"
             >
-                {% icon name="breadcrumb-expand" classname="w-w-5 w-h-5" %}
+                {% icon name="breadcrumb-expand" classname="w-w-4 w-h-4" %}
             </button>
         {% endif %}
         <div class="w-relative w-h-slim-header w-mr-4 w-top-0 w-z-20 w-flex w-items-center w-flex-row w-flex-1 sm:w-flex-none w-transition w-duration-300">

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

@@ -27,7 +27,7 @@
                 {% icon name="link" classname="w-panel__icon" %}
             </a>
             <button class="w-panel__toggle" type="button" aria-label="{% trans 'Toggle section' %}" aria-describedby="{{ heading_id }}" data-panel-toggle aria-controls="{{ content_id }}" aria-expanded="true">
-                {% firstof icon "arrow-down-big" as icon_name %}
+                {% firstof icon "placeholder" as icon_name %}
                 {% icon name=icon_name classname="w-panel__icon" %}
             </button>
             {% if heading %}

wagtail/admin/templates/wagtailadmin/shared/side_panels/includes/action_list_item.html

@@ -3,7 +3,7 @@
 
     {% block content %}
         <section class="w-flex w-space-x-3" aria-labelledby="status-sidebar-{{ title|cautious_slugify }}">
-            {% icon name=icon_name classname='w-w-5 w-h-5 w-text-primary w-flex-shrink-0' %}
+            {% icon name=icon_name classname='w-w-4 w-h-4 w-text-primary w-flex-shrink-0 w-mt-0.5' %}
 
             <div class="w-flex w-flex-1 w-items-start w-justify-between">
                 <div class="w-flex w-flex-col w-flex-1 w-pr-5">