Skip to content

Commit 1c48b3a

Browse files
atyrodeatyrode
committed
refactor: apply BEM naming convention to Range component styles
- Updated Range.scss and Range.tsx to implement BEM naming conventions for improved readability and maintainability. - Introduced new CSS variables for track colors to enhance customization. - Adjusted styles for input and labels to align with the new structure, ensuring consistent UI presentation.
1 parent 7b093fb commit 1c48b3a

File tree

2 files changed

+75
-68
lines changed

2 files changed

+75
-68
lines changed

‎src/frontend/src/ui/Range.scss‎

Lines changed: 67 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,79 @@
11
:root {
22
--slider-thumb-size: 16px;
3+
--range-track-filled: #cc6d24;
4+
--range-track-unfilled: #525252;
5+
--range-thumb-color: #a4571b; /* Slightly lighter than track-filled for contrast */
36
}
47

5-
.control-label {
6-
display: flex;
7-
flex-direction: column;
8-
width: 100%;
9-
font-size: 0.9rem;
10-
color: var(--text-primary-color);
11-
}
8+
.range {
9+
&__control-label {
10+
display: flex;
11+
flex-direction: column;
12+
width: 100%;
13+
font-size: 0.9rem;
14+
color: var(--text-primary-color);
15+
}
1216

13-
.range-wrapper {
14-
position: relative;
15-
padding-top: 10px;
16-
padding-bottom: 25px;
17-
width: 100%;
18-
}
17+
&__wrapper {
18+
position: relative;
19+
padding-top: 10px;
20+
padding-bottom: 25px;
21+
width: 100%;
22+
}
1923

20-
.range-input {
21-
width: 100%;
22-
height: 4px;
23-
-webkit-appearance: none;
24-
background: var(--color-slider-track);
25-
border-radius: 2px;
26-
outline: none;
27-
}
24+
&__input {
25+
width: 100%;
26+
height: 4px;
27+
-webkit-appearance: none;
28+
background: var(--range-track-filled);
29+
border-radius: 2px;
30+
outline: none;
2831

29-
.range-input::-webkit-slider-thumb {
30-
-webkit-appearance: none;
31-
appearance: none;
32-
width: var(--slider-thumb-size);
33-
height: var(--slider-thumb-size);
34-
background: var(--color-slider-thumb);
35-
border-radius: 50%;
36-
cursor: pointer;
37-
border: none;
38-
}
32+
&::-webkit-slider-thumb {
33+
-webkit-appearance: none;
34+
appearance: none;
35+
width: var(--slider-thumb-size);
36+
height: var(--slider-thumb-size);
37+
background: var(--range-thumb-color);
38+
border-radius: 50%;
39+
cursor: pointer;
40+
border: none;
41+
}
3942

40-
.range-input::-moz-range-thumb {
41-
width: var(--slider-thumb-size);
42-
height: var(--slider-thumb-size);
43-
background: var(--color-slider-thumb);
44-
border-radius: 50%;
45-
cursor: pointer;
46-
border: none;
47-
}
43+
&::-moz-range-thumb {
44+
width: var(--slider-thumb-size);
45+
height: var(--slider-thumb-size);
46+
background: var(--range-thumb-color);
47+
border-radius: 50%;
48+
cursor: pointer;
49+
border: none;
50+
}
51+
}
4852

49-
.value-bubble {
50-
position: absolute;
51-
bottom: 0;
52-
transform: translateX(-50%);
53-
font-size: 12px;
54-
color: var(--text-primary-color);
55-
}
53+
&__value-bubble {
54+
position: absolute;
55+
bottom: 0;
56+
transform: translateX(-50%);
57+
font-size: 12px;
58+
color: var(--text-primary-color);
59+
}
5660

57-
.min-label, .zero-label {
58-
position: absolute;
59-
bottom: 0;
60-
left: 4px;
61-
font-size: 12px;
62-
color: var(--text-primary-color);
63-
}
61+
&__label {
62+
position: absolute;
63+
bottom: 0;
64+
font-size: 12px;
65+
color: var(--text-primary-color);
66+
67+
&--min {
68+
left: 4px;
69+
}
70+
71+
&--zero {
72+
left: 4px;
73+
}
6474

65-
.max-label {
66-
position: absolute;
67-
bottom: 0;
68-
right: 4px;
69-
font-size: 12px;
70-
color: var(--text-primary-color);
75+
&--max {
76+
right: 4px;
77+
}
78+
}
7179
}

‎src/frontend/src/ui/Range.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ export type RangeProps = {
88
min?: number;
99
max?: number;
1010
step?: number;
11-
label?: string;
1211
minLabel?: string;
1312
maxLabel?: string;
1413
showValueBubble?: boolean;
@@ -43,13 +42,13 @@ export const Range = ({
4342

4443
// Calculate percentage for gradient
4544
const percentage = ((value - min) / (max - min)) * 100;
46-
rangeElement.style.background = `linear-gradient(to right, var(--color-slider-track) 0%, var(--color-slider-track) ${percentage}%, var(--button-bg) ${percentage}%, var(--button-bg) 100%)`;
45+
rangeElement.style.background = `linear-gradient(to right, var(--range-track-filled) 0%, var(--range-track-filled) ${percentage}%, var(--range-track-unfilled) ${percentage}%, var(--range-track-unfilled) 100%)`;
4746
}
4847
}, [value, min, max, showValueBubble]);
4948

5049
return (
51-
<label className="control-label">
52-
<div className="range-wrapper">
50+
<label className="range range__control-label">
51+
<div className="range__wrapper">
5352
<input
5453
ref={rangeRef}
5554
type="range"
@@ -60,19 +59,19 @@ export const Range = ({
6059
onChange(+event.target.value);
6160
}}
6261
value={value}
63-
className="range-input"
62+
className="range__input"
6463
/>
6564
{showValueBubble && (
66-
<div className="value-bubble" ref={valueRef}>
65+
<div className="range__value-bubble" ref={valueRef}>
6766
{value !== min ? value : null}
6867
</div>
6968
)}
7069
{min === 0 ? (
71-
<div className="zero-label">{minLabel || min}</div>
70+
<div className="range__label range__label--zero">{minLabel || min}</div>
7271
) : (
73-
<div className="min-label">{minLabel || min}</div>
72+
<div className="range__label range__label--min">{minLabel || min}</div>
7473
)}
75-
<div className="max-label">{maxLabel || max}</div>
74+
<div className="range__label range__label--max">{maxLabel || max}</div>
7675
</div>
7776
</label>
7877
);

0 commit comments

Comments
 (0)