feat(block): add icon start/end properties (deprecate icon slot and status), add actions-end slot (deprecate control), add content-start

packages/calcite-components/src/components.d.ts

@@ -610,6 +610,18 @@ export namespace Components {
           * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel": HeadingLevel;
+        /**
+          * Specifies an icon to display at the end of the component.
+         */
+        "iconEnd": string;
+        /**
+          * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
+         */
+        "iconFlipRtl": FlipContext;
+        /**
+          * Specifies an icon to display at the start of the component.
+         */
+        "iconStart": string;
         /**
           * When `true`, a busy indicator is displayed.
          */
@@ -636,6 +648,7 @@ export namespace Components {
         "setFocus": () => Promise<void>;
         /**
           * Displays a status-related indicator icon.
+          * @deprecated Use `icon-start` instead.
          */
         "status": Status;
     }
@@ -8324,6 +8337,18 @@ declare namespace LocalJSX {
           * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel"?: HeadingLevel;
+        /**
+          * Specifies an icon to display at the end of the component.
+         */
+        "iconEnd"?: string;
+        /**
+          * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
+         */
+        "iconFlipRtl"?: FlipContext;
+        /**
+          * Specifies an icon to display at the start of the component.
+         */
+        "iconStart"?: string;
         /**
           * When `true`, a busy indicator is displayed.
          */
@@ -8367,6 +8392,7 @@ declare namespace LocalJSX {
         "overlayPositioning"?: OverlayPositioning;
         /**
           * Displays a status-related indicator icon.
+          * @deprecated Use `icon-start` instead.
          */
         "status"?: Status;
     }

packages/calcite-components/src/components/block/block.scss

@@ -20,7 +20,8 @@
 @import "../../assets/styles/header";
 
 .header {
-  @apply justify-start p-0;
+  @apply justify-start;
+  padding: var(--calcite-spacing-md);
 }
 
 .header,
@@ -35,6 +36,9 @@
   grid-column: header-start / menu-end;
   grid-row: 1 / 2;
 }
+.header ::slotted(calcite-icon) {
+  margin-inline-end: var(--calcite-spacing-md);
+}
 
 .toggle {
   @apply font-sans
@@ -47,9 +51,10 @@
     justify-between
     border-none
     p-0;
-  text-align: initial;
 
+  text-align: initial;
   background-color: transparent;
+
   &:hover {
     @apply bg-foreground-2;
   }
@@ -69,7 +74,6 @@ calcite-handle {
 
 .title {
   @apply m-0;
-  padding: theme("spacing.3");
 }
 
 .header .title .heading {
@@ -93,9 +97,18 @@ calcite-handle {
 }
 
 .icon {
-  display: flex;
-  margin-inline-start: theme("spacing.3");
-  margin-inline-end: 0px;
+  @apply flex;
+}
+
+.icon--start,
+.icon--end {
+  @apply text-color-3;
+
+  margin-inline-end: var(--calcite-spacing-md);
+}
+
+.status-icon {
+  margin-inline-end: var(--calcite-spacing-md);
 }
 
 .status-icon.valid {
@@ -118,16 +131,21 @@ calcite-handle {
   }
 }
 
+.icon-end-container {
+  @apply flex items-center;
+
+  margin-inline-start: auto;
+}
+
 .toggle-icon {
   @apply text-color-3
   transition-color
-  my-3
   self-center
   justify-self-end
   duration-150
   ease-in-out;
-  margin-inline-end: theme("spacing.3");
-  margin-inline-start: auto;
+
+  margin-inline: var(--calcite-spacing-md);
 }
 
 .toggle:hover .toggle-icon {
@@ -144,6 +162,10 @@ calcite-handle {
   padding-inline: var(--calcite-block-padding, var(--calcite-spacing-md));
 }
 
+.content-start {
+  @apply text-color-3;
+}
+
 .control-container {
   @apply m-0 flex;
   grid-area: control;

packages/calcite-components/src/components/block/block.stories.ts

@@ -275,3 +275,36 @@ export const icons_TestOnly = (): string => html`
     </calcite-block-section>
   </calcite-block>
 `;
+
+export const actionsEndLoadingIconStartEnd = (): string => html`
+  <calcite-block
+    heading="Valid status"
+    description="summary"
+    collapsible
+    icon-start="pen"
+    icon-end="pen"
+    style="width: 500px"
+  >
+    <calcite-icon
+      icon="compass"
+      slot="content-start"
+      style="color: var(--calcite-color-status-success)"
+      scale="s"
+    ></calcite-icon>
+    <calcite-action appearance="transparent" icon="ellipsis" text="menu" label="menu" slot="actions-end" />
+  </calcite-block>
+`;
+
+export const actionsEndContentStartIconStartEnd = (): string => html`
+  <calcite-block
+    heading="Valid status"
+    collapsible
+    status="valid"
+    icon-start="pen"
+    icon-end="pen"
+    loading
+    style="width: 500px"
+  >
+    <calcite-action appearance="transparent" icon="ellipsis" text="menu" label="menu" slot="actions-end" />
+  </calcite-block>
+`;

packages/calcite-components/src/components/block/block.tsx

@@ -16,7 +16,12 @@ import {
   connectConditionalSlotComponent,
   disconnectConditionalSlotComponent,
 } from "../../utils/conditionalSlot";
-import { focusFirstTabbable, getSlotted, toAriaBoolean } from "../../utils/dom";
+import {
+  focusFirstTabbable,
+  getSlotted,
+  toAriaBoolean,
+  slotChangeHasAssignedElement,
+} from "../../utils/dom";
 import {
   connectInteractive,
   disconnectInteractive,
@@ -42,13 +47,16 @@ import {
 } from "../../utils/loadable";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { OverlayPositioning } from "../../utils/floating-ui";
+import { FlipContext } from "../interfaces";
 import { CSS, ICONS, IDS, SLOTS } from "./resources";
 import { BlockMessages } from "./assets/block/t9n";
 
 /**
  * @slot - A slot for adding custom content.
- * @slot icon - A slot for adding a leading header icon with `calcite-icon`.
- * @slot control - A slot for adding a single HTML input element in a header.
+ * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions.
+ * @slot icon - [Deprecated] A slot for adding a leading header icon with `calcite-icon`. Use `icon-start` instead.
+ * @slot content-start - A slot for adding non-actionable elements before content of the component.
+ * @slot control - [Deprecated] A slot for adding a single HTML input element in a header. Use `actions-end` instead.
  * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.
  */
 @Component({
@@ -97,6 +105,15 @@ export class Block
    */
   @Prop({ reflect: true }) headingLevel: HeadingLevel;
 
+  /** Specifies an icon to display at the end of the component. */
+  @Prop({ reflect: true }) iconEnd: string;
+
+  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
+  @Prop({ reflect: true }) iconFlipRtl: FlipContext;
+
+  /** Specifies an icon to display at the start of the component. */
+  @Prop({ reflect: true }) iconStart: string;
+
   /**
    * When `true`, a busy indicator is displayed.
    */
@@ -114,6 +131,8 @@ export class Block
 
   /**
    * Displays a status-related indicator icon.
+   *
+   * @deprecated Use `icon-start` instead.
    */
   @Prop({ reflect: true }) status: Status;
 
@@ -191,14 +210,18 @@ export class Block
 
   @Element() el: HTMLCalciteBlockElement;
 
+  @State() defaultMessages: BlockMessages;
+
+  @State() hasContentStart = false;
+
   @State() effectiveLocale: string;
 
   @Watch("effectiveLocale")
   effectiveLocaleChange(): void {
     updateMessages(this, this.effectiveLocale);
   }
 
-  @State() defaultMessages: BlockMessages;
+  @State() hasEndActions = false;
 
   openTransitionProp = "opacity";
 
@@ -281,6 +304,14 @@ export class Block
     this.transitionEl = el;
   };
 
+  private actionsEndSlotChangeHandler = (event: Event): void => {
+    this.hasEndActions = slotChangeHasAssignedElement(event);
+  };
+
+  handleContentStartSlotChange = (event: Event): void => {
+    this.hasContentStart = slotChangeHasAssignedElement(event);
+  };
+
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -294,7 +325,7 @@ export class Block
     return [loading ? <calcite-scrim loading={loading} /> : null, defaultSlot];
   }
 
-  renderIcon(): VNode[] {
+  renderLoaderStatusIcon(): VNode[] {
     const { loading, messages, status } = this;
 
     const hasSlottedIcon = !!getSlotted(this.el, SLOTS.icon);
@@ -322,6 +353,23 @@ export class Block
     ) : null;
   }
 
+  private renderActionsEnd(): VNode {
+    return (
+      <div class={CSS.actionsEnd}>
+        <slot name={SLOTS.actionsEnd} onSlotchange={this.actionsEndSlotChangeHandler} />
+      </div>
+    );
+  }
+
+  renderContentStart(): VNode {
+    const { hasContentStart } = this;
+    return (
+      <div class={CSS.contentStart} hidden={!hasContentStart}>
+        <slot name={SLOTS.contentStart} onSlotchange={this.handleContentStartSlotChange} />
+      </div>
+    );
+  }
+
   renderTitle(): VNode {
     const { heading, headingLevel, description } = this;
     return heading || description ? (
@@ -338,10 +386,33 @@ export class Block
     const { collapsible, el, loading, open, heading, messages } = this;
 
     const toggleLabel = open ? messages.collapse : messages.expand;
+    const { iconFlipRtl } = this;
+
+    /** Icon scale is not variable as the component does not have a scale property */
+    const iconStartEl = this.iconStart ? (
+      <calcite-icon
+        class={CSS.iconStart}
+        flipRtl={iconFlipRtl === "both" || iconFlipRtl === "start"}
+        icon={this.iconStart}
+        key="icon-start"
+        scale="s"
+      />
+    ) : null;
+    const iconEndEl = this.iconEnd ? (
+      <calcite-icon
+        class={CSS.iconEnd}
+        flipRtl={iconFlipRtl === "both" || iconFlipRtl === "end"}
+        icon={this.iconEnd}
+        key="icon-end"
+        scale="s"
+      />
+    ) : null;
 
     const headerContent = (
       <header class={CSS.header} id={IDS.header}>
-        {this.renderIcon()}
+        {iconStartEl}
+        {this.renderContentStart()}
+        {this.renderLoaderStatusIcon()}
         {this.renderTitle()}
       </header>
     );
@@ -364,8 +435,23 @@ export class Block
             title={toggleLabel}
           >
             {headerContent}
-            <calcite-icon aria-hidden="true" class={CSS.toggleIcon} icon={collapseIcon} scale="s" />
+            <div class={CSS.iconEndContainer}>
+              {iconEndEl}
+              {this.renderActionsEnd()}
+              <calcite-icon
+                aria-hidden="true"
+                class={CSS.toggleIcon}
+                icon={collapseIcon}
+                scale="s"
+              />
+            </div>
           </button>
+        ) : iconEndEl ? (
+          <div>
+            {headerContent}
+            {this.renderActionsEnd()}
+            <div class={CSS.iconEndContainer}>{iconEndEl}</div>
+          </div>
         ) : (
           headerContent
         )}