Skip to content

[Feature Notification] Add a euiAnimation method on the EuiHeaderSectionItemButton ref #4424

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

Merged
elizabetdev merged 25 commits into from
Feb 11, 2021
Merged

[Feature Notification] Add a euiAnimation method on the EuiHeaderSectionItemButton ref #4424

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
915a2d1
Adding animation and hasBackground props to EuiHeaderSectionItemButton
elizabetdev Jan 14, 2021
14d5b51
A few improvements
elizabetdev Jan 14, 2021
cc5c874
Docs props
elizabetdev Jan 15, 2021
4f5c09f
Removing hasBackground prop
elizabetdev Jan 18, 2021
e020d7a
Using JS do hide and show on xs breakpoints
elizabetdev Jan 18, 2021
c6f7bc3
Adding a snippet
elizabetdev Jan 18, 2021
41a54c8
refactor animation prop into a ref method
chandlerprall Jan 29, 2021
e4b21e1
Merge pull request #8 from chandlerprall/notification_header_button_m…
elizabetdev Feb 1, 2021
d5923d3
Snapshots. Trigger animation comments.
elizabetdev Feb 1, 2021
4d3c970
Deleting unused css animation
elizabetdev Feb 1, 2021
8253863
triggerAnimation explanation
elizabetdev Feb 1, 2021
46a3d77
Cleaned up some logic and created a docs example specifically for the…
Feb 8, 2021
f88a657
Merge pull request #11 from cchaos/notification_header_button
elizabetdev Feb 10, 2021
aba5d8e
re-enable the animation test
chandlerprall Feb 10, 2021
d13e053
Merge pull request #12 from chandlerprall/notification_header_button_…
elizabetdev Feb 10, 2021
f3a8851
Update src-docs/src/views/header/header_animate.js
elizabetdev Feb 10, 2021
733ae30
Update src-docs/src/views/header/header_example.js
elizabetdev Feb 10, 2021
4634390
Update src-docs/src/views/header/header_alert.js
elizabetdev Feb 10, 2021
b4eb475
Update src-docs/src/views/header/header_alert.js
elizabetdev Feb 10, 2021
10736bd
Update src-docs/src/views/header/header_animate.js
elizabetdev Feb 10, 2021
4b396ac
Update src-docs/src/views/header/header_example.js
elizabetdev Feb 10, 2021
36c586d
renaming animate methods to euiAnimate
elizabetdev Feb 10, 2021
67d1c48
euiAnimate into header example
elizabetdev Feb 10, 2021
c5b041e
simplifying onClick closeFlyout
elizabetdev Feb 10, 2021
d431074
Update src-docs/src/views/header/header_example.js
elizabetdev Feb 11, 2021
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
258 changes: 143 additions & 115 deletions src-docs/src/views/header/header_alert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,42 +29,9 @@ import {
} from '../../../../src/components';
import { htmlIdGenerator } from '../../../../src/services';

export default () => {
const [position, setPosition] = useState('static');

return (
<>
<EuiSwitch
label={'Make header fixed position and put alerts in flyout'}
checked={position === 'fixed'}
onChange={(e) => setPosition(e.target.checked ? 'fixed' : 'static')}
/>
<EuiSpacer />
<EuiHeader position={position}>
<EuiHeaderSection grow={false}>
<EuiHeaderSectionItem border="right">
<EuiHeaderLogo>Elastic</EuiHeaderLogo>
</EuiHeaderSectionItem>
</EuiHeaderSection>

<EuiHeaderSection side="right">
<EuiHeaderSectionItem>
<HeaderUpdates
flyoutOrPopover={position === 'fixed' ? 'flyout' : 'popover'}
/>
</EuiHeaderSectionItem>
<EuiHeaderSectionItem>
<HeaderUserMenu />
</EuiHeaderSectionItem>
</EuiHeaderSection>
</EuiHeader>
</>
);
};

const HeaderUpdates = ({ flyoutOrPopover = 'flyout' }) => {
const HeaderUpdates = () => {
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
const [showBadge, setShowBadge] = useState(true);
const [isPopoverVisible, setIsPopoverVisible] = useState(false);

const alerts = [
{
Expand Down Expand Up @@ -146,88 +113,55 @@ const HeaderUpdates = ({ flyoutOrPopover = 'flyout' }) => {
setIsFlyoutVisible(false);
};

const closePopover = () => {
setIsPopoverVisible(false);
};

const showFlyout = () => {
setShowBadge(false);
setIsFlyoutVisible(!isFlyoutVisible);
};

const button = (
const showPopover = () => {
setIsPopoverVisible(!isPopoverVisible);
};

const bellButton = (
<EuiHeaderSectionItemButton
aria-controls="headerNewsFeed"
aria-controls="headerFlyoutNewsFeed"
aria-expanded={isFlyoutVisible}
aria-haspopup="true"
aria-label={`News feed: ${
showBadge ? 'Updates available' : 'No updates'
}`}
aria-label={'Alerts feed: Updates available'}
onClick={() => showFlyout()}
notification={showBadge}>
<EuiIcon type="cheer" size="m" />
notification={true}>
<EuiIcon type="bell" />
</EuiHeaderSectionItemButton>
);

let content;
if (flyoutOrPopover === 'flyout') {
content = (
<>
{button}
{isFlyoutVisible && (
<EuiPortal>
<EuiFlyout
onClose={() => closeFlyout()}
size="s"
id="headerNewsFeed"
aria-labelledby="flyoutSmallTitle">
<EuiFlyoutHeader hasBorder>
<EuiTitle size="s">
<h2 id="flyoutSmallTitle">What&apos;s new</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
{alerts.map((alert, i) => (
<EuiHeaderAlert
key={`alert-${i}`}
title={alert.title}
action={alert.action}
text={alert.text}
date={alert.date}
badge={alert.badge}
/>
))}
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
iconType="cross"
onClick={() => closeFlyout()}
flush="left">
Close
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText color="subdued" size="s">
<p>Version 7.0</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
</EuiPortal>
)}
</>
);
}
const cheerButton = (
<EuiHeaderSectionItemButton
aria-controls="headerPopoverNewsFeed"
aria-expanded={isPopoverVisible}
aria-haspopup="true"
aria-label={"News feed: Updates available'"}
onClick={() => showPopover()}
Comment thread
elizabetdev marked this conversation as resolved.
Outdated
notification={6}>
<EuiIcon type="cheer" />
</EuiHeaderSectionItemButton>
);

if (flyoutOrPopover === 'popover') {
content = (
<EuiPopover
button={button}
isOpen={isFlyoutVisible}
closePopover={() => closeFlyout()}
panelPaddingSize="none">
<EuiPopoverTitle paddingSize="s">What&apos;s new</EuiPopoverTitle>
<div style={{ maxHeight: '40vh', overflowY: 'auto', padding: 4 }}>
<EuiSpacer size="s" />
const flyout = (
<EuiPortal>
<EuiFlyout
onClose={() => closeFlyout()}
size="s"
id="headerFlyoutNewsFeed"
aria-labelledby="flyoutSmallTitle">
<EuiFlyoutHeader hasBorder>
<EuiTitle size="s">
<h2 id="flyoutSmallTitle">What&apos;s new</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
{alerts.map((alert, i) => (
<EuiHeaderAlert
key={`alert-${i}`}
Expand All @@ -238,17 +172,66 @@ const HeaderUpdates = ({ flyoutOrPopover = 'flyout' }) => {
badge={alert.badge}
/>
))}
</div>
<EuiPopoverFooter paddingSize="s">
<EuiText color="subdued" size="s">
<p>Version 7.0</p>
</EuiText>
</EuiPopoverFooter>
</EuiPopover>
);
}
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
iconType="cross"
onClick={() => closeFlyout()}
flush="left">
Close
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText color="subdued" size="s">
<p>Version 7.0</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
</EuiPortal>
);

const popover = (
<EuiPopover
id="headerPopoverNewsFeed"
ownFocus
repositionOnScroll
button={cheerButton}
isOpen={isPopoverVisible}
closePopover={() => closePopover()}
Comment thread
elizabetdev marked this conversation as resolved.
Outdated
panelPaddingSize="none">
<EuiPopoverTitle paddingSize="s">What&apos;s new</EuiPopoverTitle>
<div style={{ maxHeight: '40vh', overflowY: 'auto', padding: 4 }}>
<EuiSpacer size="s" />
{alerts.map((alert, i) => (
<EuiHeaderAlert
key={`alert-${i}`}
title={alert.title}
action={alert.action}
text={alert.text}
date={alert.date}
badge={alert.badge}
/>
))}
</div>
<EuiPopoverFooter paddingSize="s">
<EuiText color="subdued" size="s">
<p>Version 7.0</p>
</EuiText>
</EuiPopoverFooter>
</EuiPopover>
);

return content;
return (
<>
{bellButton}
{popover}
{isFlyoutVisible && flyout}
</>
);
};

const HeaderUserMenu = () => {
Expand Down Expand Up @@ -319,3 +302,48 @@ const HeaderUserMenu = () => {
</EuiPopover>
);
};

export default () => {
const [position, setPosition] = useState('static');
const [theme, setTheme] = useState('light');

return (
<>
<EuiFlexGroup alignItems="center" gutterSize="m">
<EuiFlexItem grow={false}>
<EuiSwitch
label={'Make header fixed position'}
checked={position === 'fixed'}
onChange={(e) => setPosition(e.target.checked ? 'fixed' : 'static')}
/>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiSwitch
label={'Change theme to dark'}
checked={theme === 'dark'}
onChange={(e) => setTheme(e.target.checked ? 'dark' : 'light')}
/>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer />

<EuiHeader position={position} theme={theme}>
<EuiHeaderSection grow={false}>
<EuiHeaderSectionItem border="right">
<EuiHeaderLogo>Elastic</EuiHeaderLogo>
</EuiHeaderSectionItem>
</EuiHeaderSection>
<EuiHeaderSection side="right">
<EuiHeaderSectionItem>
<HeaderUpdates />
</EuiHeaderSectionItem>
<EuiHeaderSectionItem>
<HeaderUserMenu />
</EuiHeaderSectionItem>
</EuiHeaderSection>
</EuiHeader>
</>
);
};
Loading