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 {