diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss index a4917ac17af..09341c31bce 100755 --- 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.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts index e7913515fe6..a28bc6cee15 100644 --- a/packages/calcite-components/src/components/panel/panel.e2e.ts +++ b/packages/calcite-components/src/components/panel/panel.e2e.ts @@ -721,7 +721,6 @@ describe("calcite-panel", () => { `, { "--calcite-panel-corner-radius": { - shadowSelector: `.${CSS.container}`, targetProp: "borderRadius", }, "--calcite-panel-heading-text-color": { diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 2ab0af241e3..3acf3be1184 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -9,31 +9,26 @@ * @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 Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`. + * @prop --calcite-panel-header-action-background-color-hover: Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered. + * @prop --calcite-panel-header-action-background-color-press: Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed. + * @prop --calcite-panel-header-action-text-color: Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`. + * @prop --calcite-panel-header-action-text-color-press: Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed. * @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-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. * @prop --calcite-panel-header-border-block-end: [Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border. - * @prop --calcite-panel-header-action-background-color-hover: Specifies the background color of the component's `calcite-action` items in the panel header when hovered. - * @prop --calcite-panel-header-action-background-color-press: Specifies the background color of the component's `calcite-action` items in the panel header when pressed. - * @prop --calcite-panel-header-action-background-color: Specifies the background color of the component's `calcite-action` items in the panel header. - * @prop --calcite-panel-header-action-indicator-color: Specifies the color of the component's `calcite-action` items' indicator in the panel header. - * @prop --calcite-panel-header-action-text-color-press: Specifies the text color of the component's `calcite-action` items in the panel header when pressed. - * @prop --calcite-panel-header-action-text-color: Specifies the text color of the component's `calcite-action` items in the panel header. */ :host { @apply relative flex w-full h-full flex-auto overflow-hidden box-border; --calcite-min-header-height: calc(var(--calcite-icon-size) * 3); + border-radius: var(--calcite-panel-corner-radius, var(--calcite-corner-radius-sharp)); } @include disabled(); @@ -98,7 +93,6 @@ transition: max-block-size var(--calcite-animation-timing), inline-size var(--calcite-animation-timing); - border-radius: var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none)); box-sizing: border-box; font-size: var(--calcite-font-size--1); } @@ -113,8 +107,7 @@ .header { @apply flex flex-col z-header; - border-radius: var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none)) - var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none)) 0 0; + background-color: var(--calcite-panel-header-background-color, var(--calcite-color-foreground-1)); border-block-end: 1px solid var(--calcite-panel-border-color, var(--calcite-panel-header-border-block-end, var(--calcite-color-border-3))); @@ -149,15 +142,6 @@ margin-inline-end: auto; justify-content: center; - .header-actions { - --calcite-action-background-color-hover: var(--calcite-panel-header-action-background-color-hover); - --calcite-action-background-color-press: var(--calcite-panel-header-action-background-color-press); - --calcite-action-background-color: var(--calcite-panel-header-action-background-color); - --calcite-action-indicator-color: var(--calcite-panel-header-action-indicator-color); - --calcite-action-text-color-press: var(--calcite-panel-header-action-text-color-press); - --calcite-action-text-color: var(--calcite-panel-header-action-text-color); - } - .heading, .description { @apply block @@ -181,6 +165,17 @@ } } +#close, +#collapse, +.back-button, +calcite-action-menu { + --calcite-action-background-color: var(--calcite-panel-header-action-background-color); + --calcite-action-background-color-hover: var(--calcite-panel-header-action-background-color-hover); + --calcite-action-background-color-press: var(--calcite-panel-header-action-background-color-press); + --calcite-action-text-color: var(--calcite-panel-header-action-text-color); + --calcite-action-text-color-pressed: var(--calcite-panel-header-action-text-color-pressed); +} + .back-button { @apply border-0 border-solid; @@ -199,24 +194,6 @@ margin-inline-start: theme("margin.auto"); } -#close, -#collapse, -.back-button, -calcite-action-menu { -} - -#close, -#collapse, -calcite-action-menu { - &:last-child { - --calcite-action-corner-radius-start-end: var(--calcite-panel-corner-radius); - } -} - -.back-button { - --calcite-action-corner-radius-start-start: var(--calcite-panel-corner-radius); -} - .content-wrapper { @apply flex flex-auto @@ -257,8 +234,6 @@ calcite-action-menu { var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-space)) ); background-color: var(--calcite-panel-footer-background-color, var(--calcite-color-foreground-1)); - border-radius: 0 0 var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none)) - var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none)); } .footer-content { diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index fc6be4faae7..27108c4b48c 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -54,6 +54,7 @@ import { navigationUserTokens, navigationUsers } from "./custom-theme/navigation import { tileTokens, tile } from "./custom-theme/tile"; import { navigationTokens, navigation } from "./custom-theme/navigation"; import { menuItem, menuItemTokens } from "./custom-theme/menu-item"; +import { panel, panelTokens } from "./custom-theme/panel"; const globalTokens = { calciteColorBrand: "#007ac2", @@ -146,7 +147,7 @@ const kitchenSink = (args: Record, useTestValues = false) => ${avatarThumbnail} ${progress} ${handle} ${graph} ${textArea} ${popover} ${tile} ${tooltip} ${comboboxItem}
- ${navigation} ${navigationLogos} ${navigationUsers} ${blockSection} ${block} ${rating} + ${navigation} ${navigationLogos} ${navigationUsers} ${blockSection} ${block} ${rating} ${panel}
${alert}
${menuItem}
@@ -189,6 +190,7 @@ const componentTokens = { ...navigationUserTokens, ...noticeTokens, ...paginationTokens, + ...panelTokens, ...popoverTokens, ...progressTokens, ...segmentedControlTokens, diff --git a/packages/calcite-components/src/custom-theme/panel.ts b/packages/calcite-components/src/custom-theme/panel.ts new file mode 100644 index 00000000000..5f0f5865ec0 --- /dev/null +++ b/packages/calcite-components/src/custom-theme/panel.ts @@ -0,0 +1,37 @@ +import { html } from "../../support/formatting"; + +export const panelTokens = { + calcitePanelBackgroundColor: "", + calcitePanelBorderColor: "", + calcitePanelContentSpace: "", + calcitePanelCornerRadius: "", + calcitePanelDescriptionTextColor: "", + calcitePanelFooterBackgroundColor: "", + calcitePanelFooterSpace: "", + calcitePanelHeaderActionBackgroundColorHover: "", + calcitePanelHeaderActionBackgroundColorPress: "", + calcitePanelHeaderActionBackgroundColor: "", + calcitePanelHeaderActionTextColorPress: "", + calcitePanelHeaderActionTextColor: "", + calcitePanelHeaderBackgroundColor: "", + calcitePanelHeaderContentSpace: "", + calcitePanelHeadingTextColor: "", + calcitePanelSpace: "", +}; + +export const panel = html` + + + + +
Content at the top
+ + Agree to terms + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante + dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. +

+ Done + +`; diff --git a/packages/calcite-components/src/demos/panel.html b/packages/calcite-components/src/demos/panel.html index 91511c727af..611ec2e98be 100644 --- a/packages/calcite-components/src/demos/panel.html +++ b/packages/calcite-components/src/demos/panel.html @@ -37,22 +37,27 @@ --calcite-panel-corner-radius: 12px; --calcite-panel-heading-text-color: darkgreen; --calcite-panel-description-text-color: lightgreen; + --calcite-panel-border-color: blue; --calcite-panel-background-color: yellow; --calcite-panel-header-background-color: orange; --calcite-panel-footer-background-color: red; - --calcite-panel-border-color: lime; - --calcite-panel-space: 2rem; --calcite-panel-header-content-space: 0; --calcite-panel-footer-space: 0; + --calcite-panel-content-space: 12px; + --calcite-panel-footer-padding: 3rem; + --calcite-panel-header-border-block-end: rgb(13, 242, 204); + + --calcite-panel-header-action-background-color: blue; + --calcite-panel-header-action-background-color-hover: blue; + --calcite-panel-header-action-background-color-press: blue; + } - --calcite-action-background-color: lime; - --calcite-action-background-color-hover: lime; - --calcite-action-background-color-pressed: lime; - --calcite-action-text-color: blue; - --calcite-action-text-color-pressed: blue; - --calcite-popover-border-color: blue; + .themed-panel calcite-action[slot="header-actions-end"] { + --calcite-action-background-color: red; + --calcite-action-background-color-hover: red; + --calcite-action-background-color-press: red; } @@ -330,6 +335,7 @@
To continue, you must agree to the terms
+ I agree to the terms @@ -341,6 +347,7 @@ tortor, a iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor, porttitor est sed, vestibulum risus. Integer non erat libero.

+

Cras sagittis vel neque sed efficitur. Vestibulum mattis diam eget urna condimentum tempus. Donec malesuada velit sit amet metus faucibus pharetra. Sed sit amet massa facilisis, porttitor nunc vitae, @@ -423,6 +430,7 @@ I agree to the terms +

Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.