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 1 commit
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>
);
};
12 changes: 11 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,21 @@ 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 a <EuiCode>affordForDisplacement</EuiCode> prop (defaulting
to <EuiCode>true</EuiCode>), which determines whether the component
makes room for itself by adding vertical padding equivalent to its
own height on the document body element - setting this to{' '}
<EuiCode>false</EuiCode> can be useful in cases such as a web app
where it is desired that the appearance of vertical scrollbars is
minimized.
</p>
dannya marked this conversation as resolved.
Show resolved Hide resolved
<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 / l / none</EuiCode> - by default, it is set to{' '}
<EuiCode>m</EuiCode>.
dannya marked this conversation as resolved.
Show resolved Hide resolved
</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;

/**
* Whether the component should apply padding on the document body element to afford for its own displacement height.
* Default is true.
*/
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?


/**
* Padding applied to the bar
* Optional class applied to the body class
dannya marked this conversation as resolved.
Show resolved Hide resolved
*/
paddingSize?: BottomBarPaddingSize;
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