Fix sidebar rtl styles, add wagtail branding module to sidebar stories

- fixes #8641

CHANGELOG.txt

@@ -41,6 +41,7 @@ Changelog
  * Fix: Ensure the upgrade notification, shown to admins on the dashboard if Wagtail is out of date, content is translatable (LB (Ben) Johnston)
  * Fix: Show the re-ordering option to users that have permission to publish pages within the page listing (Stefan Hammer)
  * Fix: Ensure `TabbedInterface` will not show a tab if no panels are visible due to permissions (Paarth Agarwal)
+ * Fix: Ensure default sidebar branding (bird logo) is not cropped in RTL mode (Steven Steinwand)
 
 
 3.0 (16.05.2022)

client/src/components/Sidebar/Sidebar.stories.tsx

@@ -6,6 +6,7 @@ import { MainMenuModuleDefinition } from './modules/MainMenu';
 import { PageExplorerMenuItemDefinition } from './menu/PageExplorerMenuItem';
 import { LinkMenuItemDefinition } from './menu/LinkMenuItem';
 import { SubMenuItemDefinition } from './menu/SubMenuItem';
+import { WagtailBrandingModuleDefinition } from './modules/WagtailBranding';
 
 export default {
   title: 'Sidebar/Sidebar',
@@ -188,6 +189,10 @@ function renderSidebarStory(
   modules: ModuleDefinition[],
   { rtl = false }: RenderSidebarStoryOptions = {},
 ) {
+  // Add branding to all sidebar stories by default
+  const wagtailBrandingModule = new WagtailBrandingModuleDefinition('');
+  modules.unshift(wagtailBrandingModule);
+
   // Simulate navigation
   const [currentPath, setCurrentPath] = React.useState('/admin/');
 
@@ -347,7 +352,7 @@ export function withLargeSubmenu() {
 }
 
 export function withoutSearch() {
-  return renderSidebarStory([wagtailBrandingModule(), bogStandardMenuModule()]);
+  return renderSidebarStory([bogStandardMenuModule()]);
 }
 
 function arabicMenuModule(): MainMenuModuleDefinition {

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

@@ -11,10 +11,12 @@ const WagtailLogo = ({ className, slim }: WagtailLogoProps) => {
 
   return (
     <svg
+      style={{
+        left: slim ? '-1.125rem' : '-1.75rem',
+      }}
       className={`
          sidebar-wagtail-branding__icon
          !w-overflow-visible
-         w-pr-6
          w-group
          w-text-primary
          w-z-10
@@ -26,8 +28,8 @@ const WagtailLogo = ({ className, slim }: WagtailLogoProps) => {
          ${className || ''}
          ${
            slim
-             ? 'w-w-[58px] w-h-[57px] w-top-2 w-left-[-18px] hover:-w-translate-y-1'
-             : 'w-w-[120px] w-h-[200px] -w-top-1 -w-left-7 hover:w-translate-x-2 hover:-w-translate-y-3'
+             ? 'w-w-[58px] w-h-[57px] w-top-2 hover:-w-translate-y-1'
+             : 'w-w-[120px] w-h-[200px] -w-top-1  hover:w-translate-x-2 hover:-w-translate-y-3'
          }
       `}
       width="430"

docs/releases/4.0.md

@@ -55,6 +55,7 @@ When using a queryset to render a list of images, you can now use the ``prefetch
  * Ensure the upgrade notification, shown to admins on the dashboard if Wagtail is out of date, content is translatable (LB (Ben) Johnston)
  * Only show the re-ordering option to users that have permission to publish pages within the page listing (Stefan Hammer)
  * Ensure `TabbedInterface` will not show a tab if no panels are visible due to permissions (Paarth Agarwal)
+ * Ensure default sidebar branding (bird logo) is not cropped in RTL mode (Steven Steinwand)
 
 
 ## Upgrade considerations