diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index af91005d058..4c163bdf1c3 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -4562,6 +4562,10 @@ export namespace Components {
* Accessible name for the dropdown menu.
*/
"dropdownLabel": string;
+ /**
+ * Defines the available placements that can be used when a flip occurs.
+ */
+ "flipPlacements": FlipPlacement[];
/**
* Specifies the kind of the component, which will apply to border and background, if applicable.
*/
@@ -4574,6 +4578,11 @@ 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 component will be positioned relative to the container element.
+ * @default "bottom-end"
+ */
+ "placement": MenuPlacement;
/**
* Specifies an icon to display at the end of the primary button.
*/
@@ -12509,6 +12518,10 @@ declare namespace LocalJSX {
* Accessible name for the dropdown menu.
*/
"dropdownLabel"?: string;
+ /**
+ * Defines the available placements that can be used when a flip occurs.
+ */
+ "flipPlacements"?: FlipPlacement[];
/**
* Specifies the kind of the component, which will apply to border and background, if applicable.
*/
@@ -12529,6 +12542,11 @@ 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 component will be positioned relative to the container element.
+ * @default "bottom-end"
+ */
+ "placement"?: MenuPlacement;
/**
* Specifies an icon to display at the end of the primary button.
*/
diff --git a/packages/calcite-components/src/components/graph/graph.e2e.ts b/packages/calcite-components/src/components/graph/graph.e2e.ts
index 033036b4ab5..21de1d6f6f4 100644
--- a/packages/calcite-components/src/components/graph/graph.e2e.ts
+++ b/packages/calcite-components/src/components/graph/graph.e2e.ts
@@ -1,5 +1,6 @@
import { newE2EPage, E2EPage } from "@stencil/core/testing";
-import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
+import { accessible, defaults, hidden, renders, themed } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
describe("calcite-graph", () => {
describe("renders", () => {
@@ -48,8 +49,8 @@ describe("calcite-graph", () => {
const dimensionsStyle = `style="height:100px; width:300px;"`;
const page = await newE2EPage();
await page.setContent(``);
- await page.$eval("calcite-graph", (elm: any) => {
- elm.data = [
+ await page.$eval("calcite-graph", (el: HTMLCalciteGraphElement) => {
+ el.data = [
[0, 4],
[1, 7],
[4, 6],
@@ -67,14 +68,14 @@ describe("calcite-graph", () => {
it("uses color-stops when provided", async () => {
const page = await newE2EPage();
await page.setContent(``);
- await page.$eval("calcite-graph", (elm: any) => {
- elm.data = [
+ await page.$eval("calcite-graph", (el: HTMLCalciteGraphElement) => {
+ el.data = [
[0, 4],
[1, 7],
[4, 6],
[6, 2],
];
- elm.colorStops = [
+ el.colorStops = [
{ offset: 0, color: "red" },
{ offset: 0.5, color: "green" },
{ offset: 1, color: "blue" },
@@ -91,4 +92,70 @@ describe("calcite-graph", () => {
expect(fill).toBe(`url(#${linearGradientId})`);
});
+
+ describe("theme", () => {
+ describe("default", () => {
+ themed(
+ async () => {
+ const page = await newE2EPage();
+ await page.setContent(html``);
+ await page.$eval("calcite-graph", (graph: HTMLCalciteGraphElement) => {
+ graph.data = [
+ [0, 4],
+ [1, 7],
+ [4, 6],
+ [6, 2],
+ ];
+ graph.colorStops = [
+ { offset: 0, color: "red" },
+ { offset: 0.5, color: "green" },
+ { offset: 1, color: "blue" },
+ ];
+ });
+ await page.waitForChanges();
+
+ return { tag: "calcite-graph", page };
+ },
+ {
+ "--calcite-graph-background-color": {
+ shadowSelector: ".svg",
+ targetProp: "fill",
+ },
+ },
+ );
+ });
+ });
+
+ describe("highlight", () => {
+ themed(
+ async () => {
+ const page = await newE2EPage();
+ await page.setContent(html` `);
+ await page.$eval("calcite-graph", (graph: HTMLCalciteGraphElement) => {
+ graph.data = [
+ [0, 4],
+ [1, 7],
+ [4, 6],
+ [6, 2],
+ ];
+ graph.colorStops = [
+ { offset: 0, color: "red" },
+ { offset: 0.5, color: "green" },
+ { offset: 1, color: "blue" },
+ ];
+ graph.highlightMin = 1;
+ graph.highlightMax = 5;
+ });
+ await page.waitForChanges();
+
+ return { tag: "calcite-graph", page };
+ },
+ {
+ "--calcite-graph-accent-color": {
+ shadowSelector: ".graph-path--highlight",
+ targetProp: "fill",
+ },
+ },
+ );
+ });
});
diff --git a/packages/calcite-components/src/components/graph/graph.scss b/packages/calcite-components/src/components/graph/graph.scss
index d786cdd8273..99ebe1256ff 100644
--- a/packages/calcite-components/src/components/graph/graph.scss
+++ b/packages/calcite-components/src/components/graph/graph.scss
@@ -3,8 +3,8 @@
*
* These properties can be overridden using the component's tag as selector.
*
- * @prop --calcite-graph-background-color: Specifies the background color of the component.
* @prop --calcite-graph-accent-color: Specifies the accent color of the component.
+ * @prop --calcite-graph-background-color: Specifies the background color of the component.
*/
:host {