Merge pull request #8042 from plotly/cam/convert-to-ts-2026-09-14

chore: Convert constants files to TS

Author: camdecoster

src/components/colorbar/constants.js

@@ -0,0 +1,14 @@
+export const cn = {
+    colorbar: 'colorbar',
+    cbbg: 'cbbg',
+    cbfill: 'cbfill',
+    cbfills: 'cbfills',
+    cbline: 'cbline',
+    cblines: 'cblines',
+    cbaxis: 'cbaxis',
+    cbtitleunshift: 'cbtitleunshift',
+    cbtitle: 'cbtitle',
+    cboutline: 'cboutline',
+    crisp: 'crisp',
+    jsPlaceholder: 'js-placeholder'
+} as const;

src/components/colorbar/constants.ts

@@ -0,0 +1,18 @@
+// Hover labels for multiple horizontal bars get tilted by this angle
+export const YANGLE = 60;
+
+// Size and display constants for hover text
+
+// Pixel size of hover arrows
+export const HOVERARROWSIZE = 6;
+// Pixels padding around text
+export const HOVERTEXTPAD = 3;
+// Hover font
+export const HOVERFONTSIZE = 13;
+export const HOVERFONT = 'Arial, sans-serif';
+
+// Minimum time (msec) between hover calls
+export const HOVERMINTIME = 50;
+
+// ID suffix (with fullLayout._uid) for hover events in the throttle cache
+export const HOVERID = '-hover';

src/components/fx/constants.js

@@ -0,0 +1,10 @@
+export const scrollBarWidth = 6;
+export const scrollBarMinHeight = 20;
+export const scrollBarColor = '#808BA4';
+export const scrollBarMargin = 4;
+export const scrollBarEnterAttrs = { rx: 20, ry: 3, width: 0, height: 0 } as const;
+
+// Number of px between legend title and (left) side of legend (always in x direction and from inner border)
+export const titlePad = 2;
+// Number of px between each legend item (x and/or y direction)
+export const itemGap = 5;

src/components/fx/constants.ts

@@ -0,0 +1,13 @@
+// 'y' position pad above counter axis domain
+export const yPad = 0.02;
+
+// Minimum button width (regardless of text size)
+export const minButtonWidth = 30;
+
+// Buttons rect radii
+export const rx = 3;
+export const ry = 3;
+
+// Light fraction used to compute the 'activecolor' default
+export const lightAmount = 25;
+export const darkAmount = 10;

src/components/legend/constants.js

@@ -0,0 +1,41 @@
+// Attribute container name
+export const name = 'rangeslider';
+
+// Class names
+
+export const containerClassName = 'rangeslider-container';
+export const bgClassName = 'rangeslider-bg';
+export const rangePlotClassName = 'rangeslider-rangeplot';
+
+export const maskMinClassName = 'rangeslider-mask-min';
+export const maskMaxClassName = 'rangeslider-mask-max';
+export const slideBoxClassName = 'rangeslider-slidebox';
+
+export const grabberMinClassName = 'rangeslider-grabber-min';
+export const grabAreaMinClassName = 'rangeslider-grabarea-min';
+export const handleMinClassName = 'rangeslider-handle-min';
+
+export const grabberMaxClassName = 'rangeslider-grabber-max';
+export const grabAreaMaxClassName = 'rangeslider-grabarea-max';
+export const handleMaxClassName = 'rangeslider-handle-max';
+
+export const maskMinOppAxisClassName = 'rangeslider-mask-min-opp-axis';
+export const maskMaxOppAxisClassName = 'rangeslider-mask-max-opp-axis';
+
+// Style constants
+
+export const maskColor = 'rgba(0,0,0,0.4)';
+export const maskOppAxisColor = 'rgba(0,0,0,0.2)';
+
+export const slideBoxFill = 'transparent';
+export const slideBoxCursor = 'ew-resize';
+
+export const grabAreaFill = 'transparent';
+export const grabAreaCursor = 'col-resize';
+export const grabAreaWidth = 10;
+
+export const handleWidth = 4;
+export const handleRadius = 1;
+export const handleStrokeWidth = 1;
+
+export const extraPad = 15;