Merge branch 'dev' into dris0000/tooltip-focus-click-fix

.github/workflows/issue-notifications.yaml

@@ -25,7 +25,7 @@ jobs:
         if: github.event.label.name == 'spike complete'
         uses: actions/github-script@v7
         env:
-          managers: ${{secrets.CALCITE_MANAGERS}}
+          MANAGERS: ${{secrets.CALCITE_MANAGERS}}
         with:
           script: |
             const action = require('${{ github.workspace }}/.github/scripts/notifyWhenSpikeComplete.js')
@@ -35,7 +35,7 @@ jobs:
         if: github.event.label.name == 'ready for dev'
         uses: actions/github-script@v7
         env:
-          managers: ${{secrets.CALCITE_MANAGERS}}
+          MANAGERS: ${{secrets.CALCITE_MANAGERS}}
         with:
           script: |
             const action = require('${{ github.workspace }}/.github/scripts/notifyWhenReadyForDev.js')
@@ -45,7 +45,7 @@ jobs:
         if: github.event.label.name == 'new component'
         uses: actions/github-script@v7
         env:
-          designers: ${{secrets.CALCITE_DESIGNERS}}
+          DESIGNERS: ${{secrets.CALCITE_DESIGNERS}}
         with:
           script: |
             const action = require('${{ github.workspace }}/.github/scripts/notifyAboutNewComponent.js')

package.json

@@ -9,7 +9,7 @@
   "scripts": {
     "postinstall": "patch-package",
     "build": "turbo run build --log-order=stream",
-    "clean": "turbo run clean --log-order=stream && git clean -fdx",
+    "clean": "turbo run clean --log-order=stream && git clean -fd",
     "lint": "concurrently \"npm:lint:*\" \"turbo run lint --log-order=stream\"",
     "lint:md": "prettier --write \"**/*.md\" >/dev/null && markdownlint \"{,documentation}/*.md\" --fix --dot --ignore-path .gitignore",
     "lint:yml": "prettier --write \".github/**/*.yml\" >/dev/null",

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

@@ -283,7 +283,8 @@ export namespace Components {
          */
         "appearance": Extract<"solid" | "transparent", Appearance>;
         /**
-          * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
+          * When `true`, the side padding of the component is reduced.
+          * @deprecated No longer necessary.
          */
         "compact": boolean;
         /**
@@ -8167,7 +8168,8 @@ declare namespace LocalJSX {
          */
         "appearance"?: Extract<"solid" | "transparent", Appearance>;
         /**
-          * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
+          * When `true`, the side padding of the component is reduced.
+          * @deprecated No longer necessary.
          */
         "compact"?: boolean;
         /**

packages/calcite-components/src/components/action/action.e2e.ts

@@ -14,7 +14,7 @@ describe("calcite-action", () => {
         defaultValue: "solid",
       },
       {
-        propertyName: "compact",
+        propertyName: "compact", // (deprecated)
         defaultValue: false,
       },
       {

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

@@ -135,7 +135,7 @@
   }
 }
 
-// Compact
+/* [Deprecated]  Compact */
 :host([scale="s"][compact]) .button,
 :host([scale="m"][compact]) .button,
 :host([scale="l"][compact]) .button {

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

@@ -10,7 +10,6 @@ type ActionStoryArgs = Pick<
   | "active"
   | "alignment"
   | "appearance"
-  | "compact"
   | "disabled"
   | "icon"
   | "indicator"
@@ -27,7 +26,6 @@ export default {
     active: false,
     alignment: alignment.defaultValue,
     appearance: appearance.defaultValue,
-    compact: false,
     disabled: false,
     icon: "banana",
     indicator: false,
@@ -63,7 +61,6 @@ export const simple = (args: ActionStoryArgs): string => html`
       ${boolean("active", args.active)}
       alignment="${args.alignment}"
       appearance="${args.appearance}"
-      ${boolean("compact", args.compact)}
       ${boolean("disabled", args.disabled)}
       icon="${args.icon}"
       ${boolean("indicator", args.indicator)}
@@ -76,15 +73,14 @@ export const simple = (args: ActionStoryArgs): string => html`
   </div>
 `;
 
-export const disabledAndCompactAndTextOnly_TestOnly = (): string => html`
+export const disabledAndTextOnly_TestOnly = (): string => html`
   <div>
     <calcite-action
       icon="banana"
       alignment="start"
       appearance="solid"
       label="Label"
       scale="m"
-      compact
       disabled
       text="Text"
       text-enabled

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

@@ -74,7 +74,9 @@ export class Action
   @Prop({ reflect: true }) appearance: Extract<"solid" | "transparent", Appearance> = "solid";
 
   /**
-   * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
+   * When `true`, the side padding of the component is reduced.
+   *
+   * @deprecated No longer necessary.
    */
   @Prop({ reflect: true }) compact = false;
 

packages/calcite-components/src/components/combobox-item/combobox-item.scss

@@ -164,6 +164,10 @@ ul:focus {
   white-space: nowrap;
 }
 
+.title {
+  color: var(--calcite-color-text-1);
+}
+
 .title,
 .description,
 .short-text {

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

@@ -6,6 +6,7 @@
  * @prop --calcite-dialog-scrim-background-color: Specifies the background color of the component's scrim.
  * @prop --calcite-dialog-size-x: Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Does not exceed the viewport's width - applies when `placement="cover"` is set.
  * @prop --calcite-dialog-size-y: Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Does not exceed the viewport's height - applies when `placement="cover"` is set.
+ * @prop --calcite-dialog-content-space: Specifies the padding of the component's content.
  * @prop --calcite-dialog-footer-space: Specifies the padding of the component's footer.
  * @prop --calcite-dialog-border-color: Specifies the component's border color.
  */
@@ -75,20 +76,23 @@
 }
 
 :host([scale="s"]) {
+  --calcite-internal-dialog-content-padding: var(--calcite-spacing-sm);
   --calcite-internal-dialog-padding: theme("spacing.3");
   --calcite-internal-dialog-padding-large: theme("spacing.4");
   --calcite-internal-dialog-title-text: theme("fontSize.1h");
   --calcite-internal-dialog-content-text: theme("fontSize.n1");
 }
 
 :host([scale="m"]) {
+  --calcite-internal-dialog-content-padding: var(--calcite-spacing-md);
   --calcite-internal-dialog-padding: theme("spacing.4");
   --calcite-internal-dialog-padding-large: theme("spacing.5");
   --calcite-internal-dialog-title-text: theme("fontSize.2h");
   --calcite-internal-dialog-content-text: theme("fontSize.0");
 }
 
 :host([scale="l"]) {
+  --calcite-internal-dialog-content-padding: var(--calcite-spacing-lg);
   --calcite-internal-dialog-padding: theme("spacing.5");
   --calcite-internal-dialog-padding-large: theme("spacing.6");
   --calcite-internal-dialog-title-text: theme("fontSize.3h");
@@ -113,6 +117,10 @@ calcite-panel {
   --calcite-panel-header-border-block-end: var(--calcite-border-width-sm) solid var(--calcite-dialog-border-color);
 }
 
+.content {
+  padding: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));
+}
+
 .dialog {
   @apply pointer-events-none
     float-none

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

@@ -351,7 +351,8 @@ export const footerSlot = (): string => html`
 `;
 
 const themedStyle = html` --calcite-dialog-scrim-background-color: purple; --calcite-dialog-size-x: 400px;
---calcite-dialog-size-y: 400px; --calcite-dialog-footer-space: 50px; --calcite-dialog-border-color: pink;`;
+--calcite-dialog-size-y: 400px; --calcite-dialog-footer-space: 50px; --calcite-dialog-border-color: pink;
+--calcite-dialog-content-space: 50px;`;
 
 export const themed = (): string =>
   html`<calcite-dialog
@@ -363,6 +364,7 @@ export const themed = (): string =>
     scale="m"
     width-scale="s"
   >
-    <p>Slotted content!</p>
+    Slotted content!
     <div slot="footer">Footer!</div>
+    <calcite-fab slot="${SLOTS.fab}"></calcite-fab>
   </calcite-dialog>`;

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

@@ -262,7 +262,9 @@ export class Dialog
                 <slot name={SLOTS.footerStart} slot={PANEL_SLOTS.footerStart} />
                 <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />
                 <slot name={SLOTS.footerEnd} slot={PANEL_SLOTS.footerEnd} />
-                <slot />
+                <div class={CSS.content}>
+                  <slot />
+                </div>
               </calcite-panel>
             </slot>
           </div>

packages/calcite-components/src/components/dialog/resources.ts

@@ -7,6 +7,7 @@ export const CSS = {
   container: "container",
   containerOpen: "container--open",
   containerEmbedded: "container--embedded",
+  content: "content",
 
   // these classes help apply the animation in phases to only set transform on open/close
   // this helps avoid a positioning issue for any floating-ui-owning children

packages/calcite-components/src/components/flow-item/flow-item.stories.ts

@@ -249,7 +249,7 @@ export const footerStartEndAndContentBottom = (): string =>
     </calcite-flow-item>
   </div>`;
 
-export const footerSlotCoexistence = (): string =>
+export const footerSlot = (): string =>
   html`<div style="width: 300px;">
     <calcite-flow-item height-scale="s" style="--calcite-flow-item-footer-padding: 20px;">
       <div slot="header-content">Header!</div>

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

@@ -169,25 +169,30 @@
 }
 
 .footer {
-  @apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1;
-
+  @apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1 text-n2-wrap;
   border-block-start: 1px solid var(--calcite-color-border-3);
   padding: var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-padding));
-  column-gap: 0;
-  row-gap: var(--calcite-spacing-md);
 }
 
-@include slotted("footer-start", "*") {
-  @apply flex text-n2-wrap self-center;
+.footer-content {
+  @apply flex flex-row items-center justify-center flex-1;
+}
 
-  margin-inline-end: auto;
-  gap: var(--calcite-spacing-md);
+.footer-actions {
+  @apply flex flex-row items-center justify-evenly flex-1;
+  gap: var(--calcite-internal-panel-default-padding);
 }
 
-@include slotted("footer-end", "*") {
-  @apply flex text-n2-wrap self-center;
+.footer-start {
+  @apply flex flex-row items-center justify-start flex-1;
+  margin-inline-end: auto;
+  gap: var(--calcite-internal-panel-default-padding);
+}
 
-  gap: var(--calcite-spacing-md);
+.footer-end {
+  @apply flex flex-row items-center justify-end flex-1;
+  margin-inline-start: auto;
+  gap: var(--calcite-internal-panel-default-padding);
 }
 
 .fab-container {

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

@@ -242,10 +242,97 @@ export const footerPadding_TestOnly = (): string =>
     <calcite-panel height-scale="s" style="--calcite-panel-footer-padding: 20px;">
       <div slot="header-content">Header!</div>
       <p>Slotted content!</p>
-      <div slot="footer">Footer!</div>
+      <calcite-button type="button" slot="footer">1</calcite-button>
+      <calcite-button type="button" slot="footer">2</calcite-button>
+      <calcite-button type="button" slot="footer-start">3</calcite-button>
+      <calcite-button type="button" slot="footer-start">4</calcite-button>
+      <calcite-button type="button" slot="footer-end">5</calcite-button>
+      <calcite-button type="button" slot="footer-end">6</calcite-button>
+      <calcite-button type="button" slot="footer-actions">7</calcite-button>
+      <calcite-button type="button" slot="footer-actions">8</calcite-button>
     </calcite-panel>
   </div>`;
 
+export const footerActions = (): string =>
+  html`<h2>footer-actions (Deprecated): Auto width</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button type="button" slot="footer-actions">1</calcite-button>
+        <calcite-button type="button" slot="footer-actions">2</calcite-button>
+      </calcite-panel>
+    </div>
+    <h2>footer-actions (Deprecated): Full width</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button width="full" type="button" slot="footer-actions">1</calcite-button>
+        <calcite-button width="full" type="button" slot="footer-actions">2</calcite-button>
+      </calcite-panel>
+    </div>`;
+
+export const footerVariations = (): string =>
+  html`<h2>footer</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button width="full" type="button" slot="footer">1</calcite-button>
+        <calcite-button width="full" type="button" slot="footer">2</calcite-button>
+      </calcite-panel>
+    </div>
+    <h2>footer-start only</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button type="button" slot="footer-start">1</calcite-button>
+        <calcite-button type="button" slot="footer-start">2</calcite-button>
+      </calcite-panel>
+    </div>
+    <h2>footer-end only</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button type="button" slot="footer-end">1</calcite-button>
+        <calcite-button type="button" slot="footer-end">2</calcite-button>
+      </calcite-panel>
+    </div>
+    <h2>footer-start and footer-end auto width</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button type="button" slot="footer-start">1</calcite-button>
+        <calcite-button type="button" slot="footer-start">2</calcite-button>
+        <calcite-button type="button" slot="footer-end">3</calcite-button>
+        <calcite-button type="button" slot="footer-end">4</calcite-button>
+      </calcite-panel>
+    </div>
+    <h2>footer-start and footer-end full width single</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button width="full" type="button" slot="footer-start">1</calcite-button>
+        <calcite-button width="full" type="button" slot="footer-end">2</calcite-button>
+      </calcite-panel>
+    </div>
+    <h2>footer-start and footer-end full width multiple</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button width="full" type="button" slot="footer-start">1</calcite-button>
+        <calcite-button width="full" type="button" slot="footer-start">2</calcite-button>
+        <calcite-button width="full" type="button" slot="footer-end">3</calcite-button>
+        <calcite-button width="full" type="button" slot="footer-end">4</calcite-button>
+      </calcite-panel>
+    </div>`;
+
 export const actionBarBackgroundColor_TestOnly = (): string =>
   html`<calcite-panel height-scale="s" style="width: 300px;">
     <calcite-action-bar slot="action-bar" expand-disabled>

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

@@ -620,14 +620,22 @@ export class Panel
 
     return (
       <footer class={CSS.footer} hidden={!showFooter}>
-        <slot name={SLOTS.footerStart} onSlotchange={this.handleFooterStartSlotChange} />
-        <slot name={SLOTS.footer} onSlotchange={this.handleFooterSlotChange} />
-        <slot name={SLOTS.footerEnd} onSlotchange={this.handleFooterEndSlotChange} />
-        <slot
-          key="footer-actions-slot"
-          name={SLOTS.footerActions}
-          onSlotchange={this.handleFooterActionsSlotChange}
-        />
+        <div class={CSS.footerContent} hidden={!hasFooterContent}>
+          <slot name={SLOTS.footer} onSlotchange={this.handleFooterSlotChange} />
+        </div>
+        <div class={CSS.footerStart} hidden={hasFooterContent || !hasFooterStartContent}>
+          <slot name={SLOTS.footerStart} onSlotchange={this.handleFooterStartSlotChange} />
+        </div>
+        <div class={CSS.footerEnd} hidden={hasFooterContent || !hasFooterEndContent}>
+          <slot name={SLOTS.footerEnd} onSlotchange={this.handleFooterEndSlotChange} />
+        </div>
+        <div class={CSS.footerActions} hidden={hasFooterContent || !hasFooterActions}>
+          <slot
+            key="footer-actions-slot"
+            name={SLOTS.footerActions}
+            onSlotchange={this.handleFooterActionsSlotChange}
+          />
+        </div>
       </footer>
     );
   }