From 40a109e255b6af8d5d2f51ed05a647d140998ff5 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 29 Jul 2024 10:07:45 -0700 Subject: [PATCH 1/8] chore: avoid deleting untracked, non-generated files on npm run clean (#9866) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **Related Issue:** N/A ## Summary Prevents `git clean` from removing untracked, non-generated files/dirs from `.gitignore` (e.g., `.idea` 😉) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cf9fecefe45..994ff312c6c 100644 --- a/package.json +++ b/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", From feab834e5ae0af1a40eef458112f09d68c90bfb7 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Mon, 29 Jul 2024 10:35:50 -0700 Subject: [PATCH 2/8] chore(themed): add token CSS variable test helper (#9860) **Related Issue:** #7180 ## Summary Includes helpers which assist developers in testing and theming component tokens as CSS variables. ### EXAMPLE USAGE: #### Demo page ```html Button ``` #### Storybook / Chromatic ```ts export const theming_TestOnly = (): string => html`
Button
`; ``` #### E2E ```ts describe("theme", () => { themed(` Button `, { "--calcite-button-background-color": { shadowSelector: ".button", targetProp: "backgroundColor", }, "--calcite-button-text-color": { shadowSelector: ".button", targetProp: "color", } "--calcite-accordion-border-color": { shadowSelector: ".button", targetProp: "borderColor", }, }); }); ``` --- .../src/demos/_assets/demo-theme.ts | 112 ++++++++++++++++++ .../src/demos/_assets/head.ts | 4 + .../src/tests/commonTests/themed.ts | 21 +--- .../src/tests/utils/cssTokenValues.ts | 47 ++++++++ 4 files changed, 165 insertions(+), 19 deletions(-) create mode 100644 packages/calcite-components/src/demos/_assets/demo-theme.ts create mode 100644 packages/calcite-components/src/tests/utils/cssTokenValues.ts diff --git a/packages/calcite-components/src/demos/_assets/demo-theme.ts b/packages/calcite-components/src/demos/_assets/demo-theme.ts new file mode 100644 index 00000000000..55c02899401 --- /dev/null +++ b/packages/calcite-components/src/demos/_assets/demo-theme.ts @@ -0,0 +1,112 @@ +/** + * + * Sets the value of a CSS variable to a test value. + * This is useful for testing themed components. + * + * @param token - the token as a CSS variable + * @returns string - the new value for the token + */ +export function getTokenValue(token: string): string { + const tokenValueMap = { + background$: "rgb(252, 244, 52)", + "text-color$": "rgb(239,118,39)", + "border-color$": "rgb(156, 89, 209)", + "background-color$": "rgb(44, 44, 44)", + color$: "rgb(0, 191, 255)", + highlighted$: "rgb(255, 105, 180)", + selected$: "rgb(255, 255, 255)", + shadow$: + "rgb(255, 255, 255) 0px 0px 0px 4px, rgb(255, 105, 180) 0px 0px 0px 5px inset, rgb(0, 191, 255) 0px 0px 0px 9px", + "z-index$": "42", + "(size|space)$": "42px", + } as const; + + const match = Object.entries(tokenValueMap).find(([regexStr]) => { + return new RegExp(regexStr, "g").test(token); + }); + + if (!match) { + console.warn("token not found in tokenValueMap", token); + return tokenValueMap["color$"]; + } + + return match[1]; +} + +/* + * @prop tokens - an array of CSS variables + * @returns a string of CSS variables with their new values. + */ +export function setCSSVariables(tokens: string[]): string { + return tokens + .map((token) => { + return `${token}: ${getTokenValue(token)};`; + }) + .join("\n"); +} + +/** + * + * @example + * Button + */ +export class DemoTheme extends HTMLElement { + _slot: HTMLSlotElement; + + _el: HTMLElement; + + static observedAttributes = ["tokens"]; + + constructor() { + super(); + const shadow = this.attachShadow({ mode: "open" }); + const slot = document.createElement("slot"); + shadow.append(slot); + this._slot = slot; + if (this._slot.assignedNodes().length === 1 && this._slot.assignedNodes()[0].nodeName.includes("calcite")) { + this._el = this._slot.assignedNodes()[0] as HTMLElement; + } + } + + attributeChangedCallback(name: string, oldValue: string, newValue: string): void { + if (newValue !== oldValue && name === "tokens") { + this.updateTheme(newValue); + } + } + + updateTheme(newValue: string): void { + if (typeof newValue === "string") { + let tokensList; + + try { + tokensList = JSON.parse(newValue); + } catch (error) { + tokensList = newValue.split(",").map((t) => t.trim()); + } + + if (Array.isArray(tokensList)) { + const stringifiedTheme = setCSSVariables(tokensList); + + if (this._el) { + this._el.style.cssText = stringifiedTheme; + } else { + this.setAttribute("style", stringifiedTheme); + } + } + } + } +} + +customElements.define("demo-theme", DemoTheme); diff --git a/packages/calcite-components/src/demos/_assets/head.ts b/packages/calcite-components/src/demos/_assets/head.ts index eeda4a8ab55..b82226531b6 100644 --- a/packages/calcite-components/src/demos/_assets/head.ts +++ b/packages/calcite-components/src/demos/_assets/head.ts @@ -18,6 +18,10 @@ { src: "demos/_assets/demo-dom-swapper.js", }, + { + src: "demos/_assets/demo-theme.js", + type: "module", + }, ]; const parseTemplate = (text: string): HTMLTemplateElement | null => { diff --git a/packages/calcite-components/src/tests/commonTests/themed.ts b/packages/calcite-components/src/tests/commonTests/themed.ts index 00524d01382..363577eb8f4 100644 --- a/packages/calcite-components/src/tests/commonTests/themed.ts +++ b/packages/calcite-components/src/tests/commonTests/themed.ts @@ -2,6 +2,7 @@ import { E2EElement, E2EPage } from "@stencil/core/testing"; import { toHaveNoViolations } from "jest-axe"; import { ElementHandle } from "puppeteer"; import type { RequireExactlyOne } from "type-fest"; +import { getTokenValue } from "../utils/cssTokenValues"; import type { ComponentTestSetup } from "./interfaces"; import { getTagAndPage } from "./utils"; @@ -101,7 +102,7 @@ export function themed(componentTestSetup: ComponentTestSetup, tokens: Component // Set test values for each token if (!setTokens[token]) { - setTokens[token] = assignTestTokenThemeValues(token); + setTokens[token] = getTokenValue(token); } // Set up styleTargets and testTargets @@ -426,21 +427,3 @@ async function assertThemedProps(page: E2EPage, options: TestTarget): Promise { + return new RegExp(regexStr, "g").test(token); + }); + + if (!match) { + console.warn("token not found in tokenValueMap", token); + return tokenValueMap["color$"]; + } + + return match[1]; +} + +/** + * + * @param tokens - an array of CSS variables + * @returns a string of CSS variables with their new values. + */ +export function setCSSVariables(tokens: string[]): string { + return tokens + .map((token) => { + return `${token}: ${getTokenValue(token)};`; + }) + .join("\n"); +} From 2c629172c3f5f6facbe9d9424daaae9f5dbdf344 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Mon, 29 Jul 2024 11:04:40 -0700 Subject: [PATCH 3/8] fix(tab-title): Adjust hover styling for `bordered` Tab Title (#9867) **Related Issue:** #9854 ## Summary Adjusts some styling for the Tab Titles to ensure the correct visual are applied in `bordered` mode. When we look at updating Tabs component to use less "sub components" I think this setup can be adjusted - right now the "tab border" for bordered comes from styling external to Tab Title. @ashetland @SkyeSeitz I changed the way some of the border are implemented, can you give this a look? --- .../src/components/tab-title/tab-title.scss | 77 +++++++++++++------ 1 file changed, 55 insertions(+), 22 deletions(-) diff --git a/packages/calcite-components/src/components/tab-title/tab-title.scss b/packages/calcite-components/src/components/tab-title/tab-title.scss index 9be58245133..0c0b3870512 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.scss +++ b/packages/calcite-components/src/components/tab-title/tab-title.scss @@ -104,13 +104,33 @@ inline-size: calc(100% + var(--calcite-spacing-base)); } +:host([bordered]) .container:not(.container--bottom) { + border-block-end: 1px solid transparent; +} + +:host([bordered]:not([selected]):hover) .container:not(.container--bottom) { + border-block-end: 1px solid var(--calcite-color-border-1); +} + +:host([bordered]:not([selected]):hover:not(:focus)) { + .selected-indicator { + background-color: var(--calcite-color-foreground-2); + } + .container:not(.container--bottom) .selected-indicator { + box-shadow: inset 0 1px var(--calcite-color-border-1); + } + .container.container--bottom .selected-indicator { + box-shadow: inset 0 -1px var(--calcite-color-border-1); + } +} + :host([bordered][selected]) .container::after { @apply absolute block w-full h-0.5 transition-default; - inset-block-end: 0; + inset-block-end: -1px; inset-inline-start: 0; inset-inline-end: 0; inline-size: 100%; @@ -209,7 +229,7 @@ .close-button { @apply appearance-none - bg-foreground-1 + bg-transparent border-none content-center cursor-pointer @@ -221,17 +241,10 @@ self-center text-color-3 transition-default; - background-color: var(--calcite-button-transparent-1); - // compensate for the added border on parent and ensure focus alignment + margin-inline-start: var(--calcite-spacing-sm); margin-inline-end: var(--calcite-spacing-px); - box-shadow: - var(--calcite-spacing-px) 0 0 0 transparent, - 0 var(--calcite-spacing-xxs) 0 0 transparent; block-size: calc(100% - var(--calcite-spacing-xxs)); - &:hover { - box-shadow: var(--calcite-spacing-px) 0 0 0 var(--calcite-color-foreground-3); - } &:focus { @apply focus-normal; } @@ -260,16 +273,42 @@ } // bordered styles -:host([bordered]) { - margin-inline-end: 0; +:host([bordered]) .container { + &:not(.container--bottom) .close-button { + block-size: calc(100% - var(--calcite-spacing-px)); + margin-block-start: -1px; + } + .close-button { + & calcite-icon { + margin-block-start: var(--calcite-spacing-px); + } + + &:focus, + &:hover, + &:active { + box-shadow: 0 2px 0 0 var(--calcite-color-foreground-3); + } + } + + &.container--bottom .close-button { + box-shadow: 0 -2px 0 0 transparent; + & calcite-icon { + margin-block-end: var(--calcite-spacing-px); + } + &:focus, + &:hover, + &:active { + box-shadow: 0 -2px 0 0 var(--calcite-color-foreground-3); + } + } } :host([bordered][selected]) { box-shadow: inset 0 -1px var(--calcite-color-foreground-1); } -:host([bordered][selected][position="bottom"]) { - box-shadow: inset 0 var(--calcite-spacing-base) 0 var(--calcite-color-foreground-1); +:host([bordered]:not([selected])) .container .close-button { + box-shadow: 0 2px 0 0 transparent; } :host([bordered]:hover) { @@ -278,18 +317,12 @@ } } -:host([closable]) .container, :host([bordered]) .container { - border-inline-start: var(--calcite-spacing-px) solid transparent; - border-inline-end: var(--calcite-spacing-px) solid transparent; - .close-button { - margin-inline-start: var(--calcite-spacing-sm); - } + border-inline: var(--calcite-spacing-px) solid transparent; } :host([selected][bordered]) .container { - border-inline-start-color: var(--calcite-color-border-1); - border-inline-end-color: var(--calcite-color-border-1); + border-inline-color: var(--calcite-color-border-1); } :host([layout="inline"][bordered]), From 7fa48921a969398585751b7f1f953dee3e51c345 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 29 Jul 2024 11:15:47 -0700 Subject: [PATCH 4/8] docs(action): deprecates the compact property (#9847) **Related Issue:** #3859 ## Summary - deprecates the compact property --- packages/calcite-components/src/components.d.ts | 6 ++++-- .../calcite-components/src/components/action/action.e2e.ts | 2 +- .../calcite-components/src/components/action/action.scss | 2 +- .../src/components/action/action.stories.ts | 6 +----- .../calcite-components/src/components/action/action.tsx | 4 +++- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index e2d6b128d7a..4c11468a907 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/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; /** diff --git a/packages/calcite-components/src/components/action/action.e2e.ts b/packages/calcite-components/src/components/action/action.e2e.ts index 8c1bec762a4..af5f544bd1a 100755 --- a/packages/calcite-components/src/components/action/action.e2e.ts +++ b/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, }, { diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss index f8cf1e00237..21737c5aa01 100755 --- a/packages/calcite-components/src/components/action/action.scss +++ b/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 { diff --git a/packages/calcite-components/src/components/action/action.stories.ts b/packages/calcite-components/src/components/action/action.stories.ts index 695be0270f2..527f6d303fe 100644 --- a/packages/calcite-components/src/components/action/action.stories.ts +++ b/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,7 +73,7 @@ export const simple = (args: ActionStoryArgs): string => html` `; -export const disabledAndCompactAndTextOnly_TestOnly = (): string => html` +export const disabledAndTextOnly_TestOnly = (): string => html`
html` appearance="solid" label="Label" scale="m" - compact disabled text="Text" text-enabled diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx index 59acf41142a..2586fb051c0 100644 --- a/packages/calcite-components/src/components/action/action.tsx +++ b/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; From 07076f65ebda6f4ab8c477e726b95b5bbf4f3610 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Mon, 29 Jul 2024 11:26:35 -0700 Subject: [PATCH 5/8] ci: fix env var case in workflows (#9877) **Related Issue:** #9851 ## Summary Fixes the case of environment variables in the workflow files, which I made uppercase in the GitHub scripts. --- .github/workflows/issue-notifications.yaml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/issue-notifications.yaml b/.github/workflows/issue-notifications.yaml index becbe777ac1..24e26fb5f4d 100644 --- a/.github/workflows/issue-notifications.yaml +++ b/.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') From 9f06123ac2f5b152ce2f27a2ca64f46e212c5a9b Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 29 Jul 2024 12:16:04 -0700 Subject: [PATCH 6/8] feat(dialog): add padding to default slot (#9871) **Related Issue:** #9869 ## Summary - adds css var `--calcite-dialog-content-space` - sets padding on dialog by default - adds screenshot test --- .../calcite-components/src/components/dialog/dialog.scss | 8 ++++++++ .../src/components/dialog/dialog.stories.ts | 6 ++++-- .../calcite-components/src/components/dialog/dialog.tsx | 4 +++- .../calcite-components/src/components/dialog/resources.ts | 1 + 4 files changed, 16 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss index d0d0223a3d8..dc503556520 100644 --- a/packages/calcite-components/src/components/dialog/dialog.scss +++ b/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,6 +76,7 @@ } :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"); @@ -82,6 +84,7 @@ } :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"); @@ -89,6 +92,7 @@ } :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 diff --git a/packages/calcite-components/src/components/dialog/dialog.stories.ts b/packages/calcite-components/src/components/dialog/dialog.stories.ts index bab28c13b1c..88c3f796548 100644 --- a/packages/calcite-components/src/components/dialog/dialog.stories.ts +++ b/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` scale="m" width-scale="s" > -

Slotted content!

+ Slotted content!
Footer!
+ `; diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx index da1b3669152..dc889ec53f4 100644 --- a/packages/calcite-components/src/components/dialog/dialog.tsx +++ b/packages/calcite-components/src/components/dialog/dialog.tsx @@ -262,7 +262,9 @@ export class Dialog - +
+ +
diff --git a/packages/calcite-components/src/components/dialog/resources.ts b/packages/calcite-components/src/components/dialog/resources.ts index db9ab305dcc..7265d7e5a75 100644 --- a/packages/calcite-components/src/components/dialog/resources.ts +++ b/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 From b25a0ae7427613c9b75dd763327f622894ca1d22 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 29 Jul 2024 14:05:29 -0700 Subject: [PATCH 7/8] fix(panel): correct footer padding and layout (#9868) **Related Issue:** #9858 #9857 ## Summary - fixes footer-end slot alignment when its the only thing slotted - refactor styles - makes footer slot take precedence over the other footer slots (including deprecated footer-actions) - add screenshot tests - cleanup screenshot tests --- .../components/flow-item/flow-item.stories.ts | 2 +- .../src/components/panel/panel.scss | 27 +++--- .../src/components/panel/panel.stories.ts | 89 ++++++++++++++++++- .../src/components/panel/panel.tsx | 24 +++-- .../src/components/panel/resources.ts | 4 + .../calcite-components/src/demos/panel.html | 13 +++ 6 files changed, 138 insertions(+), 21 deletions(-) diff --git a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts index f80d1efc45d..e0ce6fb4e88 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts +++ b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts @@ -249,7 +249,7 @@ export const footerStartEndAndContentBottom = (): string => `; -export const footerSlotCoexistence = (): string => +export const footerSlot = (): string => html`
Header!
diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 0b49bf01950..8ef2ffad730 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/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 { diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts index 49f721bb0fd..d6a48a5ecc3 100644 --- a/packages/calcite-components/src/components/panel/panel.stories.ts +++ b/packages/calcite-components/src/components/panel/panel.stories.ts @@ -242,10 +242,97 @@ export const footerPadding_TestOnly = (): string =>
Header!

Slotted content!

-
Footer!
+ 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8
`; +export const footerActions = (): string => + html`

footer-actions (Deprecated): Auto width

+
+ +
Header!
+

Slotted content!

+ 1 + 2 + +
+

footer-actions (Deprecated): Full width

+
+ +
Header!
+

Slotted content!

+ 1 + 2 + +
`; + +export const footerVariations = (): string => + html`

footer

+
+ +
Header!
+

Slotted content!

+ 1 + 2 + +
+

footer-start only

+
+ +
Header!
+

Slotted content!

+ 1 + 2 + +
+

footer-end only

+
+ +
Header!
+

Slotted content!

+ 1 + 2 + +
+

footer-start and footer-end auto width

+
+ +
Header!
+

Slotted content!

+ 1 + 2 + 3 + 4 + +
+

footer-start and footer-end full width single

+
+ +
Header!
+

Slotted content!

+ 1 + 2 + +
+

footer-start and footer-end full width multiple

+
+ +
Header!
+

Slotted content!

+ 1 + 2 + 3 + 4 + +
`; + export const actionBarBackgroundColor_TestOnly = (): string => html` diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx index 17d95d36b8e..4459f80cf41 100644 --- a/packages/calcite-components/src/components/panel/panel.tsx +++ b/packages/calcite-components/src/components/panel/panel.tsx @@ -620,14 +620,22 @@ export class Panel return (
- - - - + + + +
); } diff --git a/packages/calcite-components/src/components/panel/resources.ts b/packages/calcite-components/src/components/panel/resources.ts index 6fd7f4d449d..f7704b36582 100644 --- a/packages/calcite-components/src/components/panel/resources.ts +++ b/packages/calcite-components/src/components/panel/resources.ts @@ -17,6 +17,10 @@ export const CSS = { contentWrapper: "content-wrapper", fabContainer: "fab-container", footer: "footer", + footerContent: "footer-content", + footerActions: "footer-actions", + footerStart: "footer-start", + footerEnd: "footer-end", }; export const ICONS = { diff --git a/packages/calcite-components/src/demos/panel.html b/packages/calcite-components/src/demos/panel.html index e0fd9209bdc..2f9330a4a73 100644 --- a/packages/calcite-components/src/demos/panel.html +++ b/packages/calcite-components/src/demos/panel.html @@ -178,10 +178,23 @@ icon-start="check" width="full" > + +
+
+ +
From d8ddf57eec1b9aa009cbe1c18b3c8146fc54b1ca Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 29 Jul 2024 14:39:16 -0700 Subject: [PATCH 8/8] feat(combobox-item): apply heading color according to updated spec (#9883) **Related Issue:** #9881 ## Summary Applies heading color across all states. --- .../src/components/combobox-item/combobox-item.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss index cb619343b26..1966a6ded72 100644 --- a/packages/calcite-components/src/components/combobox-item/combobox-item.scss +++ b/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 {