[Emotion] Convert EuiHeaderAlert, EuiHeaderSection, EuiHeaderSectionI…

…tem, EuiHeaderSectionItemButton, and EuiHeaderLinks (#7005)
elastic · Aug 1, 2023 · 3e950bf · 3e950bf
1 parent ac996fa
commit 3e950bf
Show file tree

Hide file tree

Showing 61 changed files with 1,019 additions and 531 deletions.
diff --git a/src-docs/src/components/guide_page/guide_page_header.tsx b/src-docs/src/components/guide_page/guide_page_header.tsx
@@ -147,14 +147,8 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
         position="fixed"
         theme="dark"
         sections={[
-          {
-            items: [renderLogo(), renderVersion()],
-            borders: 'none',
-          },
-          {
-            items: rightSideItems,
-            borders: 'none',
-          },
+          { items: [renderLogo(), renderVersion()] },
+          { items: rightSideItems },
         ]}
       />
     </header>

diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
@@ -300,7 +300,6 @@ const CollapsibleNavAll = () => {
         sections={[
           {
             items: leftSectionItems,
-            borders: 'right',
           },
           {
             items: [

diff --git a/src-docs/src/views/header/header.tsx b/src-docs/src/views/header/header.tsx
@@ -112,11 +112,9 @@ export default () => {
 
   return (
     <EuiHeader>
-      <EuiHeaderSection grow={false}>
-        <EuiHeaderSectionItem border="right">
-          {renderLogo()}
-        </EuiHeaderSectionItem>
-        <EuiHeaderSectionItem border="right">
+      <EuiHeaderSection>
+        <EuiHeaderSectionItem>{renderLogo()}</EuiHeaderSectionItem>
+        <EuiHeaderSectionItem>
           <HeaderSpacesMenu />
         </EuiHeaderSectionItem>
       </EuiHeaderSection>

diff --git a/src-docs/src/views/header/header_alert.tsx b/src-docs/src/views/header/header_alert.tsx
@@ -28,9 +28,11 @@ import {
   EuiText,
   EuiTitle,
 } from '../../../../src/components';
-import { useGeneratedHtmlId } from '../../../../src/services';
+import { useGeneratedHtmlId, useEuiTheme } from '../../../../src/services';
 
 const HeaderUpdates = () => {
+  const { euiTheme } = useEuiTheme();
+
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [isPopoverVisible, setIsPopoverVisible] = useState(false);
   const newsFeedFlyoutId = useGeneratedHtmlId({ prefix: 'newsFeedFlyout' });
@@ -216,7 +218,13 @@ const HeaderUpdates = () => {
       panelPaddingSize="none"
     >
       <EuiPopoverTitle paddingSize="s">What&apos;s new</EuiPopoverTitle>
-      <div style={{ maxHeight: '40vh', overflowY: 'auto', padding: 4 }}>
+      <div
+        style={{
+          maxHeight: '40vh',
+          overflowY: 'auto',
+          padding: euiTheme.size.s,
+        }}
+      >
         <EuiSpacer size="s" />
         {alerts.map((alert, i) => (
           <EuiHeaderAlert
@@ -341,8 +349,8 @@ export default () => {
       <EuiSpacer />
 
       <EuiHeader position={position} theme={theme}>
-        <EuiHeaderSection grow={false}>
-          <EuiHeaderSectionItem border="right">
+        <EuiHeaderSection>
+          <EuiHeaderSectionItem>
             <EuiHeaderLogo>Elastic</EuiHeaderLogo>
           </EuiHeaderSectionItem>
         </EuiHeaderSection>

diff --git a/src-docs/src/views/header/header_animate.tsx b/src-docs/src/views/header/header_animate.tsx
@@ -124,7 +124,6 @@ export default () => {
         sections={[
           {
             items: [<EuiHeaderLogo>Elastic</EuiHeaderLogo>],
-            borders: 'none',
           },
           {
             items: [
@@ -135,7 +134,6 @@ export default () => {
                 notificationsNumber={notificationsNumber}
               />,
             ],
-            borders: 'none',
           },
         ]}
       />

diff --git a/src-docs/src/views/header/header_dark.tsx b/src-docs/src/views/header/header_dark.tsx
@@ -28,7 +28,6 @@ export default () => {
               <EuiHeaderLink iconType="help"> Help</EuiHeaderLink>
             </EuiHeaderLinks>,
           ],
-          borders: 'right',
         },
         {
           items: [
@@ -49,7 +48,6 @@ export default () => {
               <EuiAvatar name="John Username" size="s" />
             </EuiHeaderSectionItemButton>,
           ],
-          borders: 'none',
         },
       ]}
     />

diff --git a/src-docs/src/views/header/header_elastic_pattern.tsx b/src-docs/src/views/header/header_elastic_pattern.tsx
@@ -307,11 +307,9 @@ export default () => {
               </EuiHeaderLogo>,
               deploymentMenu,
             ],
-            borders: 'none',
           },
           {
             items: [<EuiShowFor sizes={['m', 'l', 'xl']}>{search}</EuiShowFor>],
-            borders: 'none',
           },
           {
             items: [
@@ -325,7 +323,6 @@ export default () => {
               </EuiHeaderSectionItemButton>,
               userMenu,
             ],
-            borders: 'none',
           },
         ]}
       />
@@ -343,7 +340,6 @@ export default () => {
                 text: 'Users',
               },
             ],
-            borders: 'right',
           },
           {
             items: [

diff --git a/src-docs/src/views/header/header_example.js b/src-docs/src/views/header/header_example.js
@@ -46,8 +46,8 @@ import HeaderElasticPattern from './header_elastic_pattern';
 const headerElasticPatternSource = require('!!raw-loader!./header_elastic_pattern');
 
 const headerSnippet = `<EuiHeader>
-  <EuiHeaderSection grow={false}>
-    <EuiHeaderSectionItem border="right">
+  <EuiHeaderSection>
+    <EuiHeaderSectionItem>
       <!-- HeaderSectionItem content -->
     </EuiHeaderSectionItem>
   </EuiHeaderSection>
@@ -66,12 +66,10 @@ const headerSectionsSnippet = `<EuiHeader
   sections={[
     {
       items: [...],
-      borders: 'right',
       breadcrumbs: [...],
     },
     {
       items: [...],
-      borders: 'none',
     },
     {
       items: [...],
@@ -80,7 +78,7 @@ const headerSectionsSnippet = `<EuiHeader
 />`;
 
 const headerLinksSnippet = `<EuiHeader>
-  <EuiHeaderSectionItem border="right">
+  <EuiHeaderSectionItem>
     <EuiHeaderLogo
       iconType="iconName"
       href=""
@@ -99,7 +97,7 @@ const headerLinksSnippet = `<EuiHeader>
 </EuiHeader>`;
 
 const headerAlertSnippet = `<EuiHeader>
-  <EuiHeaderSection grow={false}>
+  <EuiHeaderSection>
     <EuiHeaderSectionItem>
       <!-- HeaderSectionItem content -->
     </EuiHeaderSectionItem>

diff --git a/src-docs/src/views/header/header_links.tsx b/src-docs/src/views/header/header_links.tsx
@@ -11,7 +11,7 @@ import {
 export default () => {
   return (
     <EuiHeader>
-      <EuiHeaderSectionItem border="right">
+      <EuiHeaderSectionItem>
         <EuiHeaderLogo>Elastic</EuiHeaderLogo>
       </EuiHeaderSectionItem>
 

diff --git a/src-docs/src/views/header/header_position.tsx b/src-docs/src/views/header/header_position.tsx
@@ -16,7 +16,6 @@ export default () => {
   const sections: EuiHeaderSections[] = [
     {
       items: [<EuiHeaderLogo>Elastic</EuiHeaderLogo>],
-      borders: 'right',
     },
   ];
 

diff --git a/src-docs/src/views/header/header_sections.tsx b/src-docs/src/views/header/header_sections.tsx
@@ -75,7 +75,6 @@ export default () => {
   const sections: EuiHeaderSections[] = [
     {
       items: [renderLogo, renderSpaces],
-      borders: 'right',
       breadcrumbs: breadcrumbs,
       breadcrumbProps: {
         'aria-label': 'Header sections breadcrumbs',

diff --git a/src-docs/src/views/header/header_stacked.tsx b/src-docs/src/views/header/header_stacked.tsx
@@ -45,15 +45,13 @@ export default () => {
             items: [
               <EuiHeaderLogo iconType="logoElastic">Elastic</EuiHeaderLogo>,
             ],
-            borders: 'none',
           },
           {
             items: [
               <EuiHeaderSectionItemButton aria-label="Account menu">
                 <EuiAvatar name="John Username" size="s" />
               </EuiHeaderSectionItemButton>,
             ],
-            borders: 'none',
           },
         ]}
       />
@@ -67,7 +65,6 @@ export default () => {
               </EuiHeaderSectionItemButton>,
             ],
             breadcrumbs: breadcrumbs,
-            borders: 'right',
           },
           {
             items: [
@@ -78,7 +75,6 @@ export default () => {
                 <EuiIcon type="cheer" size="m" />
               </EuiHeaderSectionItemButton>,
             ],
-            borders: 'none',
           },
         ]}
       />

diff --git a/src-docs/src/views/progress/progress_fixed.js b/src-docs/src/views/progress/progress_fixed.js
@@ -81,8 +81,8 @@ export default () => {
         <EuiHeader
           style={{ position: 'fixed', top: 0, left: 0, width: '100%' }}
         >
-          <EuiHeaderSection grow={false}>
-            <EuiHeaderSectionItem border="right">
+          <EuiHeaderSection>
+            <EuiHeaderSectionItem>
               <EuiHeaderLogo
                 iconType="logoKibana"
                 href="#"

diff --git a/src/components/header/__snapshots__/header.test.tsx.snap b/src/components/header/__snapshots__/header.test.tsx.snap
@@ -63,34 +63,34 @@ exports[`EuiHeader sections render breadcrumbs and props 1`] = `
 </div>
 `;
 
-exports[`EuiHeader sections render simple items and borders 1`] = `
+exports[`EuiHeader sections render simple items 1`] = `
 <div
   class="euiHeader emotion-euiHeader-static-default"
 >
   <div
-    class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
+    class="euiHeaderSection emotion-euiHeaderSection"
   >
     <div
-      class="euiHeaderSectionItem euiHeaderSectionItem--borderRight"
+      class="euiHeaderSectionItem emotion-euiHeaderSectionItem"
     >
       Item 1
     </div>
     <div
-      class="euiHeaderSectionItem euiHeaderSectionItem--borderRight"
+      class="euiHeaderSectionItem emotion-euiHeaderSectionItem"
     >
       Item 2
     </div>
   </div>
   <div
-    class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
+    class="euiHeaderSection emotion-euiHeaderSection"
   >
     <div
-      class="euiHeaderSectionItem euiHeaderSectionItem--borderLeft"
+      class="euiHeaderSectionItem emotion-euiHeaderSectionItem"
     >
       Item A
     </div>
     <div
-      class="euiHeaderSectionItem euiHeaderSectionItem--borderLeft"
+      class="euiHeaderSectionItem emotion-euiHeaderSectionItem"
     >
       Item B
     </div>
@@ -103,15 +103,15 @@ exports[`EuiHeader throws a warning if both children and sections were passed 1`
   class="euiHeader emotion-euiHeader-static-default"
 >
   <div
-    class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
+    class="euiHeaderSection emotion-euiHeaderSection"
   >
     <div
-      class="euiHeaderSectionItem euiHeaderSectionItem--borderLeft"
+      class="euiHeaderSectionItem emotion-euiHeaderSectionItem"
     >
       Item 1
     </div>
     <div
-      class="euiHeaderSectionItem euiHeaderSectionItem--borderLeft"
+      class="euiHeaderSectionItem emotion-euiHeaderSectionItem"
     >
       Item 2
     </div>

diff --git a/src/components/header/_index.scss b/src/components/header/_index.scss
diff --git a/src/components/header/header.a11y.tsx b/src/components/header/header.a11y.tsx
@@ -122,10 +122,8 @@ const Header = () => {
   return (
     <EuiHeader>
       <EuiHeaderSection grow={false}>
-        <EuiHeaderSectionItem border="right">
-          {renderLogo()}
-        </EuiHeaderSectionItem>
-        <EuiHeaderSectionItem border="right">
+        <EuiHeaderSectionItem>{renderLogo()}</EuiHeaderSectionItem>
+        <EuiHeaderSectionItem>
           <HeaderSpacesMenu />
         </EuiHeaderSectionItem>
       </EuiHeaderSection>

diff --git a/src/components/header/header.stories.tsx b/src/components/header/header.stories.tsx
@@ -6,8 +6,18 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import {
+  EuiHeaderLogo,
+  EuiHeaderSectionItemButton,
+  EuiHeaderLinks,
+  EuiHeaderLink,
+  EuiIcon,
+  EuiAvatar,
+} from '../../components';
+
 import { EuiHeader, EuiHeaderProps } from './header';
 
 const meta: Meta<EuiHeaderProps> = {
@@ -24,3 +34,49 @@ export const Playground: Story = {
     theme: 'default',
   },
 };
+
+export const Sections: Story = {
+  args: {
+    position: 'fixed',
+    sections: [
+      {
+        items: [
+          <EuiHeaderLogo
+            iconType="logoElastic"
+            href="#"
+            aria-label="Go to home page"
+          />,
+          <EuiHeaderSectionItemButton aria-label="Spaces menu">
+            <EuiAvatar type="space" name="Sales Team" size="s" />
+          </EuiHeaderSectionItemButton>,
+        ],
+        breadcrumbs: [
+          { text: 'Management', href: '#' },
+          { text: 'Users', href: '#' },
+          { text: 'Create' },
+        ],
+        breadcrumbProps: {
+          'aria-label': 'Header sections breadcrumbs',
+        },
+      },
+      {
+        items: [
+          <EuiHeaderLinks aria-label="App navigation dark theme example">
+            <EuiHeaderLink isActive>Docs</EuiHeaderLink>
+            <EuiHeaderLink>Code</EuiHeaderLink>
+            <EuiHeaderLink iconType="help"> Help</EuiHeaderLink>
+          </EuiHeaderLinks>,
+          <EuiHeaderSectionItemButton aria-label="Account menu">
+            <EuiAvatar name="John Username" size="s" />
+          </EuiHeaderSectionItemButton>,
+          <EuiHeaderSectionItemButton
+            notification="1"
+            aria-label="Apps menu with 1 new app"
+          >
+            <EuiIcon type="apps" size="m" />
+          </EuiHeaderSectionItemButton>,
+        ],
+      },
+    ],
+  },
+};