Skip to content

Commit 42a0b3c

Browse files
author
Dylan Huang
committed
consistently styling across inputs, button, select
1 parent 9068661 commit 42a0b3c

File tree

5 files changed

+97
-69
lines changed

5 files changed

+97
-69
lines changed

‎vite-app/src/components/Button.tsx‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from "react";
2+
import { commonStyles } from "../styles/common";
23

34
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
45
variant?: "primary" | "secondary";
@@ -10,23 +11,11 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
1011
{ className = "", variant = "secondary", size = "sm", children, ...props },
1112
ref
1213
) => {
13-
const baseClasses = "border text-xs font-medium focus:outline-none";
14-
15-
const variantClasses = {
16-
primary: "border-gray-300 bg-gray-100 text-gray-700 hover:bg-gray-200",
17-
secondary: "border-gray-300 bg-gray-100 text-gray-700 hover:bg-gray-200",
18-
};
19-
20-
const sizeClasses = {
21-
sm: "px-2 py-0.5",
22-
md: "px-3 py-1",
23-
};
24-
2514
return (
2615
<button
2716
ref={ref}
28-
className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
29-
style={{ boxShadow: "none" }}
17+
className={`${commonStyles.button.base} ${commonStyles.button.variant[variant]} ${commonStyles.button.size[size]} ${className}`}
18+
style={{ boxShadow: commonStyles.button.shadow }}
3019
{...props}
3120
>
3221
{children}

‎vite-app/src/components/FilterInput.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from "react";
2+
import type { FilterConfig } from "../types/filters";
3+
import { commonStyles } from "../styles/common";
4+
5+
interface FilterInputProps {
6+
filter: FilterConfig;
7+
index: number;
8+
onUpdate: (updates: Partial<FilterConfig>) => void;
9+
}
10+
11+
const FilterInput = ({ filter, index, onUpdate }: FilterInputProps) => {
12+
const fieldType = filter.type || "text";
13+
14+
if (fieldType === "date") {
15+
return (
16+
<div className="flex space-x-2">
17+
<input
18+
type="date"
19+
value={filter.value}
20+
onChange={(e) => onUpdate({ value: e.target.value })}
21+
className={`${commonStyles.input.base} ${commonStyles.input.size.sm} ${commonStyles.width.sm}`}
22+
style={{ boxShadow: commonStyles.input.shadow }}
23+
/>
24+
{filter.operator === "between" && (
25+
<input
26+
type="date"
27+
value={filter.value2 || ""}
28+
onChange={(e) => onUpdate({ value2: e.target.value })}
29+
className={`${commonStyles.input.base} ${commonStyles.input.size.sm} ${commonStyles.width.sm}`}
30+
placeholder="End date"
31+
style={{ boxShadow: commonStyles.input.shadow }}
32+
/>
33+
)}
34+
</div>
35+
);
36+
}
37+
38+
return (
39+
<input
40+
type="text"
41+
value={filter.value}
42+
onChange={(e) => onUpdate({ value: e.target.value })}
43+
placeholder="Value"
44+
className={`${commonStyles.input.base} ${commonStyles.input.size.sm} ${commonStyles.width.sm}`}
45+
style={{ boxShadow: commonStyles.input.shadow }}
46+
/>
47+
);
48+
};
49+
50+
export default FilterInput;

‎vite-app/src/components/PivotTab.tsx‎

Lines changed: 1 addition & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
22
import PivotTable from "./PivotTable";
33
import Select from "./Select";
44
import Button from "./Button";
5+
import FilterInput from "./FilterInput";
56
import { state } from "../App";
67
import { type FilterConfig } from "../types/filters";
78
import {
@@ -131,51 +132,6 @@ const AggregatorSelector = ({
131132
</div>
132133
);
133134

134-
// Reusable filter input component
135-
const FilterInput = ({
136-
filter,
137-
index,
138-
onUpdate,
139-
}: {
140-
filter: FilterConfig;
141-
index: number;
142-
onUpdate: (updates: Partial<FilterConfig>) => void;
143-
}) => {
144-
const fieldType = filter.type || getFieldType(filter.field);
145-
146-
if (fieldType === "date") {
147-
return (
148-
<div className="flex space-x-2">
149-
<input
150-
type="date"
151-
value={filter.value}
152-
onChange={(e) => onUpdate({ value: e.target.value })}
153-
className="px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:border-gray-500 min-w-32"
154-
/>
155-
{filter.operator === "between" && (
156-
<input
157-
type="date"
158-
value={filter.value2 || ""}
159-
onChange={(e) => onUpdate({ value2: e.target.value })}
160-
className="px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:border-gray-500 min-w-32"
161-
placeholder="End date"
162-
/>
163-
)}
164-
</div>
165-
);
166-
}
167-
168-
return (
169-
<input
170-
type="text"
171-
value={filter.value}
172-
onChange={(e) => onUpdate({ value: e.target.value })}
173-
placeholder="Value"
174-
className="px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:border-gray-500 min-w-32"
175-
/>
176-
);
177-
};
178-
179135
const FilterSelector = ({
180136
filters,
181137
onFiltersChange,

‎vite-app/src/components/Select.tsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from "react";
2+
import { commonStyles } from "../styles/common";
23

34
interface SelectProps
45
extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> {
@@ -8,19 +9,11 @@ interface SelectProps
89

910
const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
1011
({ className = "", size = "sm", children, ...props }, ref) => {
11-
const baseClasses =
12-
"border text-xs font-medium focus:outline-none bg-white text-gray-700 border-gray-300 hover:border-gray-400 focus:border-gray-500";
13-
14-
const sizeClasses = {
15-
sm: "px-2 py-0.5",
16-
md: "px-3 py-1",
17-
};
18-
1912
return (
2013
<select
2114
ref={ref}
22-
className={`${baseClasses} ${sizeClasses[size]} ${className}`}
23-
style={{ boxShadow: "none" }}
15+
className={`${commonStyles.input.base} ${commonStyles.input.size[size]} ${className}`}
16+
style={{ boxShadow: commonStyles.input.shadow }}
2417
{...props}
2518
>
2619
{children}

‎vite-app/src/styles/common.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// Common styling classes for consistent component appearance
2+
export const commonStyles = {
3+
// Base input/select styling (matching Select component)
4+
input: {
5+
base: "border text-xs font-medium focus:outline-none bg-white text-gray-700 border-gray-300 hover:border-gray-400 focus:border-gray-500",
6+
size: {
7+
sm: "px-2 py-0.5",
8+
md: "px-3 py-1",
9+
},
10+
shadow: "none", // boxShadow: "none"
11+
},
12+
13+
// Button styling (matching Button component)
14+
button: {
15+
base: "border text-xs font-medium focus:outline-none",
16+
variant: {
17+
primary: "border-gray-300 bg-gray-100 text-gray-700 hover:bg-gray-200",
18+
secondary: "border-gray-300 bg-gray-100 text-gray-700 hover:bg-gray-200",
19+
},
20+
size: {
21+
sm: "px-2 py-0.5",
22+
md: "px-3 py-1",
23+
},
24+
shadow: "none", // boxShadow: "none"
25+
},
26+
27+
// Common spacing and layout
28+
spacing: {
29+
sm: "space-y-2",
30+
md: "space-y-4",
31+
lg: "space-y-6",
32+
},
33+
34+
// Common widths
35+
width: {
36+
sm: "min-w-32",
37+
md: "min-w-48",
38+
lg: "min-w-64",
39+
},
40+
} as const;

0 commit comments

Comments
 (0)