@getflip/swirl-components 0.42.0 → 0.43.0

package/dist/collection/components/swirl-console-layout/swirl-console-layout.css

@@ -217,6 +217,15 @@
   flex-shrink: 0;
 }
 
+.console-layout__heading-container {
+  flex-grow: 1;
+}
+
 .console-layout__subheading {
   margin-top: var(--s-space-8);
 }
+
+.console-layout__content-header-tools {
+  display: flex;
+  flex-shrink: 0;
+}

package/dist/collection/components/swirl-console-layout/swirl-console-layout.js

@@ -111,7 +111,7 @@ export class SwirlConsoleLayout {
         ? "<swirl-icon-close></swirl-icon-close>"
         : "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarActive
         ? this.hideNavigationButtonLabel
-        : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("swirl-heading", { as: "h1", class: "console-layout__app-name", headingId: "app-name", level: 4, text: this.appName }), this.showHelpButton && (h("swirl-button", { class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { "aria-labelledby": "heading", class: "console-layout__content" }, h("header", { class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), h("div", null, h("swirl-heading", { as: "h2", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { class: "console-layout__subheading", color: "subdued" }, this.subheading)))), h("div", { class: "console-layout__integration" }, h("slot", { name: "content" }))), h("div", { class: "console-layout__overlays" }, h("slot", { name: "overlays" }))))));
+        : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("swirl-heading", { as: "h1", class: "console-layout__app-name", headingId: "app-name", level: 4, text: this.appName }), this.showHelpButton && (h("swirl-button", { class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { "aria-labelledby": "heading", class: "console-layout__content" }, h("header", { class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), h("div", { class: "console-layout__heading-container" }, h("swirl-heading", { as: "h2", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { class: "console-layout__subheading", color: "subdued" }, this.subheading))), h("div", { class: "console-layout__content-header-tools" }, h("slot", { name: "content-header-tools" }))), h("div", { class: "console-layout__integration" }, h("slot", { name: "content" }))), h("div", { class: "console-layout__overlays" }, h("slot", { name: "overlays" }))))));
   }
   static get is() { return "swirl-console-layout"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-console-layout/swirl-console-layout.stories.js

@@ -16,6 +16,7 @@ const Template = (args) => {
     <swirl-box padding="24" slot="navigation"><a href="#">Test</a></swirl-box>
     <div slot="user">User</div>
     <swirl-box center-block center-inline cover slot="content">Content</swirl-box>
+    <swirl-button intent="primary" label="Button" slot="content-header-tools" variant="flat"></swirl-button>
   `;
   return element;
 };