From 090635c62438bb3cab00fe98033be5185b62ef22 Mon Sep 17 00:00:00 2001 From: LuLaValva Date: Fri, 24 Jan 2025 08:26:09 -0800 Subject: [PATCH 1/3] fix(build): move .less files to style blocks --- src/components/ebay-3d-viewer/index.marko | 19 ++++++++++++ src/components/ebay-3d-viewer/style.less | 16 ---------- src/components/ebay-bar-chart/index.marko | 18 ++++++++++++ src/components/ebay-bar-chart/style.less | 15 ---------- src/components/ebay-line-chart/index.marko | 34 ++++++++++++++++++++++ src/components/ebay-line-chart/style.less | 31 -------------------- src/components/ebay-spark-line/index.marko | 28 ++++++++++++++++++ src/components/ebay-spark-line/style.less | 25 ---------------- 8 files changed, 99 insertions(+), 87 deletions(-) delete mode 100644 src/components/ebay-3d-viewer/style.less delete mode 100644 src/components/ebay-bar-chart/style.less delete mode 100644 src/components/ebay-line-chart/style.less delete mode 100644 src/components/ebay-spark-line/style.less diff --git a/src/components/ebay-3d-viewer/index.marko b/src/components/ebay-3d-viewer/index.marko index 2782cdaee..a7d756171 100644 --- a/src/components/ebay-3d-viewer/index.marko +++ b/src/components/ebay-3d-viewer/index.marko @@ -40,3 +40,22 @@ $ const { + +style { + .three-d-player { + position: relative; + } + + .three-d-player__overlay { + position: absolute; + display: flex; + inset: 0; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .three-d-player__overlay--hidden { + display: none; + } +} diff --git a/src/components/ebay-3d-viewer/style.less b/src/components/ebay-3d-viewer/style.less deleted file mode 100644 index 78c398676..000000000 --- a/src/components/ebay-3d-viewer/style.less +++ /dev/null @@ -1,16 +0,0 @@ -.three-d-player { - position: relative; -} - -.three-d-player__overlay { - position: absolute; - display: flex; - inset: 0; - flex-direction: column; - align-items: center; - justify-content: center; -} - -.three-d-player__overlay--hidden { - display: none; -} diff --git a/src/components/ebay-bar-chart/index.marko b/src/components/ebay-bar-chart/index.marko index dc766e973..8b4a31bcf 100644 --- a/src/components/ebay-bar-chart/index.marko +++ b/src/components/ebay-bar-chart/index.marko @@ -20,3 +20,21 @@ $ const { ]> + +style { + .ebay-bar-chart { + width: 100%; + } + + .ebay-bar-chart .highcharts-legend-item-hidden { + transition: fill 250ms; + } + + .ebay-bar-chart .highcharts-legend-item-hidden .highcharts-point { + stroke-width: 0; + } + + .highcharts-tooltip-container svg { + overflow: visible; + } +} diff --git a/src/components/ebay-bar-chart/style.less b/src/components/ebay-bar-chart/style.less deleted file mode 100644 index 1ef2b9df4..000000000 --- a/src/components/ebay-bar-chart/style.less +++ /dev/null @@ -1,15 +0,0 @@ -.ebay-bar-chart { - width: 100%; -} - -.ebay-bar-chart .highcharts-legend-item-hidden { - transition: fill 250ms; -} - -.ebay-bar-chart .highcharts-legend-item-hidden .highcharts-point { - stroke-width: 0; -} - -.highcharts-tooltip-container svg { - overflow: visible; -} diff --git a/src/components/ebay-line-chart/index.marko b/src/components/ebay-line-chart/index.marko index 5b986e31c..504cd99d7 100644 --- a/src/components/ebay-line-chart/index.marko +++ b/src/components/ebay-line-chart/index.marko @@ -22,3 +22,37 @@ $ const { ]> + +style { + .ebay-line-chart { + width: 100%; + } + + .ebay-line-chart__container { + height: 300px; + } + + .ebay-line-chart .highcharts-point { + opacity: 0; /* overriding the default highcharts opacity to 0 so we can control it */ + stroke-width: 2px; /* and adjusting the stroke width */ + } + + .ebay-line-chart .ebay-line-chart__marker--visible { + opacity: 1; + } + + .ebay-line-chart .highcharts-legend-item .highcharts-point { + opacity: 1; /* displays the legend marker symbols which are hidden by the highcharts-point opacity */ + stroke-width: 0; /* hide the default stroke */ + } + + .ebay-line-chart .highcharts-legend-item .highcharts-graph { + display: none; /* this hides a line strike through the marker symbols that we do not want */ + } + + @media (prefers-color-scheme: dark) { + .ebay-line-chart .highcharts-halo { + fill-opacity: 0.8; /* this inverses the default 0.2 fill opacity in from light mode */ + } + } +} diff --git a/src/components/ebay-line-chart/style.less b/src/components/ebay-line-chart/style.less deleted file mode 100644 index 0315d7d83..000000000 --- a/src/components/ebay-line-chart/style.less +++ /dev/null @@ -1,31 +0,0 @@ -.ebay-line-chart { - width: 100%; -} - -.ebay-line-chart__container { - height: 300px; -} - -.ebay-line-chart .highcharts-point { - opacity: 0; // overriding the default highcharts opacity to 0 so we can control it - stroke-width: 2px; // and adjusting the stroke width; -} - -.ebay-line-chart .ebay-line-chart__marker--visible { - opacity: 1; -} - -.ebay-line-chart .highcharts-legend-item .highcharts-point { - opacity: 1; // displays the legend marker symbols which are hidden by the highcharts-point opacity - stroke-width: 0; // hide the default stroke -} - -.ebay-line-chart .highcharts-legend-item .highcharts-graph { - display: none; // this hides a line strike through the marker symbols that we do not want -} - -@media (prefers-color-scheme: dark) { - .ebay-line-chart .highcharts-halo { - fill-opacity: 0.8; // this inverses the default 0.2 fill opacity in from light mode - } -} diff --git a/src/components/ebay-spark-line/index.marko b/src/components/ebay-spark-line/index.marko index 215865c5a..c1ec8ddaa 100644 --- a/src/components/ebay-spark-line/index.marko +++ b/src/components/ebay-spark-line/index.marko @@ -22,3 +22,31 @@ $ const { vector-effect="non-scaling-stroke" /> + +style { + .ebay-spark-line { + width: 100%; + height: 100%; + max-width: 80px; + max-height: 30px; + transform: translate3d(0, 0, 0); + } + + .ebay-spark-line__path { + fill: none; + stroke-width: 3px; + stroke-linecap: round; + } + + .ebay-spark-line__path-neutral { + stroke: var(--spark-line-neutral, var(--color-data-viz-line-chart-primary)); + } + + .ebay-spark-line__path-positive { + stroke: var(--spark-line-positve, var(--color-data-viz-trend-positive)); + } + + .ebay-spark-line__path-negative { + stroke: var(--spark-line-negative, var(--color-data-viz-trend-negative)); + } +} diff --git a/src/components/ebay-spark-line/style.less b/src/components/ebay-spark-line/style.less deleted file mode 100644 index f6f8d3932..000000000 --- a/src/components/ebay-spark-line/style.less +++ /dev/null @@ -1,25 +0,0 @@ -.ebay-spark-line { - width: 100%; - height: 100%; - max-width: 80px; - max-height: 30px; - transform: translate3d(0, 0, 0); -} - -.ebay-spark-line__path { - fill: none; - stroke-width: 3px; - stroke-linecap: round; -} - -.ebay-spark-line__path-neutral { - stroke: var(--spark-line-neutral, var(--color-data-viz-line-chart-primary)); -} - -.ebay-spark-line__path-positive { - stroke: var(--spark-line-positve, var(--color-data-viz-trend-positive)); -} - -.ebay-spark-line__path-negative { - stroke: var(--spark-line-negative, var(--color-data-viz-trend-negative)); -} From f2e273686ef9763f85e9f87fb9e65a4406f73082 Mon Sep 17 00:00:00 2001 From: LuLaValva Date: Fri, 24 Jan 2025 08:34:41 -0800 Subject: [PATCH 2/3] chore: add changeset --- .changeset/fast-toys-sparkle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fast-toys-sparkle.md diff --git a/.changeset/fast-toys-sparkle.md b/.changeset/fast-toys-sparkle.md new file mode 100644 index 000000000..5004887d5 --- /dev/null +++ b/.changeset/fast-toys-sparkle.md @@ -0,0 +1,5 @@ +--- +"@ebay/ebayui-core": patch +--- + +Ensure custom styles are included in build From 7fb90f083763f36ca3141ddeef1c828425e44a45 Mon Sep 17 00:00:00 2001 From: Andrew Gliga Date: Mon, 27 Jan 2025 09:24:59 -0800 Subject: [PATCH 3/3] chore: removed unused style.ts --- src/components/ebay-spark-line/style.ts | 1 - 1 file changed, 1 deletion(-) delete mode 100644 src/components/ebay-spark-line/style.ts diff --git a/src/components/ebay-spark-line/style.ts b/src/components/ebay-spark-line/style.ts deleted file mode 100644 index e1f47fe0d..000000000 --- a/src/components/ebay-spark-line/style.ts +++ /dev/null @@ -1 +0,0 @@ -import "./style.less";