fix(panel): solution 2 - correct targeting of all calcite-actions in …

…component
Esri · Feb 7, 2025 · 9e588ac · 9e588ac
1 parent ca25807
commit 9e588ac
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 15 deletions.
diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss
@@ -22,6 +22,18 @@
   @extend %component-host;
   @apply flex bg-transparent cursor-pointer;
   --calcite-internal-action-text-color: var(--calcite-color-text-3);
+
+  border-radius: var(
+    --calcite-action-corner-radius,
+    var(--calcite-action-corner-radius-start-start, var(--calcite-corner-radius))
+      var(--calcite-action-corner-radius-start-end, var(--calcite-corner-radius))
+      var(--calcite-action-corner-radius-end-end, var(--calcite-corner-radius))
+      var(--calcite-action-corner-radius-end-start, var(--calcite-corner-radius))
+  );
+}
+
+.interaction-container {
+  border-radius: inherit;
 }
 
 :host([drag-handle]) {
@@ -30,15 +42,8 @@
   --calcite-internal-action-padding-inline: var(--calcite-spacing-xxs);
 }
 
-:host,
 .button {
-  border-radius: var(
-    --calcite-action-corner-radius,
-    var(--calcite-action-corner-radius-start-start, var(--calcite-corner-radius))
-      var(--calcite-action-corner-radius-start-end, var(--calcite-corner-radius))
-      var(--calcite-action-corner-radius-end-end, var(--calcite-corner-radius))
-      var(--calcite-action-corner-radius-end-start, var(--calcite-corner-radius))
-  );
+  border-radius: inherit;
 }
 
 @mixin action-indicator() {

diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
@@ -9,15 +9,21 @@
  * @prop --calcite-panel-border-color: Specifies the component's border color.
  * @prop --calcite-panel-background-color: Specifies the component's background color.
  * @prop --calcite-panel-header-background-color: Specifies the background color of the component's header.
+ * @prop --calcite-panel-header-action-background-color: Specifies the background color of the component's `header-actions`.
+ * @prop --calcite-panel-header-action-background-color-hover: Specifies the background color of the component's `header-actions` when hovered.
+ * @prop --calcite-panel-header-action-background-color-press: Specifies the background color of the component's `header-actions` when pressed or active.
+ * @prop --calcite-panel-header-action-text-color: Specifies the text and icon color of the component's `header-actions`.
+ * @prop --calcite-panel-header-action-text-color-hover: Specifies the text and icon color of the component's `header-actions` when hovered.
+ * @prop --calcite-panel-header-action-text-color-press: Specifies the text and icon color of the component's `header-actions` when pressed or active.
  * @prop --calcite-panel-footer-background-color: Specifies the background color of the component's footer.
  * @prop --calcite-panel-space: Specifies the padding of the component's `"unnamed (default)"` slot.
  * @prop --calcite-panel-header-content-space: Specifies the padding of the `"header-content"` slot.
  * @prop --calcite-panel-footer-space: Specifies the padding of the component's footer.
- * @prop --calcite-action-background-color: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s.
- * @prop --calcite-action-background-color-hover: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
- * @prop --calcite-action-background-color-pressed: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
- * @prop --calcite-action-text-color-hover: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
- * @prop --calcite-action-text-color-pressed: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
+ * @prop --calcite-action-background-color: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s. Use ::part(header) or ::part(footer) to target sets of calcite-actions.
+ * @prop --calcite-action-background-color-hover: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s. Use ::part(header) or ::part(footer) to target sets of calcite-actions.
+ * @prop --calcite-action-background-color-pressed: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s. Use ::part(header) or ::part(footer) to target sets of calcite-actions.
+ * @prop --calcite-action-text-color-hover: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s. Use ::part(header) or ::part(footer) to target sets of calcite-actions.
+ * @prop --calcite-action-text-color-pressed: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s. Use ::part(header) or ::part(footer) to target sets of calcite-actions.
  * @prop --calcite-popover-border-color: Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s.
  * @prop --calcite-panel-content-space: [Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content.
  * @prop --calcite-panel-footer-padding: [Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer.
@@ -166,6 +172,33 @@
   }
 }
 
+.header {
+  ::slotted(calcite-action),
+  calcite-action {
+    --calcite-action-background-color: var(
+      --calcite-panel-header-action-background-color,
+      var(--calcite-panel-header-background-color)
+    );
+    --calcite-action-background-color-hover: var(
+      --calcite-panel-header-action-background-color-hover,
+      var(--calcite-panel-header-background-color-hover)
+    );
+    --calcite-action-background-color-press: var(
+      --calcite-panel-header-action-background-color-press,
+      var(--calcite-panel-header-background-color-press)
+    );
+    --calcite-action-text-color: var(--calcite-panel-header-action-text-color, var(--calcite-panel-header-text-color));
+    --calcite-action-text-color-hover: var(
+      --calcite-panel-header-action-text-color-hover,
+      var(--calcite-panel-header-text-color-hover)
+    );
+    --calcite-action-text-color-press: var(
+      --calcite-panel-header-action-text-color-press,
+      var(--calcite-panel-header-text-color-press)
+    );
+  }
+}
+
 .back-button {
   @apply border-0
   border-solid;
@@ -194,12 +227,12 @@ calcite-action-menu {
 #collapse,
 calcite-action-menu {
   &:last-child {
-    --calcite-action-corner-radius-start-end: var(--calcite-panel-corner-radius);
+    border-radius-start-end: var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none));
   }
 }
 
 .back-button {
-  --calcite-action-corner-radius-start-start: var(--calcite-panel-corner-radius);
+  border-radius-start-start: var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none));
 }
 
 .content-wrapper {