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,
@@ -29,13 +30,21 @@
 }
 
 .header-container {
-  @apply grid items-stretch;
+  @apply grid items-stretch w-full;
   grid-template: auto / auto 1fr auto auto;
   grid-template-areas: "handle header control menu";
   grid-column: header-start / menu-end;
   grid-row: 1 / 2;
 }
 
+.header ::slotted(calcite-icon) {
+  margin-inline-end: var(--calcite-spacing-md);
+}
+
+.header .icon ::slotted([slot="icon"]) {
+  margin-inline-end: var(--calcite-spacing-md);
+}
+
 .toggle {
   @apply font-sans
     focus-base
@@ -47,9 +56,10 @@
     justify-between
     border-none
     p-0;
-  text-align: initial;
 
+  text-align: initial;
   background-color: transparent;
+
   &:hover {
     @apply bg-foreground-2;
   }
@@ -69,7 +79,6 @@ calcite-handle {
 
 .title {
   @apply m-0;
-  padding: theme("spacing.3");
 }
 
 .header .title .heading {
@@ -93,9 +102,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,24 +136,29 @@ 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-end: var(--calcite-spacing-md);
 }
 
 .toggle:hover .toggle-icon {
   @apply text-color-1;
 }
 
 .container {
-  @apply flex flex-col h-full relative;
+  @apply flex flex-row h-full relative;
 }
 
 .content {
@@ -144,6 +167,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;
@@ -153,6 +180,10 @@ calcite-action-menu {
   grid-area: menu;
 }
 
+.actions-end {
+  @apply flex items-stretch;
+}
+
 :host([open]) {
   @apply my-2;
 

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

@@ -275,3 +275,38 @@ export const icons_TestOnly = (): string => html`
     </calcite-block-section>
   </calcite-block>
 `;
+
+export const iconStartEnd = (): string => html`
+  <h1>actions-end and content-start</h1>
+
+  <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>
+
+  <h1>actions-end and loading</h1>
+
+  <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>
+`;