Update dimension provider

* simplify implementation
* add docs

ui/packages/consul-ui/.docfy-config.js

@@ -96,6 +96,12 @@ module.exports = {
       urlSchema: 'auto',
       urlPrefix: 'docs/consul',
     },
+    {
+      root: path.resolve(__dirname, 'app/components/providers'),
+      pattern: '**/README.mdx',
+      urlSchema: 'auto',
+      urlPrefix: 'docs/providers',
+    },
     {
       root: `${path.dirname(require.resolve('consul-acls/package.json'))}/app/components`,
       pattern: '**/README.mdx',
@@ -129,6 +135,7 @@ module.exports = {
   ].concat(user.sources),
   labels: {
     consul: 'Consul Components',
+    providers: 'Provider Components',
     ...user.labels,
   },
 };

ui/packages/consul-ui/app/components/providers/dimension/README.mdx

@@ -0,0 +1,43 @@
+# Providers::Dimension
+
+A provider component that helps you to make a container fill the remaining space of the viewport.
+Usually, you would **use flexbox** to do so but for scenarios where this isn't possible you
+can use this component to make it easy to take up the remaining space.
+
+```hbs
+<Providers::Dimension as |p|>
+  <div style={{p.data.fillRemainingHeightStyle}}>
+    Fill remaining space
+  </div>
+</Providers::Dimension>
+```
+
+By default, this component will take up the remaining viewport space by taking the
+top of itself as the top-boundary and the `footer[role="contentinfo"]` as the
+bottom-boundary. In terms of Consul-UI this means _take up the entire space but
+stop at the footer that holds the consul version info at the bottom of the screen_.
+
+You can pass a different `bottomBoundary` if need be:
+
+```hbs preview-template
+<div class='h-48 relative flex border border-hds-consul-foreground'>
+  <div class='h-full w-24 relative'>
+    <div
+      class='absolute bottom-0 w-full h-12 bg-hds-consul-gradient-primary-start flex items-center justify-center'
+      id='bottom-boundary'
+    >
+      Boundary
+    </div>
+  </div>
+  <div class='flex-1'>
+    <Providers::Dimension @bottomBoundary='#bottom-boundary' as |p|>
+      <div
+        style={{p.data.fillRemainingHeightStyle}}
+        class='bg-hds-consul-surface flex items-center justify-center'
+      >
+        We could use flexbox here instead
+      </div>
+    </Providers::Dimension>
+  </div>
+</div>
+```

ui/packages/consul-ui/app/components/providers/dimension/index.js

@@ -6,7 +6,6 @@ import { ref } from 'ember-ref-bucket';
 import { htmlSafe } from '@ember/template';
 
 export default class DimensionsProvider extends Component {
-  @service dom;
   @ref('element') element;
 
   @tracked height;
@@ -25,24 +24,17 @@ export default class DimensionsProvider extends Component {
   }
 
   get bottomBoundary() {
-    return this.args.bottomBoundary || this.footer;
+    return document.querySelector(this.args.bottomBoundary) || this.footer;
   }
 
   get footer() {
     return document.querySelector('footer[role="contentinfo"]');
   }
 
-  get viewport() {
-    return this.dom.viewport();
-  }
-
   @action measureDimensions(element) {
-    const { viewport, bottomBoundary } = this;
+    const bb = this.bottomBoundary.getBoundingClientRect();
-
+    const e = element.getBoundingClientRect();
-    const height =
+    this.height = bb.top + bb.height - e.top;
-      viewport.innerHeight - (element.getBoundingClientRect().top + bottomBoundary.clientHeight);
-
-    this.height = height;
   }
 
   @action handleWindowResize() {

ui/packages/consul-ui/app/styles/debug.scss

@@ -119,7 +119,8 @@ html:not(.with-data-source) .data-source-debug {
   /* hi */
   z-index: 100000;
 }
-html.with-href-to [href^='console://']::before {
+html.with-href-to [href^='console://']::before
+{
   @extend %p3;
   @extend %debug-box;
   content: attr(href);
@@ -155,6 +156,7 @@ html.with-route-announcer .route-title {
       margin-bottom: 100px;
       padding-top: 0 !important;
     }
+    li.provider-components a::before,
     li.consul-components a::before,
     li.components a::before {
       @extend %with-logo-glimmer-color-icon, %as-pseudo;
@@ -164,6 +166,7 @@ html.with-route-announcer .route-title {
     li.components.css-component a::before {
       @extend %with-logo-glimmer-color-icon, %as-pseudo;
     }
+    li.provider-components.ember-component a::before,
     li.consul-components.ember-component a::before,
     li.components.ember-component a::before {
       @extend %with-logo-ember-circle-color-icon, %as-pseudo;