Remove most uppercased text styles from admin UI. Fix #7624 (#8111)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -20,6 +20,7 @@ Changelog
  * Installing docs extras requirements in CircleCI so issues with the docs requirements are picked up earlier (Thibaud Colas)
  * Remove core usage of jinjalint and migrate to curlylint to resolve dependency incompatibility issues (Thibaud Colas)
  * Switch focus outlines implementation to `:focus-visible` for cross-browser consistency (Paarth Agarwal)
+ * Remove most uppercased text styles from admin UI (Paarth Agarwal)
  * 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)

client/scss/components/_bulk_actions.scss

@@ -47,10 +47,6 @@
         color: $color-teal;
       }
 
-      .c-dropdown__button {
-        text-transform: uppercase;
-      }
-
       .c-dropdown__menu {
         bottom: 50px;
         flex-direction: column;

client/scss/components/_button.scss

@@ -19,7 +19,6 @@
   border: 1px solid $color-button;
   color: $color-white;
   text-decoration: none;
-  text-transform: uppercase;
   white-space: nowrap;
   position: relative;
   overflow: hidden;
@@ -197,7 +196,6 @@
     border: 0;
     color: inherit;
     text-decoration: none;
-    text-transform: uppercase;
     white-space: nowrap;
     position: relative;
     overflow: hidden;

client/scss/components/_comments-controls.scss

@@ -74,7 +74,6 @@
 
   &__label {
     font-size: 12px;
-    text-transform: uppercase;
     color: $color-white;
     font-weight: 400;
     margin-right: 10px;

client/scss/components/_comments-notification-dropdown.scss

@@ -42,7 +42,6 @@
 
   &__title {
     font-size: 12px;
-    text-transform: uppercase;
     font-weight: 700;
     color: $color-white;
   }

client/scss/components/_dropdown.legacy.scss

@@ -82,7 +82,6 @@
       white-space: nowrap;
       position: relative;
       text-decoration: none;
-      text-transform: uppercase;
       display: block;
       color: $color-white;
       padding: 1em;
@@ -159,7 +158,6 @@
 
   .dropdown-toggle {
     color: $color-white;
-    text-transform: uppercase;
     background-color: $color-teal;
     line-height: 2.8em;
     cursor: pointer;

client/scss/components/_forms.scss

@@ -387,12 +387,6 @@ li.inline:first-child {
   @include transition(opacity 0.2s ease);
 }
 
-.label-uppercase {
-  .field > label {
-    text-transform: uppercase;
-  }
-}
-
 @include media-breakpoint-up(sm) {
   .help {
     opacity: 1;

client/scss/components/_listing.scss

@@ -48,7 +48,6 @@ ul.listing {
       text-align: left;
       font-weight: normal;
       white-space: nowrap;
-      text-transform: uppercase;
     }
 
     th.children {
@@ -213,7 +212,6 @@ ul.listing {
   .actions {
     @include clearfix();
     margin-top: 0.8em;
-    text-transform: uppercase;
     margin-bottom: -0.5em;
     font-size: 0.8rem;
 
@@ -566,7 +564,6 @@ table.listing {
 
 .filter-title {
   float: left;
-  text-transform: uppercase;
   font-size: 0.95em;
   padding: 1em;
   margin: 0 1em 0 0;

client/scss/components/_main-nav.scss

@@ -351,7 +351,6 @@ body.explorer-open {
       @include clearfix;
       background: $nav-footer-account-bg;
       color: $color-menu-text;
-      text-transform: uppercase;
       display: block;
       cursor: pointer;
 

client/scss/components/_tabs.scss

@@ -25,7 +25,6 @@
   a {
     @include transition(border-color 0.2s ease);
     background-color: $color-teal-darker;
-    text-transform: uppercase;
     font-weight: 600;
     text-decoration: none;
     display: block;

client/scss/components/_workflow-tasks.scss

@@ -20,7 +20,6 @@
 
   &__step {
     font-size: 10px;
-    text-transform: uppercase;
     margin-top: 3px;
   }
 

client/scss/elements/_typography.scss

@@ -18,7 +18,6 @@ h6 {
 h1 {
   line-height: 1.3em;
   font-size: 1.5em;
-  text-transform: uppercase;
   color: $color-grey-1;
   font-weight: 700;
 
@@ -29,7 +28,6 @@ h1 {
 }
 
 h2 {
-  text-transform: uppercase;
   font-size: 1.3em;
   font-family: $font-sans;
   font-weight: 600;
@@ -77,7 +75,6 @@ dl {
 
 dt {
   color: $color-grey-2;
-  text-transform: uppercase;
   font-size: 0.9em;
 }
 

client/src/components/CommentApp/main.scss

@@ -102,7 +102,6 @@ $box-padding: 10px;
   border-radius: 3px;
   color: $color-teal;
   cursor: pointer;
-  text-transform: uppercase;
   font-family: inherit;
   font-size: 12px;
   font-weight: bold;

client/src/components/Sidebar/modules/MainMenu.scss

@@ -90,7 +90,6 @@ $avatar-size: 60px;
   &__account {
     background: $nav-footer-account-bg;
     color: $color-menu-text;
-    text-transform: uppercase;
     display: flex;
     align-items: center;
     cursor: pointer;

docs/releases/2.17.md

@@ -14,6 +14,7 @@ depth: 1
 Here are other changes related to the redesign:
 
  * Switch the Wagtail branding font to a system font stack (Steven Steinwand)
+ * Remove most uppercased text styles from admin UI (Paarth Agarwal)
 
 
 ### Removal of special-purpose field panel types

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

@@ -198,7 +198,6 @@
     -webkit-font-smoothing: auto;
     background: $color-salmon-light;
     color: #200200;
-    text-transform: uppercase;
     padding: 0.9em 0 0.9em 5em;
     font-size: 0.95em;
     margin: 0;
@@ -597,6 +596,7 @@ footer .preview {
   border-radius: 2px;
   font-size: 14px;
   font-weight: 600;
+  text-transform: uppercase;
   line-height: 2.3em;
   padding: 0 0.75em;
 

wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss

@@ -97,7 +97,6 @@
     border: 1px solid $color-teal;
     color: $color-teal;
     text-decoration: none;
-    text-transform: uppercase;
     position: relative;
     overflow: hidden;
     box-sizing: border-box;

wagtail/images/templates/wagtailimages/images/edit.html

@@ -44,11 +44,11 @@
                 <ul class="fields">
                     {% for field in form %}
                         {% if field.name == 'file' %}
-                            {% include "wagtailimages/images/_file_field_as_li.html" with li_classes="label-above label-uppercase" %}
+                            {% include "wagtailimages/images/_file_field_as_li.html" with li_classes="label-above" %}
                         {% elif field.is_hidden %}
                             {{ field }}
                         {% else %}
-                            {% include "wagtailadmin/shared/field_as_li.html" with li_classes="label-above label-uppercase" %}
+                            {% include "wagtailadmin/shared/field_as_li.html" with li_classes="label-above" %}
                         {% endif %}
                     {% endfor %}
                 </ul>
@@ -81,7 +81,7 @@
 
                 <div class="row">
                     <div class="col8 divider-after">
-                        <h2 class="label no-float w-uppercase">{% trans "Focal point" %} <span class="w-font-normal">{% trans "(optional)" %}</span></h2>
+                        <h2 class="label no-float">{% trans "Focal point" %} <span class="w-font-normal">{% trans "(optional)" %}</span></h2>
                         <p>{% trans "To define this image's most important region, drag a box over the image above." %} {% if image.has_focal_point %}({% trans "Current focal point shown" %}){% endif %}</p>
 
                         <button class="button button-secondary no remove-focal-point" type="button">{% trans "Remove focal area" %}</button>