From 6c0e80464ea8af31c6a84836789a25cde7dbdc00 Mon Sep 17 00:00:00 2001 From: Danny Allen Date: Tue, 23 Jun 2020 03:04:36 +0200 Subject: [PATCH 1/4] 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 2/4] 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 3/4] 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 4/4] 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.

),