From 73d9b3a0e5fc92f4cbeb2bd7969d91bd66529db6 Mon Sep 17 00:00:00 2001
From: jmfrancois <jmfrancois@talend.com>
Date: Mon, 17 Jul 2023 18:13:28 +0200
Subject: [PATCH] RadarChart

---
 .changeset/wet-dolls-compare.md               |  2 ++
 .../QualityBar/QualityRatioBar.module.scss    |  1 -
 .../src/RadarChart/RadarChart.component.js    |  4 ++-
 .../src/RadarChart/RadarChart.module.scss     |  3 ++-
 .../src/RadarChart/RadarChart.stories.js      | 26 ++++++++++---------
 5 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/.changeset/wet-dolls-compare.md b/.changeset/wet-dolls-compare.md
index 4621291b050..878538afa90 100644
--- a/.changeset/wet-dolls-compare.md
+++ b/.changeset/wet-dolls-compare.md
@@ -22,12 +22,14 @@ We have updated the following components:
 * GuidedTour
 * GridLayout aka Dashboard
 * HeaderBar
+* List (Virtualized and Composition)
 * ListView
 * MultiSelect
 * Notification
 * ObjectViewer
 * PieChart
 * Progress
+* RadarChart
 * ResourceList
 * ResourcePicker
 * RichLayout
diff --git a/packages/components/src/QualityBar/QualityRatioBar.module.scss b/packages/components/src/QualityBar/QualityRatioBar.module.scss
index 78bf9aab60a..ebaab1915db 100644
--- a/packages/components/src/QualityBar/QualityRatioBar.module.scss
+++ b/packages/components/src/QualityBar/QualityRatioBar.module.scss
@@ -1,5 +1,4 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
 @use '~@talend/design-tokens/lib/tokens';
 
 $custom-quality-bar-placeholder-line-hover-height: 0.4rem;
diff --git a/packages/components/src/RadarChart/RadarChart.component.js b/packages/components/src/RadarChart/RadarChart.component.js
index 9e8e7055331..9b800d8b335 100644
--- a/packages/components/src/RadarChart/RadarChart.component.js
+++ b/packages/components/src/RadarChart/RadarChart.component.js
@@ -6,6 +6,7 @@ import {
 	Radar,
 	PolarAngleAxis,
 } from 'recharts';
+import tokens from '@talend/design-tokens';
 import PropTypes from 'prop-types';
 import radarChartCssModule from './RadarChart.module.scss';
 import { getTheme } from '../theme';
@@ -51,6 +52,7 @@ export function RadarChart({
 			width={width}
 			height={height}
 			data={data}
+			fill={tokens.coralColorNeutralBorder}
 		>
 			<PolarGrid />
 			<PolarRadiusAxis domain={domain} tick={tick} axisLine={tickLine} />
@@ -138,7 +140,7 @@ Dot.propTypes = {
  * @param {Object} props the current props of the Radar
  */
 function DotWithClick(props) {
-	const { activeAxis, fill, index, onClick, ...rest } = props;
+	const { activeAxis, fill = tokens.coralColorNeutralBorder, index, onClick, ...rest } = props;
 	const STATE = {
 		DEFAULT_RADIUS: 2,
 		DEFAULT_STROKE_WIDTH: 12,
diff --git a/packages/components/src/RadarChart/RadarChart.module.scss b/packages/components/src/RadarChart/RadarChart.module.scss
index cf63d8f6141..12db652ce3a 100644
--- a/packages/components/src/RadarChart/RadarChart.module.scss
+++ b/packages/components/src/RadarChart/RadarChart.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .tc-radar-chart {
 	:global {
@@ -14,6 +15,6 @@
 }
 
 .tc-radar-chart-label--selected {
-	fill: $regal-blue;
+	fill: tokens.$coral-color-charts-default-strong;
 	font-weight: 600;
 }
diff --git a/packages/components/src/RadarChart/RadarChart.stories.js b/packages/components/src/RadarChart/RadarChart.stories.js
index 95c4066dae1..4db221f8e0a 100644
--- a/packages/components/src/RadarChart/RadarChart.stories.js
+++ b/packages/components/src/RadarChart/RadarChart.stories.js
@@ -1,4 +1,6 @@
 import { action } from '@storybook/addon-actions';
+import tokens from '@talend/design-tokens';
+
 import RadarChart from '.';
 
 const ExampleDataSingle = [
@@ -42,8 +44,8 @@ export const RadarChartSingle = () => (
 				name="Trust score"
 				dataKey="A"
 				dot={true}
-				stroke="#19426c"
-				fill="#19426c"
+				stroke={tokens.coralColorChartsDefault}
+				fill={tokens.coralColorChartsDefault}
 				fillOpacity={0.1}
 			/>
 		</RadarChart>
@@ -60,16 +62,16 @@ export const RadarChartMultiple = () => (
 				name="Trust score 2019"
 				dataKey="A"
 				dot={false}
-				stroke="#19426c"
-				fill="#19426c"
+				stroke={tokens.coralColorChartsDefault}
+				fill={tokens.coralColorChartsDefault}
 				fillOpacity={0.1}
 			/>
 			<RadarChart.Radar
 				name="Trust score 2020"
 				dataKey="B"
 				dot={false}
-				stroke="#EA8330"
-				fill="#EA8330"
+				stroke={tokens.coralColorChartsWarning}
+				fill={tokens.coralColorChartsWarning}
 				fillOpacity={0.1}
 			/>
 		</RadarChart>
@@ -89,10 +91,10 @@ export const RadarChartClickableLabel = () => (
 			<RadarChart.Radar
 				dataKey="A"
 				dot={false}
-				fill="#19426c"
+				stroke={tokens.coralColorChartsDefault}
+				fill={tokens.coralColorChartsDefault}
 				fillOpacity={0.1}
 				name="Trust score"
-				stroke="#19426c"
 			/>
 		</RadarChart>
 	</div>
@@ -107,10 +109,10 @@ export const RadarChartClickableDot = () => (
 			<RadarChart.Radar
 				dataKey="A"
 				dot={<RadarChart.DotWithClick activeAxis={2} onClick={action('Axis dot was clicked')} />}
-				fill="#19426c"
+				stroke={tokens.coralColorChartsDefault}
+				fill={tokens.coralColorChartsDefault}
 				fillOpacity={0.1}
 				name="Trust score"
-				stroke="#19426c"
 			/>
 		</RadarChart>
 	</div>
@@ -125,10 +127,10 @@ export const RadarChartCustomDot = () => (
 			<RadarChart.Radar
 				dataKey="A"
 				dot={<RadarChart.Dot activeAxis={2} />}
-				fill="#19426c"
+				stroke={tokens.coralColorChartsDefault}
+				fill={tokens.coralColorChartsDefault}
 				fillOpacity={0.1}
 				name="Trust score"
-				stroke="#19426c"
 			/>
 		</RadarChart>