From 6c0e80464ea8af31c6a84836789a25cde7dbdc00 Mon Sep 17 00:00:00 2001 From: Danny Allen Date: Tue, 23 Jun 2020 03:04:36 +0200 Subject: [PATCH 01/10] EuiBottomBar: * Add new `affordForDisplacement` prop (default: true) to allow customization of whether the component makes room for itself by adding padding equivalent to its own height on the document body element. Use case a web app which ordinarily doesn't require vertical scrollbars (with a large enough browser viewport) - the existing unconfigurable behavior was forcing a vertical scrollbar to appear in this scenario, as can be seen in the updated component doc page. * Make clear that the `paddingSize` prop default is "m". --- src-docs/src/views/bottom_bar/bottom_bar.js | 150 ++++++++++++------ .../views/bottom_bar/bottom_bar_example.js | 12 +- src/components/bottom_bar/bottom_bar.tsx | 36 +++-- 3 files changed, 141 insertions(+), 57 deletions(-) diff --git a/src-docs/src/views/bottom_bar/bottom_bar.js b/src-docs/src/views/bottom_bar/bottom_bar.js index 75952632ad7..393d59316c2 100644 --- a/src-docs/src/views/bottom_bar/bottom_bar.js +++ b/src-docs/src/views/bottom_bar/bottom_bar.js @@ -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 = ( - setShowBar(!showBar)}> - Toggle appearance of the bottom bar - - ); + const toggleButtons = [ + { + id: 'bottomBarStandard', + label: 'Show bottom bar', + }, + { + id: 'bottomBarWithoutAffordForDisplacement', + label: 'Show bottom bar (without affordForDisplacement behavior)', + }, + ]; - let bottomBar; - if (showBar) { - bottomBar = ( - - - - - - - Help - - - - - Add user - - - - - - - - - Discard - - - - - Save - - - - - - - ); - } + const onChange = optionId => { + setToggleIdSelected(optionId); + }; return (
- {button} - {bottomBar} + onChange(id)} + /> + + {toggleIdSelected === 'bottomBarStandard' && ( + + + + + + + Help + + + + + Add user + + + + + + + + setToggleIdSelected(null)} + color="ghost" + size="s" + iconType="cross"> + Discard + + + + + Save + + + + + + + )} + + {toggleIdSelected === 'bottomBarWithoutAffordForDisplacement' && ( + + + + + + + Help + + + + + Add user + + + + + + + + setToggleIdSelected(null)} + color="ghost" + size="s" + iconType="cross"> + Discard + + + + + Save + + + + + + + )}
); }; diff --git a/src-docs/src/views/bottom_bar/bottom_bar_example.js b/src-docs/src/views/bottom_bar/bottom_bar_example.js index 5f56c4dac25..12045fc115f 100644 --- a/src-docs/src/views/bottom_bar/bottom_bar_example.js +++ b/src-docs/src/views/bottom_bar/bottom_bar_example.js @@ -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.

+

+ There is a affordForDisplacement prop (defaulting + to true), 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{' '} + false can be useful in cases such as a web app + where it is desired that the appearance of vertical scrollbars is + minimized. +

Like many of our other wrapper components,{' '} EuiBottomBar accepts a{' '} paddingSize prop, which can be set to{' '} - s / m / l / none. + s / m / l / none - by default, it is set to{' '} + m.

), diff --git a/src/components/bottom_bar/bottom_bar.tsx b/src/components/bottom_bar/bottom_bar.tsx index f81981d2813..04bfe21327c 100644 --- a/src/components/bottom_bar/bottom_bar.tsx +++ b/src/components/bottom_bar/bottom_bar.tsx @@ -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; /** - * Padding applied to the bar + * Optional class applied to the body class */ - 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 { + 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); } @@ -75,9 +92,10 @@ export class EuiBottomBar extends Component { const { children, className, - paddingSize = 'm', + paddingSize, bodyClassName, landmarkHeading, + affordForDisplacement, // eslint-disable-line no-unused-vars ...rest } = this.props; From c6bdbc74d6ff95cd2819a9240db3091747b2fc1d Mon Sep 17 00:00:00 2001 From: Danny Allen Date: Fri, 26 Jun 2020 21:47:24 +0200 Subject: [PATCH 02/10] Update src-docs/src/views/bottom_bar/bottom_bar_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/bottom_bar/bottom_bar_example.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src-docs/src/views/bottom_bar/bottom_bar_example.js b/src-docs/src/views/bottom_bar/bottom_bar_example.js index 12045fc115f..3d11ea877ea 100644 --- a/src-docs/src/views/bottom_bar/bottom_bar_example.js +++ b/src-docs/src/views/bottom_bar/bottom_bar_example.js @@ -38,13 +38,12 @@ export const BottomBarExample = { if a form is in a savable state.

- There is a affordForDisplacement prop (defaulting + There is an affordForDisplacement prop (defaulting to true), 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{' '} - false can be useful in cases such as a web app - where it is desired that the appearance of vertical scrollbars is - minimized. + makes room for itself by adding bottom padding equivalent to its + own height on the document body element. Setting this to{' '} + false can be useful to minimize scrollbars visibility + but will overlap body content.

Like many of our other wrapper components,{' '} From f2ada549ad9186127166b4fe3b94fc216a092bc9 Mon Sep 17 00:00:00 2001 From: Danny Allen Date: Fri, 26 Jun 2020 21:47:34 +0200 Subject: [PATCH 03/10] Update src/components/bottom_bar/bottom_bar.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src/components/bottom_bar/bottom_bar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/bottom_bar/bottom_bar.tsx b/src/components/bottom_bar/bottom_bar.tsx index 04bfe21327c..6f5c20106ef 100644 --- a/src/components/bottom_bar/bottom_bar.tsx +++ b/src/components/bottom_bar/bottom_bar.tsx @@ -49,7 +49,7 @@ interface Props extends CommonProps { affordForDisplacement: boolean; /** - * Optional class applied to the body class + * Optional class applied to the body element on mount */ bodyClassName?: string; From 5ba0bebc135477b73937558ac519fe1f9d7bfc98 Mon Sep 17 00:00:00 2001 From: Danny Allen Date: Fri, 26 Jun 2020 21:48:28 +0200 Subject: [PATCH 04/10] Update src-docs/src/views/bottom_bar/bottom_bar_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/bottom_bar/bottom_bar_example.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src-docs/src/views/bottom_bar/bottom_bar_example.js b/src-docs/src/views/bottom_bar/bottom_bar_example.js index 3d11ea877ea..f437ba9dabe 100644 --- a/src-docs/src/views/bottom_bar/bottom_bar_example.js +++ b/src-docs/src/views/bottom_bar/bottom_bar_example.js @@ -49,8 +49,7 @@ export const BottomBarExample = { Like many of our other wrapper components,{' '} EuiBottomBar accepts a{' '} paddingSize prop, which can be set to{' '} - s / m / l / none - by default, it is set to{' '} - m. + s / m (default) / l / none.

), From 6e459a5e65c09daf9a2fd11bedd94365e33e51a4 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 19 Oct 2020 15:46:13 -0400 Subject: [PATCH 05/10] Add tests and move to new docs section --- src-docs/src/views/bottom_bar/bottom_bar.js | 150 ++++++------------ .../bottom_bar/bottom_bar_displacement.js | 73 +++++++++ .../views/bottom_bar/bottom_bar_example.js | 48 ++++-- .../__snapshots__/bottom_bar.test.tsx.snap | 34 ++++ src/components/bottom_bar/bottom_bar.test.tsx | 23 ++- 5 files changed, 212 insertions(+), 116 deletions(-) create mode 100644 src-docs/src/views/bottom_bar/bottom_bar_displacement.js diff --git a/src-docs/src/views/bottom_bar/bottom_bar.js b/src-docs/src/views/bottom_bar/bottom_bar.js index 393d59316c2..6986c5e20d4 100644 --- a/src-docs/src/views/bottom_bar/bottom_bar.js +++ b/src-docs/src/views/bottom_bar/bottom_bar.js @@ -2,119 +2,63 @@ import React, { useState } from 'react'; import { EuiBottomBar, - EuiButtonGroup, - EuiButton, - EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, + EuiButton, + EuiButtonEmpty, } from '../../../../src/components'; export default () => { - const [toggleIdSelected, setToggleIdSelected] = useState(null); + const [showBar, setShowBar] = useState(false); - const toggleButtons = [ - { - id: 'bottomBarStandard', - label: 'Show bottom bar', - }, - { - id: 'bottomBarWithoutAffordForDisplacement', - label: 'Show bottom bar (without affordForDisplacement behavior)', - }, - ]; + const button = ( + setShowBar((show) => !show)}> + Toggle appearance of the bottom bar + + ); - const onChange = optionId => { - setToggleIdSelected(optionId); - }; + let bottomBar; + if (showBar) { + bottomBar = ( + + + + + + + Help + + + + + Add user + + + + + + + + + Discard + + + + + Save + + + + + + + ); + } return (
- onChange(id)} - /> - - {toggleIdSelected === 'bottomBarStandard' && ( - - - - - - - Help - - - - - Add user - - - - - - - - setToggleIdSelected(null)} - color="ghost" - size="s" - iconType="cross"> - Discard - - - - - Save - - - - - - - )} - - {toggleIdSelected === 'bottomBarWithoutAffordForDisplacement' && ( - - - - - - - Help - - - - - Add user - - - - - - - - setToggleIdSelected(null)} - color="ghost" - size="s" - iconType="cross"> - Discard - - - - - Save - - - - - - - )} + {button} + {bottomBar}
); }; diff --git a/src-docs/src/views/bottom_bar/bottom_bar_displacement.js b/src-docs/src/views/bottom_bar/bottom_bar_displacement.js new file mode 100644 index 00000000000..9e46319df1b --- /dev/null +++ b/src-docs/src/views/bottom_bar/bottom_bar_displacement.js @@ -0,0 +1,73 @@ +import React, { useState } from 'react'; + +import { + EuiBottomBar, + EuiButtonGroup, + EuiButtonEmpty, + EuiFlexGroup, + EuiFlexItem, +} from '../../../../src/components'; + +export default () => { + const [toggleIdSelected, setToggleIdSelected] = useState(null); + + const toggleButtons = [ + { + id: 'bottomBarStandard', + label: 'Show bottom bar', + }, + { + id: 'bottomBarWithoutAffordForDisplacement', + label: 'Show bottom bar (without affordForDisplacement behavior)', + }, + ]; + + const onChange = (optionId) => { + setToggleIdSelected(optionId); + }; + + return ( +
+ onChange(id)} + /> + + {toggleIdSelected === 'bottomBarStandard' && ( + + + + setToggleIdSelected(null)} + color="ghost" + size="s" + iconType="cross"> + close + + + + + )} + + {toggleIdSelected === 'bottomBarWithoutAffordForDisplacement' && ( + + + + setToggleIdSelected(null)} + color="ghost" + size="s" + iconType="cross"> + close + + + + + )} +
+ ); +}; diff --git a/src-docs/src/views/bottom_bar/bottom_bar_example.js b/src-docs/src/views/bottom_bar/bottom_bar_example.js index f437ba9dabe..7aca4210d3d 100644 --- a/src-docs/src/views/bottom_bar/bottom_bar_example.js +++ b/src-docs/src/views/bottom_bar/bottom_bar_example.js @@ -14,6 +14,14 @@ const bottomBarSnippet = ` `; +import BottomBarDisplacement from './bottom_bar_displacement'; +const bottomBarDisplacementSource = require('!!raw-loader!./bottom_bar_displacement'); +const bottomBarDisplacementHtml = renderToHtml(BottomBarDisplacement); + +const bottomBarDisplacementSnippet = ` + +`; + export const BottomBarExample = { title: 'Bottom bar', sections: [ @@ -29,7 +37,7 @@ export const BottomBarExample = { }, ], text: ( -
+ <>

EuiBottomBar is a simple wrapper component that does nothing but fix a bottom bar (usually filled with buttons) to @@ -37,25 +45,45 @@ export const BottomBarExample = { complicated, multi-page forms. In the case of forms, only invoke it if a form is in a savable state.

-

- There is an affordForDisplacement prop (defaulting - to true), 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{' '} - false can be useful to minimize scrollbars visibility - but will overlap body content. -

Like many of our other wrapper components,{' '} EuiBottomBar accepts a{' '} paddingSize prop, which can be set to{' '} s / m (default) / l / none.

-
+ ), props: { EuiBottomBar }, snippet: bottomBarSnippet, demo: , }, + { + title: 'Displacement', + source: [ + { + type: GuideSectionTypes.JS, + code: bottomBarDisplacementSource, + }, + { + type: GuideSectionTypes.HTML, + code: bottomBarDisplacementHtml, + }, + ], + text: ( + <> +

+ There is an affordForDisplacement prop + (defaulting to true), 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 false can be useful to minimize scrollbar + visibility but will cause the bottom bar to overlap body content. +

+ + ), + props: { EuiBottomBar }, + snippet: bottomBarDisplacementSnippet, + demo: , + }, ], }; diff --git a/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap b/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap index 8ec6d9cb6ee..48fa6ec4de6 100644 --- a/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap +++ b/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap @@ -23,6 +23,40 @@ Array [ ] `; +exports[`EuiBottomBar props affordForDisplacement can be false 1`] = ` +Array [ +
+

+ Page level controls +

+
, +

+ There is a new region landmark with page level controls at the end of the document. +

, +] +`; + +exports[`EuiBottomBar props bodyClassName is rendered 1`] = ` +
+

+ Page level controls +

+
+`; + exports[`EuiBottomBar props paddingSize l is rendered 1`] = ` Array [
node; +ReactDOM.createPortal = (children) => { + // hack to make enzyme treat the portal as a fragment + if (children == null) return [['nested']]; + return children; +}; describe('EuiBottomBar', () => { test('is rendered', () => { @@ -48,5 +52,18 @@ describe('EuiBottomBar', () => { }); }); }); + + test('affordForDisplacement can be false', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + + test('bodyClassName is rendered', () => { + const component = mount(); + + expect(takeMountedSnapshot(component)).toMatchSnapshot(); + expect(document.body.classList.contains('customClass')).toBe(true); + }); }); }); From ebc78c4cd8a5eb46d67315b5162a89ee060ff32b Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 19 Oct 2020 15:51:49 -0400 Subject: [PATCH 06/10] cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ce1370ffdb4..552f169792a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ - Added more exports for `EuiBasicTable` types ([#4125](https://github.com/elastic/eui/pull/4125)) - Updated types associated with `EuiMarkdownEditor` plugin dependencies ([4124](https://github.com/elastic/eui/pull/4124)) - Upgraded dependencies related to `EuiMarkdownEditor`: `react-dropzone`, `rehype-*`, `remark-*`, and `unified` ([#4124](https://github.com/elastic/eui/pull/4124)) +- Added `affordForDisplacement` prop to `EuiBottomBar` ([#3641](https://github.com/elastic/eui/pull/3641)) **Breaking changes** From 6f1262329fc95f0536d62dd271b3d7bdf6672a78 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 19 Oct 2020 15:58:20 -0400 Subject: [PATCH 07/10] cl --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 552f169792a..0a0da3aeceb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ - Added more exports for `EuiBasicTable` types ([#4125](https://github.com/elastic/eui/pull/4125)) - Updated types associated with `EuiMarkdownEditor` plugin dependencies ([4124](https://github.com/elastic/eui/pull/4124)) - Upgraded dependencies related to `EuiMarkdownEditor`: `react-dropzone`, `rehype-*`, `remark-*`, and `unified` ([#4124](https://github.com/elastic/eui/pull/4124)) -- Added `affordForDisplacement` prop to `EuiBottomBar` ([#3641](https://github.com/elastic/eui/pull/3641)) +- Added `affordForDisplacement` prop to `EuiBottomBar` ([#4156](https://github.com/elastic/eui/pull/4156)) **Breaking changes** From 260e4cfcf837b3ee08ecce10e37011779e88fdaa Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Mon, 26 Oct 2020 12:30:30 -0600 Subject: [PATCH 08/10] some tweaks --- .../bottom_bar/bottom_bar_displacement.js | 21 ++------------ src/components/bottom_bar/bottom_bar.tsx | 28 ++++++++++++++++--- 2 files changed, 27 insertions(+), 22 deletions(-) diff --git a/src-docs/src/views/bottom_bar/bottom_bar_displacement.js b/src-docs/src/views/bottom_bar/bottom_bar_displacement.js index 9e46319df1b..2ad3e2f47bd 100644 --- a/src-docs/src/views/bottom_bar/bottom_bar_displacement.js +++ b/src-docs/src/views/bottom_bar/bottom_bar_displacement.js @@ -37,24 +37,9 @@ export default () => { onChange={(id) => onChange(id)} /> - {toggleIdSelected === 'bottomBarStandard' && ( - - - - setToggleIdSelected(null)} - color="ghost" - size="s" - iconType="cross"> - close - - - - - )} - - {toggleIdSelected === 'bottomBarWithoutAffordForDisplacement' && ( - + {toggleIdSelected && ( + { } } - componentWillUnmount() { - if (this.props.affordForDisplacement) { - document.body.style.paddingBottom = ''; + componentDidUpdate(prevProps: Props) { + if (prevProps.affordForDisplacement !== this.props.affordForDisplacement) { + if (this.props.affordForDisplacement) { + // start affording for displacement + const height = this.bar ? this.bar.clientHeight : -1; + document.body.style.paddingBottom = `${height}px`; + } else { + // stop affording for displacement + document.body.style.paddingBottom = ''; + } + } + + if (prevProps.bodyClassName !== this.props.bodyClassName) { + if (prevProps.bodyClassName) { + document.body.classList.remove(prevProps.bodyClassName); + } + if (this.props.bodyClassName) { + document.body.classList.add(this.props.bodyClassName); + } } + } + + componentWillUnmount() { + document.body.style.paddingBottom = ''; if (this.props.bodyClassName) { document.body.classList.remove(this.props.bodyClassName); @@ -95,7 +115,7 @@ export class EuiBottomBar extends Component { paddingSize, bodyClassName, landmarkHeading, - affordForDisplacement, // eslint-disable-line no-unused-vars + affordForDisplacement, ...rest } = this.props; From 0cf9e83f41c67ee5c4a534adf3532cd9579ade36 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Mon, 26 Oct 2020 15:01:28 -0600 Subject: [PATCH 09/10] Only remove affordance if it was previously set --- src/components/bottom_bar/bottom_bar.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/bottom_bar/bottom_bar.tsx b/src/components/bottom_bar/bottom_bar.tsx index 2068995709c..85565349d26 100644 --- a/src/components/bottom_bar/bottom_bar.tsx +++ b/src/components/bottom_bar/bottom_bar.tsx @@ -101,7 +101,9 @@ export class EuiBottomBar extends Component { } componentWillUnmount() { - document.body.style.paddingBottom = ''; + if (this.props.affordForDisplacement) { + document.body.style.paddingBottom = ''; + } if (this.props.bodyClassName) { document.body.classList.remove(this.props.bodyClassName); From 932df1850033303261d739cf3d47724ae8269584 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 27 Oct 2020 11:05:45 -0400 Subject: [PATCH 10/10] cl --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ed7a5129b4e..5fc5ed2fd3f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ - Improved `EuiButtonGroup` focus, hover, selected and disabled states ([#4142](https://github.com/elastic/eui/pull/4142)) - Added `display` prop to `EuiToolTip` for common display block needs ([#4148](https://github.com/elastic/eui/pull/4148)) - Added support for more colors in `EuiProgress` such as `vis0` through `vis9`, `warning`, `success` and custom colors ([#4130](https://github.com/elastic/eui/pull/4130)) +- Added `affordForDisplacement` prop to `EuiBottomBar` ([#4156](https://github.com/elastic/eui/pull/4156)) **Bug fixes** @@ -19,7 +20,6 @@ - Added more exports for `EuiBasicTable` types ([#4125](https://github.com/elastic/eui/pull/4125)) - Updated types associated with `EuiMarkdownEditor` plugin dependencies ([#4124](https://github.com/elastic/eui/pull/4124)) - Upgraded dependencies related to `EuiMarkdownEditor`: `react-dropzone`, `rehype-*`, `remark-*`, and `unified` ([#4124](https://github.com/elastic/eui/pull/4124)) -- Added `affordForDisplacement` prop to `EuiBottomBar` ([#4156](https://github.com/elastic/eui/pull/4156)) **Bug fixes**