refactor(axis): use css-classes instead of style (#1897)

* refactor(axis): use css-classes instead of style * adds css-classes to ticks to make them more accessible from outside Signed-off-by: Max Jonas <[email protected]> * refactor(axis): rename css class --------- Signed-off-by: Max Jonas <[email protected]>
carbon-design-system · Nov 7, 2024 · 344cf09 · 344cf09
1 parent a4a4f98
commit 344cf09
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/packages/core/scss/components/_axis.scss b/packages/core/scss/components/_axis.scss
@@ -32,6 +32,14 @@
 		g.tick text {
 			fill: theme.$text-secondary;
 			font-family: var(--#{globals.$prefix}-charts-font-family-condensed);
+
+			&.tick-label--primary {
+				font-weight: bold;
+			}
+
+			&.tick-label {
+				font-weight: normal;
+			}
 		}
 
 		g.tick line {

diff --git a/packages/core/src/components/axes/axis.ts b/packages/core/src/components/axes/axis.ts
@@ -406,11 +406,11 @@ export class Axis extends Component {
 				.data(axis.tickValues(), scale)
 				.order()
 				.select('text')
-			ticks.style('font-weight', (tick: number, i: number) => {
-				return isTickPrimary(tick, i, axis.tickValues(), timeInterval, showDayName)
-					? 'bold'
-					: 'normal'
-			})
+			ticks.attr('class', (tick: number, i: number) =>
+				isTickPrimary(tick, i, axis.tickValues(), timeInterval, showDayName)
+					? 'tick-label--primary'
+					: 'tick-label'
+			)
 		} else {
 			if (!animate || !axisRefExists) {
 				axisRef = axisRef.call(axis)