Merge remote-tracking branch 'origin/dev' into benelan/text-area-inva…

…lid-border-color * origin/dev: feat(alert): apply --calcite-alert-corner-radius to internal close button (#10388) feat(dialog, panel): Add css properties for background-color (#10387) fix: remove aria-disabled from components where necessary (#10374) feat(action-group, block, panel): add `menuPlacement` and `menuFlipPlacements` properties (#10249) fix(list, filter): fix sync between list items and filtered data (#10342) feat(popover): apply component tokens to arrow (#10386) feat(list-item): add `unavailable` property (#10377) fix(segmented-control): honor appearance, layout and scale when items are added after initialization (#10368) fix(action-pad): fix horizontal action group alignment (#10359) fix(combobox): selection-mode="single-persist" correctly selects an item when items have same values (#10366)
Esri · Sep 26, 2024 · 6c384ac · 6c384ac
2 parents cd2253d + f50c170
commit 6c384ac
Show file tree

Hide file tree

Showing 46 changed files with 675 additions and 166 deletions.
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -393,6 +393,10 @@ export namespace Components {
           * When `true`, the component is expanded.
          */
         "expanded": boolean;
+        /**
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "flipPlacements": FlipPlacement[];
         /**
           * Accessible name for the component.
          */
@@ -418,6 +422,10 @@ export namespace Components {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning": OverlayPositioning;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "placement": LogicalPlacement;
         /**
           * Specifies the size of the `calcite-action-menu`.
          */
@@ -624,6 +632,10 @@ export namespace Components {
           * When `true`, displays a drag handle in the header.
          */
         "dragHandle": boolean;
+        /**
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "flipPlacements": FlipPlacement[];
         /**
           * The component header text.
          */
@@ -664,6 +676,10 @@ export namespace Components {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning": OverlayPositioning;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "placement": LogicalPlacement;
         /**
           * Sets focus on the component's first tabbable element.
          */
@@ -3312,6 +3328,10 @@ export namespace Components {
           * Used to specify the aria-setsize attribute to define the number of items in the current set of list for accessibility.
          */
         "setSize": number;
+        /**
+          * When `true`, the component's content appears inactive.
+         */
+        "unavailable": boolean;
         /**
           * The component's value.
          */
@@ -3860,6 +3880,10 @@ export namespace Components {
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
+        /**
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "flipPlacements": FlipPlacement[];
         /**
           * The component header text.
          */
@@ -3888,6 +3912,10 @@ export namespace Components {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning": OverlayPositioning;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "placement": LogicalPlacement;
         /**
           * Specifies the size of the component.
          */
@@ -8321,6 +8349,10 @@ declare namespace LocalJSX {
           * When `true`, the component is expanded.
          */
         "expanded"?: boolean;
+        /**
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "flipPlacements"?: FlipPlacement[];
         /**
           * Accessible name for the component.
          */
@@ -8346,6 +8378,10 @@ declare namespace LocalJSX {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning"?: OverlayPositioning;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "placement"?: LogicalPlacement;
         /**
           * Specifies the size of the `calcite-action-menu`.
          */
@@ -8559,6 +8595,10 @@ declare namespace LocalJSX {
           * When `true`, displays a drag handle in the header.
          */
         "dragHandle"?: boolean;
+        /**
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "flipPlacements"?: FlipPlacement[];
         /**
           * The component header text.
          */
@@ -8620,6 +8660,10 @@ declare namespace LocalJSX {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning"?: OverlayPositioning;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "placement"?: LogicalPlacement;
         /**
           * Displays a status-related indicator icon.
           * @deprecated Use `icon-start` instead.
@@ -11440,6 +11484,10 @@ declare namespace LocalJSX {
           * Used to specify the aria-setsize attribute to define the number of items in the current set of list for accessibility.
          */
         "setSize"?: number;
+        /**
+          * When `true`, the component's content appears inactive.
+         */
+        "unavailable"?: boolean;
         /**
           * The component's value.
          */
@@ -11984,6 +12032,10 @@ declare namespace LocalJSX {
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
+        /**
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "flipPlacements"?: FlipPlacement[];
         /**
           * The component header text.
          */
@@ -12024,6 +12076,10 @@ declare namespace LocalJSX {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning"?: OverlayPositioning;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "placement"?: LogicalPlacement;
         /**
           * Specifies the size of the component.
          */

diff --git a/packages/calcite-components/src/components/action-group/action-group.e2e.ts b/packages/calcite-components/src/components/action-group/action-group.e2e.ts
@@ -1,5 +1,16 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, hidden, renders, slots, t9n, themed } from "../../tests/commonTests";
+import {
+  accessible,
+  defaults,
+  focusable,
+  handlesActionMenuPlacements,
+  hidden,
+  reflects,
+  renders,
+  slots,
+  t9n,
+  themed,
+} from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
 
@@ -19,6 +30,23 @@ describe("calcite-action-group", () => {
         propertyName: "overlayPositioning",
         defaultValue: "absolute",
       },
+      {
+        propertyName: "menuPlacement",
+        defaultValue: undefined,
+      },
+      {
+        propertyName: "menuFlipPlacements",
+        defaultValue: undefined,
+      },
+    ]);
+  });
+
+  describe("reflects", () => {
+    reflects("calcite-action-group", [
+      {
+        propertyName: "menuPlacement",
+        value: "bottom",
+      },
     ]);
   });
 
@@ -42,6 +70,15 @@ describe("calcite-action-group", () => {
     slots("calcite-action-group", SLOTS);
   });
 
+  describe("handles action-menu placement and flipPlacements", () => {
+    handlesActionMenuPlacements(html`
+      <calcite-action-group scale="l" overlay-positioning="fixed">
+        <calcite-action id="plus" slot="${SLOTS.menuActions}" text="Add" icon="plus"></calcite-action>
+        <calcite-action id="banana" slot="${SLOTS.menuActions}" text="Banana" icon="banana"></calcite-action>
+      </calcite-action-group>
+    `);
+  });
+
   it("should honor scale of expand icon", async () => {
     const page = await newE2EPage({ html: actionGroupHTML });
     const menu = await page.find(`calcite-action-group >>> calcite-action-menu`);

diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx
@@ -21,7 +21,7 @@ import {
 } from "../../utils/t9n";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
 import { Layout, Scale } from "../interfaces";
-import { OverlayPositioning } from "../../utils/floating-ui";
+import { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
 import { slotChangeHasAssignedElement } from "../../utils/dom";
 import { Columns } from "./interfaces";
 import { ActionGroupMessages } from "./assets/action-group/t9n";
@@ -95,6 +95,16 @@ export class ActionGroup
    */
   @Prop({ reflect: true }) scale: Scale;
 
+  /**
+   * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+   */
+  @Prop() menuFlipPlacements: FlipPlacement[];
+
+  /**
+   * Determines where the action menu will be positioned.
+   */
+  @Prop({ reflect: true }) menuPlacement: LogicalPlacement;
+
   /**
    * Made into a prop for testing purposes only
    *
@@ -178,19 +188,30 @@ export class ActionGroup
   // --------------------------------------------------------------------------
 
   renderMenu(): VNode {
-    const { expanded, menuOpen, scale, layout, messages, overlayPositioning, hasMenuActions } =
-      this;
+    const {
+      expanded,
+      menuOpen,
+      scale,
+      layout,
+      messages,
+      overlayPositioning,
+      hasMenuActions,
+      menuFlipPlacements,
+      menuPlacement,
+    } = this;
 
     return (
       <calcite-action-menu
         expanded={expanded}
-        flipPlacements={["left", "right"]}
+        flipPlacements={
+          menuFlipPlacements ?? (layout === "horizontal" ? ["top", "bottom"] : ["left", "right"])
+        }
         hidden={!hasMenuActions}
         label={messages.more}
         onCalciteActionMenuOpen={this.setMenuOpen}
         open={menuOpen}
         overlayPositioning={overlayPositioning}
-        placement={layout === "horizontal" ? "bottom-start" : "leading-start"}
+        placement={menuPlacement ?? (layout === "horizontal" ? "bottom-start" : "leading-start")}
         scale={scale}
       >
         <calcite-action

diff --git a/packages/calcite-components/src/components/action-pad/action-pad.scss b/packages/calcite-components/src/components/action-pad/action-pad.scss
@@ -20,8 +20,10 @@
   max-inline-size: var(--calcite-action-pad-expanded-max-width, auto);
 }
 
-::slotted(calcite-action-group:not(:last-of-type)) {
-  @apply border-b;
+:host([layout="vertical"]) {
+  ::slotted(calcite-action-group:not(:last-of-type)) {
+    @apply border-b;
+  }
 }
 
 .container {

diff --git a/packages/calcite-components/src/components/action-pad/action-pad.stories.ts b/packages/calcite-components/src/components/action-pad/action-pad.stories.ts
@@ -42,6 +42,27 @@ export const simple = (args: ActionPadStoryArgs): string => html`
   </calcite-action-pad>
 `;
 
+export const withGroups = (): string =>
+  html`<calcite-action-pad layout="horizontal">
+    <calcite-action-group>
+      <calcite-action text="Add" icon="plus" appearance="solid" scale="m"></calcite-action>
+      <calcite-action text="Save" icon="save" appearance="solid" scale="m"></calcite-action>
+    </calcite-action-group>
+    <calcite-action-group>
+      <calcite-action text="Layers" icon="layers" appearance="solid" scale="m"></calcite-action>
+      <calcite-action text="Basemaps" icon="layer-basemap" appearance="solid" scale="m"></calcite-action>
+    </calcite-action-group>
+    <calcite-tooltip
+      slot="expand-tooltip"
+      id="calcite-tooltip-c19274e3-ff3b-6168-ef1e-8a700b056e1c"
+      role="tooltip"
+      overlay-positioning="absolute"
+      placement="auto"
+      style="visibility: hidden; pointer-events: none; position: absolute;"
+      >Toggle Action Pad</calcite-tooltip
+    >
+  </calcite-action-pad>`;
+
 export const darkModeRTL_TestOnly = (): string => html`
   <calcite-action-pad position="start" dir="rtl" class="calcite-mode-dark">
     <calcite-action-group>

diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts
@@ -594,10 +594,20 @@ describe("calcite-alert", () => {
         shadowSelector: `.${CSS.container}`,
         targetProp: "backgroundColor",
       },
-      "--calcite-alert-corner-radius": {
-        shadowSelector: `.${CSS.container}`,
-        targetProp: "borderRadius",
-      },
+      "--calcite-alert-corner-radius": [
+        {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderRadius",
+        },
+        {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "borderStartEndRadius",
+        },
+        {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "borderEndEndRadius",
+        },
+      ],
       "--calcite-alert-shadow": {
         shadowSelector: `.${CSS.container}`,
         targetProp: "boxShadow",

diff --git a/packages/calcite-components/src/components/alert/alert.scss b/packages/calcite-components/src/components/alert/alert.scss
@@ -5,7 +5,7 @@
  *
  * @prop --calcite-alert-width: Specifies the width of the component.
  * @prop --calcite-alert-background-color: Specifies the component's background color.
- * @prop --calcite-alert-corner-radius: Specifies the component's border radius.
+ * @prop --calcite-alert-corner-radius: Specifies the component's corner radius.
  * @prop --calcite-alert-shadow: Specifies the component's shadow.
  */
 
@@ -81,6 +81,8 @@ $border-style: 1px solid var(--calcite-color-border-3);
 .close {
   @apply bg-transparent border-none cursor-pointer flex items-center justify-end outline-none self-stretch text-color-3;
   -webkit-appearance: none;
+  border-start-end-radius: var(--calcite-alert-corner-radius, var(--calcite-border-radius));
+  border-end-end-radius: var(--calcite-alert-corner-radius, var(--calcite-border-radius));
 
   @apply focus-base;
   &:focus {
@@ -99,8 +101,7 @@ $border-style: 1px solid var(--calcite-color-border-3);
 }
 
 .queue-count {
-  @apply bg-foreground-1
-  cursor-default
+  @apply cursor-default
   flex
   font-medium
   invisible