From 07ea7b65697162a14368ed77ef7b3aeaec0ca7c1 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 4 Nov 2024 15:30:35 -0800 Subject: [PATCH 1/4] feat(tooltip): add component tokens #7180 --- packages/calcite-components/.stylelintrc.cjs | 8 +-- .../calcite-components/src/components.d.ts | 14 ++--- .../src/components/tooltip/tooltip.e2e.ts | 55 ++++++++++++++++++- .../src/components/tooltip/tooltip.scss | 28 ++++++---- .../src/custom-theme.stories.ts | 4 +- .../src/custom-theme/tooltip.ts | 18 ++++++ .../calcite-components/src/demos/tooltip.html | 24 ++++++++ 7 files changed, 124 insertions(+), 27 deletions(-) create mode 100644 packages/calcite-components/src/custom-theme/tooltip.ts diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs index 3861302ec13..0998dad6911 100644 --- a/packages/calcite-components/.stylelintrc.cjs +++ b/packages/calcite-components/.stylelintrc.cjs @@ -1,13 +1,7 @@ // @ts-check // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT -const customFunctions = [ - "get-trailing-text-input-padding", - "medium-modular-scale", - "modular-scale", - "scale-duration", - "small-modular-scale", -]; +const customFunctions = []; // ⚠️ END OF AUTO-GENERATED CODE const scssPatternRules = [ diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index dd887407571..5984339da69 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -77,7 +77,6 @@ import { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; import { DisplayMode } from "./components/sheet/interfaces"; import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; -import { FlipPlacement as FlipPlacement1, MenuPlacement as MenuPlacement1, OverlayPositioning as OverlayPositioning1 } from "./components"; import { SortHandleMessages } from "./components/sort-handle/assets/sort-handle/t9n"; import { DragDetail } from "./utils/sortableComponent"; import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; @@ -170,7 +169,6 @@ export { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; export { DisplayMode } from "./components/sheet/interfaces"; export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; -export { FlipPlacement as FlipPlacement1, MenuPlacement as MenuPlacement1, OverlayPositioning as OverlayPositioning1 } from "./components"; export { SortHandleMessages } from "./components/sort-handle/assets/sort-handle/t9n"; export { DragDetail } from "./utils/sortableComponent"; export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; @@ -4736,7 +4734,7 @@ export namespace Components { /** * Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available. */ - "flipPlacements": FlipPlacement1[]; + "flipPlacements": FlipPlacement[]; /** * Specifies the label of the component. */ @@ -4765,12 +4763,12 @@ 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": OverlayPositioning1; + "overlayPositioning": OverlayPositioning; /** * Determines where the component will be positioned relative to the container element. * @default "bottom-start" */ - "placement": MenuPlacement1; + "placement": MenuPlacement; /** * Specifies the size of the component. */ @@ -12788,7 +12786,7 @@ declare namespace LocalJSX { /** * Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available. */ - "flipPlacements"?: FlipPlacement1[]; + "flipPlacements"?: FlipPlacement[]; /** * Specifies the label of the component. */ @@ -12841,12 +12839,12 @@ 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"?: OverlayPositioning1; + "overlayPositioning"?: OverlayPositioning; /** * Determines where the component will be positioned relative to the container element. * @default "bottom-start" */ - "placement"?: MenuPlacement1; + "placement"?: MenuPlacement; /** * Specifies the size of the component. */ diff --git a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts index 05318c85401..3b77b01ebf8 100644 --- a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts +++ b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts @@ -1,8 +1,9 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; import { TOOLTIP_OPEN_DELAY_MS, TOOLTIP_CLOSE_DELAY_MS, CSS } from "../tooltip/resources"; -import { accessible, defaults, floatingUIOwner, hidden, openClose, renders } from "../../tests/commonTests"; +import { accessible, defaults, floatingUIOwner, hidden, openClose, renders, themed } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { getElementXY, GlobalTestProps, skipAnimations } from "../../tests/utils"; +import { FloatingCSS } from "../../utils/floating-ui"; interface PointerMoveOptions { delay: number; @@ -1200,4 +1201,56 @@ describe("calcite-tooltip", () => { expect(await tooltip.getProperty("open")).toBe(false); }); }); + + describe("theme", () => { + describe("default", () => { + themed( + html` + + Lorem Ipsum + + `, + { + "--calcite-tooltip-background-color": [ + { + shadowSelector: `.${FloatingCSS.animation}`, + targetProp: "backgroundColor", + }, + { + shadowSelector: `.${FloatingCSS.arrow}`, + targetProp: "fill", + }, + ], + "--calcite-tooltip-border-color": [ + { + shadowSelector: `.${FloatingCSS.animation}`, + targetProp: "borderColor", + }, + { + shadowSelector: `.${FloatingCSS.arrowStroke}`, + targetProp: "stroke", + }, + ], + "--calcite-tooltip-corner-radius": [ + { + shadowSelector: `.${CSS.container}`, + targetProp: "borderRadius", + }, + { + shadowSelector: `.${FloatingCSS.animation}`, + targetProp: "borderRadius", + }, + ], + "--calcite-tooltip-text-color": { + shadowSelector: `.${CSS.container}`, + targetProp: "color", + }, + "--calcite-tooltip-z-index": { + shadowSelector: `.${CSS.positionContainer}`, + targetProp: "zIndex", + }, + }, + ); + }); + }); }); diff --git a/packages/calcite-components/src/components/tooltip/tooltip.scss b/packages/calcite-components/src/components/tooltip/tooltip.scss index cb068052ceb..fbe23ebbeda 100644 --- a/packages/calcite-components/src/components/tooltip/tooltip.scss +++ b/packages/calcite-components/src/components/tooltip/tooltip.scss @@ -3,6 +3,10 @@ * * These properties can be overridden using the component's tag as selector. * + * @prop --calcite-tooltip-background-color: The background color of the tooltip. + * @prop --calcite-tooltip-border-color: The border color of the tooltip. + * @prop --calcite-tooltip-corner-radius: The border radius of the tooltip. + * @prop --calcite-tooltip-text-color: The text color of the tooltip. * @prop --calcite-tooltip-z-index: Sets the z-index value for the component. */ @@ -20,29 +24,33 @@ @include floating-ui-arrow(); .container { - @apply text-color-1 - text-n2-wrap + @apply text-n2-wrap relative overflow-hidden - rounded py-3 px-4 font-medium; + border-radius: var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round)); + color: var(--calcite-tooltip-text-color, var(--calcite-color-text-1)); max-inline-size: 20rem; max-block-size: 20rem; text-align: start; } -.calcite-floating-ui-anim { - @apply bg-foreground-1 - border-color-3 - rounded - border +.position-container .calcite-floating-ui-anim { + @apply border border-solid; + background-color: var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1)); + border-color: var(--calcite-tooltip-border-color, var(--calcite-color-border-3)); + border-radius: var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round)); } -.arrow::before { - outline: 1px solid var(--calcite-color-border-3); +.calcite-floating-ui-arrow { + fill: var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1)); +} + +.calcite-floating-ui-arrow__stroke { + stroke: var(--calcite-tooltip-border-color, var(--calcite-color-border-3)); } @include base-component(); diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index ce40b15d7f3..5bcef49f886 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -34,6 +34,7 @@ import { segmentedControl } from "./custom-theme/segmented-control"; import { slider } from "./custom-theme/slider"; import { tabs } from "./custom-theme/tabs"; import { textArea, textAreaTokens } from "./custom-theme/text-area"; +import { tooltip, tooltipTokens } from "./custom-theme/tooltip"; import { avatarIcon, avatarInitials, avatarThumbnail, avatarTokens } from "./custom-theme/avatar"; import { tileTokens, tile } from "./custom-theme/tile"; import { navigationTokens, navigation } from "./custom-theme/navigation"; @@ -119,7 +120,7 @@ const kitchenSink = (args: Record, useTestValues = false) =>
${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} - ${handle} ${textArea} ${popover} ${tile} + ${handle} ${textArea} ${popover} ${tile} ${tooltip}
${alert} ${navigation} @@ -144,6 +145,7 @@ const componentTokens = { ...progressTokens, ...inputTokens, ...textAreaTokens, + ...tooltipTokens, ...tileTokens, ...navigationTokens, }; diff --git a/packages/calcite-components/src/custom-theme/tooltip.ts b/packages/calcite-components/src/custom-theme/tooltip.ts new file mode 100644 index 00000000000..84a6e27b8da --- /dev/null +++ b/packages/calcite-components/src/custom-theme/tooltip.ts @@ -0,0 +1,18 @@ +import { html } from "../../support/formatting"; + +export const tooltipTokens = { + calciteTooltipBackgroundColor: "", + calciteTooltipBorderColor: "", + calciteTooltipCornerRadius: "", + calciteTooltipTextColor: "", + calciteTooltipZIndex: "", +}; + +export const tooltip = html` + + nostrud exercitation + + these 🥨s are making me thirsty + + +`; diff --git a/packages/calcite-components/src/demos/tooltip.html b/packages/calcite-components/src/demos/tooltip.html index cff1015e8a9..6fff4103ba5 100644 --- a/packages/calcite-components/src/demos/tooltip.html +++ b/packages/calcite-components/src/demos/tooltip.html @@ -188,6 +188,30 @@

Tooltip

+ +
+
themed
+ + + +
+ + +

placement: auto

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. + +
+
+
From 74704b6b437b808924f4e5b30df55787f9ccf6df Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 4 Nov 2024 15:37:59 -0800 Subject: [PATCH 2/4] cleanup doc --- .../src/components/tooltip/tooltip.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/tooltip/tooltip.scss b/packages/calcite-components/src/components/tooltip/tooltip.scss index fbe23ebbeda..1a667a7ed5f 100644 --- a/packages/calcite-components/src/components/tooltip/tooltip.scss +++ b/packages/calcite-components/src/components/tooltip/tooltip.scss @@ -3,10 +3,10 @@ * * These properties can be overridden using the component's tag as selector. * - * @prop --calcite-tooltip-background-color: The background color of the tooltip. - * @prop --calcite-tooltip-border-color: The border color of the tooltip. - * @prop --calcite-tooltip-corner-radius: The border radius of the tooltip. - * @prop --calcite-tooltip-text-color: The text color of the tooltip. + * @prop --calcite-tooltip-background-color: Specifies the background color of the component. + * @prop --calcite-tooltip-border-color: Specifies the border color of the component. + * @prop --calcite-tooltip-corner-radius: Specifies the corner radius of the component. + * @prop --calcite-tooltip-text-color: Specifies the text color of the component. * @prop --calcite-tooltip-z-index: Sets the z-index value for the component. */ From 4e06203ef9c3dd5676ac159d528140c8e6c04005 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 4 Nov 2024 15:39:10 -0800 Subject: [PATCH 3/4] Update .stylelintrc.cjs --- packages/calcite-components/.stylelintrc.cjs | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs index 0998dad6911..3861302ec13 100644 --- a/packages/calcite-components/.stylelintrc.cjs +++ b/packages/calcite-components/.stylelintrc.cjs @@ -1,7 +1,13 @@ // @ts-check // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT -const customFunctions = []; +const customFunctions = [ + "get-trailing-text-input-padding", + "medium-modular-scale", + "modular-scale", + "scale-duration", + "small-modular-scale", +]; // ⚠️ END OF AUTO-GENERATED CODE const scssPatternRules = [ From a3f061e7f9ce4e88359117f2320bb151a487ae66 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 4 Nov 2024 15:41:07 -0800 Subject: [PATCH 4/4] fix story demo --- packages/calcite-components/src/custom-theme/tooltip.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/custom-theme/tooltip.ts b/packages/calcite-components/src/custom-theme/tooltip.ts index 84a6e27b8da..7da183f0f94 100644 --- a/packages/calcite-components/src/custom-theme/tooltip.ts +++ b/packages/calcite-components/src/custom-theme/tooltip.ts @@ -10,8 +10,8 @@ export const tooltipTokens = { export const tooltip = html` - nostrud exercitation - + nostrud exercitation + these 🥨s are making me thirsty