fix: add metricValueFontSize/Weight to StreamlitTheme and extraction

kagawa0710 · kagawa0710 · commit e1e539f90d3e · 2026-01-11T01:02:52.000+09:00
- Add properties to StreamlitTheme interface (component-v2-lib)
  - Add extraction in extractComponentsV2Theme for Components V2 support
  - Add mock values to theme.test.ts
  - Add negative value tests for metricValueFontSize validation
diff --git a/frontend/component-v2-lib/src/theme.ts b/frontend/component-v2-lib/src/theme.ts
@@ -107,6 +107,10 @@ export interface StreamlitTheme {
   greenTextColor: string
   violetTextColor: string
   grayTextColor: string
+
+  // Metric value styling
+  metricValueFontSize: number | null
+  metricValueFontWeight: number | null
 }
 
 /**
diff --git a/frontend/lib/src/components/widgets/BidiComponent/utils/theme.test.ts b/frontend/lib/src/components/widgets/BidiComponent/utils/theme.test.ts
@@ -101,6 +101,9 @@ describe("BidiComponent/utils/theme", () => {
       greenTextColor: "#00ff00",
       violetTextColor: "#aa00ff",
       grayTextColor: "#888888",
+
+      metricValueFontSize: null,
+      metricValueFontWeight: null,
       ...overrides,
     })
 
diff --git a/frontend/lib/src/components/widgets/BidiComponent/utils/theme.ts b/frontend/lib/src/components/widgets/BidiComponent/utils/theme.ts
@@ -179,5 +179,8 @@ export const extractComponentsV2Theme = (
     greenTextColor: theme.colors.greenTextColor,
     violetTextColor: theme.colors.violetTextColor,
     grayTextColor: theme.colors.grayTextColor,
+
+    metricValueFontSize: theme.metricValueFontSize ?? null,
+    metricValueFontWeight: theme.metricValueFontWeight ?? null,
   }
 }
diff --git a/frontend/lib/src/theme/utils.test.ts b/frontend/lib/src/theme/utils.test.ts
@@ -3175,15 +3175,18 @@ describe("createEmotionTheme", () => {
     expect(theme.metricValueFontSize).toBeUndefined()
   })
 
-  it("does not set metricValueFontSize if value is not > 0", () => {
-    const themeInput: Partial<CustomThemeConfig> = {
-      metricValueFontSize: 0,
-    }
+  it.each([0, -10, -100])(
+    "does not set metricValueFontSize if value is not > 0: %s",
+    metricValueFontSize => {
+      const themeInput: Partial<CustomThemeConfig> = {
+        metricValueFontSize,
+      }
 
-    const theme = createEmotionTheme(themeInput)
+      const theme = createEmotionTheme(themeInput)
 
-    expect(theme.metricValueFontSize).toBeUndefined()
-  })
+      expect(theme.metricValueFontSize).toBeUndefined()
+    }
+  )
 
   it("uses metricValueFontWeight when configured", () => {
     const themeInput: Partial<CustomThemeConfig> = {

Original file line number	Diff line number	Diff line change
`@@ -179,5 +179,8 @@ export const extractComponentsV2Theme = (`
`179`	`179`	`greenTextColor: theme.colors.greenTextColor,`
`180`	`180`	`violetTextColor: theme.colors.violetTextColor,`
`181`	`181`	`grayTextColor: theme.colors.grayTextColor,`
	`182`	`+`
	`183`	`+ metricValueFontSize: theme.metricValueFontSize ?? null,`
	`184`	`+ metricValueFontWeight: theme.metricValueFontWeight ?? null,`
`182`	`185`	`}`
`183`	`186`	`}`