Dev v0.2.21

addon/components/content-panel.hbs

@@ -81,7 +81,7 @@
                             </span>
                         {{/if}}
                         {{#each @actionButtons as |button|}}
-                            <Button @type={{button.type}} @text={{button.text}} @icon={{button.icon}} @size={{button.size}} @iconPrefix={{button.iconPrefix}} @onClick={{button.onClick}} />
+                            <Button @type={{button.type}} @text={{button.text}} @icon={{button.icon}} @size={{button.size}} @iconPrefix={{button.iconPrefix}} @onClick={{button.onClick}} @wrapperClass={{button.wrapperClass}} class={{button.class}} />
                         {{/each}}
                         {{#if @dropdownButton}}
                             <DropdownButton

addon/components/registry-yield.hbs

@@ -0,0 +1,3 @@
+{{#each this.components as |component|}}
+    {{yield component @context}}
+{{/each}}

addon/components/registry-yield.js

@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class RegistryYieldComponent extends Component {
+    @service universe;
+    get components() {
+        return this.universe.getRenderableComponentsFromRegistry(this.args.registry) ?? [];
+    }
+}

addon/components/toggle.hbs

@@ -21,7 +21,7 @@
         {{/if}}
         {{#if @helpText}}
             <div class={{if @label "ml-2"}}>
-                <FaIcon @icon={{or @icon "info-circle"}} class="text-gray-300 dark:text-gray-100 {{@iconClass}}" />
+                <FaIcon @icon={{or @icon "info-circle"}} @size="xs" class="text-gray-300 dark:text-gray-100 text-xs {{@iconClass}}" />
                 <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "right"}}>
                     <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
                 </Attach::Tooltip>

addon/styles/components/tip-tap-editor.css

@@ -145,6 +145,7 @@ body[data-theme='dark'] .tip-tap-editor > div.tiptap[contenteditable='true'] pre
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
+    align-items: flex-start;
     gap: 0.25rem;
     padding: 0.25rem;
     border-bottom: 1px #e2e8f0 solid;
@@ -173,6 +174,7 @@ body[data-theme='dark'] .tip-tap-editor > .tip-tap-editor-controls {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     border-left: 0px;
+    height: 22.8px;
 }
 
 .tip-tap-editor > .tip-tap-editor-controls .tip-tap-colorpicker > input[type='color' i]::-webkit-color-swatch-wrapper {
@@ -188,6 +190,7 @@ body[data-theme='dark'] .tip-tap-editor > .tip-tap-editor-controls {
 .tip-tap-editor > .tip-tap-editor-controls > .tip-tap-editor-control-group {
     display: flex;
     flex-direction: row;
+    align-items: flex-start;
     padding: 0.15rem 0.2rem;
     border-radius: 0.25rem;
     background-color: #e2e8f0;
@@ -248,21 +251,29 @@ body[data-theme='dark'] .tip-tap-editor > .tip-tap-editor-controls > .tip-tap-ed
 
 .tip-tap-editor > .tip-tap-editor-controls > .tip-tap-editor-control-group > .btn-wrapper {
     box-shadow: none;
+    margin-bottom: 0;
+}
+
+.tip-tap-editor > .tip-tap-editor-controls > .tip-tap-editor-control-group > label.file-upload.btn-wrapper {
+    height: 22.8px;
 }
 
 .tip-tap-editor > .tip-tap-editor-controls > .btn-wrapper {
     box-shadow: none;
+    margin-bottom: 0;
 }
 
 .tip-tap-editor > .tip-tap-editor-controls > .btn-wrapper > a.tip-tap-control-button,
 .tip-tap-editor > .tip-tap-editor-controls > .btn-wrapper > button.tip-tap-control-button {
     box-shadow: none;
+    height: 22.8px;
 }
 
 .tip-tap-editor > .tip-tap-editor-controls a.tip-tap-control-button,
 .tip-tap-editor > .tip-tap-editor-controls button.tip-tap-control-button {
     padding: 0.15rem 0.4rem;
     box-shadow: none;
+    height: 22.8px;
 }
 
 .tip-tap-editor > .tip-tap-editor-controls a.tip-tap-control-button .btn-icon-wrapper > svg,
@@ -280,6 +291,7 @@ body[data-theme='dark'] .tip-tap-editor > .tip-tap-editor-controls > .tip-tap-ed
     box-shadow: none;
     padding: 0 0.4rem;
     font-size: 0.75rem;
+    height: 22.8px;
 }
 
 .tip-tap-editor > .tip-tap-editor-controls > .ember-basic-dropdown .next-dd-menu {

app/components/registry-yield.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/registry-yield';

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.2.20",
+    "version": "0.2.21",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",

tests/integration/components/registry-yield-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | registry-yield', function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it renders', async function (assert) {
+        // Set any properties with this.set('myProperty', 'value');
+        // Handle any actions with this.set('myAction', function(val) { ... });
+
+        await render(hbs`<RegistryYield />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <RegistryYield>
+        template block text
+      </RegistryYield>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});