Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Emotion] Convert EuiHeaderAlert, EuiHeaderSection, EuiHeaderSectionItem, EuiHeaderSectionItemButton, and EuiHeaderLinks #7005

Merged
merged 25 commits into from
Aug 1, 2023
Merged

[Emotion] Convert EuiHeaderAlert, EuiHeaderSection, EuiHeaderSectionItem, EuiHeaderSectionItemButton, and EuiHeaderLinks #7005

Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
016e79e
[EuiHeaderAlert] Remove unused styles
cee-chen Jul 17, 2023
a796b26
[EuiHeaderAlert] Convert main alert styles
cee-chen Jul 17, 2023
cd8c693
[EuiHeaderAlert][opinionated change] Improve stacking behavior
cee-chen Jul 17, 2023
e6e0195
[EuiHeaderAlert] Convert remaining children
cee-chen Jul 17, 2023
12b4a73
[EuiHeaderAlert] Improve tests
cee-chen Jul 17, 2023
c5587b5
[EuiHeaderAlert] Add storybook stories
cee-chen Jul 17, 2023
a47463a
[EuiHeaderAlert] Remove Sass files; changelog
cee-chen Jul 18, 2023
bb9b51f
[EuiHeaderSection] Clean up `side` CSS/prop; improve tests
cee-chen Jul 17, 2023
dfe7bce
[EuiHeaderSection] Update usages
cee-chen Jul 17, 2023
1681067
[EuiHeaderSectionItem] Remove `border` prop
cee-chen Jul 17, 2023
701dd20
[EuiHeaderSectionItem] Convert to Emotion
cee-chen Jul 17, 2023
18840cb
[EuiHeaderSectionItem] Improve tests
cee-chen Jul 17, 2023
2eefdc5
[EuiHeaderSectionItemButton] Convert to Emotion
cee-chen Jul 17, 2023
915021d
[EuiHeaderSectionItemButton] Improve tests
cee-chen Jul 18, 2023
f069622
[EuiHeaderSection] Remove all related Sass files; changelog
cee-chen Jul 18, 2023
79cea12
[EuiHeaderSection] Add storybook stories
cee-chen Jul 27, 2023
389c7ee
[EuiHeaderLinks] Convert basic styles
cee-chen Jul 27, 2023
51a844a
[EuiHeaderLinks] Convert list styles
cee-chen Jul 27, 2023
805b9d2
[EuiHeaderLinks] Convert gutter styles and remove gutter modifiers
cee-chen Jul 27, 2023
d832f52
[EuiHeaderLinks] Update tests/snapshots
cee-chen Jul 27, 2023
716b625
Update stories
cee-chen Jul 27, 2023
c6016bf
Remove final low-usage `$euiHeader` Sass variables + delete remaining…
cee-chen Jul 27, 2023
3469497
[PR feedback] Document intentional style changes
cee-chen Jul 28, 2023
4c1e474
Merge branch 'main' into emotion/header
cee-chen Jul 28, 2023
0956afd
Merge branch 'main' into emotion/header
cee-chen Aug 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 2 additions & 8 deletions src-docs/src/components/guide_page/guide_page_header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 0 additions & 1 deletion src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,6 @@ const CollapsibleNavAll = () => {
sections={[
{
items: leftSectionItems,
borders: 'right',
},
{
items: [
Expand Down
8 changes: 3 additions & 5 deletions src-docs/src/views/header/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
16 changes: 12 additions & 4 deletions src-docs/src/views/header/header_alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' });
Expand Down Expand Up @@ -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,
1Copenut marked this conversation as resolved.
Show resolved Hide resolved
}}
>
<EuiSpacer size="s" />
{alerts.map((alert, i) => (
<EuiHeaderAlert
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 0 additions & 2 deletions src-docs/src/views/header/header_animate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,6 @@ export default () => {
sections={[
{
items: [<EuiHeaderLogo>Elastic</EuiHeaderLogo>],
borders: 'none',
},
{
items: [
Expand All @@ -135,7 +134,6 @@ export default () => {
notificationsNumber={notificationsNumber}
/>,
],
borders: 'none',
},
]}
/>
Expand Down
2 changes: 0 additions & 2 deletions src-docs/src/views/header/header_dark.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ export default () => {
<EuiHeaderLink iconType="help"> Help</EuiHeaderLink>
</EuiHeaderLinks>,
],
borders: 'right',
},
{
items: [
Expand All @@ -49,7 +48,6 @@ export default () => {
<EuiAvatar name="John Username" size="s" />
</EuiHeaderSectionItemButton>,
],
borders: 'none',
},
]}
/>
Expand Down
4 changes: 0 additions & 4 deletions src-docs/src/views/header/header_elastic_pattern.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,11 +307,9 @@ export default () => {
</EuiHeaderLogo>,
deploymentMenu,
],
borders: 'none',
},
{
items: [<EuiShowFor sizes={['m', 'l', 'xl']}>{search}</EuiShowFor>],
borders: 'none',
},
{
items: [
Expand All @@ -325,7 +323,6 @@ export default () => {
</EuiHeaderSectionItemButton>,
userMenu,
],
borders: 'none',
},
]}
/>
Expand All @@ -343,7 +340,6 @@ export default () => {
text: 'Users',
},
],
borders: 'right',
},
{
items: [
Expand Down
10 changes: 4 additions & 6 deletions src-docs/src/views/header/header_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -66,12 +66,10 @@ const headerSectionsSnippet = `<EuiHeader
sections={[
{
items: [...],
borders: 'right',
breadcrumbs: [...],
},
{
items: [...],
borders: 'none',
},
{
items: [...],
Expand All @@ -80,7 +78,7 @@ const headerSectionsSnippet = `<EuiHeader
/>`;

const headerLinksSnippet = `<EuiHeader>
<EuiHeaderSectionItem border="right">
<EuiHeaderSectionItem>
<EuiHeaderLogo
iconType="iconName"
href=""
Expand All @@ -99,7 +97,7 @@ const headerLinksSnippet = `<EuiHeader>
</EuiHeader>`;

const headerAlertSnippet = `<EuiHeader>
<EuiHeaderSection grow={false}>
<EuiHeaderSection>
<EuiHeaderSectionItem>
<!-- HeaderSectionItem content -->
</EuiHeaderSectionItem>
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/header/header_links.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
export default () => {
return (
<EuiHeader>
<EuiHeaderSectionItem border="right">
<EuiHeaderSectionItem>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The docs examples are closer to the right edge of the section container in your PR. It looks like the gutter was not applied in the docs example. If this is by design, please disregard.

Screen Shot 2023-07-28 at 10 41 06 AM

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This shift to the right also appears in the fullscreen docs examples.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking into this now!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be honest, I really feel like the gutter sizes in the original Sass modifiers were just buggy and incorrect. gap's behavior is a far more accurate. That being said, I'll at least tweak the modifiers to double them so they behave as before (except for the extra padding against the right side of the nav - I definitely feel that falls under "bugfix".)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

3469497 - I ended up tweaking the gap sizes to more closely match their previous production style, but not exactly (the l gutterSize in particular felt absolutely ridiculous, and there aren't any usages of that in Kibana - mostly just xs or s).

I also documented this in the changelog as an intentional change. Thanks for catching this Trevor! 🙇

<EuiHeaderLogo>Elastic</EuiHeaderLogo>
</EuiHeaderSectionItem>

Expand Down
1 change: 0 additions & 1 deletion src-docs/src/views/header/header_position.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ export default () => {
const sections: EuiHeaderSections[] = [
{
items: [<EuiHeaderLogo>Elastic</EuiHeaderLogo>],
borders: 'right',
},
];

Expand Down
1 change: 0 additions & 1 deletion src-docs/src/views/header/header_sections.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@ export default () => {
const sections: EuiHeaderSections[] = [
{
items: [renderLogo, renderSpaces],
borders: 'right',
breadcrumbs: breadcrumbs,
breadcrumbProps: {
'aria-label': 'Header sections breadcrumbs',
Expand Down
4 changes: 0 additions & 4 deletions src-docs/src/views/header/header_stacked.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
]}
/>
Expand All @@ -67,7 +65,6 @@ export default () => {
</EuiHeaderSectionItemButton>,
],
breadcrumbs: breadcrumbs,
borders: 'right',
},
{
items: [
Expand All @@ -78,7 +75,6 @@ export default () => {
<EuiIcon type="cheer" size="m" />
</EuiHeaderSectionItemButton>,
],
borders: 'none',
},
]}
/>
Expand Down
4 changes: 2 additions & 2 deletions src-docs/src/views/progress/progress_fixed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="#"
Expand Down
20 changes: 10 additions & 10 deletions src/components/header/__snapshots__/header.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
3 changes: 0 additions & 3 deletions src/components/header/_index.scss
View file
Open in desktop

This file was deleted.

6 changes: 2 additions & 4 deletions src/components/header/header.a11y.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
56 changes: 56 additions & 0 deletions src/components/header/header.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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> = {
Expand All @@ -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>,
],
},
],
},
};
Loading
Loading