Sidebar style updates #8118

stevedya · 2022-03-14T18:17:44Z

Addresses #7919 styling of sidebar to match ui redesign colour scheme.
Colour changes to the page explorer portion of the sidebar are temporary to avoid major colour clashes until a new UI design for the page explorer is ready.

This doesn't address #7918 for interaction updates

Background colour change to wagtail's new primary colour
Wagtail bird animation tweak and svg refactor
Update top “expand” icon to match designs
Move search icon to the left when sidebar is expanded
Wagtail logo size decrease to circular when sidebar is in slim (collapsed) mode
Change profile image to be circular
Styling of account and logout links to match design
Match colours of subnavigation backgrounds to new sidebar colour scheme
Ensure colour contrast still meets WCAG 2.1 standard

Screenshots

Nested subnav

Logo on hover

With page explorer

Browsers tested on

Chrome 99
Safari 15

…nd config

squash-labs · 2022-03-14T18:17:50Z

Manage this branch in Squash

Test this branch here: https://stevedyachoresidebar-style-upd-g5b2e.squash.io

…sidebar, adjdust animations, and cleanup unused code

thibaudcolas

Partial code review – will keep going tomorrow!

client/src/components/PageExplorer/PageExplorer.scss

client/src/components/PageExplorer/PageExplorerItem.scss

client/src/components/PublicationStatus/PublicationStatus.scss

client/src/components/Sidebar/Sidebar.tsx

thibaudcolas · 2022-03-16T17:35:24Z

client/src/components/Sidebar/Sidebar.tsx

            onClick={onClickCollapseToggle}
            aria-label={strings.TOGGLE_SIDEBAR}
            aria-expanded={slim ? 'false' : 'true'}
            type="button"
+            className="button sidebar__collapse-toggle hover:w-bg-primary-200 hover:text-white hover:opacity-100"


From what I can see in the code this is white and full opaque already without hover? I can’t see a difference without those classes.

Without these I'm having this happen :/ I don't think there is a hover set for this on the sidebar__collapse-toggle css class.

This is the hover with them added

thibaudcolas · 2022-03-17T06:29:03Z

wagtail/admin/static_src/wagtailadmin/images/wagtail-logo.svg

-		c-12.667,3.126-23.322,5.26-30.779,6.738C131.448,355.869,127.182,356.69,127.182,356.69"/>
-</g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>


@stevedya I don’t understand why there are changes to this file – if this is whitespace only, can you discard those changes?

Hmm it seems to have changed the line separators from CRLF to LF. Might need your help to revert this haha i'm so confused

client/src/tokens/objectStyles.js

client/src/tokens/colors.js

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

client/src/components/Sidebar/Sidebar.tsx

thibaudcolas · 2022-03-17T07:00:29Z

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

          title={strings.EDIT_YOUR_ACCOUNT}
          onClick={onClickAccountSettings}
          aria-label={strings.EDIT_YOUR_ACCOUNT}
          aria-haspopup="menu"
          aria-expanded={accountSettingsOpen ? 'true' : 'false'}
          type="button"
        >
-          <div className="avatar square avatar-on-dark">
+          <div className="avatar avatar-on-dark !w-w-[28px] !w-h-[28px]">


I would have assumed we’d display avatars in consistent sizes elsewhere in the UI, so since there is no avatar component in templates / React currently, we should probably do this with a --small BEM modifier here?

So there is apparently a .small class here https://github.com/wagtail/wagtail/blob/main/client/scss/objects/_avatar.scss#L27

However it's used elsewhere in the admin, so if I was to update it, it would modify the other parts of the admin (another argument for utility styling and tailwind).

I'd vote to keep these arbitrary values here because this specific account icon is arbitrary sized itself, and only used here, so to me doesn't seem like much value to entangle the sizing here with more BEM at this point.

Let me know if I should update .small or maybe convert it to --small (and do a bunch of extra testing on the other spots its used)?

or

If it is okay as is?
(you know i love utils)

thibaudcolas · 2022-03-17T07:01:55Z

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

+            <div className="sidebar-footer__account-label w-label-3 w-text-white">
+              {user.name}
+            </div>
            <Icon
-              className="sidebar-footer__account-icon"
+              className="w-w-4 w-h-4 w-text-white"


Considering it seems the text is white for almost everything in here, if we’re refactoring the code, I’d prefer we set w-text-white on the whole sidebar and then use inherit in places like this.

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

client/src/components/Sidebar/modules/Search.tsx

thibaudcolas

The end result looks great @stevedya! There are a few issues with the implementation, and a few more refactorings to do, but we’re not far off.

As far as the UI, I could spot the following issues:

On mobile viewports, the spacing around the account toggle is missing
On mobile viewports, the hamburger button isn’t aligned with the close button
On mobile viewports, the space for the "close" button is still there even though the button has been moved to the right side of the screen
I can’t see the "Close" button on mobile on some pages – it’s there on /admin/, but not on /admin/pages/60/.
On pages like /admin/pages/60/edit/, we’ve moved the hamburger button to the right, but the extra space needed to the left hasn’t been removed
On a 320px viewport, the page explorer scrolls horizontally due not taking over the whole screen anymore. I think we’d want no horizontal scrolling
In sub-menus, the menu icons don’t seem to have enough contrast against their background. We’d need a minimum of 3:1. Looks like this is because the icon has an opacity of 0.15, on top of us changing the color to a transparent white.

And more minor things, where I might have it wrong:

I’d expect the locale selector in the page explorer should keep having the same background as the rest of the explorer header
I’d expect the colors of the icons in the page explorer should be more consistent

Summary GIF:

client/src/components/Sidebar/modules/WagtailBranding.tsx

client/src/components/Sidebar/modules/WagtailLogo.tsx

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

…initions

stevedya · 2022-03-22T22:50:13Z

The end result looks great @stevedya! There are a few issues with the implementation, and a few more refactorings to do, but we’re not far off.

As far as the UI, I could spot the following issues:

On mobile viewports, the spacing around the account toggle is missing

On mobile viewports, the hamburger button isn’t aligned with the close button

On mobile viewports, the space for the "close" button is still there even though the button has been moved to the right side of the screen

I can’t see the "Close" button on mobile on some pages – it’s there on /admin/, but not on /admin/pages/60/.

On pages like /admin/pages/60/edit/, we’ve moved the hamburger button to the right, but the extra space needed to the left hasn’t been removed

On a 320px viewport, the page explorer scrolls horizontally due not taking over the whole screen anymore. I think we’d want no horizontal scrolling

In sub-menus, the menu icons don’t seem to have enough contrast against their background. We’d need a minimum of 3:1. Looks like this is because the icon has an opacity of 0.15, on top of us changing the color to a transparent white.

And more minor things, where I might have it wrong:

I’d expect the locale selector in the page explorer should keep having the same background as the rest of the explorer header

I’d expect the colors of the icons in the page explorer should be more consistent

Awesome feedback! 😃 I believe I've fixed these mobile issues now.

Put the initial navbar expand toggle on the left for mobile viewports, so it will be similar to where it was before and the close button will be in the same spot of the nav as the expand (on the left)
Ensured the page navigator is set to full width on mobile.
Ensured the icon will be showing for the home page and back buttons to the left of a page explorer header (on mobile)
Allowed title / icons to flex and wrap so that text can fit along with any labels for locale/page status
Adjusted menu icon colours by default.

(I should note ben does have plans to give the page explorer a proper reskin in the future however this is a temporary solution to match the new sidebar styling)

Here's a screenshot at 320 on Chrome 99 (for reference)

* main: (31 commits) Removed outdated handling of length parameter to If-Modified-Since header styles - disable text-transform property-disallowed-list for required usage update @wagtail/stylelint-config-wagtail npm package disabled text-transform tailwind plugin removed redundant text-transform instances format readme with prettier Add some more dummy modules Add rule into upgrademodulepaths command for rewriting wagtail.tests imports Add some dummy modules for wagtail.tests Add a replacement rule into `wagtail updatemodulepaths` for the wagtail.core rename fix typo from wagtail#8119 prevent page refresh on enter key in header seach Add some more dummy modules for moved wagtail.core modules Update node installation instructions (wagtail#8154) Don't crash if wagtail/__init__.py is loaded without Django installed Add dummy modules to maintain wagtail.core imports Rename WagtailCoreAppConfig to WagtailAppConfig Move wagtail.core to wagtail Move tests to test Merge sites utilities into sites models ...

thibaudcolas

Thank you @stevedya, all looking good now with the exception of:

I’d expect the locale selector in the page explorer should keep having the same background as the rest of the explorer header

For me it’s still a different background. I don’t want your changes to risk further conflicts anyway so will merge this now – please revisit this later.

thibaudcolas · 2022-03-23T03:08:25Z

client/tailwind.config.js

@@ -55,6 +55,8 @@ module.exports = {
      /* allow system colours https://www.w3.org/TR/css-color-4/#css-system-colors */
      LinkText: 'LinkText',
      ButtonText: 'ButtonText',
+      white: '#FFF',
+      black: '#000',


We already have white and black colors defined so I assume those two are useless?

stevedya added 5 commits March 1, 2022 18:28

Add typescale plugin inside its own component, comments inside tailwi…

832522e

…nd config

Sidebar colors and positioning of sidebar footer elements

7339f4b

Fix wagtail bird animation, move search icon, move expand button

7c07ab4

revert tail animation back in

10b6ace

Conditional class name

af41792

stevedya added 3 commits March 15, 2022 15:00

Adjust margin of submenu header

22fa915

Add borders to page navigator, alter page navigator color scheme for …

87d56d4

…sidebar, adjdust animations, and cleanup unused code

Merge branch 'main' into chore/sidebar-style-updates

0f14d92

stevedya requested a review from thibaudcolas March 16, 2022 11:17

stevedya marked this pull request as ready for review March 16, 2022 11:18

stevedya changed the title ~~Draft: Sidebar style updates~~ Sidebar style updates Mar 16, 2022

stevedya added 2 commits March 16, 2022 11:23

Remove float left from sidebar scss

2617154

Remove space in typography

6cd2a71

thibaudcolas added type:Enhancement status:Needs Review labels Mar 16, 2022

thibaudcolas added this to the 2.17 milestone Mar 16, 2022

stevedya added 4 commits March 16, 2022 11:26

Remove uneeded body parts of logo now

f508fbd

Update tests for sidebar and menu

5cddc6f

Z index of search field

e5fd0c2

update bg of page explorer

32b5b89

thibaudcolas reviewed Mar 16, 2022

View reviewed changes

thibaudcolas reviewed Mar 17, 2022

View reviewed changes

thibaudcolas requested changes Mar 17, 2022

View reviewed changes

stevedya and others added 6 commits March 22, 2022 07:45

Update client/src/components/Sidebar/modules/WagtailLogo.tsx

9111e51

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

Update client/src/components/Sidebar/modules/WagtailLogo.tsx

d70d33b

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

Update client/src/components/Sidebar/modules/WagtailLogo.tsx

6e009a1

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

Fixes to sidebar as per feedback

23c0dbb

Remove images from WagtailBrandingModule and WagtailBrandingModuleDef…

a8e9e3e

…initions

Adjust mobile styling of page explorer

dfde719

stevedya added 3 commits March 22, 2022 16:12

Update sub menu item title

9f25c81

Update sub menu item titles

5ee11c0

Fix account button toggle

b99bab0

stevedya added 2 commits March 22, 2022 16:54

Update account toggle styling

7faea0f

404 page revise to use unanimated logo

e73b065

stevedya requested a review from thibaudcolas March 22, 2022 23:30

thibaudcolas added 4 commits March 22, 2022 22:22

Update snapshots

a9fd50d

Fix text-transform build issue

a41ed43

Code review cleanup

7d03305

thibaudcolas removed the status:Needs Review label Mar 23, 2022

thibaudcolas approved these changes Mar 23, 2022

View reviewed changes

thibaudcolas merged commit 229fbf4 into wagtail:main Mar 23, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sidebar style updates #8118

Sidebar style updates #8118

stevedya commented Mar 14, 2022 •

edited

squash-labs bot commented Mar 14, 2022

thibaudcolas left a comment

thibaudcolas Mar 16, 2022

stevedya Mar 22, 2022

stevedya Mar 22, 2022

thibaudcolas Mar 17, 2022

stevedya Mar 22, 2022

thibaudcolas Mar 17, 2022

stevedya Mar 22, 2022 •

edited

thibaudcolas Mar 17, 2022

thibaudcolas left a comment •

edited

stevedya commented Mar 22, 2022 •

edited

thibaudcolas left a comment

thibaudcolas Mar 23, 2022

Sidebar style updates #8118

Sidebar style updates #8118

Conversation

stevedya commented Mar 14, 2022 • edited

Screenshots

Browsers tested on

squash-labs bot commented Mar 14, 2022

Manage this branch in Squash

thibaudcolas left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stevedya Mar 22, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thibaudcolas left a comment • edited

Choose a reason for hiding this comment

stevedya commented Mar 22, 2022 • edited

thibaudcolas left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stevedya commented Mar 14, 2022 •

edited

stevedya Mar 22, 2022 •

edited

thibaudcolas left a comment •

edited

stevedya commented Mar 22, 2022 •

edited