From df7cdc4598ebe711f2de8a3f6b8ff7853c75b15f Mon Sep 17 00:00:00 2001 From: Diego Date: Fri, 18 Mar 2022 16:14:44 -0600 Subject: [PATCH 1/4] changes: eui bottom bar --- .../addon/components/eui-bottom-bar/index.hbs | 41 +++++-- .../addon/components/eui-bottom-bar/index.ts | 58 +++++++++- .../utils/css-mappings/eui-bottom-bar.ts | 10 +- .../core/docs/layout/bottom-bar-demo/demo1.md | 109 +++++++++++++----- 4 files changed, 177 insertions(+), 41 deletions(-) diff --git a/packages/core/addon/components/eui-bottom-bar/index.hbs b/packages/core/addon/components/eui-bottom-bar/index.hbs index a69a8fea0..2800e6b1e 100644 --- a/packages/core/addon/components/eui-bottom-bar/index.hbs +++ b/packages/core/addon/components/eui-bottom-bar/index.hbs @@ -1,29 +1,50 @@ -{{!-- TODO: Add landmarkSupport after having an component support --}} - +{{! TODO: Add landmarkSupport after having an component support }} +{{#if this.usePortal}} + +
+ {{yield}} +
+ +{{else}}
- {{!--
+

{{if @landmarkHeading @landmarkHeading "Page level controls"}}

-
--}} +
{{yield}}
- {{!--
+

{{#if @landmarkHeading}} - There is a new region landmark called {{@landmarkHeading}} with page level controls at the end of the document. + There is a new region landmark called + {{@landmarkHeading}} + with page level controls at the end of the document. {{else}} - There is a new region landmark with page level controls at the end of the document. + There is a new region landmark with page level controls at the end of + the document. {{/if}}

-
--}} - \ No newline at end of file +
+{{/if}} \ No newline at end of file diff --git a/packages/core/addon/components/eui-bottom-bar/index.ts b/packages/core/addon/components/eui-bottom-bar/index.ts index 2b00fd42e..08b56028e 100644 --- a/packages/core/addon/components/eui-bottom-bar/index.ts +++ b/packages/core/addon/components/eui-bottom-bar/index.ts @@ -4,15 +4,67 @@ import { action } from '@ember/object'; interface EuiButtomBarArgs { affordForDisplacement: boolean; bodyClassName: string; + position?: 'fixed' | 'static' | 'sticky'; + usePortal: boolean; + paddingSize?: 'none' | 's' | 'm' | 'l'; + landmarkHeading?: string; + top: number; + right: number; + left: number; + bottom: number; } export default class EuiBottomBarComponent extends GlimmerComponent { get affordForDisplacement(): boolean { - return this.args.affordForDisplacement ?? true; + return this.position !== 'fixed' + ? false + : this.args.affordForDisplacement ?? true; + } + + get usePortal(): boolean { + return this.position !== 'fixed' ? false : true; + } + + get position(): string { + return this.args.position || 'fixed'; + } + + get top(): number { + return this.args.top ? this.args.top : 0; + } + + get right(): number { + return this.args.right ? this.args.right : 0; + } + + get left(): number { + return this.args.left ? this.args.left : 0; + } + + get bottom(): number { + return this.args.bottom ? this.args.bottom : 0; + } + + get bottomBarStyles(): { [i: string]: string } { + if (this.position === 'fixed') { + return { + left: `${this.left}px`, + right: `${this.right}px`, + bottom: `${this.bottom}px` + }; + } else { + return { + top: `${this.top}px`, + left: `${this.left}px`, + right: `${this.right}px`, + bottom: `${this.bottom}px` + }; + } } @action didInsert(element: HTMLElement): void { - if (this.affordForDisplacement) { + console.log(this.affordForDisplacement, this.usePortal); + if (this.affordForDisplacement && this.usePortal) { const height = element.clientHeight; document.body.style.paddingBottom = `${height}px`; } @@ -26,7 +78,7 @@ export default class EuiBottomBarComponent extends GlimmerComponent - EuiBottomBar is a simple wrapper component that does nothing but fix a bottom bar (usually filled with buttons) to the bottom of the page. Use it when you have really long pages or complicated, multi-page forms. In the case of forms, only invoke it if a form is in a savable state. + EuiBottomBar + is a simple wrapper component that does nothing but fix a bottom bar (usually + filled with buttons) to the bottom of the page. Use it when you have really + long pages or complicated, multi-page forms. In the case of forms, only invoke + it if a form is in a savable state. - + - + Toggle appearance of the bottom bar {{#if this.basicBottomBarActive}} - + - + - + Help - + Add user - + - + Discard - + Save @@ -42,37 +57,76 @@ {{/if}} - - + +
+ + Positions + + + + Bottom bars default to a fixed position, in a portal at the bottom of the + browser window. Alternatively, you can change the position to sticky where + it will render in place but stick to the window only as the window edge + nears. The static position reverts back to default DOM behavior. You can + also apply a different set of positioning locations just by adjusting them + in with the top | right | bottom | left props. + + + + +

Scroll to see!

+ + +
+ Displacement + - 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. + 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. - - + + Show bottom bar - + Show bottom bar (without affordForDisplacement behavior) {{#if this.displacedBottomBarActive}} - + close @@ -80,6 +134,7 @@ {{/if}} + ``` ```js component From 212903be4dddfcefdde03abf7828cf6cfc9dedff Mon Sep 17 00:00:00 2001 From: Diego Date: Fri, 18 Mar 2022 16:23:57 -0600 Subject: [PATCH 2/4] refactor: remove console log --- packages/core/addon/components/eui-bottom-bar/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/addon/components/eui-bottom-bar/index.ts b/packages/core/addon/components/eui-bottom-bar/index.ts index 08b56028e..c0a1badeb 100644 --- a/packages/core/addon/components/eui-bottom-bar/index.ts +++ b/packages/core/addon/components/eui-bottom-bar/index.ts @@ -63,7 +63,6 @@ export default class EuiBottomBarComponent extends GlimmerComponent Date: Wed, 30 Mar 2022 19:34:26 -0600 Subject: [PATCH 3/4] fix demos and use modifier for updating styles --- .../addon/components/eui-bottom-bar/index.hbs | 21 +++- .../addon/components/eui-bottom-bar/index.ts | 83 ++++++++-------- .../core/docs/layout/bottom-bar-demo/demo1.md | 98 +++---------------- .../core/docs/layout/bottom-bar-demo/demo2.md | 54 ++++++++++ .../core/docs/layout/bottom-bar-demo/demo3.md | 75 ++++++++++++++ site/app/templates/application.hbs | 2 +- 6 files changed, 204 insertions(+), 129 deletions(-) create mode 100644 packages/core/docs/layout/bottom-bar-demo/demo2.md create mode 100644 packages/core/docs/layout/bottom-bar-demo/demo3.md diff --git a/packages/core/addon/components/eui-bottom-bar/index.hbs b/packages/core/addon/components/eui-bottom-bar/index.hbs index 2800e6b1e..e8321b0a8 100644 --- a/packages/core/addon/components/eui-bottom-bar/index.hbs +++ b/packages/core/addon/components/eui-bottom-bar/index.hbs @@ -1,15 +1,22 @@ {{! TODO: Add landmarkSupport after having an component support }} + {{log this.bottomBarStyles}} {{#if this.usePortal}}
{{yield}} @@ -17,7 +24,8 @@ {{else}}
diff --git a/packages/core/addon/components/eui-bottom-bar/index.ts b/packages/core/addon/components/eui-bottom-bar/index.ts index c0a1badeb..81c356b77 100644 --- a/packages/core/addon/components/eui-bottom-bar/index.ts +++ b/packages/core/addon/components/eui-bottom-bar/index.ts @@ -1,5 +1,7 @@ import GlimmerComponent from '@glimmer/component'; import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; +import { modifier } from 'ember-modifier'; interface EuiButtomBarArgs { affordForDisplacement: boolean; @@ -13,7 +15,46 @@ interface EuiButtomBarArgs { left: number; bottom: number; } + +const updateDisplacementModifier = modifier(function ( + element: Element, + _pos: unknown[], + { + affordForDisplacement, + usePortal, + bodyClassName, + dimensions + }: { + affordForDisplacement: boolean; + usePortal: boolean; + bodyClassName: string; + dimensions: { height: number }; + } +) { + if (affordForDisplacement && usePortal) { + document.body.style.paddingBottom = `${dimensions.height}px`; + } + + if (bodyClassName) { + document.body.classList.add(bodyClassName); + } + + return () => { + if (affordForDisplacement && usePortal) { + document.body.style.paddingBottom = ''; + } + + if (bodyClassName) { + document.body.classList.remove(bodyClassName); + } + }; +}); + export default class EuiBottomBarComponent extends GlimmerComponent { + updateDisplacementModifier = updateDisplacementModifier; + + @tracked dimensions: { height: number; width: number } | undefined; + get affordForDisplacement(): boolean { return this.position !== 'fixed' ? false @@ -44,20 +85,11 @@ export default class EuiBottomBarComponent extends GlimmerComponent - EuiBottomBar - is a simple wrapper component that does nothing but fix a bottom bar (usually - filled with buttons) to the bottom of the page. Use it when you have really - long pages or complicated, multi-page forms. In the case of forms, only invoke - it if a form is in a savable state. +

+ EuiBottomBar is a simple wrapper component that does nothing but affix a dark bar (usually filled with buttons) to the bottom of the page. Use it when you have really long pages or complicated, multi-page forms. In the case of forms, only invoke it if a form is in a savable state. +

+

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

- +```hbs template {{/if}} - -
- - Positions - - - - Bottom bars default to a fixed position, in a portal at the bottom of the - browser window. Alternatively, you can change the position to sticky where - it will render in place but stick to the window only as the window edge - nears. The static position reverts back to default DOM behavior. You can - also apply a different set of positioning locations just by adjusting them - in with the top | right | bottom | left props. - - - - -

Scroll to see!

- - -
- - - - Displacement - - - - 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. - - - - Show bottom bar - - - Show bottom bar (without affordForDisplacement behavior) - -{{#if this.displacedBottomBarActive}} - - - - - close - - - - -{{/if}} - ``` ```js component diff --git a/packages/core/docs/layout/bottom-bar-demo/demo2.md b/packages/core/docs/layout/bottom-bar-demo/demo2.md new file mode 100644 index 000000000..4ed082ab8 --- /dev/null +++ b/packages/core/docs/layout/bottom-bar-demo/demo2.md @@ -0,0 +1,54 @@ +--- +order: 2 +--- + +# Positions + + +

+ Bottom bars default to a fixed position, in a portal at the bottom of the + browser window. Alternatively, you can change the position to sticky where + it will render in place but stick to the window only as the window edge + nears. The static position reverts back to default DOM behavior. +

+

+ You can + also apply a different set of positioning locations just by adjusting them + in with the top | right | bottom | left props. +

+ + +```hbs template +
+ +

+ When scrolling past this example block, the + EuiBottomBar + will stick to the bottom of the browser window (with a 10px offset), but + keeps it within the bounds of its parent. +

+ + + + + +

Scroll to see!

+ + +
+``` + +```js component +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; + +export default class BottomBarDemo1Component extends Component { + @tracked basicBottomBarActive = false; + @tracked displacedBottomBarActive = false; + @tracked affordForDisplacement = true; +} +``` diff --git a/packages/core/docs/layout/bottom-bar-demo/demo3.md b/packages/core/docs/layout/bottom-bar-demo/demo3.md new file mode 100644 index 000000000..fbbdf2bf5 --- /dev/null +++ b/packages/core/docs/layout/bottom-bar-demo/demo3.md @@ -0,0 +1,75 @@ +--- +order: 3 +--- + +# Displacement + + +

+ 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. +

+

+ You can + also apply a different set of positioning locations just by adjusting them + in with the top | right | bottom | left props. +

+ + +```hbs template + + Show bottom bar + + + Show bottom bar (without affordForDisplacement behavior) + +{{#if this.displacedBottomBarActive}} + + + + + close + + + + +{{/if}} + +``` + +```js component +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; + +export default class BottomBarDemo1Component extends Component { + @tracked basicBottomBarActive = false; + @tracked displacedBottomBarActive = false; + @tracked affordForDisplacement = true; +} +``` diff --git a/site/app/templates/application.hbs b/site/app/templates/application.hbs index 28ec44677..59cbb3ece 100644 --- a/site/app/templates/application.hbs +++ b/site/app/templates/application.hbs @@ -19,7 +19,7 @@ - + Date: Wed, 30 Mar 2022 19:38:58 -0600 Subject: [PATCH 4/4] final --- .../addon/components/eui-bottom-bar/index.hbs | 5 +- .../addon/components/eui-bottom-bar/index.ts | 13 ----- .../core/docs/layout/bottom-bar-demo/demo3.md | 54 ++++++++++--------- 3 files changed, 31 insertions(+), 41 deletions(-) diff --git a/packages/core/addon/components/eui-bottom-bar/index.hbs b/packages/core/addon/components/eui-bottom-bar/index.hbs index e8321b0a8..f6e38e9fa 100644 --- a/packages/core/addon/components/eui-bottom-bar/index.hbs +++ b/packages/core/addon/components/eui-bottom-bar/index.hbs @@ -1,5 +1,4 @@ {{! TODO: Add landmarkSupport after having an component support }} - {{log this.bottomBarStyles}} {{#if this.usePortal}}
+ >ยด {{yield}}
@@ -32,7 +30,6 @@ positionType=(arg-or-default this.position "fixed") }} aria-label={{if @landmarkHeading @landmarkHeading "Page level controls"}} - {{did-insert this.didInsert}} {{this.updateDisplacementModifier affordForDisplacement=this.affordForDisplacement usePortal=this.usePortal diff --git a/packages/core/addon/components/eui-bottom-bar/index.ts b/packages/core/addon/components/eui-bottom-bar/index.ts index 81c356b77..54e42197c 100644 --- a/packages/core/addon/components/eui-bottom-bar/index.ts +++ b/packages/core/addon/components/eui-bottom-bar/index.ts @@ -1,5 +1,4 @@ import GlimmerComponent from '@glimmer/component'; -import { action } from '@ember/object'; import { tracked } from '@glimmer/tracking'; import { modifier } from 'ember-modifier'; @@ -92,16 +91,4 @@ export default class EuiBottomBarComponent extends GlimmerComponent ```hbs template - - Show bottom bar - - - Show bottom bar (without affordForDisplacement behavior) - + + + + Show bottom bar + + + + + Show bottom bar (without affordForDisplacement behavior) + + + {{#if this.displacedBottomBarActive}}