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

EuiBottomBar: allow customization of whether the component makes room for itself #3641

Closed
wants to merge 4 commits into from
Closed

EuiBottomBar: allow customization of whether the component makes room for itself #3641

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6c0e804
EuiBottomBar:
dannya Jun 23, 2020
c6bdbc7
Update src-docs/src/views/bottom_bar/bottom_bar_example.js
dannya Jun 26, 2020
f2ada54
Update src/components/bottom_bar/bottom_bar.tsx
dannya Jun 26, 2020
5ba0beb
Update src-docs/src/views/bottom_bar/bottom_bar_example.js
dannya Jun 26, 2020
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
150 changes: 103 additions & 47 deletions src-docs/src/views/bottom_bar/bottom_bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,63 +2,119 @@ import React, { useState } from 'react';

import {
EuiBottomBar,
EuiFlexGroup,
EuiFlexItem,
EuiButtonGroup,
EuiButton,
EuiButtonEmpty,
EuiFlexGroup,
EuiFlexItem,
} from '../../../../src/components';

export default () => {
const [showBar, setShowBar] = useState(false);
const [toggleIdSelected, setToggleIdSelected] = useState(null);

const button = (
<EuiButton color="primary" onClick={() => setShowBar(!showBar)}>
Toggle appearance of the bottom bar
</EuiButton>
);
const toggleButtons = [
{
id: 'bottomBarStandard',
label: 'Show bottom bar',
},
{
id: 'bottomBarWithoutAffordForDisplacement',
label: 'Show bottom bar (without affordForDisplacement behavior)',
},
];

let bottomBar;
if (showBar) {
bottomBar = (
<EuiBottomBar>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButton color="ghost" size="s" iconType="help">
Help
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton color="ghost" size="s" iconType="user">
Add user
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButtonEmpty color="ghost" size="s" iconType="cross">
Discard
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton color="primary" fill size="s" iconType="check">
Save
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiBottomBar>
);
}
const onChange = optionId => {
setToggleIdSelected(optionId);
};

return (
<div>
{button}
{bottomBar}
<EuiButtonGroup
legend="Bottom Bar demo toggle buttons group"
type="single"
buttonSize="m"
options={toggleButtons}
idSelected={toggleIdSelected}
onChange={id => onChange(id)}
/>

{toggleIdSelected === 'bottomBarStandard' && (
<EuiBottomBar>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButton color="ghost" size="s" iconType="help">
Help
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton color="ghost" size="s" iconType="user">
Add user
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
onClick={() => setToggleIdSelected(null)}
color="ghost"
size="s"
iconType="cross">
Discard
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton color="primary" size="s" iconType="check" fill>
Save
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiBottomBar>
)}

{toggleIdSelected === 'bottomBarWithoutAffordForDisplacement' && (
<EuiBottomBar affordForDisplacement={false}>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButton color="ghost" size="s" iconType="help">
Help
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton color="ghost" size="s" iconType="user">
Add user
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
onClick={() => setToggleIdSelected(null)}
color="ghost"
size="s"
iconType="cross">
Discard
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton color="primary" size="s" iconType="check" fill>
Save
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiBottomBar>
)}
</div>
);
};
10 changes: 9 additions & 1 deletion src-docs/src/views/bottom_bar/bottom_bar_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,19 @@ export const BottomBarExample = {
complicated, multi-page forms. In the case of forms, only invoke it
if a form is in a savable state.
</p>
<p>
There is an <EuiCode>affordForDisplacement</EuiCode> prop (defaulting
to <EuiCode>true</EuiCode>), which determines whether the component
makes room for itself by adding bottom padding equivalent to its
own height on the document body element. Setting this to{' '}
<EuiCode>false</EuiCode> can be useful to minimize scrollbars visibility
but will overlap body content.
</p>
<p>
Like many of our other wrapper components,{' '}
<strong>EuiBottomBar</strong> accepts a{' '}
<EuiCode>paddingSize</EuiCode> prop, which can be set to{' '}
<EuiCode>s / m / l / none</EuiCode>.
<EuiCode>s / m (default) / l / none</EuiCode>.
</p>
</div>
),
Expand Down
36 changes: 27 additions & 9 deletions src/components/bottom_bar/bottom_bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,34 +38,51 @@ export const paddingSizeToClassNameMap: {

interface Props extends CommonProps {
/**
* Optional class applied to the body class
* Padding applied to the bar. Default is 'm'.
*/
bodyClassName?: string;
paddingSize: BottomBarPaddingSize;

/**
* Padding applied to the bar
* Whether the component should apply padding on the document body element to afford for its own displacement height.
* Default is true.
*/
paddingSize?: BottomBarPaddingSize;
affordForDisplacement: boolean;
Copy link
Contributor

Choose a reason for hiding this comment

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

Can you add a test for this prop?


/**
* Optional class applied to the body element on mount
*/
bodyClassName?: string;

/**
* Customize the screen reader heading that helps users find this control. Default is "Page level controls".
* Customize the screen reader heading that helps users find this control. Default is 'Page level controls'.
*/
landmarkHeading?: string;
}

export class EuiBottomBar extends Component<Props> {
static defaultProps = {
paddingSize: 'm',
affordForDisplacement: true,
};

private bar: HTMLElement | null = null;

componentDidMount() {
const height = this.bar ? this.bar.clientHeight : -1;
document.body.style.paddingBottom = `${height}px`;
if (this.props.affordForDisplacement) {
const height = this.bar ? this.bar.clientHeight : -1;
document.body.style.paddingBottom = `${height}px`;
}

if (this.props.bodyClassName) {
document.body.classList.add(this.props.bodyClassName);
}
}

componentWillUnmount() {
document.body.style.paddingBottom = '';
if (this.props.affordForDisplacement) {
document.body.style.paddingBottom = '';
}

if (this.props.bodyClassName) {
document.body.classList.remove(this.props.bodyClassName);
}
Expand All @@ -75,9 +92,10 @@ export class EuiBottomBar extends Component<Props> {
const {
children,
className,
paddingSize = 'm',
paddingSize,
bodyClassName,
landmarkHeading,
affordForDisplacement, // eslint-disable-line no-unused-vars
...rest
} = this.props;

Expand Down