Improve header theming

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.changeset/fresh-spiders-grin.md

@@ -1,5 +0,0 @@
----
-'@backstage/canon': patch
----
-
-Add customAction to the Header component in Canon.

packages/canon/.storybook/preview.tsx

@@ -5,6 +5,9 @@ import { useGlobals } from '@storybook/preview-api';
 // Default Backstage theme
 import '../src/css/styles.css';
 
+// Custom mocked styles
+import '../src/css/storybook.css';
+
 // Custom themes
 import './themes/spotify.css';
 

packages/canon/.storybook/themes/spotify.css

@@ -200,6 +200,21 @@
       transparent 95%
     );
   }
+
+  .canon-HeaderToolbar {
+    padding-top: var(--canon-space-2);
+  }
+
+  .canon-HeaderToolbarWrapper {
+    border-radius: var(--canon-radius-3);
+    border: 1px solid var(--canon-border);
+  }
+
+  .canon-HeaderTabs {
+    border-radius: var(--canon-radius-3);
+    border: 1px solid var(--canon-border);
+    margin-top: var(--canon-space-2);
+  }
 }
 
 [data-theme='light'][data-theme-name='spotify'] {

packages/canon/src/components/Header/Header.stories.tsx

@@ -18,6 +18,7 @@ import type { Meta, StoryObj, StoryFn } from '@storybook/react';
 import { Header } from './Header';
 import { HeaderBreadcrumb, HeaderOption, HeaderTab } from './types';
 import { Button } from '../Button';
+import { HeaderPage } from '../HeaderPage';
 
 const meta = {
   title: 'Components/Header',
@@ -79,18 +80,19 @@ const layoutDecorator = [
         style={{
           width: '250px',
           position: 'fixed',
-          left: 8,
-          top: 8,
-          bottom: 8,
-          backgroundColor: 'var(--canon-bg-surface-1',
-          borderRadius: 'var(--canon-radius-2)',
-          border: '1px solid var(--canon-border)',
+          left: 'var(--sb-panel-left)',
+          top: 'var(--sb-panel-top)',
+          bottom: 'var(--sb-panel-bottom)',
+          backgroundColor: 'var(--canon-bg-surface-1)',
+          borderRadius: 'var(--sb-panel-radius)',
+          border: 'var(--sb-sidebar-border)',
+          borderRight: 'var(--sb-sidebar-border-right)',
           zIndex: 1,
         }}
       />
       <div
         style={{
-          paddingInline: '266px',
+          paddingInline: 'var(--sb-content-padding-inline)',
           minHeight: '200vh',
         }}
       >
@@ -100,12 +102,13 @@ const layoutDecorator = [
         style={{
           width: '250px',
           position: 'fixed',
-          right: 8,
-          top: 8,
-          bottom: 8,
-          backgroundColor: 'var(--canon-bg-surface-1',
-          borderRadius: 'var(--canon-radius-2)',
-          border: '1px solid var(--canon-border)',
+          right: 'var(--sb-panel-right)',
+          top: 'var(--sb-panel-top)',
+          bottom: 'var(--sb-panel-bottom)',
+          backgroundColor: 'var(--canon-bg-surface-1)',
+          borderRadius: 'var(--sb-panel-radius)',
+          border: 'var(--sb-options-border)',
+          borderLeft: 'var(--sb-options-border-left)',
           zIndex: 1,
         }}
       />
@@ -160,3 +163,25 @@ export const WithLayout: Story = {
     layout: 'fullscreen',
   },
 };
+
+export const WithLayoutAndHeaderPage: Story = {
+  args: {
+    menuItems,
+    tabs,
+    breadcrumbs,
+  },
+  decorators: layoutDecorator,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  render: args => (
+    <>
+      <Header {...args} />
+      <HeaderPage
+        title="Page title"
+        description="Page description"
+        options={args.menuItems}
+      />
+    </>
+  ),
+};

packages/canon/src/components/Header/Header.styles.css

@@ -18,7 +18,6 @@
   position: sticky;
   top: 0;
   z-index: 10;
-  padding-top: 8px;
 
   &::before {
     content: '';
@@ -41,8 +40,7 @@
   justify-content: space-between;
   background-color: var(--canon-bg-surface-1);
   padding-inline: var(--canon-space-3);
-  border-radius: var(--canon-radius-2);
-  border: 1px solid var(--canon-border);
+  border-bottom: 1px solid var(--canon-border);
   color: var(--canon-fg-primary);
   height: 52px;
 }
@@ -121,9 +119,7 @@
   background-color: var(--canon-bg-surface-1);
   position: relative;
   padding-inline: var(--canon-space-1);
-  border-radius: var(--canon-radius-2);
-  border: 1px solid var(--canon-border);
-  margin-top: 8px;
+  border-bottom: 1px solid var(--canon-border);
 
   /* Initialize CSS variables */
   --active-tab-left: 0px;

packages/canon/src/components/Header/HeaderToolbar.tsx

@@ -17,7 +17,7 @@
 import { Link } from 'react-aria-components';
 import { useStyles } from '../../hooks/useStyles';
 import { useRef, useState, useEffect } from 'react';
-import { RiArrowRightSLine, RiMore2Line } from '@remixicon/react';
+import { RiArrowRightSLine, RiMore2Line, RiShapesLine } from '@remixicon/react';
 import type { HeaderProps } from './types';
 import { ButtonIcon } from '../ButtonIcon';
 import { Menu } from '../Menu';
@@ -91,7 +91,9 @@ export const HeaderToolbar = (props: HeaderProps) => {
       <div className={classNames.toolbarWrapper} ref={toolbarWrapperRef}>
         <div className={classNames.toolbarContent} ref={toolbarContentRef}>
           <div className={classNames.toolbarName}>
-            {icon && <div className={classNames.toolbarIcon}>{icon}</div>}
+            <div className={classNames.toolbarIcon}>
+              {icon || <RiShapesLine />}
+            </div>
             {title || 'Your plugin'}
           </div>
           {breadcrumbs && (

packages/canon/src/css/storybook.css

@@ -0,0 +1,23 @@
+:root {
+  --sb-panel-radius: 0;
+  --sb-panel-top: 0;
+  --sb-panel-bottom: 0;
+  --sb-panel-left: 0;
+  --sb-panel-right: 0;
+  --sb-sidebar-border: none;
+  --sb-sidebar-border-right: 1px solid var(--canon-border);
+  --sb-options-border: none;
+  --sb-options-border-left: 1px solid var(--canon-border);
+  --sb-content-padding-inline: 250px;
+}
+
+[data-theme-name='spotify'] {
+  --sb-panel-radius: var(--canon-radius-3);
+  --sb-panel-top: 8px;
+  --sb-panel-bottom: 8px;
+  --sb-panel-left: 8px;
+  --sb-panel-right: 8px;
+  --sb-sidebar-border: 1px solid var(--canon-border);
+  --sb-options-border: 1px solid var(--canon-border);
+  --sb-content-padding-inline: 266px;
+}